Градиент фона

gradient-color

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

Классы

Класс Значение Цвет
gr1-surface-highest --sf-gradient--color-1:
var(--sf-color--surface-highest);
gr2-surface-highest --sf-gradient--color-2:
var(--sf-color--surface-highest);
gr1-surface-high --sf-gradient--color-1:
var(--sf-color--surface-high);
gr2-surface-high --sf-gradient--color-2:
var(--sf-color--surface-high);
gr1-surface-default --sf-gradient--color-1:
var(--sf-color--surface-default);
gr2-surface-default --sf-gradient--color-2:
var(--sf-color--surface-default);
gr1-surface-low --sf-gradient--color-1:
var(--sf-color--surface-low);
gr2-surface-low --sf-gradient--color-2:
var(--sf-color--surface-low);
gr1-surface-lowest --sf-gradient--color-1:
var(--sf-color--surface-lowest);
gr2-surface-lowest --sf-gradient--color-2:
var(--sf-color--surface-lowest);
gr1-surface-inverse --sf-gradient--color-1:
var(--sf-color--surface-inverse);
gr2-surface-inverse --sf-gradient--color-2:
var(--sf-color--surface-inverse);
gr1-surface-variant --sf-gradient--color-1:
var(--sf-color--surface-variant);
gr2-surface-variant --sf-gradient--color-2:
var(--sf-color--surface-variant);
gr1-primary-default --sf-gradient--color-1:
var(--sf-color--primary-default);
gr2-primary-default --sf-gradient--color-2:
var(--sf-color--primary-default);
gr1-primary-tonal --sf-gradient--color-1:
var(--sf-color--primary-tonal);
gr2-primary-tonal --sf-gradient--color-2:
var(--sf-color--primary-tonal);
gr1-primary-inverse --sf-gradient--color-1:
var(--sf-color--primary-inverse);
gr2-primary-inverse --sf-gradient--color-2:
var(--sf-color--primary-inverse);
gr1-primary-contrast --sf-gradient--color-1:
var(--sf-color--primary-contrast);
gr2-primary-contrast --sf-gradient--color-2:
var(--sf-color--primary-contrast);
gr1-secondary-default --sf-gradient--color-1:
var(--sf-color--secondary-default);
gr2-secondary-default --sf-gradient--color-2:
var(--sf-color--secondary-default);
gr1-secondary-tonal --sf-gradient--color-1:
var(--sf-color--secondary-tonal);
gr2-secondary-tonal --sf-gradient--color-2:
var(--sf-color--secondary-tonal);
gr1-secondary-inverse --sf-gradient--color-1:
var(--sf-color--secondary-inverse);
gr2-secondary-inverse --sf-gradient--color-2:
var(--sf-color--secondary-inverse);
gr1-secondary-contrast --sf-gradient--color-1:
var(--sf-color--secondary-contrast);
gr2-secondary-contrast --sf-gradient--color-2:
var(--sf-color--secondary-contrast);
gr1-tertiary-default --sf-gradient--color-1:
var(--sf-color--tertiary-default);
gr2-tertiary-default --sf-gradient--color-2:
var(--sf-color--tertiary-default);
gr1-tertiary-tonal --sf-gradient--color-1:
var(--sf-color--tertiary-tonal);
gr2-tertiary-tonal --sf-gradient--color-2:
var(--sf-color--tertiary-tonal);
gr1-tertiary-inverse --sf-gradient--color-1:
var(--sf-color--tertiary-inverse);
gr2-tertiary-inverse --sf-gradient--color-2:
var(--sf-color--tertiary-inverse);
gr1-tertiary-contrast --sf-gradient--color-1:
var(--sf-color--tertiary-contrast);
gr2-tertiary-contrast --sf-gradient--color-2:
var(--sf-color--tertiary-contrast);
gr1-info-default --sf-gradient--color-1:
var(--sf-color--info-default);
gr2-info-default --sf-gradient--color-2:
var(--sf-color--info-default);
gr1-info-tonal --sf-gradient--color-1:
var(--sf-color--info-tonal);
gr2-info-tonal --sf-gradient--color-2:
var(--sf-color--info-tonal);
gr1-info-inverse --sf-gradient--color-1:
var(--sf-color--info-inverse);
gr2-info-inverse --sf-gradient--color-2:
var(--sf-color--info-inverse);
gr1-info-contrast --sf-gradient--color-1:
var(--sf-color--info-contrast);
gr2-info-contrast --sf-gradient--color-2:
var(--sf-color--info-contrast);
gr1-success-default --sf-gradient--color-1:
var(--sf-color--success-default);
gr2-success-default --sf-gradient--color-2:
var(--sf-color--success-default);
gr1-success-tonal --sf-gradient--color-1:
var(--sf-color--success-tonal);
gr2-success-tonal --sf-gradient--color-2:
var(--sf-color--success-tonal);
gr1-success-inverse --sf-gradient--color-1:
var(--sf-color--success-inverse);
gr2-success-inverse --sf-gradient--color-2:
var(--sf-color--success-inverse);
gr1-success-contrast --sf-gradient--color-1:
var(--sf-color--success-contrast);
gr2-success-contrast --sf-gradient--color-2:
var(--sf-color--success-contrast);
gr1-warning-default --sf-gradient--color-1:
var(--sf-color--warning-default);
gr2-warning-default --sf-gradient--color-2:
var(--sf-color--warning-default);
gr1-warning-tonal --sf-gradient--color-1:
var(--sf-color--warning-tonal);
gr2-warning-tonal --sf-gradient--color-2:
var(--sf-color--warning-tonal);
gr1-warning-inverse --sf-gradient--color-1:
var(--sf-color--warning-inverse);
gr2-warning-inverse --sf-gradient--color-2:
var(--sf-color--warning-inverse);
gr1-warning-contrast --sf-gradient--color-1:
var(--sf-color--warning-contrast);
gr2-warning-contrast --sf-gradient--color-2:
var(--sf-color--warning-contrast);
gr1-danger-default --sf-gradient--color-1:
var(--sf-color--danger-default);
gr2-danger-default --sf-gradient--color-2:
var(--sf-color--danger-default);
gr1-danger-tonal --sf-gradient--color-1:
var(--sf-color--danger-tonal);
gr2-danger-tonal --sf-gradient--color-2:
var(--sf-color--danger-tonal);
gr1-danger-inverse --sf-gradient--color-1:
var(--sf-color--danger-inverse);
gr2-danger-inverse --sf-gradient--color-2:
var(--sf-color--danger-inverse);
gr1-danger-contrast --sf-gradient--color-1:
var(--sf-color--danger-contrast);
gr2-danger-contrast --sf-gradient--color-2:
var(--sf-color--danger-contrast);
gr1-transparent --sf-gradient--color-1:
var(--sf-transparent);
gr2-transparent --sf-gradient--color-2:
var(--sf-transparent);
gr1-current --sf-gradient--color-1:
var(--sf-current);
gr2-current --sf-gradient--color-2:
var(--sf-current);
gr1-inherit --sf-gradient--color-1:
var(--sf-inherit);
gr2-inherit --sf-gradient--color-2:
var(--sf-inherit);

Описание

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

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • gr-line-2 - для линейного градиента с двумя цветами;
    • gr-line-3 - для линейного градиента с тремя цветами;
    • gr-radial-2 - для радиального градиента с двумя цветами;
    • gr-radial-3 - для радиального градиента с тремя цветами;
    • gr-conic-2 - для конического градиента с двумя цветами;
    • gr-conic-3 - для конического градиента с тремя цветами;

Примеры

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

<div class="gr-line-2 gr1-danger-default gr2-primary-default ..."></div>

Переменные

По умолчанию установлены следующие значения переменных:

Переменная Значение
--sf-gradient--angle: 90deg;

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