@hakit/components
Version:
A series of components to work with @hakit/core
44 lines (43 loc) • 1.27 kB
JavaScript
const p = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], l = ["xxs", "xs", "sm", "md", "lg"], u = [...l, "xlg"], c = (n) => {
const e = l.filter((t) => n[t] !== void 0).map((t) => [t, n[t]]), r = {};
for (let t = 0; t < e.length; t++) {
const [o, s] = e[t];
if (t > 0) {
const a = e[t - 1][1];
if (s <= a)
throw new Error(`Breakpoint "${o}" must be greater than "${e[t - 1][0]}". Got ${s} <= ${a}.`);
r[o] = `(min-width: ${a + 1}px) and (max-width: ${s}px)`;
} else
r[o] = `(max-width: ${s}px)`;
}
const i = e.length === 0 ? -1 : e[e.length - 1][1];
return r.xlg = `(min-width: ${i + 1}px)`, r;
}, d = (n, e) => n.map((r) => `
.bp-${r} & {
${e}
}
`).join(`
`), $ = (n) => `calc(
(100% - 11 * var(--gap, 0px)) * ${n} / 12 + (${n} - 1) * var(--gap, 0px)
)`, x = (n) => Object.entries(n).reduce((e, [r, i]) => {
if (i === void 0)
return e;
const t = p.map((o) => `
.bp-${r} {
.${r}-${o} {
width: ${$(o)};
}
}
`);
return e + t.join(`
`);
}, "");
export {
u as allBreakpoints,
x as generateColumnBreakpoints,
c as getBreakpoints,
$ as getColumnSizeCSS,
d as mq,
l as orderedBreakpoints
};
//# sourceMappingURL=breakpoints.js.map