@mixin link()
Add color for default, focus, hover, and active states.
Parameters
$color: (Color)
The default color.
$color-hover: (Color)
The hover color.
$color-active: $color-hover (Color)
The active color.
$color-visited: $color (Color)
The visited color.
Examples
scss
Sample Usage
a {
@include link($color-primary, $color-accent);
}
css
compiled
a {
color: #2f80e8;
}
a:visited {
color: #2f80e8;
}
a:focus, a:hover {
color: #e8982f;
}
a:active {
color: #e8982f;
}
html
<a href="#">Read More</a>Used By
@mixin decorative-link()
@mixin decorative-link()
Create decorative links with the :after pseudo element.
Parameters
$content: '\2192' (String)
The content of the :after pseudo element.
$color: currentColor (Color)
The default main link color.
$color-hover: currentColor (Color)
The hover main link color.
$color-active: $color-hover (Color)
The active main link color.
$color-visited: $color (Color)
The visited main link color.
$after-color: $color (Color)
The :after default color.
$after-color-hover: $after-color (Color)
The hover :after color.
$after-color-active: $after-color (Color)
The active :after color.
$after-color-visited: $after-color (Color)
The visited :after color.
Examples
scss
Sample Usage
.link--fancy {
@include decorative-link($content: '\00BB', $after-color: $color-accent);
}
css
compiled
@charset "UTF-8";
.link--fancy:after {
color: #e8982f;
content: "»";
display: inline-block;
margin-left: 0.3125em;
transition: transform 0.3s ease-in-out;
}
.link--fancy:visited:after {
color: #e8982f;
}
.link--fancy:focus:after, .link--fancy:hover:after {
color: #e8982f;
transform: translateX(0.625em);
}
.link--fancy:active:after {
color: #e8982f;
}
html
<a href="#" class="link-fancy">Read More</a>