blob: 343df6323c59464cf8088d9c136ace5c29637758 [file] [log] [blame]
Matteo Scandolo144c1882016-03-25 17:20:27 -07001//
2// Progress bars
3// --------------------------------------------------
4
5
6// Bar animations
7// -------------------------
8
9// WebKit
10@-webkit-keyframes progress-bar-stripes {
11 from { background-position: 40px 0; }
12 to { background-position: 0 0; }
13}
14
15// Spec and IE10+
16@keyframes progress-bar-stripes {
17 from { background-position: 40px 0; }
18 to { background-position: 0 0; }
19}
20
21
22// Bar itself
23// -------------------------
24
25// Outer container
26.progress {
27 overflow: hidden;
28 height: $line-height-computed;
29 margin-bottom: $line-height-computed;
30 background-color: $progress-bg;
31 border-radius: $progress-border-radius;
32 @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
33}
34
35// Bar of progress
36.progress-bar {
37 float: left;
38 width: 0%;
39 height: 100%;
40 font-size: $font-size-small;
41 line-height: $line-height-computed;
42 color: $progress-bar-color;
43 text-align: center;
44 background-color: $progress-bar-bg;
45 @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
46 @include transition(width .6s ease);
47}
48
49// Striped bars
50//
51// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
52// `.progress-bar-striped` class, which you just add to an existing
53// `.progress-bar`.
54.progress-striped .progress-bar,
55.progress-bar-striped {
56 @include gradient-striped;
57 background-size: 40px 40px;
58}
59
60// Call animation for the active one
61//
62// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
63// `.progress-bar.active` approach.
64.progress.active .progress-bar,
65.progress-bar.active {
66 @include animation(progress-bar-stripes 2s linear infinite);
67}
68
69
70// Variations
71// -------------------------
72
73.progress-bar-success {
74 @include progress-bar-variant($progress-bar-success-bg);
75}
76
77.progress-bar-info {
78 @include progress-bar-variant($progress-bar-info-bg);
79}
80
81.progress-bar-warning {
82 @include progress-bar-variant($progress-bar-warning-bg);
83}
84
85.progress-bar-danger {
86 @include progress-bar-variant($progress-bar-danger-bg);
87}