CSS: mask

.instui-mask — Μια επικαλυπτική στρώση εντός ροής που γεμίζει τον τοποθετημένο γονέα της και κεντράρει το περιεχόμενό της — π.χ. ένας δείκτης φόρτωσης πάνω από μια κάρτα. Για ένα modal, προτιμήστε ένα εγγενές <dialog> (το ::backdrop του είναι η μάσκα). Κάθε ένας από αυτούς τους τροποποιητές είναι επίσης διαθέσιμος παγκοσμίως (γυμνός, ή προσαρτημένος σε οποιοδήποτε άλλο component) — δείτε τη διεθνική βοηθητική mask.

Source: mask.css

Χρήση

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

Παραδείγματα

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

Τροποποιητές

Τροποποιητής	Περιγραφή
.-blur	Θόλωσε ό,τι βρίσκεται πίσω από τη μάσκα με backdrop-filter.
.-fullscreen	Σταθερό στο viewport, καλύπτοντάς το με υψηλό z-index.

Καταναλωμένα tokens

Token	Τύπος	Τιμή
--instui-component-mask-background-color	<color>	LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))