diff options
author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2019-01-15 03:51:11 +0300 |
---|---|---|
committer | Patrick H. Lauke <redux@splintered.co.uk> | 2019-01-15 03:51:11 +0300 |
commit | f1f740be09fd08e06e4766e5bf987a57b5d51b80 (patch) | |
tree | fc52bf2a28297c87b6106aab006db841946ae399 /scss/_progress.scss | |
parent | 8eb8b8d3da7cd852a489879752166e013fdd3ace (diff) |
Make progress animation respect `$enable-transitions` and `prefers-reduced-motion` media query
Make progress animation respect `$enable-transitions` and `prefers-reduced-motion` media query
Diffstat (limited to 'scss/_progress.scss')
-rw-r--r-- | scss/_progress.scss | 19 |
1 files 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; + } + } } |