public/vendors/bulma/sass/elements/progress.sass

   1 $progress-bar-background-color: $border-light !default
   2 $progress-value-background-color: $text !default
   3 $progress-border-radius: $radius-rounded !default
   4
   5 $progress-indeterminate-duration: 1.5s !default
   6
   7 .progress
   8   @extend %block
   9   -moz-appearance: none
  10   -webkit-appearance: none
  11   border: none
  12   border-radius: $progress-border-radius
  13   display: block
  14   height: $size-normal
  15   overflow: hidden
  16   padding: 0
  17   width: 100%
  18   &::-webkit-progress-bar
  19     background-color: $progress-bar-background-color
  20   &::-webkit-progress-value
  21     background-color: $progress-value-background-color
  22   &::-moz-progress-bar
  23     background-color: $progress-value-background-color
  24   &::-ms-fill
  25     background-color: $progress-value-background-color
  26     border: none
  27   // Colors
  28   @each $name, $pair in $colors
  29     $color: nth($pair, 1)
  30     &.is-#{$name}
  31       &::-webkit-progress-value
  32         background-color: $color
  33       &::-moz-progress-bar
  34         background-color: $color
  35       &::-ms-fill
  36         background-color: $color
  37       &:indeterminate
  38         background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
  39
  40   &:indeterminate
  41     animation-duration: $progress-indeterminate-duration
  42     animation-iteration-count: infinite
  43     animation-name: moveIndeterminate
  44     animation-timing-function: linear
  45     background-color: $progress-bar-background-color
  46     background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
  47     background-position: top left
  48     background-repeat: no-repeat
  49     background-size: 150% 150%
  50     &::-webkit-progress-bar
  51       background-color: transparent
  52     &::-moz-progress-bar
  53       background-color: transparent
  54
  55   // Sizes
  56   &.is-small
  57     height: $size-small
  58   &.is-medium
  59     height: $size-medium
  60   &.is-large
  61     height: $size-large
  62
  63 @keyframes moveIndeterminate
  64   from
  65     background-position: 200% 0
  66   to
  67     background-position: -200% 0