CSS: mask

.instui-mask — Ein In-Flow-Overlay, das sein positioniertes übergeordnetes Element ausfüllt und seinen Inhalt zentriert — z. B. ein Spinner über einer Karte. Für ein Modal sollte ein natives <dialog> bevorzugt werden (dessen ::backdrop die Maske ist). Jeder dieser Modifikatoren ist auch global verfügbar (alleinstehend oder an jede andere Komponente angehängt) — siehe das globale Utility mask.

Source: mask.css

Verwendung

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

Beispiele

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

Modifikatoren

Modifikator	Beschreibung
.-blur	Unschärfe, was sich hinter der Maske befindet, mit einem backdrop-filter.
.-fullscreen	Am Viewport fixiert und diesen mit hohem z-Index überdeckend.

Verbrauchte Tokens

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