mirror of
https://github.com/SomboChea/ui
synced 2024-05-20 18:31:37 +07:00
39 lines
997 B
TypeScript
39 lines
997 B
TypeScript
import { css, Interpolation } from 'emotion';
|
|
|
|
export const breakpoints = {
|
|
small: 576,
|
|
medium: 768,
|
|
large: 1024,
|
|
container: 1240,
|
|
xlarge: 1275,
|
|
};
|
|
|
|
type Breakpoints = typeof breakpoints;
|
|
type Sizes = keyof Breakpoints;
|
|
|
|
type MediaQuery<T> = {
|
|
[P in keyof T]: (args: Interpolation, key?: P) => string;
|
|
};
|
|
|
|
function constructMQ(breakpoint: Sizes, args: Interpolation): string {
|
|
const label = breakpoints[breakpoint];
|
|
const prefix = typeof label === 'string' ? '' : 'min-width:';
|
|
const suffix = typeof label === 'string' ? '' : 'px';
|
|
|
|
return css`
|
|
@media (${prefix + breakpoints[breakpoint] + suffix}) {
|
|
${args};
|
|
}
|
|
`;
|
|
}
|
|
|
|
const mq: MediaQuery<Breakpoints> = {
|
|
small: (args, b = 'small') => constructMQ(b, args),
|
|
large: (args, b = 'large') => constructMQ(b, args),
|
|
container: (args, b = 'container') => constructMQ(b, args),
|
|
medium: (args, b = 'medium') => constructMQ(b, args),
|
|
xlarge: (args, b = 'xlarge') => constructMQ(b, args),
|
|
};
|
|
|
|
export default mq;
|