quasar/src/vue-components/progress/progress.ios.styl at v0.13 · hipertracker/quasar · GitHub

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
$progress-track-height         ?= 4px
$progress-track-color          ?= rgba(0, 0, 0, .15)
$progress-default-track-color  ?= $primary
$progress-border-radius        ?= $generic-border-radius
$progress-margin               ?= .5rem 0 1rem 0
$progress-transition           ?= width .3s linear
$progress-track-desktop-height ?= 15px

.q-progress
  position relative
  height $progress-track-height
  display block
  width 100%
  border-radius $progress-border-radius
  background-clip padding-box
  margin $progress-margin
  overflow hidden

  &:not(.indeterminate) .q-progress-model
    position absolute
    top 0
    bottom 0
    background $primary
    border-radius $progress-border-radius
    transition $progress-transition

  &.animate .q-progress-model
    animation q-progress-stripes 2s linear infinite

  &.indeterminate
    .q-progress-buffer
      display none
    .q-progress-model
      background $progress-default-track-color

      &:before, &:after
        content ''
        position absolute
        background inherit
        top 0
        left 0
        bottom 0
        will-change left, right

      &:before
        animation q-progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
      &:after
        animation q-progress-indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite
        animation-delay 1.15s

  &.stripe .q-progress-model
    &, &:before, &:after
      background-image linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)
      background-size 40px 40px

  for $name, $color in $colors
    &.{$name} .q-progress-model
      background-color $color

.q-progress-track
  background $progress-track-color
  left 0
  top 0

.q-progress-buffer
  right 0
  top 50%
  transform translateY(-50%)
  height 4px
  background $progress-track-color
  mask url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=") // @stylint ignore

.q-progress-track, .q-progress-buffer
  transition $progress-transition
  position absolute
  bottom 0

body.desktop .q-progress
  height $progress-track-desktop-height

@keyframes q-progress-indeterminate
  0%
    left -35%
    right 100%
  60%
    left 100%
    right -90%
  100%
    left 100%
    right -90%

@keyframes q-progress-indeterminate-short
  0%
    left -200%
    right 100%
  60%
    left 107%
    right -8%
  100%
    left 107%
    right -8%

@keyframes q-progress-stripes
  from
    background-position 40px 0
  to
    background-position 0 0