CSS: mask

.instui-mask — Um overlay em fluxo que preenche seu elemento pai posicionado e centraliza seu conteúdo — por exemplo, um spinner sobre um card. Para um modal, prefira um <dialog> nativo (seu ::backdrop é a máscara). Cada um desses modificadores também está disponível globalmente (sozinho, ou encadeado a qualquer outro componente) — veja a utilidade global mask.

Source: mask.css

Uso

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

Exemplos

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

Modificadores

Modificador	Descrição
.-blur	Desfoque o que está atrás da máscara usando backdrop-filter.
.-fullscreen	Fixado na viewport, cobrindo-a com um z-index alto.

Tokens consumidos

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