cubetiq/verdaccio-ui
1
0
Fork 0
forked from sombochea/verdaccio-ui
Code Issues Pull Requests Releases Wiki Activity

fix: media query ts ignore

Browse Source
This commit is contained in:
antoinechalifour 2019-10-03 20:11:14 +02:00
parent a8eb1f36fc
commit 6f52838531
3 changed files with 30 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Footer/styles.ts
View File

@ -20,7 +20,6 @@ export const Inner = styled('div')`
justify-content: flex-end; justify-content: flex-end;
width: 100%; width: 100%;
${() => { ${() => {
// @ts-ignore
return mq.medium(css` return mq.medium(css`
min-width: 400px; min-width: 400px;
max-width: 800px; max-width: 800px;
@ -29,7 +28,6 @@ export const Inner = styled('div')`
`); `);
}}; }};
${() => { ${() => {
// @ts-ignore
return mq.large(css` return mq.large(css`
max-width: 1240px; max-width: 1240px;
`); `);
@ -42,7 +40,6 @@ export const Left = styled('div')`
align-items: center; align-items: center;
display: none; display: none;
${() => { ${() => {
// @ts-ignore
return mq.medium(css` return mq.medium(css`
display: flex; display: flex;
`); `);

24
src/components/Header/styles.ts
View File

@ -76,9 +76,8 @@ export const NavBar = styled(AppBar)`
min-height: 60px; min-height: 60px;
display: flex; display: flex;
justify-content: center; justify-content: center;
${() => { ${() =>
// @ts-ignore mq.medium(css`
return mq.medium(css`
${SearchWrapper} { ${SearchWrapper} {
display: flex; display: flex;
} }
@ -88,26 +87,21 @@ export const NavBar = styled(AppBar)`
${MobileNavBar} { ${MobileNavBar} {
display: none; display: none;
} }
`); `)};
}}; ${() =>
${() => { mq.large(css`
// @ts-ignore
return mq.large(css`
${InnerNavBar} { ${InnerNavBar} {
padding: 0 20px; padding: 0 20px;
} }
`); `)};
}}; ${() =>
${() => { mq.xlarge(css`
// @ts-ignore
return mq.xlarge(css`
${InnerNavBar} { ${InnerNavBar} {
max-width: 1240px; max-width: 1240px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
} }
`); `)};
}};
} }
`; `;

32
src/utils/styles/media.ts
View File

@ -8,16 +8,26 @@ export const breakpoints = {
xlarge: 1275, xlarge: 1275,
}; };
const mq = Object.keys(breakpoints).reduce((accumulator, label) => { type Sizes = keyof typeof breakpoints;
const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
const suffix = typeof breakpoints[label] === 'string' ? '' : 'px'; type MediaQuery = {
accumulator[label] = cls => [key in Sizes]: (cls: any) => string;
css` };
@media (${prefix + breakpoints[label] + suffix}) {
${cls}; const mq: MediaQuery = Object.keys(breakpoints).reduce(
} (accumulator, label) => {
`; const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
return accumulator; const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
}, {}); accumulator[label] = cls =>
css`
@media (${prefix + breakpoints[label] + suffix}) {
${cls};
}
`;
return accumulator;
},
// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
{} as MediaQuery
);
export default mq; export default mq;