Skip to content

CSS: maskglobal

.--mask-overlay — Een globale, dubbele kopie van de overlay-modifiers van de mask-component — --mask-overlay, --mask-fullscreen, --mask-blur — bruikbaar los of aaneengeschakeld op elk component, zonder het in een .instui-mask-element te wikkelen.

Source: index.ts

Gebruik

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

Voorbeelden

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

Modifiers

ModifierBeschrijving
.--mask-blurVervaag wat zich achter het masker bevindt met een backdrop-filter.
.--mask-fullscreenVastgezet aan de viewport en bedekt deze met een hoge z-index.
.--mask-overlayDe volledige masker-overlay (positie, centrering, achtergrond).

Gebruikte tokens

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