Заполнение

fill
hover

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

Классы

Класс Значение
fill-main fill:
var(--sf-color--text-main);
fill-subordinate fill:
var(--sf-color--text-subordinate);
fill-additional fill:
var(--sf-color--text-additional);
fill-inverse fill:
var(--sf-color--text-inverse);
fill-primary-contrast fill:
var(--sf-color--primary-contrast);
fill-primary-default fill:
var(--sf-color--primary-default);
fill-primary-inverse fill:
var(--sf-color--primary-inverse);
fill-secondary-contrast fill:
var(--sf-color--secondary-contrast);
fill-secondary-default fill:
var(--sf-color--secondary-default);
fill-secondary-inverse fill:
var(--sf-color--secondary-inverse);
fill-tertiary-contrast fill:
var(--sf-color--tertiary-contrast);
fill-tertiary-default fill:
var(--sf-color--tertiary-default);
fill-tertiary-inverse fill:
var(--sf-color--tertiary-inverse);
fill-info-contrast fill:
var(--sf-color--info-contrast);
fill-info-default fill:
var(--sf-color--info-default);
fill-info-inverse fill:
var(--sf-color--info-inverse);
fill-success-contrast fill:
var(--sf-color--success-contrast);
fill-success-default fill:
var(--sf-color--success-default);
fill-success-inverse fill:
var(--sf-color--success-inverse);
fill-warning-contrast fill:
var(--sf-color--warning-contrast);
fill-warning-default fill:
var(--sf-color--warning-default);
fill-warning-inverse fill:
var(--sf-color--warning-inverse);
fill-danger-contrast fill:
var(--sf-color--danger-contrast);
fill-danger-default fill:
var(--sf-color--danger-default);
fill-danger-inverse fill:
var(--sf-color--danger-inverse);
fill-fb #2B74E1
fill-youtube #F60D00
fill-whatsapp #30B944
fill-wechat #2CAD19
fill-tiktok #000000
fill-sinaweibo #E32429
fill-qq #000000
fill-telegram #36A7E7
fill-snapchat #FDFC02
fill-kuaishou #F74908
fill-qzone #FACE00
fill-pinterest #CD0900
fill-twitter #349AEF
fill-reddit #F74502
fill-quora #B92C26
fill-msteams #2C3794
fill-linkedin #2466C2
fill-vk #0077FF
fill-viber #7360F2
fill-vimeo #1AB7EA
fill-ok #EE8208
fill-tumblr #001935
fill-behance #0057FF
fill-soundcloud #FF5500

Описание

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

Примеры

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

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

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