feat(transition): reduce motion globally instead of duplicating singl…

…e declaration block, to close #255
Orange-OpenSource · Dec 13, 2019 · e6f7814 · e6f7814
1 parent aefcc36
commit e6f7814
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/scss/_transitions.scss b/scss/_transitions.scss
@@ -10,6 +10,12 @@
   &:not(.show) {
     display: none;
   }
+
+  // Boosted mod: try to improve performance
+  @if $enable-transitions {
+    will-change: height;
+  }
+  // end mod
 }
 
 .collapsing {
@@ -18,3 +24,17 @@
   overflow: hidden;
   @include transition($transition-collapse);
 }
+
+// Boosted mod
+// stylelint-disable declaration-no-important
+@if $enable-prefers-reduced-motion-media-query {
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      transition-duration: .01ms !important;
+      animation-duration: .01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
+}
+// stylelint-enable declaration-no-important
+// end mod
diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss
@@ -7,10 +7,4 @@
       transition: $transition;
     }
   }
-
-  @if $enable-prefers-reduced-motion-media-query {
-    @media (prefers-reduced-motion: reduce) {
-      transition: none;
-    }
-  }
 }