]>
Commit | Line | Data |
---|---|---|
59c06b17 CS |
1 | // |
2 | // Progress bars | |
3 | // -------------------------------------------------- | |
4 | ||
5 | ||
6 | // 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 | // Firefox | |
16 | @-moz-keyframes progress-bar-stripes { | |
17 | from { background-position: 40px 0; } | |
18 | to { background-position: 0 0; } | |
19 | } | |
20 | ||
21 | // IE9 | |
22 | @-ms-keyframes progress-bar-stripes { | |
23 | from { background-position: 40px 0; } | |
24 | to { background-position: 0 0; } | |
25 | } | |
26 | ||
27 | // Opera | |
28 | @-o-keyframes progress-bar-stripes { | |
29 | from { background-position: 0 0; } | |
30 | to { background-position: 40px 0; } | |
31 | } | |
32 | ||
33 | // Spec | |
34 | @keyframes progress-bar-stripes { | |
35 | from { background-position: 40px 0; } | |
36 | to { background-position: 0 0; } | |
37 | } | |
38 | ||
39 | ||
40 | ||
41 | // THE BARS | |
42 | // -------- | |
43 | ||
44 | // Outer container | |
45 | .progress { | |
46 | overflow: hidden; | |
47 | height: @baseLineHeight; | |
48 | margin-bottom: @baseLineHeight; | |
49 | #gradient > .vertical(#f5f5f5, #f9f9f9); | |
50 | .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); | |
51 | .border-radius(4px); | |
52 | } | |
53 | ||
54 | // Bar of progress | |
55 | .progress .bar { | |
56 | width: 0%; | |
57 | height: 100%; | |
58 | color: @white; | |
59 | float: left; | |
60 | font-size: 12px; | |
61 | text-align: center; | |
62 | text-shadow: 0 -1px 0 rgba(0,0,0,.25); | |
63 | #gradient > .vertical(#149bdf, #0480be); | |
64 | .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); | |
65 | .box-sizing(border-box); | |
66 | .transition(width .6s ease); | |
67 | } | |
68 | .progress .bar + .bar { | |
69 | .box-shadow(inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)); | |
70 | } | |
71 | ||
72 | // Striped bars | |
73 | .progress-striped .bar { | |
74 | #gradient > .striped(#149bdf); | |
75 | .background-size(40px 40px); | |
76 | } | |
77 | ||
78 | // Call animation for the active one | |
79 | .progress.active .bar { | |
80 | -webkit-animation: progress-bar-stripes 2s linear infinite; | |
81 | -moz-animation: progress-bar-stripes 2s linear infinite; | |
82 | -ms-animation: progress-bar-stripes 2s linear infinite; | |
83 | -o-animation: progress-bar-stripes 2s linear infinite; | |
84 | animation: progress-bar-stripes 2s linear infinite; | |
85 | } | |
86 | ||
87 | ||
88 | ||
89 | // COLORS | |
90 | // ------ | |
91 | ||
92 | // Danger (red) | |
93 | .progress-danger .bar, .progress .bar-danger { | |
94 | #gradient > .vertical(#ee5f5b, #c43c35); | |
95 | } | |
96 | .progress-danger.progress-striped .bar, .progress-striped .bar-danger { | |
97 | #gradient > .striped(#ee5f5b); | |
98 | } | |
99 | ||
100 | // Success (green) | |
101 | .progress-success .bar, .progress .bar-success { | |
102 | #gradient > .vertical(#62c462, #57a957); | |
103 | } | |
104 | .progress-success.progress-striped .bar, .progress-striped .bar-success { | |
105 | #gradient > .striped(#62c462); | |
106 | } | |
107 | ||
108 | // Info (teal) | |
109 | .progress-info .bar, .progress .bar-info { | |
110 | #gradient > .vertical(#5bc0de, #339bb9); | |
111 | } | |
112 | .progress-info.progress-striped .bar, .progress-striped .bar-info { | |
113 | #gradient > .striped(#5bc0de); | |
114 | } | |
115 | ||
116 | // Warning (orange) | |
117 | .progress-warning .bar, .progress .bar-warning { | |
118 | #gradient > .vertical(lighten(@orange, 15%), @orange); | |
119 | } | |
120 | .progress-warning.progress-striped .bar, .progress-striped .bar-warning { | |
121 | #gradient > .striped(lighten(@orange, 15%)); | |
122 | } |