CSS: maskglobal ​

.--mask-overlay — eine globale, doppelte Kopie der Overlay-Modifier der Komponente mask — --mask-overlay, --mask-fullscreen, --mask-blur — nutzbar allein oder verkettet an jede Komponente, ohne in ein .instui-mask-Element eingeschlossen zu werden.

Source: index.ts

Verwendung ​

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

Beispiele ​

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

Modifikatoren ​

ModifikatorBeschreibung
.--mask-blurUnschärfe, was sich hinter der Maske befindet, mit einem backdrop-filter.
.--mask-fullscreenAm Viewport fixiert und diesen mit hohem z-Index überdeckend.
.--mask-overlayDie vollständige Masken-Überlagerung (Position, Zentrierung, Hintergrund).

Verbrauchte Tokens ​

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