@littlespoon/theme
Version:
Little Spoon theme
90 lines • 2.42 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.maxWidth = exports.down = exports.minWidth = exports.up = exports.xxl = exports.xl = exports.desktop = exports.lg = exports.tablet = exports.md = exports.sm = exports.xs = exports.mobile = void 0;
// mobile
exports.mobile = 0;
exports.xs = 375;
exports.sm = 550;
// tablet
exports.md = 768;
exports.tablet = exports.md;
// desktop
exports.lg = 1000;
exports.desktop = exports.lg;
exports.xl = 1200;
exports.xxl = 1440;
/**
* Generates media query that matches screen widths greater than the screen size given by the breakpoint (inclusive).
* You can use up or minWidth aliases.
*
* @param minWidth - The min-width.
* @param css - The CSS.
*
* @example
*
* ```ts
* breakpoints.up(breakpoints.tablet)
* // '@media (min-width: 768px)
* ```
*
* ```ts
* breakpoints.minWidth(breakpoints.tablet)
* // '@media (min-width: 768px)
* ```
*
* ```ts
* breakpoints.up(breakpoints.tablet, 'width: 42rem')
* // '@media (min-width: 768px) { width: 42rem; }'
* ```
*/
var up = function (minWidth, css) {
return "@media (min-width: ".concat(minWidth, "px)") + (css ? " { ".concat(css, " }") : '');
};
exports.up = up;
exports.minWidth = exports.up;
/**
* Generates media query that matches screen widths smaller than the screen size given by the breakpoint (inclusive).
* You can use down or maxWidth aliases.
*
* @param maxWidth - The max-width.
* @param css - The CSS.
*
* @example
*
* ```ts
* breakpoints.down(breakpoints.desktop)
* // '@media (max-width: 1000px)'
* ```
*
* ```ts
* breakpoints.maxWidth(breakpoints.desktop)
* // '@media (max-width: 1000px)'
* ```
*
* ```ts
* breakpoints.down(breakpoints.desktop, 'display: none;')
* // '@media (max-width: 1000px) { display: none; }'
* ```
*/
var down = function (maxWidth, css) {
return "@media (max-width: ".concat(maxWidth, "px)") + (css ? " { ".concat(css, " }") : '');
};
exports.down = down;
exports.maxWidth = exports.down;
var breakpoints = {
xs: exports.xs,
sm: exports.sm,
md: exports.md,
lg: exports.lg,
xl: exports.xl,
xxl: exports.xxl,
mobile: exports.mobile,
tablet: exports.tablet,
desktop: exports.desktop,
up: exports.up,
down: exports.down,
minWidth: exports.minWidth,
maxWidth: exports.maxWidth,
};
exports.default = breakpoints;
//# sourceMappingURL=breakpoints.js.map