CSS: mask ​

.instui-mask — Una superposició en flux que omple el seu element pare posicionat i centra el seu contingut — p. ex., un indicador de càrrega sobre una targeta. Per a un modal, prefereix un <dialog> natiu (la seva ::backdrop és la màscara). Cadascun d'aquests modificadors també està disponible globalment (sols, o encadenat a qualsevol altre component) — consulta la utilitat global mask.

Source: mask.css

Ús ​

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

Exemples ​

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

Modificadors ​

ModificadorDescripció
.-blurDifumina el que hi ha darrere de la màscara amb un backdrop-filter.
.-fullscreenFixat a la finestra d'visualització, cobrint-la amb un z-index alt.

Tokens consumits ​

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