root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 12 Packages Projects Releases Wiki Activity

Make progress animation respect `$enable-transitions` and `prefers-reduced-motion` media query 

Make progress animation respect `$enable-transitions` and `prefers-reduced-motion` media query
This commit is contained in:
Martijn Cuppens 2019-01-15 01:51:11 +01:00 committed by Patrick H. Lauke
parent 8eb8b8d3da
commit f1f740be09
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
scss/_progress.scss
View File

@ -1,6 +1,9 @@
@keyframes progress-bar-stripes { // Disable animation if transitions are disabled
@if $enable-transitions {
@keyframes progress-bar-stripes {
from { background-position: $progress-height 0; } from { background-position: $progress-height 0; }
to { background-position: 0 0; } to { background-position: 0 0; }
}
} }
.progress { .progress {
@ -29,6 +32,12 @@
background-size: $progress-height $progress-height; background-size: $progress-height $progress-height;
} }
.progress-bar-animated { @if $enable-transitions {
.progress-bar-animated {
animation: progress-bar-stripes $progress-bar-animation-timing; animation: progress-bar-stripes $progress-bar-animation-timing;
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
} }