Update tab styles

This commit is contained in:
jeffvli
2022-11-14 14:25:24 -08:00
parent 5ee5a089c5
commit 4029b149ee
+29 -10
View File
@@ -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);
}
}
`;