86 lines
1.8 KiB
SCSS
86 lines
1.8 KiB
SCSS
|
// Foundation for Sites by ZURB
|
||
|
|
// foundation.zurb.com
|
||
|
|
// Licensed under MIT Open Source
|
||
|
|
|
||
|
|
////
|
||
|
|
/// @group progress-bar
|
||
|
|
////
|
||
|
|
|
||
|
|
/// Height of a progress bar.
|
||
|
|
/// @type Number
|
||
|
|
$progress-height: 1rem !default;
|
||
|
|
|
||
|
|
/// Background color of a progress bar.
|
||
|
|
/// @type Color
|
||
|
|
$progress-background: $medium-gray !default;
|
||
|
|
|
||
|
|
/// Bottom margin of a progress bar.
|
||
|
|
/// @type Number
|
||
|
|
$progress-margin-bottom: $global-margin !default;
|
||
|
|
|
||
|
|
/// Default color of a progress bar's meter.
|
||
|
|
/// @type Color
|
||
|
|
$progress-meter-background: $primary-color !default;
|
||
|
|
|
||
|
|
/// Default radius of a progress bar.
|
||
|
|
/// @type Number
|
||
|
|
$progress-radius: $global-radius !default;
|
||
|
|
|
||
|
|
@mixin foundation-progress-element {
|
||
|
|
progress {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
-moz-appearance: none;
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: $progress-height;
|
||
|
|
margin-bottom: $progress-margin-bottom;
|
||
|
|
|
||
|
|
@if hasvalue($progress-radius) {
|
||
|
|
border-radius: $progress-radius;
|
||
|
|
}
|
||
|
|
|
||
|
|
// For Firefox
|
||
|
|
background: $progress-background;
|
||
|
|
border: 0;
|
||
|
|
|
||
|
|
&::-webkit-progress-bar {
|
||
|
|
background: $progress-background;
|
||
|
|
|
||
|
|
@if hasvalue($progress-radius) {
|
||
|
|
border-radius: $progress-radius;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-progress-value {
|
||
|
|
background: $progress-meter-background;
|
||
|
|
|
||
|
|
@if hasvalue($progress-radius) {
|
||
|
|
border-radius: $progress-radius;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-moz-progress-bar {
|
||
|
|
background: $progress-meter-background;
|
||
|
|
|
||
|
|
@if hasvalue($progress-radius) {
|
||
|
|
border-radius: $progress-radius;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $name, $color in $foundation-palette {
|
||
|
|
&.#{$name} {
|
||
|
|
// Internet Explorer sets the fill with color
|
||
|
|
color: $color;
|
||
|
|
|
||
|
|
&::-webkit-progress-value {
|
||
|
|
background: $color;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-moz-progress-bar {
|
||
|
|
background: $color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|