CSS: mask

.instui-mask — Una superposición en flujo que rellena su elemento padre posicionado y centra su contenido — p. ej., un spinner sobre una tarjeta. Para un modal, prefiera un <dialog> nativo (su ::backdrop es la máscara). Cada uno de estos modificadores también está disponible globalmente (a pelo, o encadenado a cualquier otro componente) — vea la utilidad global mask.

Source: mask.css

Uso

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

Ejemplos

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

Modificadores

Modificador	Descripción
.-blur	Desenfoca lo que está detrás de la máscara con un backdrop-filter.
.-fullscreen	Fijo al viewport, cubriéndolo con un 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))