CSS: mask

.instui-mask — An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native <dialog> (its ::backdrop is the mask). Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the mask global utility.

Source: mask.css

Utilisation

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

Exemples

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

Modificateurs

Modificateur	Description
.-blur	Floutez ce qui se trouve derrière le masque à l'aide d'un backdrop-filter.
.-fullscreen	Fixé à la fenêtre d'affichage, la recouvrant avec un z-index élevé.

Tokens consommés

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