mirror of https://github.com/ColorlibHQ/gentelella
122 lines
2.6 KiB
SCSS
122 lines
2.6 KiB
SCSS
$progressbarVerticalWidth: $baseLineHeight;
|
|
$progressbarFontSize: 12px;
|
|
|
|
// bootstrap-progressbar global styles
|
|
// -----------------------------------
|
|
|
|
.progress {
|
|
position: relative;
|
|
}
|
|
|
|
.progress .bar {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
line-height: $baseLineHeight;
|
|
}
|
|
|
|
.progress .progressbar-back-text {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: $progressbarFontSize;
|
|
line-height: $baseLineHeight;
|
|
text-align: center;
|
|
}
|
|
|
|
.progress .progressbar-front-text {
|
|
display: block;
|
|
width: 100%;
|
|
font-size: $progressbarFontSize;
|
|
line-height: $baseLineHeight;
|
|
text-align: center;
|
|
}
|
|
|
|
// bootstrap-progressbar horizontal styles
|
|
// ---------------------------------------
|
|
|
|
.progress.right .bar {
|
|
right: 0;
|
|
}
|
|
|
|
.progress.right .progressbar-front-text {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
// bootstrap-progressbar vertical styles
|
|
// -------------------------------------
|
|
|
|
.progress.vertical {
|
|
width: $progressbarVerticalWidth;
|
|
height: 100%;
|
|
float: left;
|
|
margin-right: $progressbarVerticalWidth;
|
|
@include gradient-vertical(#f5f5f5, #f9f9f9);
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
.progress.vertical.bottom {
|
|
position: relative;
|
|
}
|
|
|
|
.progress.vertical.bottom .progressbar-front-text {
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
.progress.vertical .bar {
|
|
width: 100%;
|
|
height: 0;
|
|
@include transition(height .6s ease);
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
.progress.vertical.bottom .bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
// Danger (red)
|
|
.progress-danger.vertical .bar,
|
|
.progress.vertical .bar-danger {
|
|
@include gradient-vertical(#ee5f5b, #c43c35);
|
|
background-repeat: repeat;
|
|
}
|
|
.progress-danger.progress-striped.vertical .bar,
|
|
.progress.progress-striped.vertical .bar-danger {
|
|
@include gradient-striped(#ee5f5b);
|
|
}
|
|
|
|
// Success (green)
|
|
.progress-success.vertical .bar,
|
|
.progress.vertical .bar-success {
|
|
@include gradient-vertical(#62c462, #57a957);
|
|
background-repeat: repeat;
|
|
}
|
|
.progress-success.progress-striped.vertical .bar,
|
|
.progress.progress-striped.vertical .bar-success {
|
|
@include gradient-striped(#62c462);
|
|
}
|
|
|
|
// Info (teal)
|
|
.progress-info.vertical .bar,
|
|
.progress.vertical .bar-info {
|
|
@include gradient-vertical(#5bc0de, #339bb9);
|
|
background-repeat: repeat;
|
|
}
|
|
.progress-info.progress-striped.vertical .bar,
|
|
.progress.progress-striped.vertical .bar-info {
|
|
@include gradient-striped(#5bc0de);
|
|
}
|
|
|
|
// Warning (orange)
|
|
.progress-warning.vertical .bar,
|
|
.progress.vertical .bar-warning {
|
|
@include gradient-vertical(lighten($orange, 15%), $orange);
|
|
background-repeat: repeat;
|
|
}
|
|
.progress-warning.progress-striped.vertical .bar,
|
|
.progress.progress-striped.vertical .bar-warning {
|
|
@include gradient-striped(lighten($orange, 15%));
|
|
}
|