@hakit/components
Version:
A series of components to work with @hakit/core
42 lines (41 loc) • 997 B
JavaScript
const r = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], m = (n) => {
const {
xxs: x,
xs: t,
sm: p,
md: i,
lg: e
} = n;
return {
xxs: `(max-width: ${x}px)`,
xs: `(min-width: ${x + 1}px) and (max-width: ${t}px)`,
sm: `(min-width: ${t + 1}px) and (max-width: ${p}px)`,
md: `(min-width: ${p + 1}px) and (max-width: ${i}px)`,
lg: `(min-width: ${i + 1}px) and (max-width: ${e}px)`,
xlg: `(min-width: ${e + 1}px)`
};
}, d = (n, x) => n.map((t) => `
.bp-${t} & {
${x}
}
`).join(`
`), a = (n) => `calc(
(100% - 11 * var(--gap, 0px)) * ${n} / 12 + (${n} - 1) * var(--gap, 0px)
)`, s = (n) => Object.entries(n).reduce((x, [t]) => {
const p = r.map((i) => `
.bp-${t} {
.${t}-${i} {
width: ${a(i)};
}
}
`);
return x + p.join(`
`);
}, "");
export {
s as generateColumnBreakpoints,
m as getBreakpoints,
a as getColumnSizeCSS,
d as mq
};
//# sourceMappingURL=breakpoints.js.map