UNPKG

@onwave/ui

Version:
38 lines 1.58 kB
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } return cooked; }; var __spreadArrays = (this && this.__spreadArrays) || function () { for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j]; return r; }; import { css } from "@emotion/react"; var queryToCSS = function (query) { return function (template) { var array = []; for (var _i = 1; _i < arguments.length; _i++) { array[_i - 1] = arguments[_i]; } return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", " {\n ", ";\n }\n "], ["\n ", " {\n ", ";\n }\n "])), query, css.apply(void 0, __spreadArrays([template], array))); }; }; export function buildMediaQuery(_a) { var maxWidth = _a.maxWidth; var query = "@media only screen and (max-width: " + maxWidth + "px)"; return query; } export var SIZES = { sm: { maxWidth: 480 }, md: { maxWidth: 768 }, lg: { maxWidth: 1024 }, xl: { maxWidth: 1200 }, }; export var media = { sm: queryToCSS(buildMediaQuery(SIZES.sm)), md: queryToCSS(buildMediaQuery(SIZES.md)), lg: queryToCSS(buildMediaQuery(SIZES.lg)), xl: queryToCSS(buildMediaQuery(SIZES.xl)), }; var templateObject_1; //# sourceMappingURL=breakPoints.js.map