root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 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

19
scss/_progress.scss
View File

@ -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;
}
}
}