mirror of
https://github.com/SomboChea/ui
synced 2024-11-05 14:14:26 +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;
|
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;
|
||||||
`);
|
`);
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
`);
|
`)};
|
||||||
}};
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -8,7 +8,14 @@ export const breakpoints = {
|
|||||||
xlarge: 1275,
|
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 prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
|
||||||
const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
|
const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
|
||||||
accumulator[label] = cls =>
|
accumulator[label] = cls =>
|
||||||
@ -18,6 +25,9 @@ const mq = Object.keys(breakpoints).reduce((accumulator, label) => {
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
return accumulator;
|
return accumulator;
|
||||||
}, {});
|
},
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
|
||||||
|
{} as MediaQuery
|
||||||
|
);
|
||||||
|
|
||||||
export default mq;
|
export default mq;
|
||||||
|
Loading…
Reference in New Issue
Block a user