CSS: mask

.instui-mask — Un overlay in-flow che riempie il suo genitore posizionato e centra il contenuto — es. uno spinner sopra una card. Per una modal, preferire una <dialog> nativa (la sua ::backdrop è la maschera). Ognuno di questi modificatori è disponibile anche globalmente (nudo, o concatenato a qualsiasi altro componente) — vedi l'utilità globale mask.

Source: mask.css

Uso

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

Esempi

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

Modificatori

Modificatore	Descrizione
.-blur	Sfoca ciò che sta dietro la maschera con un backdrop-filter.
.-fullscreen	Fissato alla viewport, la copre con un z-index elevato.

Token consumati

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