Цвет ссылок

link-color

В SIMAI Framework с помощью переменных вы можете изменить цвет состояний ссылок.

Цвет ссылки

Для установки цвета ссылок, используется параметры цвета текста:

Стили

Селектор Цвет Значение
a
color: var(--sf-color--link);
a:active
color: var(--sf-color--link-active);
a:hover
color: var(--sf-color--link-hover);
a:visited
color: var(--sf-color--link-visited);

Переменные

Переменные цвета определяют цвет ссылок при различных состояних: по умолчанию, :active, :hover, :visited.

Переменная Значение
--sf-color--link --sf-color--blue-5
--sf-color--link-active --sf-color--blue-6
--sf-color--link-hover --sf-color--blue-6
--sf-color--link-visited --sf-color--purple-6

Цвет подчеркивания

Для установки цвета подчеркивания, используется параметры цвета фона:

Стили

Селектор Цвет Значение
a:not([class]),
a[class*=l-],
[class*=l-] ~ a
background-image: linear-gradient(to right, var(--sf-color--link-underline) 50%, transparent 50%);
a:not([class]):active,
a[class*=l-]:active,
[class*=l-] ~ a:active
background-image: linear-gradient(to right, var(--sf-color--link-active-underline) 50%, transparent 50%);
a:not([class]):hover,
a[class*=l-]:hover,
[class*=l-] ~ a:hover
background-image: linear-gradient(to right, var(--sf-color--link-hover-underline) 50%, transparent 50%);
a:not([class]):visited,
a[class*=l-]:visited,
[class*=l-] ~ a:visited
background-image: linear-gradient(to right, var(--sf-color--link-visited-underline) 50%, transparent 50%);

Переменные

Переменные цвета определяют цвет ссылок при различных состояних: по умолчанию, :active, :hover, :visited.

Переменная Значение
--sf-color--link-undeline --sf-color--blue-4
--sf-color--link-active-undeline --sf-color--blue-5
--sf-color--link-hover-undeline --sf-color--blue-5
--sf-color--link-visited-undeline --sf-color--purple-5

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