mirror of
https://github.com/SomboChea/ui
synced 2024-11-05 06:04:28 +07:00
fix: media query ts ignore
This commit is contained in:
parent
a8eb1f36fc
commit
6f52838531
@ -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;
|
||||
`);
|
||||
|
@ -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;
|
||||
}
|
||||
`);
|
||||
}};
|
||||
`)};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -8,7 +8,14 @@ export const breakpoints = {
|
||||
xlarge: 1275,
|
||||
};
|
||||
|
||||
const mq = Object.keys(breakpoints).reduce((accumulator, label) => {
|
||||
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 =>
|
||||
@ -18,6 +25,9 @@ const mq = Object.keys(breakpoints).reduce((accumulator, label) => {
|
||||
}
|
||||
`;
|
||||
return accumulator;
|
||||
}, {});
|
||||
},
|
||||
// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
|
||||
{} as MediaQuery
|
||||
);
|
||||
|
||||
export default mq;
|
||||
|
Loading…
Reference in New Issue
Block a user