quasar/ui/src/css/core/animations.sass at dev · 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
/*
 * Animate.css additions
 * Adapted from: https://github.com/animate-css/animate.css/blob/6828621a01e145119db6194dc9b4d37325b48aa5/source/_base.css
 */

\:root
  --animate-duration: #{$animate-duration}
  --animate-delay: #{$animate-delay}
  --animate-repeat: #{$animate-repeat}

.animated
  animation-duration: var(--animate-duration)
  animation-fill-mode: both

  &.infinite
    animation-iteration-count: infinite

  // Last seen on v3.5.2
  &.hinge
    animation-duration: 2s

  &.repeat-1
    animation-iteration-count: var(--animate-repeat)

  &.repeat-2
    animation-iteration-count: calc(var(--animate-repeat) * 2)

  &.repeat-3
    animation-iteration-count: calc(var(--animate-repeat) * 3)

  &.delay-1s
    animation-delay: var(--animate-delay)

  &.delay-2s
    animation-delay: calc(var(--animate-delay) * 2)

  &.delay-3s
    animation-delay: calc(var(--animate-delay) * 3)

  &.delay-4s
    animation-delay: calc(var(--animate-delay) * 4)

  &.delay-5s
    animation-delay: calc(var(--animate-delay) * 5)

  &.faster
    animation-duration: calc(var(--animate-duration) / 2)

  &.fast
    animation-duration: calc(var(--animate-duration) * 0.8)

  &.slow
    animation-duration: calc(var(--animate-duration) * 2)

  &.slower
    animation-duration: calc(var(--animate-duration) * 3)

@media print, (prefers-reduced-motion: reduce)
  .animated
    animation-duration: 1ms !important
    transition-duration: 1ms !important
    animation-iteration-count: 1 !important

  .animated[class*='Out']
    opacity: 0

/*
 * Quasar animations
 */

.q-animate--scale
  animation: q-scale .15s
  animation-timing-function: cubic-bezier(.25,.8,.25,1)

@keyframes q-scale
  0%
    transform: scale(1)
  50%
    transform: scale(1.04)
  100%
    transform: scale(1)

.q-animate--fade
  animation: q-fade .2s #{"/* rtl:ignore */"}

@keyframes q-fade
  0%
    opacity: 0
  100%
    opacity: 1