mirror of
https://github.com/yldio/copilot.git
synced 2025-01-23 01:10:12 +02:00
72 lines
2.0 KiB
JavaScript
72 lines
2.0 KiB
JavaScript
import { css } from 'styled-components';
|
|
import remcalc from 'remcalc';
|
|
|
|
export const breakpoints = {
|
|
small: {
|
|
upper: 768
|
|
},
|
|
medium: {
|
|
upper: 1024,
|
|
lower: 769
|
|
},
|
|
large: {
|
|
upper: 1200,
|
|
lower: 1025
|
|
},
|
|
xlarge: {
|
|
lower: 1201
|
|
}
|
|
};
|
|
|
|
const screens = {
|
|
// >= 768px
|
|
smallOnly: `only screen and (max-width: ${remcalc(breakpoints.small.upper)})`,
|
|
small: `only screen and (min-width: ${remcalc(breakpoints.small.upper)})`,
|
|
// >= 1024px
|
|
mediumOnly: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})
|
|
and (max-width: ${remcalc(breakpoints.medium.upper)})`,
|
|
mediumDown: `only screen and (max-width: ${remcalc(
|
|
breakpoints.medium.upper
|
|
)})`,
|
|
medium: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})`,
|
|
// >= 1200px
|
|
largeOnly: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})
|
|
and (max-width: ${remcalc(breakpoints.large.upper)})`,
|
|
largeDown: `only screen and (max-width: ${remcalc(breakpoints.large.upper)})`,
|
|
large: `only screen and (min-width: ${remcalc(breakpoints.large.upper)})`,
|
|
xlarge: `only screen and (min-width: ${remcalc(breakpoints.xlarge.lower)})
|
|
and (max-width: ${remcalc(breakpoints.xlarge.upper)})`,
|
|
xlargeUp: `only screen and (min-width: ${remcalc(breakpoints.xlarge.lower)})`
|
|
};
|
|
|
|
const breakpoint = label => (...args) => css`
|
|
@media ${screens[label]} {
|
|
${css(...args)}
|
|
}
|
|
`;
|
|
|
|
export const smallOnly = breakpoint('smallOnly');
|
|
export const small = breakpoint('small');
|
|
export const mediumOnly = breakpoint('mediumOnly');
|
|
export const mediumDown = breakpoint('mediumDown');
|
|
export const medium = breakpoint('medium');
|
|
export const largeOnly = breakpoint('largeOnly');
|
|
export const largeDown = breakpoint('largeDown');
|
|
export const large = breakpoint('large');
|
|
export const xlarge = breakpoint('xlarge');
|
|
export const xlargeUp = breakpoint('xlargeUp');
|
|
|
|
export default {
|
|
smallOnly,
|
|
small,
|
|
mediumOnly,
|
|
mediumDown,
|
|
medium,
|
|
largeOnly,
|
|
largeDown,
|
|
large,
|
|
xlarge,
|
|
xlargeUp,
|
|
breakpoints
|
|
};
|