source: pro-violet-viettel/sourcecode/assets/css/less/progressbar.less @ 752

Last change on this file since 752 was 313, checked in by dungnv, 11 years ago
File size: 1.7 KB
RevLine 
[313]1/* progressbar */
2@progress-bg: #DADADA;
3
4.progress {
5 .border-radius(0);
6 .box-shadow(none);
7  background: @progress-bg;
8
9 height: 18px;
10
11 .progress-bar {
12        .box-shadow(none);
13        line-height:18px;
14 }
15
16 &[data-percent] {
17        position: relative;
18        &:after {
19                 display: inline-block;
20                 content: attr(data-percent);
21                 color: #FFF;
22                 position: absolute;
23                 left: 0;
24                 right: 0;
25                 top: 0;
26                 bottom: 0;
27                 
28                 line-height: 16px;
29                 
30                 text-align: center;
31                 font-size: 12px;
32                 font-family: Verdana;
33        }
34 }
35 &.progress-yellow[data-percent]:after {
36        color: #996633;
37 }
38
39
40 &.progress-small {
41        height: 12px;
42        .progress-bar {
43                line-height: 10px;
44                font-size: 11px;
45        }
46        &[data-percent]:after {
47                line-height: 10px;
48                font-size: 11px;
49        }
50 }
51
52
53 &.progress-mini {
54        height: 9px;
55        .progress-bar {
56                line-height: 8px;
57                font-size: 11px;
58        }
59        &[data-percent]:after {
60                line-height: 8px;
61                font-size: 11px;
62        }
63 }
64}
65
66
67
68.progress-bar {
69 .progress-bar-variant(@progress-color);
70}
71.progress-bar-danger {
72 .progress-bar-variant(@progress-danger);
73}
74.progress-bar-success {
75 .progress-bar-variant(@progress-success);
76}
77.progress-bar-warning {
78 .progress-bar-variant(@progress-warning);
79}
80.progress-bar-pink {
81 .progress-bar-variant(@progress-pink);
82}
83.progress-bar-purple {
84 .progress-bar-variant(@progress-purple);
85}
86.progress-bar-yellow {
87 .progress-bar-variant(@progress-yellow);
88}
89.progress-bar-inverse {
90 .progress-bar-variant(@progress-inverse);
91}
92.progress-bar-grey {
93 .progress-bar-variant(@progress-grey);
94}
95
96
97
98
99
100.progress {
101  position: relative;
102}
103.progress:before {
104  display: inline-block;
105  content: "";
106 
107  position: absolute;
108  left: 0;
109  right: 0;
110  top: 0;
111  bottom: 0;
112 
113  background: radial-gradient(9px 9px 0deg, circle cover, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
114}
Note: See TracBrowser for help on using the repository browser.