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