53 lines
2.2 KiB
SCSS
53 lines
2.2 KiB
SCSS
/*
|
|
Mixin for the progress element.
|
|
Parameters:
|
|
- $progress-name : The class name of the progress wrapper.
|
|
- $progress-height : The height of the progress wrapper.
|
|
- $progress-border-radius : The border radius of the progress wrapper.
|
|
- $progress-bg-color : The background color of the progress wrapper. [1]
|
|
- $progress-font-size : The font size of the progress bar's text (if any).
|
|
- $progress-bar-color : The progress bar's text color.
|
|
- $progress-bar-bg-color : The progress bar's background color.
|
|
Notes:
|
|
- [1] : The background color of the progress wrapper should be a different color than the
|
|
page's background to make sure that it is visible.
|
|
- [2] : This only creates a basic progress style. For more progress bar styles use `make-progress-bar-variant`.
|
|
*/
|
|
@mixin make-progress( $progress-name, $progress-height, $progress-border-radius, $progress-bg-color,
|
|
$progress-font-size, $progress-bar-color, $progress-bar-bg-color ){
|
|
.#{$progress-name}{
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: $progress-height;
|
|
background-color: $progress-bg-color;
|
|
border-radius: $progress-border-radius;
|
|
& > span{
|
|
float: left;
|
|
width: 0;
|
|
height: 100%;
|
|
background-color: $progress-bar-bg-color;
|
|
text-align: center;
|
|
font-size: $progress-font-size;
|
|
color: $progress-bar-color;
|
|
}
|
|
}
|
|
}
|
|
/*
|
|
Mixin for progress bar styles.
|
|
Parameters:
|
|
- $progress-name : The class name of the progress wrapper. [1]
|
|
- $progress-bar-variant-name : The class name of the progress bar variant.
|
|
- $progress-bar-variant-color : The progress bar variant's text color.
|
|
- $progress-bar-variant-bg-coor : The progress bar variant's background color.
|
|
Notes:
|
|
- [1] : The name of $progress-name should match the one specified in `make-progress` for the
|
|
progress bar variant to work correctly.
|
|
- [2] : This mixin should be used in combination with `make-progress` and is suggested that you
|
|
use it after `make-progress`.
|
|
*/
|
|
@mixin make-progress-bar-variant($progress-name, $progress-bar-variant-name, $progress-bar-variant-color, $progress-bar-variant-bg-color){
|
|
.#{$progress-name} > span.#{$progress-bar-variant-name}{
|
|
background-color: $progress-bar-variant-bg-color;
|
|
color: $progress-bar-variant-color;
|
|
}
|
|
} |