[ @sdxc/u/state ]
not
A selector wrapper for negated state: wraps selector in :not(...) and applies the given utilities there.
import { not } from "@sdxc/u/state";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.not(":disabled", u.opacity(100)) | css({ "&:not(:disabled)": { opacity: 1 } }) |
Examples
Basic example
Pass a selector to not() to apply utilities everywhere that selector does not match. Hover both buttons:
<div mix={[...]}>
<button
type="button"
mix={[
bg("brand.solid"),
fg("brand.onSolid"),
not(":disabled", [hover(bg("color.brand.800")), cursor("pointer")]),
disabled(opacity(50)),
...,
]}
>
Archive
</button>
<button
type="button"
disabled
mix={[
bg("brand.solid"),
fg("brand.onSolid"),
not(":disabled", [hover(bg("color.brand.800")), cursor("pointer")]),
disabled(opacity(50)),
...,
]}
>
Archive
</button>
</div>Every item but the last
Negate a structural pseudo-class, like not(":last-child", …), to separate items without a border after the final one:
- Inbox
- Drafts
- Sent
<ul mix={[...]}>
<li
mix={[
pb(2),
not(":last-child", borderEdge("block-end", { color: "neutral.border", width: 1 })),
...,
]}
>
Inbox
</li>
<li
mix={[
pb(2),
not(":last-child", borderEdge("block-end", { color: "neutral.border", width: 1 })),
...,
]}
>
Drafts
</li>
<li
mix={[
pb(2),
not(":last-child", borderEdge("block-end", { color: "neutral.border", width: 1 })),
...,
]}
>
Sent
</li>
</ul>Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.not(":disabled", u.opacity("2.75rem"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.not(":disabled", u.opacity(100)))Signature
u.not(selector: string, input: UtilityInput<Node>)