mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 04:20:12 +02:00
Update tab styles
This commit is contained in:
@@ -7,22 +7,41 @@ import styled from 'styled-components';
|
||||
type TabsProps = MantineTabsProps;
|
||||
|
||||
const StyledTabs = styled(MantineTabs)`
|
||||
button[data-active] {
|
||||
color: var(--main-fg);
|
||||
border-color: var(--primary-color);
|
||||
opacity: 1;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
& .mantine-Tabs-tabsList {
|
||||
padding-right: 1rem;
|
||||
border-right: 1px solid var(--generic-border-color);
|
||||
}
|
||||
|
||||
&.mantine-Tabs-tab {
|
||||
background-color: var(--main-bg);
|
||||
}
|
||||
|
||||
& .mantine-Tabs-panel {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
color: var(--main-fg);
|
||||
opacity: 0.6;
|
||||
padding: 1rem;
|
||||
color: var(--btn-subtle-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--btn-subtle-bg-hover);
|
||||
color: var(--btn-subtle-fg-hover);
|
||||
background: var(--btn-subtle-bg-hover);
|
||||
}
|
||||
|
||||
transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
button[data-active] {
|
||||
color: var(--btn-primary-fg);
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--btn-primary-bg-hover);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user