Upstream
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Peter Wilson 2022-03-10 05:21:03 +00:00
parent 8752a2392a
commit fa364267d4
10 changed files with 88 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
wp-content/themes/twentytwentyone/assets/css/ie.css
View File

@ -5964,9 +5964,14 @@ h1.page-title {
padding-right: 20px;
padding-bottom: 25px;
background-color: #d1e4dd;
transition: all 0.15s ease-in-out;
transform: translateY(30px);
}
@media (prefers-reduced-motion: no-preference) {
.primary-navigation > .primary-menu-container {
transition: all 0.15s ease-in-out;
}
}
@media only screen and (max-width: 481px) {
.primary-navigation > .primary-menu-container {
@ -6148,6 +6153,12 @@ h1.page-title {
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
position: relative;
}
@media only screen and (min-width: 482px) and (prefers-reduced-motion: no-preference) {
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
transition: all 0.5s ease;
}
}
@media only screen and (min-width: 482px) {
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
@ -6157,7 +6168,6 @@ h1.page-title {
position: absolute;
top: 100%;
padding-top: 3px;
transition: all 0.5s ease;
z-index: 88888;
}
@ -6438,7 +6448,6 @@ h1.page-title {
.footer-navigation-wrapper li a {
padding: 17px 13px;
transition: transform 0.1s ease;
color: #28303d;
}
@ -6477,6 +6486,12 @@ h1.page-title {
.footer-navigation-wrapper li .svg-icon:hover {
transform: scale(1.1);
}
@media (prefers-reduced-motion: no-preference) {
.footer-navigation-wrapper li .svg-icon {
transition: transform 0.1s ease;
}
}
.footer-navigation-wrapper .sub-menu-toggle,
.footer-navigation-wrapper .menu-item-description {
@ -6986,14 +7001,6 @@ h1.page-title {
outline: 0;
}
@media (prefers-reduced-motion) {
* {
transition-delay: 0s !important;
transition-duration: 0s !important;
}
}
.has-black-color[class] {
color: #000;
}

7
wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css
View File

@ -49,7 +49,6 @@
position: fixed;
bottom: 5px;
left: 5px;
transition: bottom 0.5s;
}
#dark-mode-toggler.fixed-bottom.hide:not(:focus) {
@ -106,3 +105,9 @@
display: none;
}
}
@media only screen and (prefers-reduced-motion: no-preference) {
#dark-mode-toggler.fixed-bottom {
transition: bottom 0.5s;
}
}

7
wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css
View File

@ -49,7 +49,6 @@
position: fixed;
bottom: 5px;
right: 5px;
transition: bottom 0.5s;
}
#dark-mode-toggler.fixed-bottom.hide:not(:focus) {
@ -106,3 +105,9 @@
display: none;
}
}
@media only screen and (prefers-reduced-motion: no-preference) {
#dark-mode-toggler.fixed-bottom {
transition: bottom 0.5s;
}
}

5
wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss
View File

@ -21,7 +21,6 @@
a {
padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
transition: transform 0.1s ease;
color: var(--footer--color-link);
&:link,
@ -63,6 +62,10 @@
&:hover {
transform: scale(1.1);
}
@media (prefers-reduced-motion: no-preference) {
transition: transform 0.1s ease;
}
}
}

12
wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss
View File

