progress.sass 1.9 KB

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