@abdalla-1/swisco
Version:
Swiscare Components Kit
59 lines (58 loc) • 1.19 kB
JavaScript
const breakpoints = {
// Should have unique values so that the useBreakpointValue
// hook works as expected
mobileSmall: 300,
mobile: 390,
mobileLandscape: 640,
tablet: 768,
desktop: 1024,
desktopWide: 1280
}, media = {
// Order is important.
mobileSmall: {
maxWidth: breakpoints.mobileSmall
},
gtMobileSmall: {
minWidth: breakpoints.mobileSmall + 1
},
mobile: {
maxWidth: breakpoints.mobile
},
gtMobile: {
minWidth: breakpoints.mobile + 1
},
mobileLandscape: {
maxWidth: breakpoints.mobileLandscape
},
gtMobileLandscape: {
minWidth: breakpoints.mobileLandscape + 1
},
tablet: {
maxWidth: breakpoints.tablet
},
gtTablet: {
minWidth: breakpoints.tablet + 1
},
desktop: {
maxWidth: breakpoints.desktop
},
gtDesktop: {
minWidth: breakpoints.desktop + 1
},
desktopWide: {
maxWidth: breakpoints.desktopWide
},
gtDesktopWide: {
minWidth: breakpoints.desktopWide + 1
},
// Other
short: { maxHeight: 820 },
tall: { minHeight: 820 },
hoverNone: { hover: "none" },
pointerCoarse: { pointer: "coarse" }
};
export {
breakpoints,
media
};
//# sourceMappingURL=media.js.map