IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: clean up colors in section nav (#61240)

Browse Source 
* clean up colors in section nav

* just underline on hover/focus
This commit is contained in:
Ashley Harrison 2023-01-23 09:26:26 +00:00 committed by GitHub
parent f0f3032edc
commit a26bae45e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 1 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/core/components/PageNew/SectionNavItem.tsx
View File

@ -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,
}),
}; };
}; };