Changeset 52835 for trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss

Timestamp:

03/10/2022 05:19:50 AM (3 years ago)

Author:

peterwilsoncc

Message:

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.

File:

• trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss (modified) (3 diffs)

trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss

@@ -102 +102 @@
         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) {
@@ -280 +283 @@
 
             @include media(mobile) {
+                @media (prefers-reduced-motion: no-preference) {
+                    transition: all 0.5s ease;
+                }
+            }
+
+            @include media(mobile) {
                 left: 0;
                 margin: 0;
@@ -286 +295 @@
                 top: 100%;
                 padding-top: 3px;
-                transition: all 0.5s ease;
                 z-index: 88888;