1
0
mirror of https://github.com/SomboChea/ui synced 2026-01-18 00:56:00 +07:00

Refactor: move styles utils to theme (#363)

This commit is contained in:
Priscila Oliveira
2019-12-12 12:10:27 -03:00
committed by GitHub
parent 172e470780
commit fd99be6818
25 changed files with 130 additions and 216 deletions

View File

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { Theme } from '../../design-tokens/theme';
import { breakpoints } from '../../utils/styles/media';
import IconButton from '../../muiComponents/IconButton';
import AppBar from '../../muiComponents/AppBar';
import Toolbar from '../../muiComponents/Toolbar';
@@ -54,12 +53,12 @@ export const SearchWrapper = styled('div')({
width: '100%',
});
export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({
backgroundColor: props.theme && props.theme.palette.primary.main,
export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
backgroundColor: theme && theme.palette.primary.main,
minHeight: 60,
display: 'flex',
justifyContent: 'center',
[`@media (min-width: ${breakpoints.medium}px)`]: css`
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: css`
${SearchWrapper} {
display: flex;
}
@@ -70,12 +69,12 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({
display: none;
}
`,
[`@media (min-width: ${breakpoints.large}px)`]: css`
[`@media (min-width: ${theme && theme.breakPoints.large}px)`]: css`
${InnerNavBar} {
padding: 0 20px;
}
`,
[`@media (min-width: ${breakpoints.xlarge}px)`]: css`
[`@media (min-width: ${theme && theme.breakPoints.xlarge}px)`]: css`
${InnerNavBar} {
max-width: 1240px;
width: 100%;