Цвет
В SIMAI Framework используется гибкая система работы с цветом. Вы можете использовать базовые цвета и палитру цветов Material Design. Дополнительно имеется черно белая палитра с прозрачностью. Для работы в рамках светлой или темной цветовой темы предусмотрены специальные цвета, которые меняют свое значение от темы.
Свойства применения цвета
Для того чтобы применять цвет к разным свойствам элемента предусмотрены специальные префиксы, которые указывают к какому именно свойству будет применен цвет:
.c-{цвет}- цвет текста.bg-{цвет}- цвет фона.b-{цвет}- цвет границы.l-{цвет}- цвет ссылки.f-{цвет}- цвет заливки (SVG).s-{цвет}- цвет обводки (SVG)
Цветовая палитра
Цветовая палитра определяет базовые цвета, используемые во фреймворке. Эти цвета подобраны так, чтобы гармонично дополнять друг друга.
Для примения цветов палитры используйте следующую конструкцию: .{префикс}-{базовый цвет}-{насыщенность}
- Префикс - обязательный параметр. Указывает к чему применяется цвет.
- Базовый цвет - обязательный параметр. Указывает наименование базового цвета палитры. Может принимать следующие значения:
gray– серыйred– красныйorange– оранжевыйyellow– желтыйteal– синевато-зеленыйblue– синийindigo– индигоpurple– фиолетовыйpink– розовыйblack– черныйwhite– белый
- Насыщенность - необязательный параметр. Указывает степень насыщенности цвета по отношению к базовому цвету. Может принимать значения от 1 до 9. При этом сам базовый цвет имеет насыщенность 6.
Для черного
black и белого white цвета вмето насыщенности используется прозрачность.gray
gray-1
#F7FAFC
gray-2
#EDF2F7
gray-3
#E2E8F0
gray-4
#CBD5E0
gray-5
#A0AEC0
gray-6
#718096
gray-7
#4A5568
gray-8
#2D3748
gray-9
#1A202C
red
red-1
#FFF5F5
red-2
#FED7D7
red-3
#FEB2B2
red-4
#FC8181
red-5
#F56565
red-6
#E53E3E
red-7
#C53030
red-8
#9B2C2C
red-9
#742A2A
orange
orange-1
#FFFAF0
orange-2
#FEEBC8
orange-3
#FBD38D
orange-4
#F6AD55
orange-5
#ED8936
orange-6
#DD6B20
orange-7
#C05621
orange-8
#9C4221
orange-9
#7B341E
yellow
yellow-1
#FFFFF0
yellow-2
#FEFCBF
yellow-3
#FAF089
yellow-4
#F6E05E
yellow-5
#ECC94B
yellow-6
#D69E2E
yellow-7
#B7791F
yellow-8
#975A16
yellow-9
#744210
green
green-1
#F0FFF4
green-2
#C6F6D5
green-3
#9AE6B4
green-4
#68D391
green-5
#48BB78
green-6
#38A169
green-7
#2F855A
green-8
#276749
green-9
#22543D
teal
teal-1
#E6FFFA
teal-2
#B2F5EA
teal-3
#81E6D9
teal-4
#4FD1C5
teal-5
#38B2AC
teal-6
#319795
teal-7
#2C7A7B
teal-8
#285E61
teal-9
#234E52
blue
blue-1
#EBF8FF
blue-2
#BEE3F8
blue-3
#90CDF4
blue-4
#63B3ED
blue-5
#4299E1
blue-6
#3182CE
blue-7
#2B6CB0
blue-8
#2C5282
blue-9
#2A4365
indigo
indigo-1
#EBF4FF
indigo-2
#C3DAFE
indigo-3
#A3BFFA
indigo-4
#7F9CF5
indigo-5
#667EEA
indigo-6
#5A67D8
indigo-7
#4C51BF
indigo-8
#434190
indigo-9
#3C366B
purple
purple-1
#FAF5FF
purple-2
#E9D8FD
purple-3
#D6BCFA
purple-4
#B794F4
purple-5
#9F7AEA
purple-6
#805AD5
purple-7
#6B46C1
purple-8
#553C9A
purple-9
#44337A
pink
pink-1
#FFF5F7
pink-2
#FED7E2
pink-3
#FBB6CE
pink-4
#F687B3
pink-5
#ED64A6
pink-6
#D53F8C
pink-7
#B83280
pink-8
#97266D
pink-9
#702459
Именные цвета
Используйте следующие именные цвета для указания свойств элементов:
{префикс}-default- цвет по умолччанию{префикс}-primary- основной цвет{префикс}-secondary- вспомогательный цвет{префикс}-success- цвет успеха{префикс}-info- цвет информирования{префикс}-warning- цвет предупреждения{префикс}-danger- цвет опасности
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-default |
.b-default |
.c-default
|
.f-default |
.s-default |
.bg-primary |
.b-primary |
.c-primary
|
.f-primary |
.s-primary |
.bg-secondary |
.b-secondary |
.c-secondary
|
.f-secondary |
.s-secondary |
.bg-success |
.b-success |
.c-success
|
.f-success |
.s-success |
.bg-info |
.b-info |
.c-info
|
.f-info |
.s-info |
.bg-warning |
.b-warning |
.c-warning
|
.f-warning |
.s-warning |
.bg-danger |
.b-danger |
.c-danger
|
.f-danger |
.s-danger |
Цвета социальных сетей
Используйте следующие цвета социальных сетей для указания цвета свойств элементов:
{префикс}-fb- цвет «Фейсбук»{префикс}-vk- цвет «Вконтакте»{префикс}-tw- цвет «Твиттер»{префикс}-gp- цвет «Гугл плюс»{префикс}-pr- цвет «Пинтерес»{префикс}-ok- цвет «Одноклассники»{префикс}-mr- цвет «Мой мир»
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-fb |
.b-fb |
.c-fb
|
.f-fb |
.s-fb |
.bg-vk |
.b-vk |
.c-vk
|
.f-vk |
.s-vk |
.bg-tw |
.b-tw |
.c-tw
|
.f-tw |
.s-tw |
.bg-gp |
.b-gp |
.c-gp
|
.f-gp |
.s-gp |
.bg-pr |
.b-pr |
.c-pr
|
.f-pr |
.s-pr |
.bg-ok |
.b-ok |
.c-ok
|
.f-ok |
.s-ok |
.bg-mr |
.b-mr |
.c-mr
|
.f-mr |
.s-mr |
Базовые цвета
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-gray |
.b-gray |
.c-gray
|
.f-gray |
.s-gray |
.bg-red |
.b-red |
.c-red
|
.f-red |
.s-red |
.bg-orange |
.b-orange |
.c-orange
|
.f-orange |
.s-orange |
.bg-yellow |
.b-yellow |
.c-yellow
|
.f-yellow |
.s-yellow |
.bg-green |
.b-green |
.c-green
|
.f-green |
.s-green |
.bg-teal |
.b-teal |
.c-teal
|
.f-teal |
.s-teal |
.bg-blue |
.b-blue |
.c-blue
|
.f-blue |
.s-blue |
.bg-indigo |
.b-indigo |
.c-indigo
|
.f-indigo |
.s-indigo |
.bg-purple |
.b-purple |
.c-purple
|
.f-purple |
.s-purple |
.bg-pink |
.b-pink |
.c-pink
|
.f-pink |
.s-pink |
.bg-black |
.b-black |
.c-black
|
.f-black |
.s-black |
.bg-white |
.b-white |
.c-white
|
.f-white |
.s-white |
Полная палитра
gray
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-gray-1 |
.b-gray-1 |
.c-gray-1
|
.f-gray-1 |
.s-gray-1 |
.bg-gray-2 |
.b-gray-2 |
.c-gray-2
|
.f-gray-2 |
.s-gray-2 |
.bg-gray-3 |
.b-gray-3 |
.c-gray-3
|
.f-gray-3 |
.s-gray-3 |
.bg-gray-4 |
.b-gray-4 |
.c-gray-4
|
.f-gray-4 |
.s-gray-4 |
.bg-gray-5 |
.b-gray-5 |
.c-gray-5
|
.f-gray-5 |
.s-gray-5 |
.bg-gray-6 |
.b-gray-6 |
.c-gray-6
|
.f-gray-6 |
.s-gray-6 |
.bg-gray-7 |
.b-gray-7 |
.c-gray-7
|
.f-gray-7 |
.s-gray-7 |
.bg-gray-8 |
.b-gray-8 |
.c-gray-8
|
.f-gray-8 |
.s-gray-8 |
.bg-gray-9 |
.b-gray-9 |
.c-gray-9
|
.f-gray-9 |
.s-gray-9 |
red
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-red-1 |
.b-red-1 |
.c-red-1
|
.f-red-1 |
.s-red-1 |
.bg-red-2 |
.b-red-2 |
.c-red-2
|
.f-red-2 |
.s-red-2 |
.bg-red-3 |
.b-red-3 |
.c-red-3
|
.f-red-3 |
.s-red-3 |
.bg-red-4 |
.b-red-4 |
.c-red-4
|
.f-red-4 |
.s-red-4 |
.bg-red-5 |
.b-red-5 |
.c-red-5
|
.f-red-5 |
.s-red-5 |
.bg-red-6 |
.b-red-6 |
.c-red-6
|
.f-red-6 |
.s-red-6 |
.bg-red-7 |
.b-red-7 |
.c-red-7
|
.f-red-7 |
.s-red-7 |
.bg-red-8 |
.b-red-8 |
.c-red-8
|
.f-red-8 |
.s-red-8 |
.bg-red-9 |
.b-red-9 |
.c-red-9
|
.f-red-9 |
.s-red-9 |
orange
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-orange-1 |
.b-orange-1 |
.c-orange-1
|
.f-orange-1 |
.s-orange-1 |
.bg-orange-2 |
.b-orange-2 |
.c-orange-2
|
.f-orange-2 |
.s-orange-2 |
.bg-orange-3 |
.b-orange-3 |
.c-orange-3
|
.f-orange-3 |
.s-orange-3 |
.bg-orange-4 |
.b-orange-4 |
.c-orange-4
|
.f-orange-4 |
.s-orange-4 |
.bg-orange-5 |
.b-orange-5 |
.c-orange-5
|
.f-orange-5 |
.s-orange-5 |
.bg-orange-6 |
.b-orange-6 |
.c-orange-6
|
.f-orange-6 |
.s-orange-6 |
.bg-orange-7 |
.b-orange-7 |
.c-orange-7
|
.f-orange-7 |
.s-orange-7 |
.bg-orange-8 |
.b-orange-8 |
.c-orange-8
|
.f-orange-8 |
.s-orange-8 |
.bg-orange-9 |
.b-orange-9 |
.c-orange-9
|
.f-orange-9 |
.s-orange-9 |
yellow
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-yellow-1 |
.b-yellow-1 |
.c-yellow-1
|
.f-yellow-1 |
.s-yellow-1 |
.bg-yellow-2 |
.b-yellow-2 |
.c-yellow-2
|
.f-yellow-2 |
.s-yellow-2 |
.bg-yellow-3 |
.b-yellow-3 |
.c-yellow-3
|
.f-yellow-3 |
.s-yellow-3 |
.bg-yellow-4 |
.b-yellow-4 |
.c-yellow-4
|
.f-yellow-4 |
.s-yellow-4 |
.bg-yellow-5 |
.b-yellow-5 |
.c-yellow-5
|
.f-yellow-5 |
.s-yellow-5 |
.bg-yellow-6 |
.b-yellow-6 |
.c-yellow-6
|
.f-yellow-6 |
.s-yellow-6 |
.bg-yellow-7 |
.b-yellow-7 |
.c-yellow-7
|
.f-yellow-7 |
.s-yellow-7 |
.bg-yellow-8 |
.b-yellow-8 |
.c-yellow-8
|
.f-yellow-8 |
.s-yellow-8 |
.bg-yellow-9 |
.b-yellow-9 |
.c-yellow-9
|
.f-yellow-9 |
.s-yellow-9 |
green
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-green-1 |
.b-green-1 |
.c-green-1
|
.f-green-1 |
.s-green-1 |
.bg-green-2 |
.b-green-2 |
.c-green-2
|
.f-green-2 |
.s-green-2 |
.bg-green-3 |
.b-green-3 |
.c-green-3
|
.f-green-3 |
.s-green-3 |
.bg-green-4 |
.b-green-4 |
.c-green-4
|
.f-green-4 |
.s-green-4 |
.bg-green-5 |
.b-green-5 |
.c-green-5
|
.f-green-5 |
.s-green-5 |
.bg-green-6 |
.b-green-6 |
.c-green-6
|
.f-green-6 |
.s-green-6 |
.bg-green-7 |
.b-green-7 |
.c-green-7
|
.f-green-7 |
.s-green-7 |
.bg-green-8 |
.b-green-8 |
.c-green-8
|
.f-green-8 |
.s-green-8 |
.bg-green-9 |
.b-green-9 |
.c-green-9
|
.f-green-9 |
.s-green-9 |
teal
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-teal-1 |
.b-teal-1 |
.c-teal-1
|
.f-teal-1 |
.s-teal-1 |
.bg-teal-2 |
.b-teal-2 |
.c-teal-2
|
.f-teal-2 |
.s-teal-2 |
.bg-teal-3 |
.b-teal-3 |
.c-teal-3
|
.f-teal-3 |
.s-teal-3 |
.bg-teal-4 |
.b-teal-4 |
.c-teal-4
|
.f-teal-4 |
.s-teal-4 |
.bg-teal-5 |
.b-teal-5 |
.c-teal-5
|
.f-teal-5 |
.s-teal-5 |
.bg-teal-6 |
.b-teal-6 |
.c-teal-6
|
.f-teal-6 |
.s-teal-6 |
.bg-teal-7 |
.b-teal-7 |
.c-teal-7
|
.f-teal-7 |
.s-teal-7 |
.bg-teal-8 |
.b-teal-8 |
.c-teal-8
|
.f-teal-8 |
.s-teal-8 |
.bg-teal-9 |
.b-teal-9 |
.c-teal-9
|
.f-teal-9 |
.s-teal-9 |
blue
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-blue-1 |
.b-blue-1 |
.c-blue-1
|
.f-blue-1 |
.s-blue-1 |
.bg-blue-2 |
.b-blue-2 |
.c-blue-2
|
.f-blue-2 |
.s-blue-2 |
.bg-blue-3 |
.b-blue-3 |
.c-blue-3
|
.f-blue-3 |
.s-blue-3 |
.bg-blue-4 |
.b-blue-4 |
.c-blue-4
|
.f-blue-4 |
.s-blue-4 |
.bg-blue-5 |
.b-blue-5 |
.c-blue-5
|
.f-blue-5 |
.s-blue-5 |
.bg-blue-6 |
.b-blue-6 |
.c-blue-6
|
.f-blue-6 |
.s-blue-6 |
.bg-blue-7 |
.b-blue-7 |
.c-blue-7
|
.f-blue-7 |
.s-blue-7 |
.bg-blue-8 |
.b-blue-8 |
.c-blue-8
|
.f-blue-8 |
.s-blue-8 |
.bg-blue-9 |
.b-blue-9 |
.c-blue-9
|
.f-blue-9 |
.s-blue-9 |
indigo
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-indigo-1 |
.b-indigo-1 |
.c-indigo-1
|
.f-indigo-1 |
.s-indigo-1 |
.bg-indigo-2 |
.b-indigo-2 |
.c-indigo-2
|
.f-indigo-2 |
.s-indigo-2 |
.bg-indigo-3 |
.b-indigo-3 |
.c-indigo-3
|
.f-indigo-3 |
.s-indigo-3 |
.bg-indigo-4 |
.b-indigo-4 |
.c-indigo-4
|
.f-indigo-4 |
.s-indigo-4 |
.bg-indigo-5 |
.b-indigo-5 |
.c-indigo-5
|
.f-indigo-5 |
.s-indigo-5 |
.bg-indigo-6 |
.b-indigo-6 |
.c-indigo-6
|
.f-indigo-6 |
.s-indigo-6 |
.bg-indigo-7 |
.b-indigo-7 |
.c-indigo-7
|
.f-indigo-7 |
.s-indigo-7 |
.bg-indigo-8 |
.b-indigo-8 |
.c-indigo-8
|
.f-indigo-8 |
.s-indigo-8 |
.bg-indigo-9 |
.b-indigo-9 |
.c-indigo-9
|
.f-indigo-9 |
.s-indigo-9 |
purple
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-purple-1 |
.b-purple-1 |
.c-purple-1
|
.f-purple-1 |
.s-purple-1 |
.bg-purple-2 |
.b-purple-2 |
.c-purple-2
|
.f-purple-2 |
.s-purple-2 |
.bg-purple-3 |
.b-purple-3 |
.c-purple-3
|
.f-purple-3 |
.s-purple-3 |
.bg-purple-4 |
.b-purple-4 |
.c-purple-4
|
.f-purple-4 |
.s-purple-4 |
.bg-purple-5 |
.b-purple-5 |
.c-purple-5
|
.f-purple-5 |
.s-purple-5 |
.bg-purple-6 |
.b-purple-6 |
.c-purple-6
|
.f-purple-6 |
.s-purple-6 |
.bg-purple-7 |
.b-purple-7 |
.c-purple-7
|
.f-purple-7 |
.s-purple-7 |
.bg-purple-8 |
.b-purple-8 |
.c-purple-8
|
.f-purple-8 |
.s-purple-8 |
.bg-purple-9 |
.b-purple-9 |
.c-purple-9
|
.f-purple-9 |
.s-purple-9 |
pink
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-pink-1 |
.b-pink-1 |
.c-pink-1
|
.f-pink-1 |
.s-pink-1 |
.bg-pink-2 |
.b-pink-2 |
.c-pink-2
|
.f-pink-2 |
.s-pink-2 |
.bg-pink-3 |
.b-pink-3 |
.c-pink-3
|
.f-pink-3 |
.s-pink-3 |
.bg-pink-4 |
.b-pink-4 |
.c-pink-4
|
.f-pink-4 |
.s-pink-4 |
.bg-pink-5 |
.b-pink-5 |
.c-pink-5
|
.f-pink-5 |
.s-pink-5 |
.bg-pink-6 |
.b-pink-6 |
.c-pink-6
|
.f-pink-6 |
.s-pink-6 |
.bg-pink-7 |
.b-pink-7 |
.c-pink-7
|
.f-pink-7 |
.s-pink-7 |
.bg-pink-8 |
.b-pink-8 |
.c-pink-8
|
.f-pink-8 |
.s-pink-8 |
.bg-pink-9 |
.b-pink-9 |
.c-pink-9
|
.f-pink-9 |
.s-pink-9 |
black
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-black-1 |
.b-black-1 |
.c-black-1
|
.f-black-1 |
.s-black-1 |
.bg-black-2 |
.b-black-2 |
.c-black-2
|
.f-black-2 |
.s-black-2 |
.bg-black-3 |
.b-black-3 |
.c-black-3
|
.f-black-3 |
.s-black-3 |
.bg-black-4 |
.b-black-4 |
.c-black-4
|
.f-black-4 |
.s-black-4 |
.bg-black-5 |
.b-black-5 |
.c-black-5
|
.f-black-5 |
.s-black-5 |
.bg-black-6 |
.b-black-6 |
.c-black-6
|
.f-black-6 |
.s-black-6 |
.bg-black-7 |
.b-black-7 |
.c-black-7
|
.f-black-7 |
.s-black-7 |
.bg-black-8 |
.b-black-8 |
.c-black-8
|
.f-black-8 |
.s-black-8 |
.bg-black-9 |
.b-black-9 |
.c-black-9
|
.f-black-9 |
.s-black-9 |
white
| Фон | Граница | Текст | SVG заливка | SVG обводка |
|---|---|---|---|---|
.bg-white-1 |
.b-white-1 |
.c-white-1
|
.f-white-1 |
.s-white-1 |
.bg-white-2 |
.b-white-2 |
.c-white-2
|
.f-white-2 |
.s-white-2 |
.bg-white-3 |
.b-white-3 |
.c-white-3
|
.f-white-3 |
.s-white-3 |
.bg-white-4 |
.b-white-4 |
.c-white-4
|
.f-white-4 |
.s-white-4 |
.bg-white-5 |
.b-white-5 |
.c-white-5
|
.f-white-5 |
.s-white-5 |
.bg-white-6 |
.b-white-6 |
.c-white-6
|
.f-white-6 |
.s-white-6 |
.bg-white-7 |
.b-white-7 |
.c-white-7
|
.f-white-7 |
.s-white-7 |
.bg-white-8 |
.b-white-8 |
.c-white-8
|
.f-white-8 |
.s-white-8 |
.bg-white-9 |
.b-white-9 |
.c-white-9
|
.f-white-9 |
.s-white-9 |