overflow
divide
Applies a divider border between every child except the last, along axis.
import { divide } from "@sdxc/u/overflow";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.divide() | css({ "& > *:not(:last-child)": { borderStyle: "solid", borderBlockEndWidth: "1px", borderBlockEndColor: "var(--ui-border, color-mix(in oklab, CanvasText 16%, transparent))" } }) |
u.divide("block", "brand", 2) | css({ "& > *:not(:last-child)": { borderStyle: "solid", borderBlockEndWidth: "2px", borderBlockEndColor: "var(--ui-brand-border)" } }) |
u.divide("block", 2) | css({ "& > *:not(:last-child)": { borderStyle: "solid", borderBlockEndWidth: "2px", borderBlockEndColor: "var(--ui-border, color-mix(in oklab, CanvasText 16%, transparent))" } }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.divide()Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.divide())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.divide())Customizing the theme
The custom properties this utility reads, which a theme redefines.
| Variable |
|---|
--ui-border |
--ui-brand-border |
Signature
u.divide(axis?: DivideAxis, colorOrWidth?: ColorValue | (string & {}) | number, maybeWidth?: number)