From fa364267d49756835c4229d8b759b92eba9f7a6e Mon Sep 17 00:00:00 2001 From: Peter Wilson Date: Thu, 10 Mar 2022 05:21:03 +0000 Subject: [PATCH] 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 --- .../themes/twentytwentyone/assets/css/ie.css | 29 ++++++++++++------- .../assets/css/style-dark-mode-rtl.css | 7 ++++- .../assets/css/style-dark-mode.css | 7 ++++- .../sass/06-components/footer-navigation.scss | 5 +++- .../assets/sass/06-components/navigation.scss | 12 ++++++-- .../assets/sass/07-utilities/a11y.scss | 8 ----- .../assets/sass/style-dark-mode.scss | 9 ++++-- .../themes/twentytwentyone/style-rtl.css | 29 ++++++++++++------- wp-content/themes/twentytwentyone/style.css | 29 ++++++++++++------- wp-includes/version.php | 2 +- 10 files changed, 88 insertions(+), 49 deletions(-) diff --git a/wp-content/themes/twentytwentyone/assets/css/ie.css b/wp-content/themes/twentytwentyone/assets/css/ie.css index d2a042d4cf..b116867dde 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie.css @@ -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; } diff --git a/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css b/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css index 8037e922f9..8f24f06d00 100644 --- a/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css +++ b/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css @@ -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; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css b/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css index 12290f0b0c..2cf1d4ef15 100644 --- a/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css +++ b/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css @@ -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; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss index ed24fd03d7..0d816cd83f 100644 --- a/wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss @@ -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; + } } } diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss index 11329cf82a..d716ba3fb9 100644 --- a/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss @@ -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, diff --git a/wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss index 6c56a19f89..0431ca088f 100644 --- a/wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss +++ b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss @@ -38,11 +38,3 @@ #content[tabindex="-1"]:focus { outline: 0; } - -@media (prefers-reduced-motion) { - - * { - transition-delay: 0s !important; - transition-duration: 0s !important; - } -} diff --git a/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss b/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss index 128baaff53..b98321ba14 100644 --- a/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss +++ b/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss @@ -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; + } + } } } diff --git a/wp-content/themes/twentytwentyone/style-rtl.css b/wp-content/themes/twentytwentyone/style-rtl.css index 4da41840a0..96a0a105da 100644 --- a/wp-content/themes/twentytwentyone/style-rtl.css +++ b/wp-content/themes/twentytwentyone/style-rtl.css @@ -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); } diff --git a/wp-content/themes/twentytwentyone/style.css b/wp-content/themes/twentytwentyone/style.css index fed5ec25cd..6bde33b47e 100644 --- a/wp-content/themes/twentytwentyone/style.css +++ b/wp-content/themes/twentytwentyone/style.css @@ -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); } diff --git a/wp-includes/version.php b/wp-includes/version.php index 596f15bd0a..2fd16f4036 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -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.