%layout{ .inline, .sheet-inline{ display:inline !important; } .inline-flex-box, .sheet-inline-flex-box{ display:inline-flex !important; } .flex-box, .sheet-flex-box{ display:flex; } .flex-wrap, .sheet-flex-wrap{ flex-wrap:wrap; } .justify-space-around, .sheet-justify-space-around{ justify-content:space-around; } .justify-space-between, .sheet-justify-space-between{ justify-content:space-between; } .justify-center, .sheet-justify-center{ justify-content:center; } .stacked, .sheet-stacked{ flex-direction:column; &.center, &.sheet-center{ align-items:center; } &.center > *, &.sheet-stacked > *{ text-align: center; } &:not(.center):not(.sheet-center){ align-items:start; } > [name]:not([type="number"]):not([type="checkbox"]):not([type="radio"]){ width:100%; } } .span-2, .sheet-span-2{ grid-column:span 2; } .span-all, .sheet-span-all{ grid-column:1/-1; } .row-reverse, .sheet-row-reverse{ flex-direction: row-reverse; } .column-reverse, .sheet-column-reverse{ flex-direction: column-reverse; } .no-gap, .sheet-no-gap{ gap:0; } .gap, .sheet-gap{ gap:var(--grid-gap); } .half-gap, .sheet-half-gap{ gap:var(--half-gap); } .tiny-gap, .sheet-tiny-gap{ gap:var(--tiny-gap); } .big-gap, .sheet-big-gap{ gap:var(--big-gap); } .no-gap, .sheet-no-gap{ gap:0; } .flex-min-content, .sheet-flex-min-content{ flex: 1 1 min-content; } input.flex-min-content, input.sheet-flex-min-content{ width:0; } .align-self-stretch, .sheet-align-self-stretch{ align-self:stretch; } .align-self-start, .sheet-align-self-start{ align-self:start; } .align-self-end, .sheet-align-self-end{ align-self:end; } .align-items-center, .sheet-align-items-center{ align-items:center; } .align-items-end, .sheet-align-items-end{ align-items: end; } .flex-box > .span-all{ width:100%; } .tall-2{ grid-row: span 2; } }