CSS: mask

.instui-mask — Een in-flow overlay die zijn gepositioneerde ouder vult en de inhoud centreert — bijv. een spinner boven een kaart. Voor een modal heeft een native <dialog> de voorkeur (de ::backdrop daarvan is het masker). Elk van deze modifiers is ook globaal beschikbaar (ongeprefixt, of gekoppeld aan elk ander component) — zie de mask globale utility.

Source: mask.css

Gebruik

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

Voorbeelden

<div style="position: relative">
  <div class="instui-mask">
    <span class="instui-spinner"></span>
  </div>
</div>

Modifiers

Modifier	Beschrijving
.-blur	Vervaag wat zich achter het masker bevindt met een backdrop-filter.
.-fullscreen	Vastgezet aan de viewport en bedekt deze met een hoge z-index.

Gebruikte tokens

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