Merge pull request #104 from verdaccio/97-unify-emotion-css-definition-format

Part of 97 - Unify Emotion CSS format
This commit is contained in:
Juan Picado @jotadeveloper 2019-07-16 16:30:30 +02:00 committed by GitHub
commit 64c003943c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 538 additions and 537 deletions

View File

@ -26,6 +26,7 @@
"no-descending-specificity": [true, { "severity": "warning" }],
"no-duplicate-at-import-rules": true,
"no-duplicate-selectors": true,
"no-empty-source": null,
"no-extra-semicolons": true,
"no-invalid-double-slash-comments": true,
"property-no-unknown": true,

View File

@ -1,15 +1,15 @@
import { css } from 'emotion';
import colors from '../utils/styles/colors';
export const alertError = css`
background-color: ${colors.red} !important;
min-width: inherit !important;
`;
export const alertError = css({
backgroundColor: `${colors.red} !important`,
minWidth: 'inherit !important',
});
export const alertErrorMsg = css`
display: flex;
align-items: center;
`;
export const alertErrorMsg = css({
display: 'flex',
alignItems: 'center',
});
export const alertIcon = css({
opacity: 0.9,

View File

@ -4,18 +4,18 @@ import ListItem from '@material-ui/core/ListItem';
import colors from '../../utils/styles/colors';
export const ActionListItem = styled(ListItem)`
&& {
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
`;
export const ActionListItem = styled(ListItem)({
'&&': {
paddingTop: 0,
paddingLeft: 0,
paddingRight: 0,
},
});
export const Fab = styled(MuiFab)`
&& {
background-color: ${colors.primary};
color: ${colors.white};
margin-right: 10px;
}
`;
export const Fab = styled(MuiFab)({
'&&': {
backgroundColor: colors.primary,
color: colors.white,
marginRight: '10px',
},
});

View File

@ -2,15 +2,15 @@ import styled from 'react-emotion';
import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
export const Heading = styled(Typography)`
&& {
font-weight: 700;
text-transform: capitalize;
}
`;
export const AuthorListItem = styled(ListItem)`
&& {
padding-left: 0;
padding-right: 0;
}
`;
export const Heading = styled(Typography)({
'&&': {
fontWeight: 700,
textTransform: 'capitalize',
},
});
export const AuthorListItem = styled(ListItem)({
'&&': {
paddingLeft: 0,
paddingRight: 0,
},
});

View File

@ -8,14 +8,14 @@ export interface InputFieldProps {
color: string;
}
export const Wrapper = styled('div')`
&& {
width: 100%;
height: 32px;
position: relative;
z-index: 1;
}
`;
export const Wrapper = styled('div')({
'&&': {
width: '100%',
height: '32px',
position: 'relative',
zIndex: 1,
},
});
export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => (
<TextField
@ -51,9 +51,9 @@ export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => (
/>
);
export const SuggestionContainer = styled(Paper)`
&& {
max-height: 500px;
overflow-y: auto;
}
`;
export const SuggestionContainer = styled(Paper)({
'&&': {
maxHeight: '500px',
overflowY: 'auto',
},
});

View File

@ -1,26 +1,26 @@
import IconButton from '@material-ui/core/IconButton';
import styled from 'react-emotion';
export const ClipBoardCopy = styled('div')`
&& {
display: flex;
align-items: center;
justify-content: space-between;
}
`;
export const ClipBoardCopy = styled('div')({
'&&': {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
},
});
export const ClipBoardCopyText = styled('span')`
&& {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
height: 21px;
}
`;
export const ClipBoardCopyText = styled('span')({
'&&': {
display: 'inline-block',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
height: '21px',
},
});
export const CopyIcon = styled(IconButton)`
&& {
margin: 0 0 0 10px;
}
`;
export const CopyIcon = styled(IconButton)({
'&&': {
margin: '0 0 0 10px',
},
});

View File

@ -3,30 +3,30 @@ import Card from '@material-ui/core/Card';
import Typography from '@material-ui/core/Typography';
import Chip from '@material-ui/core/Chip';
export const CardWrap = styled(Card)`
&& {
margin: 0 0 16px;
}
`;
export const CardWrap = styled(Card)({
'&&': {
margin: '0 0 16px',
},
});
export const Heading = styled(Typography)`
&& {
font-weight: 700;
text-transform: capitalize;
}
`;
export const Heading = styled(Typography)({
'&&': {
fontWeight: 700,
textTransform: 'capitalize',
},
});
export const Tags = styled('div')`
&& {
display: flex;
justify-content: start;
flex-wrap: wrap;
margin: 0 -5px;
}
`;
export const Tags = styled('div')({
'&&': {
display: 'flex',
justifyContent: 'start',
flexWrap: 'wrap',
margin: '0 -5px',
},
});
export const Tag = styled(Chip)`
&& {
margin: 5px;
}
`;
export const Tag = styled(Chip)({
'&&': {
margin: '5px',
},
});

View File

@ -1,7 +1,7 @@
import styled from 'react-emotion';
export const Content = styled('div')`
&& {
padding: 15px;
}
`;
export const Content = styled('div')({
'&&': {
padding: '15px',
},
});

View File

@ -5,26 +5,26 @@ import ListItemText from '@material-ui/core/ListItemText';
import colors from '../../utils/styles/colors';
export const TitleListItem = styled(ListItem)`
&& {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
`;
export const TitleListItem = styled(ListItem)({
'&&': {
paddingLeft: 0,
paddingRight: 0,
paddingBottom: 0,
},
});
export const TitleListItemText = styled(ListItemText)`
&& {
padding-left: 0;
padding-right: 0;
padding-top: 8px;
}
`;
export const TitleListItemText = styled(ListItemText)({
'&&': {
paddingLeft: 0,
paddingRight: 0,
paddingTop: '8px',
},
});
export const TitleAvatar = styled(Avatar)`
&& {
color: ${colors.greySuperLight};
background-color: ${colors.primary};
text-transform: capitalize;
}
`;
export const TitleAvatar = styled(Avatar)({
'&&': {
color: colors.greySuperLight,
backgroundColor: colors.primary,
textTransform: 'capitalize',
},
});

View File

@ -3,32 +3,32 @@ import Typography from '@material-ui/core/Typography';
import { default as MuiFab } from '@material-ui/core/Fab';
import colors from '../../utils/styles/colors';
export const Details = styled('span')`
display: flex;
flex-direction: column;
align-items: center;
`;
export const Details = styled('span')({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
});
export const Content = styled('div')`
margin: 10px 0 10px 0;
display: flex;
flex-wrap: wrap;
> * {
margin: 5px;
}
`;
export const Content = styled('div')({
margin: '10px 0 10px 0',
display: 'flex',
flexWrap: 'wrap',
'> *': {
margin: '5px',
},
});
export const Heading = styled(Typography)`
&& {
font-weight: 700;
margin-bottom: 10px;
text-transform: capitalize;
}
`;
export const Heading = styled(Typography)({
'&&': {
fontWeight: 700,
marginBottom: '10px',
textTransform: 'capitalize',
},
});
export const Fab = styled(MuiFab)`
&& {
background-color: ${colors.primary};
color: ${colors.white};
}
`;
export const Fab = styled(MuiFab)({
'&&': {
backgroundColor: colors.primary,
color: colors.white,
},
});

View File

@ -6,30 +6,30 @@ import Typography from '@material-ui/core/Typography';
import colors from '../../utils/styles/colors';
export const Heading = styled(Typography)`
&& {
font-weight: 700;
text-transform: capitalize;
}
`;
export const Heading = styled(Typography)({
'&&': {
fontWeight: 700,
textTransform: 'capitalize',
},
});
export const DistListItem = styled(ListItem)`
&& {
padding-left: 0;
padding-right: 0;
}
`;
export const DistListItem = styled(ListItem)({
'&&': {
paddingLeft: 0,
paddingRight: 0,
},
});
export const DistChips = styled(Chip)`
&& {
margin-right: 5px;
text-transform: capitalize;
}
`;
export const DistChips = styled(Chip)({
'&&': {
marginRight: '5px',
textTransform: 'capitalize',
},
});
export const DownloadButton = styled(MuiFab)`
&& {
background-color: ${colors.primary};
color: ${colors.white};
}
`;
export const DownloadButton = styled(MuiFab)({
'&&': {
backgroundColor: colors.primary,
color: colors.white,
},
});

View File

@ -2,15 +2,15 @@ import styled from 'react-emotion';
import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
export const Heading = styled(Typography)`
&& {
font-weight: 700;
text-transform: capitalize;
}
`;
export const Heading = styled(Typography)({
'&&': {
fontWeight: 700,
textTransform: 'capitalize',
},
});
export const EngineListItem = styled(ListItem)`
&& {
padding-left: 0;
}
`;
export const EngineListItem = styled(ListItem)({
'&&': {
paddingLeft: 0,
},
});

View File

@ -3,15 +3,15 @@ import mq from '../../utils/styles/media';
import Icon from '../Icon/Icon';
import colors from '../../utils/styles/colors';
export const Wrapper = styled('div')`
&& {
background: ${colors.snow};
border-top: 1px solid ${colors.greyGainsboro};
color: ${colors.nobel01};
font-size: 14px;
padding: 20px;
}
`;
export const Wrapper = styled('div')({
'&&': {
background: colors.snow,
borderTop: `1px solid ${colors.greyGainsboro}`,
color: colors.nobel01,
fontSize: '14px',
padding: '20px',
},
});
export const Inner = styled('div')`
&& {
@ -50,24 +50,24 @@ export const Left = styled('div')`
}
`;
export const Right = styled(Left)`
&& {
display: flex;
}
`;
export const Right = styled(Left)({
'&&': {
display: 'flex',
},
});
export const ToolTip = styled('span')`
&& {
position: relative;
height: 18px;
}
`;
export const ToolTip = styled('span')({
'&&': {
position: 'relative',
height: '18px',
},
});
export const Earth = styled(Icon)`
&& {
padding: 0 10px;
}
`;
export const Earth = styled(Icon)({
'&&': {
padding: '0 10px',
},
});
export const Flags = styled('span')`
&& {
@ -96,17 +96,17 @@ export const Flags = styled('span')`
}
`;
export const Love = styled('span')`
&& {
color: ${colors.love};
padding: 0 5px;
}
`;
export const Love = styled('span')({
'&&': {
color: colors.love,
padding: '0 5px',
},
});
export const Flag = styled(Icon)`
&& {
padding: 0 5px;
}
`;
export const Flag = styled(Icon)({
'&&': {
padding: '0 5px',
},
});
export const Logo = Flag;

View File

@ -6,67 +6,67 @@ import IconButton from '@material-ui/core/IconButton';
import colors from '../../utils/styles/colors';
import mq from '../../utils/styles/media';
export const InnerNavBar = styled(Toolbar)`
&& {
justify-content: space-between;
align-items: center;
padding: 0 15px;
}
`;
export const InnerNavBar = styled(Toolbar)({
'&&': {
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 15px',
},
});
export const Greetings = styled('span')`
&& {
margin: 0 5px 0 0;
}
`;
export const Greetings = styled('span')({
'&&': {
margin: '0 5px 0 0',
},
});
export const RightSide = styled(Toolbar)`
&& {
display: flex;
padding: 0;
}
`;
export const RightSide = styled(Toolbar)({
'&&': {
display: 'flex',
padding: 0,
},
});
export const LeftSide = styled(RightSide)`
&& {
flex: 1;
}
`;
export const LeftSide = styled(RightSide)({
'&&': {
flex: 1,
},
});
export const MobileNavBar = styled('div')`
&& {
align-items: center;
display: flex;
border-bottom: 1px solid ${colors.greyLight};
padding: 8px;
position: relative;
}
`;
export const MobileNavBar = styled('div')({
'&&': {
alignItems: 'center',
display: 'flex',
borderBottom: `1px solid ${colors.greyLight}`,
padding: '8px',
position: 'relative',
},
});
export const InnerMobileNavBar = styled('div')`
&& {
border-radius: 4px;
background-color: ${colors.greyLight};
color: ${colors.white};
width: 100%;
padding: 0px 5px;
margin: 0 10px 0 0;
}
`;
export const InnerMobileNavBar = styled('div')({
'&&': {
borderRadius: '4px',
backgroundColor: colors.greyLight,
color: colors.white,
width: '100%',
padding: '0px 5px',
margin: '0 10px 0 0',
},
});
export const IconSearchButton = styled(IconButton)`
&& {
display: block;
}
`;
export const IconSearchButton = styled(IconButton)({
'&&': {
display: 'block',
},
});
export const SearchWrapper = styled('div')`
&& {
display: none;
max-width: 393px;
width: 100%;
}
`;
export const SearchWrapper = styled('div')({
'&&': {
display: 'none',
maxWidth: '393px',
width: '100%',
},
});
export const NavBar = styled(AppBar)`
&& {

View File

@ -2,15 +2,15 @@ import Card from '@material-ui/core/Card';
import Typography from '@material-ui/core/Typography';
import styled from 'react-emotion';
export const CardStyled = styled(Card)`
&& {
width: 600px;
margin: auto;
}
`;
export const CardStyled = styled(Card)({
'&&': {
width: '600px',
margin: 'auto',
},
});
export const HelpTitle = styled(Typography)`
&& {
margin-bottom: 20px;
}
`;
export const HelpTitle = styled(Typography)({
'&&': {
marginBottom: '20px',
},
});

View File

@ -48,9 +48,9 @@ export const ImgWrapper: StyledOtherComponent<
}
`;
export const Img = styled('img')`
&& {
width: 100%;
height: auto;
}
`;
export const Img = styled('img')({
'&&': {
width: '100%',
height: 'auto',
},
});

View File

@ -3,21 +3,21 @@ import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
import styled from 'react-emotion';
export const Heading = styled(Typography)`
&& {
font-weight: 700;
text-transform: capitalize;
}
`;
export const Heading = styled(Typography)({
'&&': {
fontWeight: 700,
textTransform: 'capitalize',
},
});
export const InstallItem = styled(ListItem)`
&& {
padding: 0;
}
`;
export const InstallItem = styled(ListItem)({
'&&': {
padding: 0,
},
});
export const PackageMangerAvatar = styled(Avatar)`
&& {
border-radius: 0px;
}
`;
export const PackageMangerAvatar = styled(Avatar)({
'&&': {
borderRadius: '0px',
},
});

View File

@ -1,14 +1,14 @@
import styled, { css } from 'react-emotion';
export const Content = styled('div')`
&& {
background-color: #ffffff;
flex: 1;
display: flex;
position: relative;
flex-direction: column;
}
`;
export const Content = styled('div')({
'&&': {
backgroundColor: '#ffffff',
flex: 1,
display: 'flex',
position: 'relative',
flexDirection: 'column',
},
});
export const Container = styled('div')`
&& {

View File

@ -5,16 +5,16 @@ export const loginDialog = css({
minWidth: '300px',
});
export const loginError = css`
background-color: ${colors.red} !important;
min-width: inherit !important;
margin-bottom: 10px !important;
`;
export const loginError = css({
backgroundColor: `${colors.red} !important`,
minWidth: 'inherit !important',
marginBottom: '10px !important',
});
export const loginErrorMsg = css`
display: flex;
align-items: center;
`;
export const loginErrorMsg = css({
display: 'flex',
alignItems: 'center',
});
export const loginIcon = css({
opacity: 0.9,

View File

@ -3,39 +3,39 @@ import { default as MuiList } from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import styled from 'react-emotion';
export const Wrapper = styled('div')`
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
flex: 1;
padding: 16px;
`;
export const Wrapper = styled('div')({
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
flex: 1,
padding: '16px',
});
export const Inner = styled('div')`
max-width: 650px;
display: flex;
flex-direction: column;
`;
export const Inner = styled('div')({
maxWidth: '650px',
display: 'flex',
flexDirection: 'column',
});
export const EmptyPackage = styled('img')`
width: 150px;
margin: 0 auto;
`;
export const EmptyPackage = styled('img')({
width: '150px',
margin: '0 auto',
});
export const Heading = styled(Typography)`
&& {
color: #4b5e40;
}
`;
export const Heading = styled(Typography)({
'&&': {
color: '#4b5e40',
},
});
export const List = styled(MuiList)`
&& {
padding: 0;
color: #4b5e40;
}
`;
export const List = styled(MuiList)({
'&&': {
padding: 0,
color: '#4b5e40',
},
});
export const Card = styled(MuiCard)`
margin-top: 24px;
`;
export const Card = styled(MuiCard)({
marginTop: '24px',
});

View File

@ -34,57 +34,57 @@ export const OverviewItem = styled('span')`
}
`;
export const Icon = styled(Ico)`
&& {
margin: 2px 10px 0px 0;
fill: ${colors.greyLight2};
}
`;
export const Icon = styled(Ico)({
'&&': {
margin: '2px 10px 0px 0',
fill: colors.greyLight2,
},
});
export const Published = styled('span')`
&& {
color: ${colors.greyLight2};
margin: 0px 5px 0px 0px;
}
`;
export const Published = styled('span')({
'&&': {
color: colors.greyLight2,
margin: '0px 5px 0px 0px',
},
});
// @ts-ignore
export const Text = styled(Label)`
&& {
font-size: 12px;
font-weight: 500;
color: ${colors.greyLight2};
}
`;
export const Text = styled(Label)({
'&&': {
fontSize: '12px',
fontWeight: 500,
color: colors.greyLight2,
},
});
export const Details = styled('span')`
&& {
margin-left: 5px;
line-height: 1.5;
display: flex;
flex-direction: column;
}
`;
export const Details = styled('span')({
'&&': {
marginLeft: '5px',
lineHeight: 1.5,
display: 'flex',
flexDirection: 'column',
},
});
export const Author = styled('div')`
&& {
display: flex;
align-items: center;
}
`;
export const Author = styled('div')({
'&&': {
display: 'flex',
alignItems: 'center',
},
});
export const Avatar = styled(Photo)`
&& {
width: 20px;
height: 20px;
}
`;
export const Avatar = styled(Photo)({
'&&': {
width: '20px',
height: '20px',
},
});
export const WrapperLink = styled(Link)`
&& {
text-decoration: none;
}
`;
export const WrapperLink = styled(Link)({
'&&': {
textDecoration: 'none',
},
});
export const PackageTitle = styled('span')`
&& {
@ -106,31 +106,31 @@ export const PackageTitle = styled('span')`
}
`;
export const GridRightAligned = styled(Grid)`
&& {
text-align: right;
}
`;
export const GridRightAligned = styled(Grid)({
'&&': {
textAlign: 'right',
},
});
export const PackageList = styled(List)`
&& {
padding: 12px 0 12px 0;
export const PackageList = styled(List)({
'&&': {
padding: '12px 0 12px 0',
&:hover {
background-color: ${colors.greyLight3};
}
}
`;
'&:hover': {
backgroundColor: colors.greyLight3,
},
},
});
export const IconButton = styled(MuiIconButton)`
&& {
padding: 6px;
export const IconButton = styled(MuiIconButton)({
'&&': {
padding: '6px',
svg {
font-size: 16px;
}
}
`;
svg: {
fontSize: '16px',
},
},
});
export const TagContainer = styled('span')`
&& {
@ -143,20 +143,20 @@ export const TagContainer = styled('span')`
}
`;
export const PackageListItem = styled(ListItem)`
&& {
padding-top: 0;
}
`;
export const PackageListItem = styled(ListItem)({
'&&': {
paddingTop: 0,
},
});
export const PackageListItemText = styled(ListItemText)`
&& {
padding-right: 0;
}
`;
export const PackageListItemText = styled(ListItemText)({
'&&': {
paddingRight: 0,
},
});
export const Description = styled(Typography)`
color: ${colors.greyDark2};
font-size: 14px;
padding-right: 0;
`;
export const Description = styled(Typography)({
color: colors.greyDark2,
fontSize: '14px',
paddingRight: 0,
});

View File

@ -1,7 +1,7 @@
import styled from 'react-emotion';
export const CommandContainer = styled('div')`
&& {
padding-top: 20px;
}
`;
export const CommandContainer = styled('div')({
'&&': {
paddingTop: '20px',
},
});

View File

@ -4,16 +4,16 @@ import DialogContent from '@material-ui/core/DialogContent';
import colors from '../../utils/styles/colors';
import { fontSize } from '../../utils/styles/sizes';
export const Title = styled(DialogTitle)`
&& {
background-color: ${colors.primary};
color: ${colors.white};
font-size: ${fontSize.lg};
}
`;
export const Title = styled(DialogTitle)({
'&&': {
backgroundColor: colors.primary,
color: colors.white,
fontSize: fontSize.lg,
},
});
export const Content = styled(DialogContent)`
&& {
padding: 0 24px;
}
`;
export const Content = styled(DialogContent)({
'&&': {
padding: '0 24px',
},
});

View File

@ -6,36 +6,36 @@ import Typography from '@material-ui/core/Typography';
import Github from '../../icons/GitHub';
import colors from '../../utils/styles/colors';
export const Heading = styled(Typography)`
&& {
font-weight: 700;
text-transform: capitalize;
}
`;
export const Heading = styled(Typography)({
'&&': {
fontWeight: 700,
textTransform: 'capitalize',
},
});
export const GridRepo = styled(Grid)`
&& {
align-items: center;
}
`;
export const GridRepo = styled(Grid)({
'&&': {
alignItems: 'center',
},
});
export const GithubLink = styled('a')`
&& {
color: ${colors.primary};
}
`;
export const GithubLink = styled('a')({
'&&': {
color: colors.primary,
},
});
export const GithubLogo = styled(Github)`
&& {
font-size: 40px;
color: ${colors.primary};
background-color: ${colors.greySuperLight};
}
`;
export const GithubLogo = styled(Github)({
'&&': {
fontSize: '40px',
color: colors.primary,
backgroundColor: colors.greySuperLight,
},
});
export const RepositoryListItem = styled(ListItem)`
&& {
padding-left: 0;
padding-right: 0;
}
`;
export const RepositoryListItem = styled(ListItem)({
'&&': {
paddingLeft: 0,
paddingRight: 0,
},
});

View File

@ -20,8 +20,8 @@ export const Wrapper = styled('div')`
}
`;
export const Circular = styled(CircularProgress)`
&& {
color: ${colors.primary};
}
`;
export const Circular = styled(CircularProgress)({
'&&': {
color: colors.primary,
},
});

View File

@ -1,13 +1,13 @@
import styled from 'react-emotion';
export const Wrapper = styled('span')`
&& {
vertical-align: middle;
line-height: 22px;
border-radius: 2px;
color: #485a3e;
background-color: #f3f4f2;
padding: 0.22rem 0.4rem;
margin: 8px 8px 0 0;
}
`;
export const Wrapper = styled('span')({
'&&': {
verticalAlign: 'middle',
lineHeight: '22px',
borderRadius: '2px',
color: '#485a3e',
backgroundColor: '#f3f4f2',
padding: '0.22rem 0.4rem',
margin: '8px 8px 0 0',
},
});

View File

@ -2,23 +2,23 @@ import styled from 'react-emotion';
import Typography from '@material-ui/core/Typography';
import { default as MuiListItemText } from '@material-ui/core/ListItemText';
export const Heading = styled(Typography)`
&& {
font-weight: 700;
}
`;
export const Heading = styled(Typography)({
'&&': {
fontWeight: 700,
},
});
export const Spacer = styled('div')`
flex: 1 1 auto;
border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
white-space: nowrap;
height: 0.5em;
`;
export const Spacer = styled('div')({
flex: '1 1 auto',
borderBottom: '1px dotted rgba(0, 0, 0, 0.2)',
whiteSpace: 'nowrap',
height: '0.5em',
});
export const ListItemText = styled(MuiListItemText)`
&& {
flex: none;
color: black;
opacity: 0.6;
}
`;
export const ListItemText = styled(MuiListItemText)({
'&&': {
flex: 'none',
color: 'black',
opacity: 0.6,
},
});

View File

@ -2,23 +2,23 @@ import styled from 'react-emotion';
import Typography from '@material-ui/core/Typography';
import { default as MuiListItemText } from '@material-ui/core/ListItemText';
export const Heading = styled(Typography)`
&& {
font-weight: 700;
}
`;
export const Heading = styled(Typography)({
'&&': {
fontWeight: 700,
},
});
export const Spacer = styled('div')`
flex: 1 1 auto;
border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
white-space: nowrap;
height: 0.5em;
`;
export const Spacer = styled('div')({
flex: '1 1 auto',
borderBottom: '1px dotted rgba(0, 0, 0, 0.2)',
whiteSpace: 'nowrap',
height: '0.5em',
});
export const ListItemText = styled(MuiListItemText)`
&& {
flex: none;
color: black;
opacity: 0.6;
}
`;
export const ListItemText = styled(MuiListItemText)({
'&&': {
flex: 'none',
color: 'black',
opacity: 0.6,
},
});

View File

@ -3,10 +3,10 @@ import DialogTitle from '@material-ui/core/DialogTitle';
import colors from '../../utils/styles/colors';
import { fontSize } from '../../utils/styles/sizes';
export const Title = styled(DialogTitle)`
&& {
background-color: ${colors.primary};
color: ${colors.white};
font-size: ${fontSize.lg};
}
`;
export const Title = styled(DialogTitle)({
'&&': {
backgroundColor: colors.primary,
color: colors.white,
fontSize: fontSize.lg,
},
});