/* ------------------------------------------------------------------------------
*
* # Progress bars component
*
* Overrides for progress bars bootstrap component
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Base class
// -------------------------
// Outer container
.progress {
position: relative;
margin-bottom: 0;
height: @progress-base-height;
.box-shadow(inset 0 1px 1px fade(#000, 10%));
}
// Bar of progress
.progress-bar {
line-height: @progress-base-height;
overflow: hidden;
}
// Rounded progress bars
.progress-rounded {
&,
> .progress-bar {
border-radius: 100px;
}
}
// Enhanced bars
// -------------------------
.progress {
// Progress bar back text
.progressbar-back-text {
position: absolute;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: @font-size-small;
}
// Progress bar front text
.progressbar-front-text {
display: block;
width: 100%;
text-align: center;
position: relative;
font-size: @font-size-small;
}
// Right alignment
&.right {
// Adjust progress bar
.progress-bar {
right: 0;
float: right;
}
// Adjust text
.progressbar-front-text {
position: absolute;
right: 0;
}
}
// Vertical orientation
&.vertical {
width: 50px;
height: 100%;
display: inline-block;
// Add horizontal spacing
& + & {
margin-left: @content-padding-small;
}
// Progress bar adjustment
.progress-bar {
width: 100%;
height: 0;
.transition(height 0.6s ease);
}
// Bottom direction
&.bottom {
position: relative;
.progressbar-front-text {
position: absolute;
bottom: 0;
}
.progress-bar {
position: absolute;
bottom: 0;
}
}
}
}
// Optional sizing
// -------------------------
// Large
.progress-lg {
height: @progress-large-height;
.progress-bar {
line-height: @progress-large-height;
}
}
// Small
.progress-sm {
height: @progress-small-height;
}
// Mini
.progress-xs {
height: @progress-mini-height;
}
// Tiny
.progress-xxs {
height: @progress-tiny-height;
}
// Micro
.progress-micro {
height: @progress-micro-height;
}
// Remove text in small bars
.progress-sm,
.progress-xs,
.progress-xxs,
.progress-micro {
.progress-bar {
font-size: 0;
}
}