WordPress/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss
desrosj 5bd111eb76 Twenty Twenty-One: Sync the latest changes for 5.6 RC2.
This will be the final sync from GitHub before placing that repository into read-only mode. All further changes should now flow entirely through Trac.

For a full list of changes since [49633], see 1d5a895...53acd9b.

Props poena, luminuu, kjellr, ryelle, allancole, melchoyce, felipeelia, aljullu, kebbet, chaton666, Clorith, mkaz, ingereck, paaljoachim.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49726


git-svn-id: http://core.svn.wordpress.org/trunk@49449 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-12-01 19:09:05 +00:00

69 lines
1.7 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:not(.wp-block-button__link):not(.wp-block-file__button) {
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
text-decoration: underline 1px dotted currentColor;
text-decoration-skip-ink: none;
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 {
// 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));
}
}