Mercurial > wikked

comparison static/bootstrap/less/progress-bars.less @ 61:130eccd396d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Now using Boostrap with LESS.
author Ludovic Chabant <ludovic@chabant.com>
date Wed, 06 Feb 2013 08:22:31 -0800
parents
children d29e2f337b00
comparison
equal deleted inserted replaced
60:8250c977bc50 61:130eccd396d8
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(@baseBorderRadius);
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 }