quasar/src/themes/core/visibility.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
.animate-spin, .animate-spin-reverse
  animation q-spin 2s infinite linear
.animate-spin-reverse
  animation-direction reverse
.animate-blink
  animation q-blink 1s steps(5, start) infinite
.animate-pop
  animation q-pop .2s
.animate-scale
  animation q-scale .2s
.animate-fade
  animation q-fade .2s
.animate-bounce
  animation q-bounce 2s infinite

@keyframes q-blink
  to
    visibility hidden

@keyframes q-spin
  0%
    transform rotate(0deg)
  100%
    transform rotate(359deg)

@keyframes q-pop
  0%
    opacity 0
    transform scale(.7)
  70%
    opacity 1
    transform scale(1.07)
  100%
    transform scale(1)

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

@keyframes q-scale
  0%
    opacity 0
    transform scale(.7)
  100%
    opacity 1
    transform scale(1)

@keyframes q-bounce
  0%, 20%, 50%, 80%, 100%
    transform translateY(0)
  40%
    transform translateY(-30px)
  60%
    transform translateY(-15px)

.no-margin
  margin 0 !important
.no-padding
  padding 0 !important
.no-border
  border 0 !important
.no-border-radius
  border-radius 0 !important
.no-box-shadow
  box-shadow none !important

.ellipsis
  text-overflow ellipsis
  white-space nowrap
  overflow hidden

.readonly, [readonly]
  &, * // @stylint ignore
    cursor not-allowed !important
    font-style italic !important
.disabled, [disabled]
  opacity .6 !important
  &, * // @stylint ignore
    cursor not-allowed !important

.hidden
  display none !important
.invisible
  visibility hidden !important
.transparent
  background transparent !important

.overflow-auto
  overflow auto !important
.overflow-hidden
  overflow hidden !important

.dimmed, .light-dimmed
  &:after
    content ''
    position absolute
    top 0
    right 0
    bottom 0
    left 0
.dimmed:after
  background $dimmed-background !important
.light-dimmed:after
  background $light-dimmed-background !important
body
  &.dimmed, &.light-dimmed
    &:after
      z-index $z-body-dimmed !important
.z-absolute
  z-index $z-absolute !important


@keyframes q-highlight
  0%
    background $lime-6
  100%
    background transparent

.highlight-and-fade
  animation q-highlight 2s

@keyframes q-rotate
  0%
    transform rotate(0)
  25%
    transform rotate(90deg)
  50%
    transform rotate(180deg)
  75%
    transform rotate(270deg)
  100%
    transform rotate(360deg)

for type in desktop mobile cordova electron ios mat touch no-touch within-iframe platform-ios platform-android
  body:not(.{type}) .{type}-only,
  body.{type} .{type}-hide
    display none !important

@media all and (orientation portrait)
  .orientation-landscape
    display none !important

@media all and (orientation landscape)
  .orientation-portrait
    display none !important