CSS: alert ​

.instui-alert · stable — رسالة داخلية بخانة حالة ملونة وصورة حالة مخفية من مجموعة الأيقونات المشتركة.

الوضع العائم هو الافتراضي، مع سطح ملون مرتفع وإجراءات متناسقة مع اللون. -inline يستخدم سطحًا باستيل، بدون ظل، رمزًا ملونًا بحسب الحالة، زر إغلاق قياسي، إجراءً أساسيًا، وإجراءً ثانويًا ثالثيًا. يشكّل زر إجراء مباشر واحد صفًا بعد النص غير المغلف؛ غلف زرين في .button-group, حيث يصبحان ثانويًا ثم أساسيًا. أي معدل زر يلغي هذا التعيين التلقائي للمتغير. زر الإغلاق المباشر افتراضيًا بحجم صغير؛ أضف معدل حجم لتجاوز ذلك.

Source: alert.css

TIP

JS Enhancement — تُعرض أنماط CSS لهذا المكوّن وتعمل بمفردها؛ اقترن بها @pantoken/interactions لإضافة السلوك التفاعلي. مُعدِّل -timeout يتحكم به ذلك السلوك. انظر جدول المُعدِّلات أدناه.

Accessibility ​

لرسالة مهمّة، أضف role="alert" أو منطقة aria-live حتى تعلنها تقنيات المساعدة؛ عنصر الإغلاق هو زر مُوسوم (يحمل المثال .instui-close-button aria-label="Close").

Usage ​

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

Examples ​

html
<div class="instui-alert -icon-megaphone --mb-md">
  تنبيه باللون الافتراضي </div>
<div class="instui-alert -icon-megaphone -inline --mb-md">
  تنبيه باللون الافتراضي </div>
<div class="instui-alert -color-success --mb-md">
  تهانينا! أنت تستخدم لون "success".
  <button class="instui-button">موافق</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-success -inline --mb-md">
  تهانينا! أنت تستخدم لون "success".
  <button class="instui-button">موافق</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error --mb-md">
  تهانينا! أنت تستخدم لون "success".
  <div class="button-group">
    <button class="instui-button">إلغاء</button>
    <button class="instui-button">موافق</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error -inline --mb-md">
  تهانينا! أنت تستخدم لون "success".
  <div class="button-group">
    <button class="instui-button">إلغاء</button>
    <button class="instui-button">موافق</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-warning --mb-md">
  تهانينا! أنت تستخدم لون "success".
  <div class="button-group">
    <button class="instui-button">إلغاء</button>
    <button class="instui-button">موافق</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-warning -inline --mb-md">
  تهانينا! أنت تستخدم لون "success".
  <div class="button-group">
    <button class="instui-button">إلغاء</button>
    <button class="instui-button">موافق</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>

Structure ​

text
.instui-alert
  ‹content›
  (choose one)
    bare-button
      button (component, 0..1)
    button-group
      .button-group
        button (component, 1..2)
  close-button (component, 0..1)
