Links.
Applies to <a> tags as well as .link elements.
@mixin link()
None.
<!-- Default -->
<a href="#">A classless link,</a>
<a class="link" href="#">I am a link</a>
and
<a class="link -disabled" href="#">I am a disabled link.</a>
<!-- Button -->
While <button class="link">I am a button</button>
that looks like a link.
<!-- Icon -->
Here's
<a class="link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="link__icon" width="16" height="16" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<line x1="10" y1="14" x2="20" y2="4" />
<polyline points="15 4 20 4 20 9" />
</svg>
another link
</a>
with an icon before, and
<a class="link" href="#">
one link
<svg xmlns="http://www.w3.org/2000/svg" class="link__icon" width="16" height="16" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<line x1="10" y1="14" x2="20" y2="4" />
<polyline points="15 4 20 4 20 9" />
</svg>
</a>
with the icon after.
<a class="link" href="#">
Read More
<svg class="link__icon" viewBox="0 0 24 24" stroke="currentColor" fill="none">
<polyline points="9 6 15 12 9 18" />
</svg>
</a>
@use "/resources/styles/config";
a,
.link {
--link-color: var(--color, #{config.$link});
--link-color-hover: var(--color-hover, #{config.$link-hover});
color: var(--link-color);
cursor: pointer;
text-decoration: none;
transition: color config.$fade-easing var(--duration-fast);
&:hover,
&:active {
color: var(--link-color-hover);
}
&.-disabled,
&[disabled] {
--link-color: #{config.$disabled};
cursor: default;
pointer-events: none;
}
&__icon {
height: 1em;
vertical-align: text-top;
}
}