WordPress/wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss
Peter Wilson fa364267d4 Twenty Twenty-One: Reverse logic for prefers-reduced-motion media query.
Reverse the logic of the `prefers-reduced-motion` to enable transitions based on `no-preference` rather than disable them based on the `reduce` preference. This removes the need to disable transitions with the `! important` tag and unintended interactions with plugins as a result.

Props gregoiresailland, sabernhardt, ryokuhi.
Fixes #54174.


Built from https://develop.svn.wordpress.org/trunk@52835


git-svn-id: http://core.svn.wordpress.org/trunk@52424 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-03-10 05:21:03 +00:00

41 lines
787 B
SCSS

.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
word-break: normal;
}
.skip-link:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
-webkit-clip-path: none;
clip-path: none;
color: #21759b;
display: block;
font-size: 0.875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
outline: 0;
}