70 lines
1.8 KiB
SCSS
70 lines
1.8 KiB
SCSS
|
//
|
||
|
|
// Progress Bar Variables
|
||
|
|
//
|
||
|
|
|
||
|
|
// We use this to se the prog bar height
|
||
|
|
$progress-bar-height: emCalc(25px) !default;
|
||
|
|
$progress-bar-color: transparent !default;
|
||
|
|
|
||
|
|
// We use these to control the border styles
|
||
|
|
$progress-bar-border-color: darken(#fff, 20%) !default;
|
||
|
|
$progress-bar-border-size: 1px !default;
|
||
|
|
$progress-bar-border-style: solid !default;
|
||
|
|
$progress-bar-border-radius: $global-radius !default;
|
||
|
|
|
||
|
|
// We use these to control the margin & padding
|
||
|
|
$progress-bar-pad: emCalc(2px) !default;
|
||
|
|
$progress-bar-margin-bottom: emCalc(10px) !default;
|
||
|
|
|
||
|
|
// We use these to set the meter colors
|
||
|
|
$progress-meter-color: $primary-color !default;
|
||
|
|
$progress-meter-secondary-color: $secondary-color !default;
|
||
|
|
$progress-meter-success-color: $success-color !default;
|
||
|
|
$progress-meter-alert-color: $alert-color !default;
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Progress Bar Mixins
|
||
|
|
//
|
||
|
|
|
||
|
|
// We use this to set up the progress bar container
|
||
|
|
@mixin progress-container {
|
||
|
|
background-color: $progress-bar-color;
|
||
|
|
height: $progress-bar-height;
|
||
|
|
border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color;
|
||
|
|
padding: $progress-bar-pad;
|
||
|
|
margin-bottom: $progress-bar-margin-bottom;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin progress-meter($bg:$progress-meter-color) {
|
||
|
|
background: $bg;
|
||
|
|
height: 100%;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@if $include-html-media-classes {
|
||
|
|
|
||
|
|
/* Progress Bar */
|
||
|
|
.progress {
|
||
|
|
@include progress-container;
|
||
|
|
|
||
|
|
// Meter
|
||
|
|
.meter {
|
||
|
|
@include progress-meter;
|
||
|
|
}
|
||
|
|
&.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
|
||
|
|
&.success .meter { @include progress-meter($bg:$progress-meter-success-color); }
|
||
|
|
&.alert .meter { @include progress-meter($bg:$progress-meter-alert-color); }
|
||
|
|
|
||
|
|
&.radius { @include radius($global-radius);
|
||
|
|
.meter { @include radius($global-radius - 1); }
|
||
|
|
}
|
||
|
|
|
||
|
|
&.round { @include radius(1000px);
|
||
|
|
.meter { @include radius(999px); }
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|