65 lines
1.3 KiB
SCSS
65 lines
1.3 KiB
SCSS
// Foundation for Sites by ZURB
|
|
// foundation.zurb.com
|
|
// Licensed under MIT Open Source
|
|
|
|
/// Adds styles for a progress bar container.
|
|
@mixin progress-container {
|
|
background-color: $progress-background;
|
|
height: $progress-height;
|
|
margin-bottom: $progress-margin-bottom;
|
|
border-radius: $progress-radius;
|
|
}
|
|
|
|
/// Adds styles for the inner meter of a progress bar.
|
|
@mixin progress-meter {
|
|
position: relative;
|
|
display: block;
|
|
width: 0%;
|
|
height: 100%;
|
|
background-color: $progress-meter-background;
|
|
|
|
@if has-value($progress-radius) {
|
|
border-radius: $global-radius;
|
|
}
|
|
}
|
|
|
|
/// Adds styles for text in the progress meter.
|
|
@mixin progress-meter-text {
|
|
@include absolute-center;
|
|
position: absolute;
|
|
margin: 0;
|
|
font-size: 0.75rem;
|
|
font-weight: bold;
|
|
color: $white;
|
|
white-space: nowrap;
|
|
|
|
@if has-value($progress-radius) {
|
|
border-radius: $progress-radius;
|
|
}
|
|
}
|
|
|
|
@mixin foundation-progress-bar {
|
|
// Progress bar
|
|
.progress {
|
|
@include progress-container;
|
|
|
|
@each $name, $color in $foundation-palette {
|
|
&.#{$name} {
|
|
.progress-meter {
|
|
background-color: $color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Inner meter
|
|
.progress-meter {
|
|
@include progress-meter;
|
|
}
|
|
|
|
// Inner meter text
|
|
.progress-meter-text {
|
|
@include progress-meter-text;
|
|
}
|
|
}
|