aboutsummaryrefslogtreecommitdiff
path: root/themes/hugo-pt2021/assets/bulma-0.9.3/sass/elements/progress.sass
blob: 4daeb8072e42ef3d40fcd8e43106d299f402e65b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
@import "../utilities/mixins"

$progress-bar-background-color: $border-light !default
$progress-value-background-color: $text !default
$progress-border-radius: $radius-rounded !default

$progress-indeterminate-duration: 1.5s !default

$progress-colors: $colors !default

.progress
  @extend %block
  -moz-appearance: none
  -webkit-appearance: none
  border: none
  border-radius: $progress-border-radius
  display: block
  height: $size-normal
  overflow: hidden
  padding: 0
  width: 100%
  &::-webkit-progress-bar
    background-color: $progress-bar-background-color
  &::-webkit-progress-value
    background-color: $progress-value-background-color
  &::-moz-progress-bar
    background-color: $progress-value-background-color
  &::-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%)

  &: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

  // Sizes
  &.is-small
    height: $size-small
  &.is-medium
    height: $size-medium
  &.is-large
    height: $size-large

@keyframes moveIndeterminate
  from
    background-position: 200% 0
  to
    background-position: -200% 0