mirror of
https://github.com/SomboChea/ui
synced 2024-11-28 00:44:30 +07:00
refactor: move basic CSS from templates to JS objects
This commit is contained in:
parent
786da9975f
commit
8ea017d871
@ -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,
|
||||
|
@ -3,11 +3,11 @@ 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;
|
||||
|
@ -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,
|
||||
|
@ -3,25 +3,25 @@ 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)`
|
||||
&& {
|
||||
@ -36,6 +36,6 @@ export const List = styled(MuiList)`
|
||||
}
|
||||
`;
|
||||
|
||||
export const Card = styled(MuiCard)`
|
||||
margin-top: 24px;
|
||||
`;
|
||||
export const Card = styled(MuiCard)({
|
||||
marginTop: '24px',
|
||||
});
|
||||
|
@ -155,8 +155,8 @@ export const PackageListItemText = styled(ListItemText)`
|
||||
}
|
||||
`;
|
||||
|
||||
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,
|
||||
});
|
||||
|
@ -8,12 +8,12 @@ export const Heading = styled(Typography)`
|
||||
}
|
||||
`;
|
||||
|
||||
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)`
|
||||
&& {
|
||||
|
@ -8,12 +8,12 @@ export const Heading = styled(Typography)`
|
||||
}
|
||||
`;
|
||||
|
||||
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)`
|
||||
&& {
|
||||
|
Loading…
Reference in New Issue
Block a user