mirror of
https://github.com/SomboChea/ui
synced 2024-12-25 13:44:31 +07:00
refactor: move cascaded CSS from templates to JS objects
This commit is contained in:
parent
8ea017d871
commit
115be1bb6e
@ -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',
|
||||
},
|
||||
});
|
||||
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
@ -1,7 +1,7 @@
|
||||
import styled from 'react-emotion';
|
||||
|
||||
export const Content = styled('div')`
|
||||
&& {
|
||||
padding: 15px;
|
||||
}
|
||||
`;
|
||||
export const Content = styled('div')({
|
||||
'&&': {
|
||||
padding: '15px',
|
||||
},
|
||||
});
|
||||
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
@ -9,26 +9,26 @@ export const Details = styled('span')({
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
@ -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;
|
||||
|
@ -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)`
|
||||
&& {
|
||||
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
@ -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')`
|
||||
&& {
|
||||
|
@ -23,18 +23,18 @@ export const EmptyPackage = styled('img')({
|
||||
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)({
|
||||
marginTop: '24px',
|
||||
|
@ -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,17 +143,17 @@ 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,
|
||||
|
@ -1,7 +1,7 @@
|
||||
import styled from 'react-emotion';
|
||||
|
||||
export const CommandContainer = styled('div')`
|
||||
&& {
|
||||
padding-top: 20px;
|
||||
}
|
||||
`;
|
||||
export const CommandContainer = styled('div')({
|
||||
'&&': {
|
||||
paddingTop: '20px',
|
||||
},
|
||||
});
|
||||
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
@ -2,11 +2,11 @@ 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',
|
||||
@ -15,10 +15,10 @@ export const Spacer = styled('div')({
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
@ -2,11 +2,11 @@ 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',
|
||||
@ -15,10 +15,10 @@ export const Spacer = styled('div')({
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user