LimitLess-admin-panel/assets/less/bootstrap-limitless/progress-bars.less

/* ------------------------------------------------------------------------------
*
*  # 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;
    }
}