Mixin: Links
This mixin can theme content to match the link style, either as a normal anchoror them other elements as links.
Where to Find
You can find these mixins in integration/snippets/mixins/links.scss.
Common Link Mixin
This sets the base color and family for all the specific link mixins.
1@mixin link-common {
2 display: grid;
3 grid-template-columns: max-content auto;
4 width: fit-content;
5 font-family: $font-barlow-sans;
6 font-weight: $font-weight-semi-bold;
7 text-transform: uppercase;
8 &::before {
9 @include after-before;
10 position: static;
11 }
12}Normal Blue Link
1@mixin link-blue {
2 @include link-common;
3 font-size: 12px;
4 line-height: 1.2;
5 color: var(--color-primary-blue);
6 &:hover {
7 color: var(--color-primary-blue);
8 }
9 &::before {
10 @include arrow-blue;
11 margin-right: 10px;
12 align-self: center;
13 transition: transform 0.3s ease-in-out;
14 }
15 @include media-breakpoint-up(lg) {
16 font-size: 13px;
17 &:hover {
18 color: var(--color-primary-blue);
19 &::before {
20 transform: rotate(45deg);
21 }
22 }
23 }
24}Shaded Link
1@mixin link-shade {
2 @include link-common;
3 font-size: 14px;
4 line-height: 1.2;
5 color: color("shade-65");
6 transition: text-shadow 0.3s ease-in-out;
7 &:hover {
8 color: color("shade-65");
9 }
10 &::before {
11 @include arrow-yellow;
12 margin-right: 10px;
13 align-self: center;
14 transition: transform 0.3s ease-in-out;
15 }
16 @include media-breakpoint-up(lg) {
17 &:hover {
18 color: color("shade-65");
19 text-shadow: 0 0 color("shade-65");
20 &::before {
21 transform: rotate(45deg);
22 }
23 }
24 }
25}