33 lines
674 B
Sass
33 lines
674 B
Sass
|
.progress
|
||
|
@extend .block
|
||
|
-moz-appearance: none
|
||
|
-webkit-appearance: none
|
||
|
border: none
|
||
|
border-radius: 290486px
|
||
|
display: block
|
||
|
height: 12px
|
||
|
overflow: hidden
|
||
|
padding: 0
|
||
|
width: 100%
|
||
|
&::-webkit-progress-bar
|
||
|
background-color: $border
|
||
|
&::-webkit-progress-value
|
||
|
background-color: $text
|
||
|
&::-moz-progress-bar
|
||
|
background-color: $text
|
||
|
// Colors
|
||
|
@each $name, $pair in $colors
|
||
|
$color: nth($pair, 1)
|
||
|
&.is-#{$name}
|
||
|
&::-webkit-progress-value
|
||
|
background-color: $color
|
||
|
&::-moz-progress-bar
|
||
|
background-color: $color
|
||
|
// Sizes
|
||
|
&.is-small
|
||
|
height: 8px
|
||
|
&.is-medium
|
||
|
height: 16px
|
||
|
&.is-large
|
||
|
height: 20px
|