layout
box-sizing
Applies box-sizing, controlling whether width/height (and the logical inline-size/block-size pair) span padding and border ("border-box") or the content area alone ("content-box", the CSS default).
import { boxSizing } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.boxSizing("border-box") | css({ boxSizing: "border-box" }) |
u.boxSizing("content-box") | css({ boxSizing: "content-box" }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.boxSizing("border-box")Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.boxSizing("border-box"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.boxSizing("border-box"))Signature
u.boxSizing(value: BoxSizingValue)