@ -101,9 +101,12 @@
padding-right: var(--global--spacing-unit);
padding-bottom: var(--global--spacing-horizontal);
background-color: var(--global--color-background);
transition: all .15s ease-in-out;
transform: translateY(var(--global--spacing-vertical));
@media (prefers-reduced-motion: no-preference) {
transition: all .15s ease-in-out;
}
@include media(mobile-only) {
height: 100vh;
z-index: 499;
@ -278,6 +281,12 @@
position: relative;
@include media(mobile) {
@media (prefers-reduced-motion: no-preference) {
transition: all 0.5s ease;
}
}
@include media(mobile) {
left: 0;
margin: 0;
@ -285,7 +294,6 @@
position: absolute;
top: 100%;
padding-top: 3px;
transition: all 0.5s ease;
z-index: 88888;
&:before,

8
wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss
View File

@ -38,11 +38,3 @@
#content[tabindex="-1"]:focus {
outline: 0;
}
@media (prefers-reduced-motion) {
* {
transition-delay: 0s !important;
transition-duration: 0s !important;
}
}

9
wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss
View File

@ -46,9 +46,8 @@
&.fixed-bottom {
position: fixed;
bottom: 5px;
bottom: 5px; // The bottom property has transition (see below).
right: 5px;
transition: bottom 0.5s;
&.hide:not(:focus) {
bottom: -80px;
@ -97,5 +96,11 @@
.is-IE & {
display: none;
}
&.fixed-bottom {
@media (prefers-reduced-motion: no-preference) {
transition: bottom 0.5s;
}
}
}
}

29
wp-content/themes/twentytwentyone/style-rtl.css
View File

@ -4692,9 +4692,14 @@ h1.page-title {
padding-left: var(--global--spacing-unit);
padding-bottom: var(--global--spacing-horizontal);
background-color: var(--global--color-background);
transition: all 0.15s ease-in-out;
transform: translateY(var(--global--spacing-vertical));
}
@media (prefers-reduced-motion: no-preference) {
.primary-navigation > .primary-menu-container {
transition: all 0.15s ease-in-out;
}
}
@media only screen and (max-width: 481px) {
.primary-navigation > .primary-menu-container {
@ -4864,6 +4869,12 @@ h1.page-title {
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
position: relative;
}
@media only screen and (min-width: 482px) and (prefers-reduced-motion: no-preference) {
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
transition: all 0.5s ease;
}
}
@media only screen and (min-width: 482px) {
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
@ -4873,7 +4884,6 @@ h1.page-title {
position: absolute;
top: 100%;
padding-top: 3px;
transition: all 0.5s ease;
z-index: 88888;
}
@ -5105,7 +5115,6 @@ h1.page-title {
.footer-navigation-wrapper li a {
padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
transition: transform 0.1s ease;
color: var(--footer--color-link);
}
@ -5138,6 +5147,12 @@ h1.page-title {
.footer-navigation-wrapper li .svg-icon:hover {
transform: scale(1.1);
}
@media (prefers-reduced-motion: no-preference) {
.footer-navigation-wrapper li .svg-icon {
transition: transform 0.1s ease;
}
}
.footer-navigation-wrapper .sub-menu-toggle,
.footer-navigation-wrapper .menu-item-description {
@ -5594,14 +5609,6 @@ h1.page-title {
outline: 0;
}
@media (prefers-reduced-motion) {
* {
transition-delay: 0s !important;
transition-duration: 0s !important;
}
}
.has-black-color[class] {
color: var(--global--color-black);
}

29
wp-content/themes/twentytwentyone/style.css
View File

@ -4712,9 +4712,14 @@ h1.page-title {
padding-right: var(--global--spacing-unit);
padding-bottom: var(--global--spacing-horizontal);
background-color: var(--global--color-background);
transition: all 0.15s ease-in-out;
transform: translateY(var(--global--spacing-vertical));
}
@media (prefers-reduced-motion: no-preference) {
.primary-navigation > .primary-menu-container {
transition: all 0.15s ease-in-out;
}
}
@media only screen and (max-width: 481px) {
.primary-navigation > .primary-menu-container {
@ -4884,6 +4889,12 @@ h1.page-title {
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
position: relative;
}
@media only screen and (min-width: 482px) and (prefers-reduced-motion: no-preference) {
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
transition: all 0.5s ease;
}
}
@media only screen and (min-width: 482px) {
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
@ -4893,7 +4904,6 @@ h1.page-title {
position: absolute;
top: 100%;
padding-top: 3px;
transition: all 0.5s ease;
z-index: 88888;
}
@ -5141,7 +5151,6 @@ h1.page-title {
.footer-navigation-wrapper li a {
padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
transition: transform 0.1s ease;
color: var(--footer--color-link);
}
@ -5174,6 +5183,12 @@ h1.page-title {
.footer-navigation-wrapper li .svg-icon:hover {
transform: scale(1.1);
}
@media (prefers-reduced-motion: no-preference) {
.footer-navigation-wrapper li .svg-icon {
transition: transform 0.1s ease;
}
}
.footer-navigation-wrapper .sub-menu-toggle,
.footer-navigation-wrapper .menu-item-description {
@ -5630,14 +5645,6 @@ h1.page-title {
outline: 0;
}
@media (prefers-reduced-motion) {
* {
transition-delay: 0s !important;
transition-duration: 0s !important;
}
}
.has-black-color[class] {
color: var(--global--color-black);
}

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.0-alpha-52834';
$wp_version = '6.0-alpha-52835';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.