holakit
Version:
Yet another design-driven UI component set.
14 lines (11 loc) • 1.39 kB
JavaScript
/*! Built with http://stenciljs.com */
const { h } = window.HolakitCore;
class HolaColumns {
render() {
return h("slot", null);
}
static get is() { return "hola-columns"; }
static get encapsulation() { return "shadow"; }
static get style() { return ":host {\n -webkit-columns: 3 15rem;\n columns: 3 15rem;\n grid-column-gap: 2rem;\n -webkit-column-gap: 2rem;\n column-gap: 2rem;\n}\n\n:host([ruled]) {\n -webkit-column-rule: 1px solid #eee;\n column-rule: 1px solid #eee;\n}\n\n:host([of-cards]) {\n position: relative;\n -webkit-columns: 3 20rem;\n columns: 3 20rem;\n grid-column-gap: 0;\n -webkit-column-gap: 0;\n column-gap: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0 calc(var(--hola-card-gap) / -2);\n /* Due to some bugs in iOS Safari, column gap is simulated with paddings of column items.\n Of course we need to apply a pair of negative margin on column itself to make it align. */\n}\n:host([of-cards])::slotted(.item) {\n padding: calc(var(--hola-card-gap) / 2);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n:slotted(.item) {\n display: inline-block;\n width: 100%;\n -webkit-column-break-inside: avoid;\n break-inside: avoid-column;\n}\n\n:slotted(.item[margined]) {\n margin: 1rem 0;\n}"; }
}
export { HolaColumns };