Mercurial > wikked

comparison static/bootstrap/less/progress-bars.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents 130eccd396d8
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1 // 1 //
2 // Progress bars 2 // Progress bars
3 // -------------------------------------------------- 3 // --------------------------------------------------
4 4
5 5
6 // ANIMATIONS 6 // Bar animations
7 // ---------- 7 // -------------------------
8 8
9 // Webkit 9 // WebKit
10 @-webkit-keyframes progress-bar-stripes { 10 @-webkit-keyframes progress-bar-stripes {
11 from { background-position: 40px 0; } 11 from { background-position: 40px 0; }
12 to { background-position: 0 0; } 12 to { background-position: 0 0; }
13 } 13 }
14 14
15 // Firefox 15 // Spec and IE10+
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 { 16 @keyframes progress-bar-stripes {
35 from { background-position: 40px 0; } 17 from { background-position: 40px 0; }
36 to { background-position: 0 0; } 18 to { background-position: 0 0; }
37 } 19 }
38 20
39 21
40 22
41 // THE BARS 23 // Bar itself
42 // -------- 24 // -------------------------
43 25
44 // Outer container 26 // Outer container
45 .progress { 27 .progress {
46 overflow: hidden; 28 overflow: hidden;
47 height: @baseLineHeight; 29 height: @line-height-computed;
48 margin-bottom: @baseLineHeight; 30 margin-bottom: @line-height-computed;
49 #gradient > .vertical(#f5f5f5, #f9f9f9); 31 background-color: @progress-bg;
32 border-radius: @border-radius-base;
50 .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); 33 .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
51 .border-radius(@baseBorderRadius);
52 } 34 }
53 35
54 // Bar of progress 36 // Bar of progress
55 .progress .bar { 37 .progress-bar {
38 float: left;
56 width: 0%; 39 width: 0%;
57 height: 100%; 40 height: 100%;
58 color: @white; 41 font-size: @font-size-small;
59 float: left; 42 line-height: @line-height-computed;
60 font-size: 12px; 43 color: @progress-bar-color;
61 text-align: center; 44 text-align: center;
62 text-shadow: 0 -1px 0 rgba(0,0,0,.25); 45 background-color: @progress-bar-bg;
63 #gradient > .vertical(#149bdf, #0480be);
64 .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); 46 .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
65 .box-sizing(border-box);
66 .transition(width .6s ease); 47 .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 } 48 }
71 49
72 // Striped bars 50 // Striped bars
73 .progress-striped .bar { 51 .progress-striped .progress-bar {
74 #gradient > .striped(#149bdf); 52 #gradient > .striped();
75 .background-size(40px 40px); 53 background-size: 40px 40px;
76 } 54 }
77 55
78 // Call animation for the active one 56 // Call animation for the active one
79 .progress.active .bar { 57 .progress.active .progress-bar {
80 -webkit-animation: progress-bar-stripes 2s linear infinite; 58 .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 } 59 }
86 60
87 61
88 62
89 // COLORS 63 // Variations
90 // ------ 64 // -------------------------
91 65
92 // Danger (red) 66 .progress-bar-success {
93 .progress-danger .bar, .progress .bar-danger { 67 .progress-bar-variant(@progress-bar-success-bg);
94 #gradient > .vertical(#ee5f5b, #c43c35);
95 }
96 .progress-danger.progress-striped .bar, .progress-striped .bar-danger {
97 #gradient > .striped(#ee5f5b);
98 } 68 }
99 69
100 // Success (green) 70 .progress-bar-info {
101 .progress-success .bar, .progress .bar-success { 71 .progress-bar-variant(@progress-bar-info-bg);
102 #gradient > .vertical(#62c462, #57a957);
103 }
104 .progress-success.progress-striped .bar, .progress-striped .bar-success {
105 #gradient > .striped(#62c462);
106 } 72 }
107 73
108 // Info (teal) 74 .progress-bar-warning {
109 .progress-info .bar, .progress .bar-info { 75 .progress-bar-variant(@progress-bar-warning-bg);
110 #gradient > .vertical(#5bc0de, #339bb9);
111 }
112 .progress-info.progress-striped .bar, .progress-striped .bar-info {
113 #gradient > .striped(#5bc0de);
114 } 76 }
115 77
116 // Warning (orange) 78 .progress-bar-danger {
117 .progress-warning .bar, .progress .bar-warning { 79 .progress-bar-variant(@progress-bar-danger-bg);
118 #gradient > .vertical(lighten(@orange, 15%), @orange);
119 } 80 }
120 .progress-warning.progress-striped .bar, .progress-striped .bar-warning {
121 #gradient > .striped(lighten(@orange, 15%));
122 }