Цвет фона

background-color
hover
focus
active

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

Классы

Класс Значение Цвет
bg-transparent background-color:
var(--sf-transparent);
bg-current background-color:
var(--sf-current);
bg-surface-0 background-color:
var(--sf-surface-0);
bg-surface-1 background-color:
var(--sf-surface-1);
bg-surface-2 background-color:
var(--sf-surface-2);
bg-surface-3 background-color:
var(--sf-surface-3);
bg-surface-4 background-color:
var(--sf-surface-4);
bg-surface background-color:
var(--sf-surface-1);
bg-surface-inverse background-color:
var(--sf-surface-inverse);
bg-surface-inverse-fixed background-color:
var(--sf-surface-inverse-fixed);
bg-surface-container background-color:
var(--sf-surface-container);
bg-on-surface background-color:
var(--sf-on-surface);
bg-on-surface-variant background-color:
var(--sf-on-surface-variant);
bg-surface-transparent-select background-color:
var(--sf-surface-transparent-select);
bg-surface-transparent-overlay background-color:
var(--sf-surface-transparent-overlay);
bg-disable background-color:
var(--sf-disable);
bg-primary background-color:
var(--sf-primary);
bg-primary-container background-color:
var(--sf-primary-container);
bg-primary-transparent-select background-color:
var(--sf-primary-transparent-select);
bg-primary-transparent-overlay background-color:
var(--sf-primary-transparent-overlay);
bg-secondary background-color:
var(--sf-secondary);
bg-secondary-container background-color:
var(--sf-secondary-container);
bg-secondary-transparent-select background-color:
var(--sf-secondary-transparent-select);
bg-secondary-transparent-overlay background-color:
var(--sf-secondary-transparent-overlay);
bg-tertiary background-color:
var(--sf-tertiary);
bg-tertiary-container background-color:
var(--sf-tertiary-container);
bg-tertiary-transparent-select background-color:
var(--sf-tertiary-transparent-select);
bg-tertiary-transparent-overlay background-color:
var(--sf-tertiary-transparent-overlay);
bg-error background-color:
var(--sf-error);
bg-error-container background-color:
var(--sf-error-container);
bg-error-transparent-select background-color:
var(--sf-error-transparent-select);
bg-error-transparent-overlay background-color:
var(--sf-error-transparent-overlay);
bg-warning background-color:
var(--sf-warning);
bg-warning-container background-color:
var(--sf-warning-container);
bg-warning-transparent-select background-color:
var(--sf-warning-transparent-select);
bg-warning-transparent-overlay background-color:
var(--sf-warning-transparent-overlay);
bg-success background-color:
var(--sf-success);
bg-success-container background-color:
var(--sf-success-container);
bg-success-transparent-select background-color:
var(--sf-success-transparent-select);
bg-success-transparent-overlay background-color:
var(--sf-success-transparent-overlay);

Описание

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

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Цвет. Обязательный параметр. Может принимать значения:
    • bg-transparent - прозрачный;
    • bg-current - текущйи цвет заданный с помощью стиля color;
  • Тон цвета. Не обязательный параметр. Принимает значение от 1 до 10.

Пример

Используйте модификатор bg-{color} для установки цвета фона.

<div class="text-center">
    <button type="button" class="p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 bg-primary color-on-surface-inverse radius-1/3 shadow-2 focus:outline-0" tabindex="-1">
        Click me
    </button>
</div>

Фон при наведении

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

<div class="text-center">
    <button type="button" class="p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 bg-primary hover:bg-primary-container color-on-surface-inverse radius-1/3 shadow-2 focus:outline-0 transition" tabindex="-1">
        Click me
    </button>
</div>

Фон при фокусе

Используйте модификатор focus:bg-{color} для установки цвета фона при фокусе на элемент.

<div class="max-w-f2 w-full m-right-auto m-left-auto">
    <input class="transition border-1 border-surface-variant bg-surface-variant focus:bg-surface-0 color-text-primary appearance-none inline-block w-full radius-1/3 p-top-1 p-bottom-1 p-right-1 p-left-1 focus:outline-0" placeholder="Focus me">
</div>

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