vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
46 lines (44 loc) • 1.26 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.breakpoints = exports.breakpointSizes = void 0;
const breakpointSizes = exports.breakpointSizes = {
m: 480,
l: 1024,
xl: 1600
};
// there is no fromS as that'd be the default styles and we do not want
// those to be part of a min-width: 0px media queries due to CSS performance
const breakpoints = exports.breakpoints = {
// duplicate of untilM
// > 0 && < 480
get onlyS() {
return this.untilM;
},
// < 480
untilM: '@media (max-width: ' + (breakpointSizes.m - 1) + 'px)',
// >= 480
fromM: '@media (min-width: ' + breakpointSizes.m + 'px)',
// >= 480 && < 1024
get onlyM() {
return this.fromM + ' and ' + this.untilL.substring(7);
},
// < 1024
untilL: '@media (max-width: ' + (breakpointSizes.l - 1) + 'px)',
// >= 1024
fromL: '@media (min-width: ' + breakpointSizes.l + 'px)',
// >= 1024 && < 1600
get onlyL() {
return this.fromL + ' and ' + this.untilXL.substring(7);
},
// < 1600
untilXL: '@media (max-width: ' + (breakpointSizes.xl - 1) + 'px)',
// >= 1600
fromXL: '@media (min-width: ' + breakpointSizes.xl + 'px)',
// duplicate of fromXL
// >= 1600
get onlyXL() {
return this.fromXL;
}
};