Skip to content

CSS: maskglobal

.--mask-overlay — Uma cópia global, dupla dos modificadores de sobreposição do componente mask--mask-overlay, --mask-fullscreen, --mask-blur — utilizável isoladamente ou encadeada em qualquer componente, sem envolver em um elemento .instui-mask.

Source: index.ts

Uso

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

Exemplos

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

Modificadores

ModificadorDescrição
.--mask-blurDesfoque o que está atrás da máscara usando backdrop-filter.
.--mask-fullscreenFixado na viewport, cobrindo-a com um z-index alto.
.--mask-overlayA sobreposição de máscara completa (posição, centralização, fundo).

Tokens consumidos

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