Цвет тени

drop-shadow-color
sm
md
lg
xl

В SIMAI Framework с помощью модифкаторов можно задать цвет тени.

Классы

Класс Значение
drop-shadow-surface-highest --sf-drop-shadow-color:
var(--sf-color--surface-highest);
drop-shadow-surface-high --sf-drop-shadow-color:
var(--sf-color--surface-high);
drop-shadow-surface-default --sf-drop-shadow-color:
var(--sf-color--surface-default);
drop-shadow-surface-low --sf-drop-shadow-color:
var(--sf-color--surface-low);
drop-shadow-surface-lowest --sf-drop-shadow-color:
var(--sf-color--surface-lowest);
drop-shadow-surface-inverse --sf-drop-shadow-color:
var(--sf-color--surface-inverse);
drop-shadow-surface-variant --sf-drop-shadow-color:
var(--sf-color--surface-variant);
drop-shadow-primary-default --sf-drop-shadow-color:
var(--sf-color--primary-default);
drop-shadow-primary-tonal --sf-drop-shadow-color:
var(--sf-color--primary-tonal);
drop-shadow-primary-inverse --sf-drop-shadow-color:
var(--sf-color--primary-inverse);
drop-shadow-primary-contrast --sf-drop-shadow-color:
var(--sf-color--primary-contrast);
drop-shadow-secondary-default --sf-drop-shadow-color:
var(--sf-color--secondary-default);
drop-shadow-secondary-tonal --sf-drop-shadow-color:
var(--sf-color--secondary-tonal);
drop-shadow-secondary-inverse --sf-drop-shadow-color:
var(--sf-color--secondary-inverse);
drop-shadow-secondary-contrast --sf-drop-shadow-color:
var(--sf-color--secondary-contrast);
drop-shadow-tertiary-default --sf-drop-shadow-color:
var(--sf-color--tertiary-default);
drop-shadow-tertiary-tonal --sf-drop-shadow-color:
var(--sf-color--tertiary-tonal);
drop-shadow-tertiary-inverse --sf-drop-shadow-color:
var(--sf-color--tertiary-inverse);
drop-shadow-tertiary-contrast --sf-drop-shadow-color:
var(--sf-color--tertiary-contrast);
drop-shadow-info-default --sf-drop-shadow-color:
var(--sf-color--info-default);
drop-shadow-info-tonal --sf-drop-shadow-color:
var(--sf-color--info-tonal);
drop-shadow-info-inverse --sf-drop-shadow-color:
var(--sf-color--info-inverse);
drop-shadow-info-contrast --sf-drop-shadow-color:
var(--sf-color--info-contrast);
drop-shadow-success-default --sf-drop-shadow-color:
var(--sf-color--success-default);
drop-shadow-success-tonal --sf-drop-shadow-color:
var(--sf-color--success-tonal);
drop-shadow-success-inverse --sf-drop-shadow-color:
var(--sf-color--success-inverse);
drop-shadow-success-contrast --sf-drop-shadow-color:
var(--sf-color--success-contrast);
drop-shadow-warning-default --sf-drop-shadow-color:
var(--sf-color--warning-default);
drop-shadow-warning-tonal --sf-drop-shadow-color:
var(--sf-color--warning-tonal);
drop-shadow-warning-inverse --sf-drop-shadow-color:
var(--sf-color--warning-inverse);
drop-shadow-warning-contrast --sf-drop-shadow-color:
var(--sf-color--warning-contrast);
drop-shadow-danger-default --sf-drop-shadow-color:
var(--sf-color--danger-default);
drop-shadow-danger-tonal --sf-drop-shadow-color:
var(--sf-color--danger-tonal);
drop-shadow-danger-inverse --sf-drop-shadow-color:
var(--sf-color--danger-inverse);
drop-shadow-danger-contrast --sf-drop-shadow-color:
var(--sf-color--danger-contrast);
drop-shadow-transparent --sf-drop-shadow-color:
var(--sf-transparent);
drop-shadow-current --sf-drop-shadow-color:
var(--sf-current);
drop-shadow-inherit --sf-drop-shadow-color:
var(--sf-inherit);

Описание

Адаптивный модификатор. Задает цвет падающей тени элемента в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • drop-shadow-{color} - цвет падающей тени.

Пример

Используйте модификатор drop-shadow-{color} чтобы задать цвет падающей тени..

drop-shadow-red-4
drop-shadow-green-4
drop-shadow-blue-4 
<div class="bg-error-container drop-shadow-4 drop-shadow-danger-default ...">
    drop-shadow-red-4
</div>
<div class="bg-success-container drop-shadow-4 drop-shadow-success-default ...">
    drop-shadow-green-4
</div>
<div class="bg-primary drop-shadow-4 drop-shadow-info-default ...">
    drop-shadow-blue-4
</div>

Цвет падающей тени при наведении

Используйте модификатор hover:drop-shadow-{color} для установки цвета падающей тени при наведении.

<button class="hover:drop-shadow-4 hover:drop-shadow-danger-default ...">Hover Me</button>

Адаптивность

Для установки тени, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.

Например, используйте модификатор md:drop-shadow-red-2 для установки второго оттенка красного падающей тени для экранов размером Medium и больше.

<div class="md:drop-shadow-red-2 ..."></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью