Заполнение

fill
hover

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

Классы

Класс Значение
fill-transparent fill: var(--sf-transparent);
fill-current fill: currentColor;
fill-white fill:
rgba(var(--sf-white-r),
var(--sf-white-g),
var(--sf-white-b),
var(--sf-border--alfa));
fill-black fill:
rgba(var(--sf-black-r),
var(--sf-black-g),
var(--sf-black-b),
var(--sf-border--alfa));
fill-gray-1 fill:
rgba(var(--sf-gray-1-r),
var(--sf-gray-1-g),
var(--sf-gray-1-b),
var(--sf-border--alfa));
fill-gray-2 fill:
rgba(var(--sf-gray-2-r),
var(--sf-gray-2-g),
var(--sf-gray-2-b),
var(--sf-border--alfa));
fill-gray-3 fill:
rgba(var(--sf-gray-3-r),
var(--sf-gray-3-g),
var(--sf-gray-3-b),
var(--sf-border--alfa));
fill-gray-4 fill:
rgba(var(--sf-gray-4-r),
var(--sf-gray-4-g),
var(--sf-gray-4-b),
var(--sf-border--alfa));
fill-gray-5 fill:
rgba(var(--sf-gray-5-r),
var(--sf-gray-5-g),
var(--sf-gray-5-b),
var(--sf-border--alfa));
fill-gray-6 fill:
rgba(var(--sf-gray-6-r),
var(--sf-gray-6-g),
var(--sf-gray-6-b),
var(--sf-border--alfa));
fill-gray-7 fill:
rgba(var(--sf-gray-7-r),
var(--sf-gray-7-g),
var(--sf-gray-7-b),
var(--sf-border--alfa));
fill-gray-8 fill:
rgba(var(--sf-gray-8-r),
var(--sf-gray-8-g),
var(--sf-gray-8-b),
var(--sf-border--alfa));
fill-gray-9 fill:
rgba(var(--sf-gray-9-r),
var(--sf-gray-9-g),
var(--sf-gray-9-b),
var(--sf-border--alfa));
fill-red-1 fill:
rgba(var(--sf-red-1-r),
var(--sf-red-1-g),
var(--sf-red-1-b),
var(--sf-border--alfa));
fill-red-2 fill:
rgba(var(--sf-red-2-r),
var(--sf-red-2-g),
var(--sf-red-2-b),
var(--sf-border--alfa));
fill-red-3 fill:
rgba(var(--sf-red-3-r),
var(--sf-red-3-g),
var(--sf-red-3-b),
var(--sf-border--alfa));
fill-red-4 fill:
rgba(var(--sf-red-4-r),
var(--sf-red-4-g),
var(--sf-red-4-b),
var(--sf-border--alfa));
fill-red-5 fill:
rgba(var(--sf-red-5-r),
var(--sf-red-5-g),
var(--sf-red-5-b),
var(--sf-border--alfa));
fill-red-6 fill:
rgba(var(--sf-red-6-r),
var(--sf-red-6-g),
var(--sf-red-6-b),
var(--sf-border--alfa));
fill-red-7 fill:
rgba(var(--sf-red-7-r),
var(--sf-red-7-g),
var(--sf-red-7-b),
var(--sf-border--alfa));
fill-red-8 fill:
rgba(var(--sf-red-8-r),
var(--sf-red-8-g),
var(--sf-red-8-b),
var(--sf-border--alfa));
fill-red-9 fill:
rgba(var(--sf-red-9-r),
var(--sf-red-9-g),
var(--sf-red-9-b),
var(--sf-border--alfa));
fill-orange-1 fill:
rgba(var(--sf-orange-1-r),
var(--sf-orange-1-g),
var(--sf-orange-1-b),
var(--sf-border--alfa));
fill-orange-2 fill:
rgba(var(--sf-orange-2-r),
var(--sf-orange-2-g),
var(--sf-orange-2-b),
var(--sf-border--alfa));
fill-orange-3 fill:
rgba(var(--sf-orange-3-r),
var(--sf-orange-3-g),
var(--sf-orange-3-b),
var(--sf-border--alfa));
fill-orange-4 fill:
rgba(var(--sf-orange-4-r),
var(--sf-orange-4-g),
var(--sf-orange-4-b),
var(--sf-border--alfa));
fill-orange-5 fill:
rgba(var(--sf-orange-5-r),
var(--sf-orange-5-g),
var(--sf-orange-5-b),
var(--sf-border--alfa));
fill-orange-6 fill:
rgba(var(--sf-orange-6-r),
var(--sf-orange-6-g),
var(--sf-orange-6-b),
var(--sf-border--alfa));
fill-orange-7 fill:
rgba(var(--sf-orange-7-r),
var(--sf-orange-7-g),
var(--sf-orange-7-b),
var(--sf-border--alfa));
fill-orange-8 fill:
rgba(var(--sf-orange-8-r),
var(--sf-orange-8-g),
var(--sf-orange-8-b),
var(--sf-border--alfa));
fill-orange-9 fill:
rgba(var(--sf-orange-9-r),
var(--sf-orange-9-g),
var(--sf-orange-9-b),
var(--sf-border--alfa));
fill-yellow-1 fill:
rgba(var(--sf-yellow-1-r),
var(--sf-yellow-1-g),
var(--sf-yellow-1-b),
var(--sf-border--alfa));
fill-yellow-2 fill:
rgba(var(--sf-yellow-2-r),
var(--sf-yellow-2-g),
var(--sf-yellow-2-b),
var(--sf-border--alfa));
fill-yellow-3 fill:
rgba(var(--sf-yellow-3-r),
var(--sf-yellow-3-g),
var(--sf-yellow-3-b),
var(--sf-border--alfa));
fill-yellow-4 fill:
rgba(var(--sf-yellow-4-r),
var(--sf-yellow-4-g),
var(--sf-yellow-4-b),
var(--sf-border--alfa));
fill-yellow-5 fill:
rgba(var(--sf-yellow-5-r),
var(--sf-yellow-5-g),
var(--sf-yellow-5-b),
var(--sf-border--alfa));
fill-yellow-6 fill:
rgba(var(--sf-yellow-6-r),
var(--sf-yellow-6-g),
var(--sf-yellow-6-b),
var(--sf-border--alfa));
fill-yellow-7 fill:
rgba(var(--sf-yellow-7-r),
var(--sf-yellow-7-g),
var(--sf-yellow-7-b),
var(--sf-border--alfa));
fill-yellow-8 fill:
rgba(var(--sf-yellow-8-r),
var(--sf-yellow-8-g),
var(--sf-yellow-8-b),
var(--sf-border--alfa));
fill-yellow-9 fill:
rgba(var(--sf-yellow-9-r),
var(--sf-yellow-9-g),
var(--sf-yellow-9-b),
var(--sf-border--alfa));
fill-green-1 fill:
rgba(var(--sf-green-1-r),
var(--sf-green-1-g),
var(--sf-green-1-b),
var(--sf-border--alfa));
fill-green-2 fill:
rgba(var(--sf-green-2-r),
var(--sf-green-2-g),
var(--sf-green-2-b),
var(--sf-border--alfa));
fill-green-3 fill:
rgba(var(--sf-green-3-r),
var(--sf-green-3-g),
var(--sf-green-3-b),
var(--sf-border--alfa));
fill-green-4 fill:
rgba(var(--sf-green-4-r),
var(--sf-green-4-g),
var(--sf-green-4-b),
var(--sf-border--alfa));
fill-green-5 fill:
rgba(var(--sf-green-5-r),
var(--sf-green-5-g),
var(--sf-green-5-b),
var(--sf-border--alfa));
fill-green-6 fill:
rgba(var(--sf-green-6-r),
var(--sf-green-6-g),
var(--sf-green-6-b),
var(--sf-border--alfa));
fill-green-7 fill:
rgba(var(--sf-green-7-r),
var(--sf-green-7-g),
var(--sf-green-7-b),
var(--sf-border--alfa));
fill-green-8 fill:
rgba(var(--sf-green-8-r),
var(--sf-green-8-g),
var(--sf-green-8-b),
var(--sf-border--alfa));
fill-green-9 fill:
rgba(var(--sf-green-9-r),
var(--sf-green-9-g),
var(--sf-green-9-b),
var(--sf-border--alfa));
fill-blue-1 fill:
rgba(var(--sf-blue-1-r),
var(--sf-blue-1-g),
var(--sf-blue-1-b),
var(--sf-border--alfa));
fill-blue-2 fill:
rgba(var(--sf-blue-2-r),
var(--sf-blue-2-g),
var(--sf-blue-2-b),
var(--sf-border--alfa));
fill-blue-3 fill:
rgba(var(--sf-blue-3-r),
var(--sf-blue-3-g),
var(--sf-blue-3-b),
var(--sf-border--alfa));
fill-blue-4 fill:
rgba(var(--sf-blue-4-r),
var(--sf-blue-4-g),
var(--sf-blue-4-b),
var(--sf-border--alfa));
fill-blue-5 fill:
rgba(var(--sf-blue-5-r),
var(--sf-blue-5-g),
var(--sf-blue-5-b),
var(--sf-border--alfa));
fill-blue-6 fill:
rgba(var(--sf-blue-6-r),
var(--sf-blue-6-g),
var(--sf-blue-6-b),
var(--sf-border--alfa));
fill-blue-7 fill:
rgba(var(--sf-blue-7-r),
var(--sf-blue-7-g),
var(--sf-blue-7-b),
var(--sf-border--alfa));
fill-blue-8 fill:
rgba(var(--sf-blue-8-r),
var(--sf-blue-8-g),
var(--sf-blue-8-b),
var(--sf-border--alfa));
fill-blue-9 fill:
rgba(var(--sf-blue-9-r),
var(--sf-blue-9-g),
var(--sf-blue-9-b),
var(--sf-border--alfa));
fill-purple-1 fill:
rgba(var(--sf-purple-1-r),
var(--sf-purple-1-g),
var(--sf-purple-1-b),
var(--sf-border--alfa));
fill-purple-2 fill:
rgba(var(--sf-purple-2-r),
var(--sf-purple-2-g),
var(--sf-purple-2-b),
var(--sf-border--alfa));
fill-purple-3 fill:
rgba(var(--sf-purple-3-r),
var(--sf-purple-3-g),
var(--sf-purple-3-b),
var(--sf-border--alfa));
fill-purple-4 fill:
rgba(var(--sf-purple-4-r),
var(--sf-purple-4-g),
var(--sf-purple-4-b),
var(--sf-border--alfa));
fill-purple-5 fill:
rgba(var(--sf-purple-5-r),
var(--sf-purple-5-g),
var(--sf-purple-5-b),
var(--sf-border--alfa));
fill-purple-6 fill:
rgba(var(--sf-purple-6-r),
var(--sf-purple-6-g),
var(--sf-purple-6-b),
var(--sf-border--alfa));
fill-purple-7 fill:
rgba(var(--sf-purple-7-r),
var(--sf-purple-7-g),
var(--sf-purple-7-b),
var(--sf-border--alfa));
fill-purple-8 fill:
rgba(var(--sf-purple-8-r),
var(--sf-purple-8-g),
var(--sf-purple-8-b),
var(--sf-border--alfa));
fill-purple-9 fill:
rgba(var(--sf-purple-9-r),
var(--sf-purple-9-g),
var(--sf-purple-9-b),
var(--sf-border--alfa));
fill-pink-1 fill:
rgba(var(--sf-pink-1-r),
var(--sf-pink-1-g),
var(--sf-pink-1-b),
var(--sf-border--alfa));
fill-pink-2 fill:
rgba(var(--sf-pink-2-r),
var(--sf-pink-2-g),
var(--sf-pink-2-b),
var(--sf-border--alfa));
fill-pink-3 fill:
rgba(var(--sf-pink-3-r),
var(--sf-pink-3-g),
var(--sf-pink-3-b),
var(--sf-border--alfa));
fill-pink-4 fill:
rgba(var(--sf-pink-4-r),
var(--sf-pink-4-g),
var(--sf-pink-4-b),
var(--sf-border--alfa));
fill-pink-5 fill:
rgba(var(--sf-pink-5-r),
var(--sf-pink-5-g),
var(--sf-pink-5-b),
var(--sf-border--alfa));
fill-pink-6 fill:
rgba(var(--sf-pink-6-r),
var(--sf-pink-6-g),
var(--sf-pink-6-b),
var(--sf-border--alfa));
fill-pink-7 fill:
rgba(var(--sf-pink-7-r),
var(--sf-pink-7-g),
var(--sf-pink-7-b),
var(--sf-border--alfa));
fill-pink-8 fill:
rgba(var(--sf-pink-8-r),
var(--sf-pink-8-g),
var(--sf-pink-8-b),
var(--sf-border--alfa));
fill-pink-9 fill:
rgba(var(--sf-pink-9-r),
var(--sf-pink-9-g),
var(--sf-pink-9-b),
var(--sf-border--alfa));
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-red-6">
    <!-- ... -->
</svg>

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