// Name: Progress // // Component: `progress` // // Modifiers: `progress-bar-indicating` // `progress-skill` // `progress-lg` // `progress-sm` // `progress-xs` // `progress-square` // `progress-circle` // `contextual-progress` // // Markup: // // //
//
//
// // ======================================================================== $progress-bar-indicating-active-bg: $inverse !default; $progress-skill-color: $subtitle-color !default; // Component: Progress // ======================================================================== // Outer container .progress { background-color: $progress-bg; } // Bar of progress .progress-bar { color: $progress-bar-color; background-color: $progress-bar-bg; } // Color Variations // ------------------------- .progress-bar-success { @include progress-bar-variant($progress-bar-success-bg); } .progress-bar-info { @include progress-bar-variant($progress-bar-info-bg); } .progress-bar-warning { @include progress-bar-variant($progress-bar-warning-bg); } .progress-bar-danger { @include progress-bar-variant($progress-bar-danger-bg); } // Modifier: `.progress-striped or progress-bar-striped` // ---------------------------------------------------- .progress-striped .progress-bar, .progress-bar-striped { @include gradient-striped; } // Modifier: `.progress.active or .progress-bar.active` // ------------------------------------------------------------------------- // Call animation for the actived progress-striped // Modifier: `progress-square` // ------------------------- // Modifier: `progress-circle` // ------------------------- // Vertical // -------- // Modifier: `progress-bar-indicating` // ------------------------- .progress-bar-indicating { &.active { &:before { background-color: $progress-bar-indicating-active-bg; } } } // Modifier: `progress-skill` // ======================================================================== .progress-skill { .progress-bar { > span { color: $progress-skill-color; } } }