CSS: mask

.instui-mask — En in-flow overlay, der udfylder sin positionerede forælder og centrerer sit indhold — f.eks. en spinner over et kort. For et modalvindue, foretrækkes en indbygget <dialog> (dens ::backdrop er masken). Hver af disse modifikatorer er også tilgængelige globalt (som enkeltstående eller kædet på enhver anden komponent) — se mask global utility.

Source: mask.css

Brug

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

Eksempler

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

Modifikatorer

Modifikator	Beskrivelse
.-blur	Slør det, der er bag masken, med et backdrop-filter.
.-fullscreen	Fastgjort til viewporten og dækker den med høj z-index.

Forbrugte tokens

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