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

SectionNav: Make section toggle not take up horizontal space (#64898)

Browse Source
This commit is contained in:
Torkel Ödegaard 2023-03-20 15:43:05 +01:00 committed by GitHub
parent 1332b0d844
commit 6f73777d59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/core/components/PageNew/SectionNav.tsx
View File

@ -68,6 +68,7 @@ const getStyles = (theme: GrafanaTheme2) => {
navContainer: css({
display: 'flex',
flexDirection: 'column',
position: 'relative',
[theme.breakpoints.up('md')]: {
flexDirection: 'row',

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

@ -84,6 +84,7 @@ const getStyles = (theme: GrafanaTheme2) => {
activeStyle: css`
label: activeTabStyle;
color: ${theme.colors.text.primary};
font-weight: ${theme.typography.fontWeightMedium};
background: ${theme.colors.emphasize(theme.colors.background.canvas, 0.03)};
&::before {
@ -115,6 +116,8 @@ const getStyles = (theme: GrafanaTheme2) => {
fontSize: theme.typography.h5.fontSize,
marginTop: theme.spacing(2),
fontWeight: theme.typography.fontWeightMedium,
// To make room for section toggle button when section is active
marginRight: theme.spacing(4),
}),
noRootMargin: css({
marginBottom: 0,

4
public/app/core/components/PageNew/SectionNavToggle.tsx
View File

@ -36,7 +36,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
icon: css({
alignSelf: 'center',
margin: theme.spacing(1, 0),
top: theme.spacing(0),
transform: 'rotate(90deg)',
transition: theme.transitions.create('opacity'),
color: theme.colors.text.secondary,
@ -61,6 +60,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
[theme.breakpoints.up('md')]: {
opacity: 0,
margin: 0,
position: 'absolute',
right: 0,
left: 'initial',
},
}),
});