You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
1.9 KiB
120 lines
1.9 KiB
4 years ago
|
.enable_progressbar() when(@enable-progressbar = true) {
|
||
|
|
|
||
|
|
//progressbar
|
||
|
|
@progress-bg: #DADADA;
|
||
|
|
|
||
|
|
.progress {
|
||
|
|
.border-radius(0);
|
||
|
|
.box-shadow(none);
|
||
|
|
background: @progress-bg;
|
||
|
|
|
||
|
|
height: 18px;
|
||
|
|
|
||
|
|
.progress-bar {
|
||
|
|
.box-shadow(none);
|
||
|
|
line-height:18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&[data-percent] {
|
||
|
|
&:after {
|
||
|
|
display: inline-block;
|
||
|
|
content: attr(data-percent);
|
||
|
|
color: #FFF;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
|
||
|
|
line-height: 16px;
|
||
|
|
|
||
|
|
text-align: center;
|
||
|
|
font-size: @baseFontSize - 1;
|
||
|
|
//font-family: Verdana;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.progress-yellow[data-percent]:after {
|
||
|
|
color: #996633;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
&.progress-small {
|
||
|
|
height: 12px;
|
||
|
|
.progress-bar {
|
||
|
|
line-height: 10px;
|
||
|
|
font-size: @baseFontSize - 2;
|
||
|
|
}
|
||
|
|
&[data-percent]:after {
|
||
|
|
line-height: 10px;
|
||
|
|
font-size: @baseFontSize - 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
&.progress-mini {
|
||
|
|
height: 9px;
|
||
|
|
.progress-bar {
|
||
|
|
line-height: 8px;
|
||
|
|
font-size: @baseFontSize - 2;
|
||
|
|
}
|
||
|
|
&[data-percent]:after {
|
||
|
|
line-height: 8px;
|
||
|
|
font-size: @baseFontSize - 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.progress-bar {
|
||
|
|
.progress-bar-variant(@progress-color);
|
||
|
|
}
|
||
|
|
.progress-bar-danger {
|
||
|
|
.progress-bar-variant(@progress-danger);
|
||
|
|
}
|
||
|
|
.progress-bar-success {
|
||
|
|
.progress-bar-variant(@progress-success);
|
||
|
|
}
|
||
|
|
.progress-bar-warning {
|
||
|
|
.progress-bar-variant(@progress-warning);
|
||
|
|
}
|
||
|
|
.progress-bar-pink {
|
||
|
|
.progress-bar-variant(@progress-pink);
|
||
|
|
}
|
||
|
|
.progress-bar-purple {
|
||
|
|
.progress-bar-variant(@progress-purple);
|
||
|
|
}
|
||
|
|
.progress-bar-yellow {
|
||
|
|
.progress-bar-variant(@progress-yellow);
|
||
|
|
}
|
||
|
|
.progress-bar-inverse {
|
||
|
|
.progress-bar-variant(@progress-inverse);
|
||
|
|
}
|
||
|
|
.progress-bar-grey {
|
||
|
|
.progress-bar-variant(@progress-grey);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.progress {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.progress:before {
|
||
|
|
display: inline-block;
|
||
|
|
content: "";
|
||
|
|
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
|
||
|
|
background: radial-gradient(9px 9px 0deg, circle cover, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
.enable_progressbar();
|