bulma/sass/elements/progress.sass

72 lines
2.0 KiB
Sass
Raw Normal View History

2019-09-19 17:08:42 +00:00
$progress-bar-background-color: $border-light !default
2017-07-28 20:05:15 +00:00
$progress-value-background-color: $text !default
$progress-border-radius: $radius-rounded !default
2017-07-28 20:05:15 +00:00
2018-10-28 14:45:28 +00:00
$progress-indeterminate-duration: 1.5s !default
$progress-colors: $colors !default
2016-03-26 16:46:15 +00:00
.progress
2018-09-04 13:24:50 +00:00
@extend %block
2016-03-26 16:46:15 +00:00
-moz-appearance: none
-webkit-appearance: none
border: none
border-radius: $progress-border-radius
2016-03-26 16:46:15 +00:00
display: block
2016-10-30 10:41:53 +00:00
height: $size-normal
2016-03-26 16:46:15 +00:00
overflow: hidden
padding: 0
width: 100%
&::-webkit-progress-bar
2017-07-28 20:05:15 +00:00
background-color: $progress-bar-background-color
&::-webkit-progress-value
2017-07-28 20:05:15 +00:00
background-color: $progress-value-background-color
2016-03-26 16:46:15 +00:00
&::-moz-progress-bar
2017-07-28 20:05:15 +00:00
background-color: $progress-value-background-color
2017-10-19 06:43:57 +00:00
&::-ms-fill
background-color: $progress-value-background-color
border: none
// Colors
@each $name, $pair in $progress-colors
$color: nth($pair, 1)
&.is-#{$name}
&::-webkit-progress-value
background-color: $color
&::-moz-progress-bar
background-color: $color
&::-ms-fill
background-color: $color
&:indeterminate
background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
2018-10-28 14:45:28 +00:00
&:indeterminate
animation-duration: $progress-indeterminate-duration
animation-iteration-count: infinite
animation-name: moveIndeterminate
animation-timing-function: linear
background-color: $progress-bar-background-color
background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
background-position: top left
background-repeat: no-repeat
background-size: 150% 150%
&::-webkit-progress-bar
background-color: transparent
&::-moz-progress-bar
background-color: transparent
&::-ms-fill
animation-name: none
2018-10-08 01:32:48 +00:00
2016-04-10 15:00:32 +00:00
// Sizes
&.is-small
2016-10-30 10:41:53 +00:00
height: $size-small
2016-04-10 15:00:32 +00:00
&.is-medium
2016-10-30 10:41:53 +00:00
height: $size-medium
2016-04-10 15:00:32 +00:00
&.is-large
2016-10-30 10:41:53 +00:00
height: $size-large
2018-10-08 01:32:48 +00:00
2018-10-28 14:45:28 +00:00
@keyframes moveIndeterminate
from
2018-10-08 01:32:48 +00:00
background-position: 200% 0
2018-10-28 14:45:28 +00:00
to
2018-10-08 01:32:48 +00:00
background-position: -200% 0