]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | // Progress animations |
2 | @keyframes progress-bar-stripes { | |
3 | from { background-position: $progress-height 0; } | |
4 | to { background-position: 0 0; } | |
5 | } | |
6 | ||
7 | // Basic progress bar | |
8 | .progress { | |
9 | display: flex; | |
10 | overflow: hidden; // force rounded corners by cropping it | |
11 | font-size: $progress-font-size; | |
12 | line-height: $progress-height; | |
13 | text-align: center; | |
14 | background-color: $progress-bg; | |
15 | @include border-radius($progress-border-radius); | |
16 | } | |
17 | .progress-bar { | |
18 | height: $progress-height; | |
19 | color: $progress-bar-color; | |
20 | background-color: $progress-bar-bg; | |
21 | } | |
22 | ||
23 | // Striped | |
24 | .progress-bar-striped { | |
25 | @include gradient-striped(); | |
26 | background-size: $progress-height $progress-height; | |
27 | } | |
28 | ||
29 | // Animated | |
30 | .progress-bar-animated { | |
31 | animation: progress-bar-stripes $progress-bar-animation-timing; | |
32 | } |