Respect prefers-reduced-motion: reduce (#9352)

mozilla · Apr 13, 2020 · 82dcebe · 82dcebe
1 parent 385dd47
commit 82dcebe
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/src/core/components/AMInstallButton/styles.scss b/src/core/components/AMInstallButton/styles.scss
@@ -104,6 +104,13 @@
       [dir='rtl'] & {
         animation-name: move-rtl;
       }
+
+      // Center the blue ball when we disable animations.
+      @media (prefers-reduced-motion: reduce) {
+        @include margin-start(14px);
+
+        animation: none;
+      }
     }
 
     .AMInstallButton-loader-ball {
@@ -112,6 +119,10 @@
       border-radius: 50%;
       height: $height;
       width: $width;
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
     }
   }
 
@@ -124,6 +135,11 @@
 
     .AMInstallButton-loader-container {
       @include margin-start(16px);
+
+      // Center the blue ball when we disable animations.
+      @media (prefers-reduced-motion: reduce) {
+        @include margin-start(22px);
+      }
     }
   }
 }
diff --git a/src/ui/components/LoadingText/styles.scss b/src/ui/components/LoadingText/styles.scss
@@ -39,5 +39,9 @@
       1.5}s
       infinite
       cubic-bezier(0.65, 0.05, 0.36, 1);
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 }