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

fix: media query ts ignore

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

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

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

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

@ -8,16 +8,26 @@ export const breakpoints = {
xlarge: 1275,
};
const mq = Object.keys(breakpoints).reduce((accumulator, label) => {
const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
accumulator[label] = cls =>
css`
@media (${prefix + breakpoints[label] + suffix}) {
${cls};
}
`;
return accumulator;
}, {});
type Sizes = keyof typeof breakpoints;
type MediaQuery = {
[key in Sizes]: (cls: any) => string;
};
const mq: MediaQuery = Object.keys(breakpoints).reduce(
(accumulator, label) => {
const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
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;