quasar/src/vue-components/progress-button/progress-button.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
.q-progress-button
  overflow hidden

  &.active.indeterminate:before
    content ''
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    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
    animation q-progress-stripes 2s linear infinite

.q-progress-button-content
  transition all .3s
  transform translateY(0)

  &.q-progress-button-complete
    transform translateY(-3.25rem)
  &.q-progress-button-incomplete
    transform translateY(2.75rem)

.q-progress-button-error,
.q-progress-button-success
  position absolute
  text-align center
  top 0
  left 50%
  div
    min-height 1.275rem
    line-height 1.275rem

.q-progress-button-error
  transform translateX(-50%) translateY(-3rem)

.q-progress-button-success
  transform translateX(-50%) translateY(3rem)

.q-progress-button-filler
  transition all .3s
  position absolute
  left 0
  top 0
  bottom 0
  height 100%
  background rgba(255, 255, 255, .25)
  &.q-progress-button-dark-filler
    background rgba(0, 0, 0, .2)