Skip to content

CSS: maskglobal

.--mask-overlay — En global, dobbelt kopi af mask-komponentens overlay-modifikatorer — --mask-overlay, --mask-fullscreen, --mask-blur — kan bruges alene eller kædes på enhver komponent, uden at blive indpakket i et .instui-mask-element.

Source: index.ts

Brug

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

Eksempler

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

Modifikatorer

ModifikatorBeskrivelse
.--mask-blurSlør det, der er bag masken, med et backdrop-filter.
.--mask-fullscreenFastgjort til viewporten og dækker den med høj z-index.
.--mask-overlayDet fulde maske-overlay (position, centrering, baggrund).

Forbrugte tokens

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