Skip to content

CSS: maskglobal

.--mask-overlay — A global, dual copy of the mask component's overlay modifiers — --mask-overlay, --mask-fullscreen, --mask-blur — usable bare or chained onto any component, without wrapping in a .instui-mask element.

Source: index.ts

Usage

css
@import "@pantoken/components/utilities.css";

Examples

html
<button class="instui-button --mask-overlay">…</button>

Modifiers

ModifierDescription
.--mask-blurBlur what's behind the mask with a backdrop-filter.
.--mask-fullscreenFixed to the viewport, covering it at a high z-index.
.--mask-overlayThe full mask overlay (position, centring, background).

Tokens consumed

TokenTypeValue
--instui-component-mask-background-color<color>LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))