[ @sdxc/u/layout ]
inset
Applies a logical inset shorthand from the spacing scale or a raw CSS length.
import { inset } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.inset(4) | css({ inset: "calc(var(--ui-spacing, 0.25rem) * 4)" }) |
u.inset(0, "auto") | css({ insetBlock: "0", insetInline: "auto" }) |
u.inset(1, 2, 3, 4) | css({ insetBlockStart: "...", insetInlineEnd: "...", insetBlockEnd: "...", insetInlineStart: "..." }) |
Examples
Basic example
Use inset(n) to offset a positioned element from every side of its container at once:
<div mix={[relative(), is(64), bs(36), ...]}>
<div mix={[absolute(), inset(4), ...]}>inset(4)</div>
</div>Block and inline offsets
Pass two values to offset the block axis and then the inline axis, like inset(2, 12):
<div mix={[relative(), is(64), bs(36), ...]}>
<div mix={[absolute(), inset(2, 12), ...]}>inset(2, 12)</div>
</div>Setting each side
Pass four values to offset block-start, inline-end, block-end and inline-start in that order:
<div mix={[relative(), is(80), bs(36), ...]}>
<div mix={[absolute(), inset(2, 4, 12, 16), ...]}>inset(2, 4, 12, 16)</div>
</div>Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.inset("2.75rem")Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.inset(4))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.inset(4))Customizing your theme
Customizing spacing
Every numeric step multiplies --ui-spacing, so redefining it rescales every spacing and sizing utility at once:
:root {
--ui-spacing: 0.25rem;
}Every call that names the step now reads the new value:
inset(4)Signature
u.inset(...values: SpacingValue[])