flowchart TD n0[".instui-alert"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot subgraph sg2 subgraph sg3 ["bare-button"] n4["@component button (0..1)"]:::cssdoc-root end subgraph sg5 ["button-group"] n6[".button-group"]:::cssdoc-root n7(["button"]):::cssdoc-component end end n8(["close-button"]):::cssdoc-component n0 --> n1 n6 -->|1..2| n7 n0 --> sg2 n0 -.->|0..1| n8 click n7 "/api/css/button.md" click n8 "/api/css/close-button.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Slots ​

SlotDescription
contentمحتوى رسالة التنبيه؛ قد يتضمن زر رفض.

Modifiers ​

ModifierDescription
.-color-dangerرسالة خطأ.
.-color-errorAlias — maps to .-color-danger.
.-color-infoمعلوماتية (الافتراضي).
.-color-successرسالة إيجابية/تأكيدية.
.-color-warningرسالة تحذيرية.
.-has-shadow-falseAlias — maps to .-without-shadow.
.-icon-*استبدل صورة الحالة بأيقونة مخصصة (مثال -icon-megaphone)، تُترك بيضاء فوق شريط المتغير الملون.
.-inlineسطح مرتفع لـ
.-screen-reader-onlyمخفي بصريًا لكنه معلَن.
.-timeoutInteraction — The alert will automatically dismiss after a default of 5 seconds.
.-timeout-1قبل الإغلاق التلقائي بثانية واحدة.
.-timeout-2قبل الإغلاق التلقائي بثانيتين.
.-timeout-3قبل الإغلاق التلقائي بثلاث ثوانٍ.
.-timeout-4قبل الإغلاق التلقائي بأربع ثوانٍ.
.-timeout-5قبل الإغلاق التلقائي بخمس ثوانٍ.
.-variant-errorDeprecated — use .-color-danger.
.-variant-infoDeprecated — use .-color-info.
.-variant-successDeprecated — use .-color-success.
.-variant-warningDeprecated — use .-color-warning.
.-without-shadowDeprecated — use .-inline.

Parts ​

PartDescription
.button-groupحاوية للاقتباس والإسناد.

Pseudo-elements ​

Pseudo-elementDescription
::afterصورة الحالة البيضاء، مُقنعة ومُوسَّطة فوق الشريط.
::before—

States ​

StateDescription
[aria-disabled="true"]—
:disabled—

Custom properties ​

PropertyTypeDefaultDescription
--pantoken-alert-glyph<url>—مصدر صورة الحالة منخفض المستوى؛ -icon-<name> يضبطه لك. تجاوزه لأيقونة مخصصة (SVG مشفَّر كعنوان).
--pantoken-alert-icon-bg<color>—تعبئة شريط الحالة الملون خلف الصورة؛ كل متغير -color-* يعيّن تعبئته الخاصة.
--timeout<integer>—ميليثانية قبل الإغلاق التلقائي؛ 0 يقوم بتعطيله. يتطلب حزم تفاعل التنبيه.

Tokens consumed ​

TokenTypeValue
--instui-color-background-interactive-action-primary-active<color>LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-background-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-interactive-action-primary-hover<color>LightDarklight-dark(#234465, #ffffff)
--instui-color-drop-shadow-shadow-color1<color>LightDarklight-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3))
--instui-color-icon-base<color>LightDarklight-dark(#273540, #ffffff)
--instui-color-icon-error<color>LightDarklight-dark(#C51F22, #FA917F)
--instui-color-icon-info<color>LightDarklight-dark(#2369A4, #7FB4F1)
--instui-color-icon-on-color<color>#ffffff
--instui-color-icon-success<color>LightDarklight-dark(#017533, #61C378)
--instui-color-icon-warning<color>LightDarklight-dark(#664800, #E0A300)
--instui-color-stroke-interactive-action-primary-active<color>LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-stroke-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-stroke-interactive-action-primary-hover<color>LightDarklight-dark(#234465, #ffffff)
--instui-color-text-base<color>LightDarklight-dark(#273540, #F2F4F5)
--instui-color-text-interactive-action-primary-base<color>LightDarklight-dark(#ffffff, #1D354F)
--instui-component-alert-border-radius<length>0.75rem
--instui-component-alert-border-style—solid
--instui-component-alert-border-width<length>0.0625rem
--instui-component-alert-content-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-alert-content-font-size<length>1rem
--instui-component-alert-content-font-weight<integer>400
--instui-component-alert-content-line-height<percentage>125%
--instui-component-alert-content-padding-horizontal<length>0.75rem
--instui-component-alert-content-padding-vertical<length>0.75rem
--instui-component-alert-danger-background<color>#E62429
--instui-component-alert-danger-background-inline<color>LightDarklight-dark(#FFE3DE, #750D0F)
--instui-component-alert-danger-border-color<color>#E62429
--instui-component-alert-danger-border-color-inline—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-alert-icon-padding-left<length>0.75rem
--instui-component-alert-icon-padding-vertical<length>1rem
--instui-component-alert-info-background<color>#2B7ABC
--instui-component-alert-info-background-inline<color>LightDarklight-dark(#DEEBFF, #123E62)
--instui-component-alert-info-border-color<color>#2B7ABC
--instui-component-alert-info-border-color-inline—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-alert-success-background<color>#03893D
--instui-component-alert-success-background-inline<color>LightDarklight-dark(#CAF4D0, #01451B)
--instui-component-alert-success-border-color<color>#03893D
--instui-component-alert-success-border-color-inline—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-alert-warning-background<color>LightDarklight-dark(#F0C16C, #8C6400)
--instui-component-alert-warning-background-inline<color>LightDarklight-dark(#F7E7CF, #4D3600)
--instui-component-alert-warning-border-color<color>LightDarklight-dark(#F0C16C, #8C6400)
--instui-component-alert-warning-border-color-inline—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-base-button-primary-disabled-background-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-border-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-text-color<color>LightDarklight-dark(#F2F4F5, #273540)
--instui-component-base-button-primary-ghost-active-background—color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-primary-ghost-border-color—color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 40%, transparent)
--instui-component-base-button-primary-ghost-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-primary-ghost-hover-background—color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 10%, transparent)
--instui-component-base-button-primary-inverse-active-background<color>#E2EAF7
--instui-component-base-button-primary-inverse-background<color>#ffffff
--instui-component-base-button-primary-inverse-border-color<color>#ffffff
--instui-component-base-button-primary-inverse-color<color>#213D5B
--instui-component-base-button-primary-inverse-ghost-active-background<color>rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-ghost-border-color<color>#ffffff
--instui-component-base-button-primary-inverse-ghost-color<color>#ffffff
--instui-component-base-button-primary-inverse-ghost-hover-background<color>rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-hover-background<color>#EEF4FD
--instui-component-base-button-primary-on-color-active-border-color<color>#B6CCEA
--instui-component-base-button-primary-on-color-active-text-color<color>#213D5B
--instui-component-base-button-primary-on-color-disabled-background-color<color>#8D959F
--instui-component-base-button-primary-on-color-disabled-border-color<color>#8D959F
--instui-component-base-button-primary-on-color-disabled-text-color<color>#4A5B68
--instui-component-base-button-primary-on-color-hover-border-color<color>#D5E2F6
--instui-component-base-button-primary-on-color-hover-text-color<color>#213D5B
--instui-component-base-button-secondary-on-color-active-border-color<color>#B6CCEA
--instui-component-base-button-secondary-on-color-active-text-color<color>#ffffff
--instui-component-base-button-secondary-on-color-disabled-border-color<color>#8D959F
--instui-component-base-button-secondary-on-color-disabled-text-color<color>#9EA6AD
--instui-component-base-button-small-font-size<length>0.875rem
--instui-component-base-button-small-height<length>2rem
--instui-component-base-button-small-padding-horizontal<length>0.75rem
--instui-component-base-button-tertiary-active-border-color—color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 30%, transparent)
--instui-component-base-button-tertiary-active-text-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-tertiary-disabled-border-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-tertiary-disabled-text-color<color>LightDarklight-dark(#AAB0B5, #4A5B68)
--instui-component-base-button-tertiary-hover-border-color—color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-tertiary-hover-text-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-shared-tokens-spacing-gap-buttons<length>0.75rem
--instui-component-shared-tokens-spacing-general-space-md<length>0.75rem
--instui-component-text-base-on-color<color>#ffffff
--instui-drop-shadow-blur-elevation4-dropshadow1<length>12px
--instui-drop-shadow-spread-elevation4-dropshadow1<length>6px
--instui-drop-shadow-y-elevation4-dropshadow1<length>8px
--instui-icon-circle-check<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m16%209-5.5%205.5L8%2012%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-circle-x<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-info<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-triangle-alert<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E')
--instui-spacing-space-xs<length>0.25rem
--pantoken-alert-icon-color<color>#ffffff
--pantoken-glyph<url>url("data:image/svg+xml

Subcomponents ​

  • close-button — عنصر الرفض الذي قد يتضمنه التنبيه.