Обводка

stroke-color
hover

В SIMAI Framework с помощью модифкаторов можно управлять цветом обводки SVG-изображений.

Классы

Класс Значение
stroke-main stroke:
var(--sf-color--text-main);
stroke-subordinate stroke:
var(--sf-color--text-subordinate);
stroke-additional stroke:
var(--sf-color--text-additional);
stroke-inverse stroke:
var(--sf-color--text-inverse);
stroke-primary-contrast stroke:
var(--sf-color--primary-contrast);
stroke-primary-default stroke:
var(--sf-color--primary-default);
stroke-primary-inverse stroke:
var(--sf-color--primary-inverse);
stroke-secondary-contrast stroke:
var(--sf-color--secondary-contrast);
stroke-secondary-default stroke:
var(--sf-color--secondary-default);
stroke-secondary-inverse stroke:
var(--sf-color--secondary-inverse);
stroke-tertiary-contrast stroke:
var(--sf-color--tertiary-contrast);
stroke-tertiary-default stroke:
var(--sf-color--tertiary-default);
stroke-tertiary-inverse stroke:
var(--sf-color--tertiary-inverse);
stroke-info-contrast stroke:
var(--sf-color--info-contrast);
stroke-info-default stroke:
var(--sf-color--info-default);
stroke-info-inverse stroke:
var(--sf-color--info-inverse);
stroke-success-contrast stroke:
var(--sf-color--success-contrast);
stroke-success-default stroke:
var(--sf-color--success-default);
stroke-success-inverse stroke:
var(--sf-color--success-inverse);
stroke-warning-contrast stroke:
var(--sf-color--warning-contrast);
stroke-warning-default stroke:
var(--sf-color--warning-default);
stroke-warning-inverse stroke:
var(--sf-color--warning-inverse);
stroke-danger-contrast stroke:
var(--sf-color--danger-contrast);
stroke-danger-default stroke:
var(--sf-color--danger-default);
stroke-danger-inverse stroke:
var(--sf-color--danger-inverse);

Описание

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

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

  • Модификатор. Обязательный параметр.

Примеры

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

<svg class="stroke-danger-default">
    <!-- ... -->
</svg>

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