hacker.tours-website/themes/zen/assets/sass/base/links/_links.scss
2024-06-13 22:14:05 +02:00

73 lines
1.5 KiB
SCSS

// Links
//
// Hyperlinks are used to allow the user to navigate to other resources or to
// download a resource.
//
// The order of link states are based on Eric Meyer's article:
// http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
//
// :visited - A link that has already been visited.
// :hover - A link that is being hovered over.
// :focus - A link that has been given keyboard focus.
// :active - A link that is being actively clicked.
a,
%link {
color: var(--color-link);
}
// Any element can receive focus, but only links can be visited, so we can
// safely lower this selector's specificity. This also ensures visited links
// with additional styles won't have their styles overridden.
:visited {
color: var(--color-link-visited);
}
a:hover,
a:focus {
color: var(--color-link-hover);
}
a:active {
color: var(--color-link-active);
}
// Remove underline from links to current page to
// indicate that there is no need to click on it.
[aria-current] {
text-decoration: none;
}
.link-nav,
%link-nav {
a {
text-decoration: none;
&:hover,
&:focus {
text-decoration: underline;
}
}
}
// Inverted links, for dark backgrounds.
.link-inverted,
%link-inverted {
a {
color: var(--color-link-inverted);
&:visited {
color: var(--color-link-visited-inverted);
}
&:hover,
&:focus {
color: var(--color-link-hover-inverted);
}
&:active {
color: var(--color-link-active-inverted);
}
}
}