progress.sass 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. @import "../utilities/mixins"
  2. $progress-bar-background-color: $border-light !default
  3. $progress-value-background-color: $text !default
  4. $progress-border-radius: $radius-rounded !default
  5. $progress-indeterminate-duration: 1.5s !default
  6. $progress-colors: $colors !default
  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 $progress-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. &:indeterminate
  40. animation-duration: $progress-indeterminate-duration
  41. animation-iteration-count: infinite
  42. animation-name: moveIndeterminate
  43. animation-timing-function: linear
  44. background-color: $progress-bar-background-color
  45. background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
  46. background-position: top left
  47. background-repeat: no-repeat
  48. background-size: 150% 150%
  49. &::-webkit-progress-bar
  50. background-color: transparent
  51. &::-moz-progress-bar
  52. background-color: transparent
  53. &::-ms-fill
  54. animation-name: none
  55. // Sizes
  56. &.is-small
  57. height: $size-small
  58. &.is-medium
  59. height: $size-medium
  60. &.is-large
  61. height: $size-large
  62. @keyframes moveIndeterminate
  63. from
  64. background-position: 200% 0
  65. to
  66. background-position: -200% 0