Skip to content

CSS: mask

.instui-mask — שכבת־על בתוך הזרימה שממלאת את ההורה הממוקם וממרכזה את התוכן שלה — לדוגמה ספינר מעל כרטיס. עבור מודל, העדף <dialog> מקומי (ה::backdrop שלו הוא המסכה). כל אחד מהמשנים האלה זמין גם ברמה הגלובלית (ללא קידומת, או כשרשור על כל קומפוננטה אחרת) — ראה את כלי הmask הגלובלי.

Source: mask.css

שימוש

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

דוגמאות

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

מחליפים

מחליףתיאור
.-blurטשטש את מה שמאחורי המסכה בעזרת backdrop-filter.
.-fullscreenמקובע ל־viewport, מכסה אותו ב‑z-index גבוה.

אסימוני צריכה

Tokenסוגערך
--instui-component-mask-background-color<color>LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))