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

Chore: Tidy up emotion css with better theme breakpoint (#39340)

Browse Source
This commit is contained in:
Ashley Harrison
2021-09-20 08:55:31 +01:00
committed by GitHub
parent e696a9ab42
commit f3475b864c
4 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/core/components/sidemenu/BottomSection.tsx
View File

@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
import { cloneDeep } from 'lodash';
import { css } from '@emotion/css';
import { GrafanaTheme2, NavModelItem } from '@grafana/data';
import { Icon, IconName, styleMixins, useTheme2 } from '@grafana/ui';
import { Icon, IconName, useTheme2 } from '@grafana/ui';
import { contextSrv } from 'app/core/services/context_srv';
import appEvents from '../../app_events';
import { ShowModalReactEvent } from '../../../types/events';
@@ -100,7 +100,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
container: css`
display: none;
@media ${styleMixins.mediaUp(`${theme.breakpoints.values.md}px`)} {
${theme.breakpoints.up('md')} {
display: block;
margin-bottom: ${theme.spacing(2)};
}

8
public/app/core/components/sidemenu/SideMenu.tsx
View File

@@ -2,7 +2,7 @@ import React, { FC, useCallback } from 'react';
import { useLocation } from 'react-router-dom';
import { css, cx } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, styleMixins, useTheme2 } from '@grafana/ui';
import { Icon, useTheme2 } from '@grafana/ui';
import appEvents from '../../app_events';
import { Branding } from 'app/core/components/Branding/Branding';
import config from 'app/core/config';
@@ -56,7 +56,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
width: ${theme.components.sidemenu.width}px;
z-index: ${theme.zIndex.sidemenu};
@media ${styleMixins.mediaUp(`${theme.breakpoints.values.md}px`)} {
${theme.breakpoints.up('md')} {
background-color: ${theme.colors.background.primary};
position: relative;
}
@@ -94,7 +94,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
width: ${theme.spacing(3.5)};
}
@media ${styleMixins.mediaUp(`${theme.breakpoints.values.md}px`)} {
${theme.breakpoints.up('md')} {
align-items: center;
display: flex;
justify-content: center;
@@ -116,7 +116,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
justify-content: space-between;
padding: ${theme.spacing(2)};
@media ${styleMixins.mediaUp(`${theme.breakpoints.values.md}px`)} {
${theme.breakpoints.up('md')} {
display: none;
}
`,

4
public/app/core/components/sidemenu/SideMenuItem.tsx
View File

@@ -1,7 +1,7 @@
import React, { ReactNode } from 'react';
import { css, cx } from '@emotion/css';
import { GrafanaTheme2, NavModelItem } from '@grafana/data';
import { Link, styleMixins, useTheme2 } from '@grafana/ui';
import { Link, useTheme2 } from '@grafana/ui';
import SideMenuDropDown from './SideMenuDropDown';
export interface Props {
@@ -86,7 +86,7 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({
}
}
@media ${styleMixins.mediaUp(`${theme.breakpoints.values.md}px`)} {
${theme.breakpoints.up('md')} {
color: ${isActive ? theme.colors.text.primary : theme.colors.text.secondary};
&:hover {

4
public/app/core/components/sidemenu/TopSection.tsx
View File

@@ -4,7 +4,7 @@ import { cloneDeep } from 'lodash';
import { css } from '@emotion/css';
import { GrafanaTheme2, NavModelItem } from '@grafana/data';
import { locationService } from '@grafana/runtime';
import { Icon, IconName, styleMixins, useTheme2 } from '@grafana/ui';
import { Icon, IconName, useTheme2 } from '@grafana/ui';
import config from '../../config';
import { isLinkActive, isSearchActive } from './utils';
import SideMenuItem from './SideMenuItem';
@@ -52,7 +52,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
display: none;
flex-grow: 1;
@media ${styleMixins.mediaUp(`${theme.breakpoints.values.md}px`)} {
${theme.breakpoints.up('md')} {
display: block;
margin-top: ${theme.spacing(5)};
}