sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2024-11-05 06:04:28 +07:00
Code Issues Releases Wiki Activity

refactor: move basic CSS from templates to JS objects

Browse Source
This commit is contained in:
Sergio Herrera Guzmán 2019-07-15 10:41:12 +02:00
parent 786da9975f
commit 8ea017d871
7 changed files with 59 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/App/styles.ts
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,

10
src/components/Developers/styles.ts
View File

@ -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;

18
src/components/Login/styles.ts
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,

40
src/components/NotFound/styles.ts
View File

@ -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',
});

10
src/components/Package/styles.ts
View File

@ -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,
});

12
src/components/UpLinks/styles.ts
View File

@ -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)`
&& {

12
src/components/Versions/styles.ts
View File

@ -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)`
&& {