Ссылка
Утилиты ссылок используются при стилизации якорей, - для настройки цвета, непрозрачности, смещения подчеркивания, цвета подчеркивания и многого другого.
Непрозрачность ссылки
Измените альфа-прозрачность значения цвета ссылки rgba() с помощью утилит. Имейте в виду, что изменения непрозрачности цвета могут привести к ссылкам с недостаточной контрастностью.
<p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>Вы даже можете изменить уровень непрозрачности при наведении.
Непрозрачность при наведении ссылки 10
Непрозрачность при наведении ссылки 25
Непрозрачность при наведении ссылки 50
<p><a class="link-opacity-10-hover" href="#">Непрозрачность при наведении ссылки 10</a></p>
<p><a class="link-opacity-25-hover" href="#">Непрозрачность при наведении ссылки 25</a></p>
<p><a class="link-opacity-50-hover" href="#">Непрозрачность при наведении ссылки 50</a></p>
<p><a class="link-opacity-75-hover" href="#">Непрозрачность при наведении ссылки 75</a></p>
<p><a class="link-opacity-100-hover" href="#">Непрозрачность при наведении ссылки 100</a></p>Подчеркивание ссылки
Цвет подчеркивания
Измените цвет подчеркивания независимо от цвета текста ссылки.
<p><a href="#" class="link-underline-primary">Primary underline</a></p>
<p><a href="#" class="link-underline-secondary">Secondary underline</a></p>
<p><a href="#" class="link-underline-success">Success underline</a></p>
<p><a href="#" class="link-underline-danger">Danger underline</a></p>
<p><a href="#" class="link-underline-warning">Warning underline</a></p>
<p><a href="#" class="link-underline-info">Info underline</a></p>
<p><a href="#" class="link-underline-light">Light underline</a></p>
<p><a href="#" class="link-underline-dark">Dark underline</a></p>Смещение подчеркивания
Измените расстояние подчеркивания от вашего текста. Смещение задается в единицах em для автоматического масштабирования с текущим размером шрифта элемента font-size.
<p><a href="#">Ссылка по умолчанию</a></p>
<p><a class="link-offset-1" href="#">Смещение 1 ссылки</a></p>
<p><a class="link-offset-2" href="#">Смещение 2 ссылки</a></p>
<p><a class="link-offset-3" href="#">Смещение 3 ссылки</a></p>Непрозрачность подчеркивания
Измените непрозрачность подчеркивания. Требуется добавить .link-underline, чтобы сначала установить цвет rgba(), который мы используем, чтобы затем изменить непрозрачность альфа-канала.
Непрозрачность подчеркивания 0
Непрозрачность подчеркивания 10
Непрозрачность подчеркивания 25
Непрозрачность подчеркивания 50
<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Непрозрачность подчеркивания 0</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Непрозрачность подчеркивания 10</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Непрозрачность подчеркивания 25</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Непрозрачность подчеркивания 50</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Непрозрачность подчеркивания 75</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Непрозрачность подчеркивания 100</a></p>Варианты наведения
Как и утилиты .link-opacity-*-hover, утилиты .link-offset и .link-underline-opacity по умолчанию включают варианты :hover. Смешивайте и сочетайте, чтобы создавать уникальные стили ссылок.
<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
Непрозрачность подчеркивания 0
</a>Цветные ссылки
Вспомогательные функции для цветных ссылок были обновлены для работы с нашими утилитами для работы со ссылками. Используйте новые утилиты для изменения непрозрачности ссылки, непрозрачности подчеркивания и смещения подчеркивания.
<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>
<p><a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>
<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>
<p><a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>
<p><a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>
<p><a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>
<p><a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>
<p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>.visually-hidden.
CSS
В дополнение к следующим функциям Sass, рассмотрите возможность прочитать о наших включенных пользовательских свойствах CSS (также известных как переменные CSS) для цветов и многого другого.
Sass API утилиты
Утилиты ссылок объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.
"link-opacity": (
css-var: true,
class: link-opacity,
state: hover,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
"link-offset": (
property: text-underline-offset,
class: link-offset,
state: hover,
values: (
1: .125em,
2: .25em,
3: .375em,
)
),
"link-underline": (
property: text-decoration-color,
class: link-underline,
local-vars: (
"link-underline-opacity": 1
),
values: map-merge(
$utilities-links-underline,
(
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
)
)
),
"link-underline-opacity": (
css-var: true,
class: link-underline-opacity,
state: hover,
values: (
0: 0,
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
),
),