mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-08 06:36:33 +02:00
Code Issues Releases Wiki Activity

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

Browse Source 
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
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 { // Disable animation if transitions are disabled
from { background-position: $progress-height 0; } @if $enable-transitions {
to { background-position: 0 0; } @keyframes progress-bar-stripes {
from { background-position: $progress-height 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 {
animation: progress-bar-stripes $progress-bar-animation-timing; .progress-bar-animated {
animation: progress-bar-stripes $progress-bar-animation-timing;
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
} }