Links.
If $use-boilerplate-classes is set, this applies default styles to the a tag
as well as .link and button.link.
@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.
@use "variables";
@mixin link (
$color: variables.$link,
$hover-color: variables.$link-hover,
$disabled-color: darken(#FFF, 20%)
) {
background-color: transparent;
border: 0;
color: $color;
cursor: pointer;
display: inline;
line-height: normal;
padding: 0;
text-decoration: none;
&:hover,
&:active {
color: $hover-color;
}
&:focus {
outline: thin dotted;
}
&.-disabled,
&[disabled] {
color: variables.$disabled;
cursor: default;
pointer-events: none;
}
}