mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Navigation: clean up colors in section nav (#61240)
* clean up colors in section nav * just underline on hover/focus
This commit is contained in:
parent
f0f3032edc
commit
a26bae45e1
@ -16,7 +16,6 @@ export function SectionNavItem({ item, isSectionRoot = false }: Props) {
|
|||||||
const styles = useStyles2(getStyles);
|
const styles = useStyles2(getStyles);
|
||||||
|
|
||||||
const children = item.children?.filter((x) => !x.hideFromTabs);
|
const children = item.children?.filter((x) => !x.hideFromTabs);
|
||||||
const hasActiveChild = Boolean(children?.length && children.find((x) => x.active));
|
|
||||||
|
|
||||||
// If first root child is a section skip the bottom margin (as sections have top margin already)
|
// If first root child is a section skip the bottom margin (as sections have top margin already)
|
||||||
const noRootMargin = isSectionRoot && Boolean(item.children![0].children?.length);
|
const noRootMargin = isSectionRoot && Boolean(item.children![0].children?.length);
|
||||||
@ -25,7 +24,6 @@ export function SectionNavItem({ item, isSectionRoot = false }: Props) {
|
|||||||
[styles.link]: true,
|
[styles.link]: true,
|
||||||
[styles.activeStyle]: item.active,
|
[styles.activeStyle]: item.active,
|
||||||
[styles.isSection]: Boolean(children?.length) || item.isSection,
|
[styles.isSection]: Boolean(children?.length) || item.isSection,
|
||||||
[styles.hasActiveChild]: hasActiveChild,
|
|
||||||
[styles.isSectionRoot]: isSectionRoot,
|
[styles.isSectionRoot]: isSectionRoot,
|
||||||
[styles.noRootMargin]: noRootMargin,
|
[styles.noRootMargin]: noRootMargin,
|
||||||
});
|
});
|
||||||
@ -73,7 +71,6 @@ const getStyles = (theme: GrafanaTheme2) => {
|
|||||||
label: activeTabStyle;
|
label: activeTabStyle;
|
||||||
color: ${theme.colors.text.primary};
|
color: ${theme.colors.text.primary};
|
||||||
background: ${theme.colors.emphasize(theme.colors.background.canvas, 0.03)};
|
background: ${theme.colors.emphasize(theme.colors.background.canvas, 0.03)};
|
||||||
font-weight: ${theme.typography.fontWeightMedium};
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: block;
|
display: block;
|
||||||
@ -94,13 +91,13 @@ const getStyles = (theme: GrafanaTheme2) => {
|
|||||||
height: 18,
|
height: 18,
|
||||||
}),
|
}),
|
||||||
isSectionRoot: css({
|
isSectionRoot: css({
|
||||||
color: theme.colors.text.primary,
|
|
||||||
fontSize: theme.typography.h4.fontSize,
|
fontSize: theme.typography.h4.fontSize,
|
||||||
marginTop: 0,
|
marginTop: 0,
|
||||||
marginBottom: theme.spacing(2),
|
marginBottom: theme.spacing(2),
|
||||||
fontWeight: theme.typography.fontWeightMedium,
|
fontWeight: theme.typography.fontWeightMedium,
|
||||||
}),
|
}),
|
||||||
isSection: css({
|
isSection: css({
|
||||||
|
color: theme.colors.text.primary,
|
||||||
fontSize: theme.typography.h5.fontSize,
|
fontSize: theme.typography.h5.fontSize,
|
||||||
marginTop: theme.spacing(2),
|
marginTop: theme.spacing(2),
|
||||||
fontWeight: theme.typography.fontWeightMedium,
|
fontWeight: theme.typography.fontWeightMedium,
|
||||||
@ -108,8 +105,5 @@ const getStyles = (theme: GrafanaTheme2) => {
|
|||||||
noRootMargin: css({
|
noRootMargin: css({
|
||||||
marginBottom: 0,
|
marginBottom: 0,
|
||||||
}),
|
}),
|
||||||
hasActiveChild: css({
|
|
||||||
color: theme.colors.text.primary,
|
|
||||||
}),
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user