Changeset 52835 for trunk/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.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/style-dark-mode.scss (modified) (2 diffs)

trunk/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss

@@ -47 +47 @@
         &.fixed-bottom {
             position: fixed;
-            bottom: 5px;
+            bottom: 5px; // The bottom property has transition (see below).
             right: 5px;
-            transition: bottom 0.5s;
 
             &.hide:not(:focus) {
@@ -98 +97 @@
             display: none;
         }
+
+        &.fixed-bottom {
+            @media (prefers-reduced-motion: no-preference) {
+                transition: bottom 0.5s;
+            }
+        }
     }
 }