From f1f740be09fd08e06e4766e5bf987a57b5d51b80 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Tue, 15 Jan 2019 01:51:11 +0100
Subject: [PATCH] Make progress animation respect `$enable-transitions` and
`prefers-reduced-motion` media query
Make progress animation respect `$enable-transitions` and `prefers-reduced-motion` media query
---
scss/_progress.scss | 19 ++++++++++++++-----
1 file changed, 14 insertions(+), 5 deletions(-)
diff --git a/scss/_progress.scss b/scss/_progress.scss
index 0ac3e0c93f..6247abe3fc 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -1,6 +1,9 @@
-@keyframes progress-bar-stripes {
- from { background-position: $progress-height 0; }
- to { background-position: 0 0; }
+// Disable animation if transitions are disabled
+@if $enable-transitions {
+ @keyframes progress-bar-stripes {
+ from { background-position: $progress-height 0; }
+ to { background-position: 0 0; }
+ }
}
.progress {
@@ -29,6 +32,12 @@
background-size: $progress-height $progress-height;
}
-.progress-bar-animated {
- animation: progress-bar-stripes $progress-bar-animation-timing;
+@if $enable-transitions {
+ .progress-bar-animated {
+ animation: progress-bar-stripes $progress-bar-animation-timing;
+
+ @media (prefers-reduced-motion: reduce) {
+ animation: none;
+ }
+ }
}
--
GitLab