WordPress/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss
desrosj 967d29d83d Twenty Twenty-One: Merge the latest changes changes from GitHub for Beta 4.
In addition to syncing the latest changes, this change also merges the theme’s `.scss` files and other related build tool configurations required to compile the theme’s CSS.

This will allow development of the theme to continue on Trac after 5.6 is released and the GitHub repository is archived.

For a full list of changes since [], see e7d5991...aa284fd.

Props poena, luminuu kjellr, aristath, justinahinon.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49574


git-svn-id: http://core.svn.wordpress.org/trunk@49312 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-11-12 18:36:15 +00:00

67 lines
1.6 KiB
SCSS

/*
* text-underline-offset doesn't work in Chrome at all 👎
* But looks nice in Safari/Firefox, so let's keep it and
* maybe Chrome will support it soon.
*/
a {
cursor: pointer;
color: var(--wp--style--color--link, var(--global--color-primary));
text-underline-offset: 3px;
text-decoration-skip-ink: all;
}
a:hover {
text-decoration-style: dotted;
text-decoration-skip-ink: none;
}
.site a:focus {
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
background: rgba(255, 255, 255, .9);
// Change text color when the body background is dark.
.is-dark-theme &,
.is-dark-theme & .meta-nav {
color: var(--wp--style--color--link, var(--global--color-background));
}
// Change colors when the body background is white.
.has-background-white & {
background: rgba(0, 0, 0, .9);
color: var(--wp--style--color--link, var(--global--color-white));
.meta-nav {
color: var(--wp--style--color--link, var(--global--color-white));
}
}
&.skip-link {
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
&:focus {
color: #21759b;
background-color: #f1f1f1;
}
}
img {
outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
}
}
// Enforce the custom link color even if a custom background color has been set.
// The extra specificity here is required to override the background color styles.
.has-background:not(.has-background-background-color) {
// Target both current level and nested block.
.has-link-color a,
&.has-link-color a {
color: var(--wp--style--color--link, var(--global--color-primary));
}
}