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>
<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>
<!-- Button -->
While <button class="link">I am a button</button>
that looks like a link.
@mixin link (
$color: $link,
$hover-color: $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;
transition: color $fade-easing $fast;
&:hover,
&:active {
color: $hover-color;
}
&.-disabled,
&[disabled] {
color: $disabled;
cursor: default;
pointer-events: none;
}
&__icon {
width: 1em; // IE11 needs both width and height on SVGs
height: 1em;
vertical-align: text-bottom;
&.-separator {
transform: translateX(50%);
}
}
}
a,
.link {
@include link;
}