fixed-vuesax 3.14.1 → 3.14.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +187 -187
- package/dist/style/colors.styl +30 -30
- package/dist/style/components/vsAlert.styl +66 -66
- package/dist/style/components/vsAvatar.styl +64 -64
- package/dist/style/components/vsBreadcrumb.styl +50 -50
- package/dist/style/components/vsButton.styl +181 -181
- package/dist/style/components/vsCard.styl +64 -64
- package/dist/style/components/vsCheckBox.styl +111 -111
- package/dist/style/components/vsChip.styl +122 -122
- package/dist/style/components/vsCollapse.styl +109 -109
- package/dist/style/components/vsDivider.styl +34 -34
- package/dist/style/components/vsDropDown.styl +231 -231
- package/dist/style/components/vsIcon.styl +47 -47
- package/dist/style/components/vsImages.styl +166 -166
- package/dist/style/components/vsInput.styl +219 -219
- package/dist/style/components/vsInputNumber.styl +170 -170
- package/dist/style/components/vsList.styl +49 -49
- package/dist/style/components/vsLoading.styl +397 -397
- package/dist/style/components/vsNavbar.styl +286 -286
- package/dist/style/components/vsNotifications.styl +92 -92
- package/dist/style/components/vsPagination.styl +143 -143
- package/dist/style/components/vsPopup.styl +159 -159
- package/dist/style/components/vsProgress.styl +45 -45
- package/dist/style/components/vsRadio.styl +93 -93
- package/dist/style/components/vsSelect.styl +219 -219
- package/dist/style/components/vsSideBar.styl +267 -267
- package/dist/style/components/vsSlider.styl +196 -196
- package/dist/style/components/vsSpacer.styl +5 -5
- package/dist/style/components/vsSwitch.styl +93 -93
- package/dist/style/components/vsTable.styl +408 -408
- package/dist/style/components/vsTabs.styl +280 -280
- package/dist/style/components/vsTextarea.styl +82 -82
- package/dist/style/components/vsTimePicker.styl +42 -42
- package/dist/style/components/vsTooltip.styl +85 -85
- package/dist/style/components/vsUpload.styl +460 -460
- package/dist/style/mixins.styl +133 -133
- package/dist/style/root.styl +9 -9
- package/dist/style/vars.styl +45 -45
- package/dist/style/vuesax.styl +25 -25
- package/dist/vuesax.common.js +1 -1
- package/dist/vuesax.common.js.map +1 -1
- package/dist/vuesax.umd.js +1 -1
- package/dist/vuesax.umd.js.map +1 -1
- package/dist/vuesax.umd.min.js +1 -1
- package/dist/vuesax.umd.min.js.map +1 -1
- package/package.json +8 -8
|
@@ -1,397 +1,397 @@
|
|
|
1
|
-
.vs-con-loading__container
|
|
2
|
-
position: relative;
|
|
3
|
-
overflow: hidden;
|
|
4
|
-
|
|
5
|
-
.con-vs-loading
|
|
6
|
-
position: absolute !important;
|
|
7
|
-
width: 100%;
|
|
8
|
-
height: 100%;
|
|
9
|
-
min-height: 60px;
|
|
10
|
-
top: 50%;
|
|
11
|
-
left 50%;
|
|
12
|
-
transform: translate(-50%, -50%)
|
|
13
|
-
|
|
14
|
-
.beforeRemove
|
|
15
|
-
opacity 0
|
|
16
|
-
|
|
17
|
-
.con-vs-loading
|
|
18
|
-
width: 100%;
|
|
19
|
-
height 100%;
|
|
20
|
-
position fixed
|
|
21
|
-
left 0;
|
|
22
|
-
top: 0;
|
|
23
|
-
background: rgba(255, 255, 255, .6)
|
|
24
|
-
z-index 300000
|
|
25
|
-
display flex
|
|
26
|
-
align-items: center
|
|
27
|
-
justify-content: center
|
|
28
|
-
flex-direction: column
|
|
29
|
-
transition: all .3s ease
|
|
30
|
-
|
|
31
|
-
&.textAfter
|
|
32
|
-
flex-direction: column-reverse !important
|
|
33
|
-
|
|
34
|
-
.title-loading
|
|
35
|
-
position relative
|
|
36
|
-
padding: 5px;
|
|
37
|
-
|
|
38
|
-
.effect-click
|
|
39
|
-
position absolute
|
|
40
|
-
width: 0;
|
|
41
|
-
height 0;
|
|
42
|
-
background: rgba(0, 0, 0, .1)
|
|
43
|
-
border-radius: 50%;
|
|
44
|
-
transform: translate(-50%, -50%)
|
|
45
|
-
|
|
46
|
-
.vs-loading
|
|
47
|
-
position: relative
|
|
48
|
-
width: 55px;
|
|
49
|
-
height: 55px;
|
|
50
|
-
display: block
|
|
51
|
-
border-radius: 50%;
|
|
52
|
-
box-sizing: border-box
|
|
53
|
-
border: 3px solid transparent
|
|
54
|
-
|
|
55
|
-
.effects
|
|
56
|
-
transition: all .3s ease
|
|
57
|
-
|
|
58
|
-
&.material
|
|
59
|
-
display: flex
|
|
60
|
-
align-items: center
|
|
61
|
-
justify-content: center
|
|
62
|
-
|
|
63
|
-
&.default, &.border
|
|
64
|
-
.effect-1
|
|
65
|
-
position: absolute
|
|
66
|
-
width: 100%
|
|
67
|
-
height: 100%
|
|
68
|
-
border: 3px solid transparent
|
|
69
|
-
border-left: 3px solid getColor(primary)
|
|
70
|
-
animation: rotate 1s ease infinite;
|
|
71
|
-
border-radius: 50%;
|
|
72
|
-
box-sizing: border-box
|
|
73
|
-
|
|
74
|
-
.effect-2
|
|
75
|
-
position: absolute
|
|
76
|
-
width: 100%
|
|
77
|
-
height: 100%
|
|
78
|
-
border: 3px solid transparent
|
|
79
|
-
border-left: 3px solid getColor(primary)
|
|
80
|
-
animation: rotateOpacity 1s ease infinite .1s;
|
|
81
|
-
border-radius: 50%;
|
|
82
|
-
box-sizing: border-box
|
|
83
|
-
|
|
84
|
-
.effect-3
|
|
85
|
-
position: absolute
|
|
86
|
-
width: 100%
|
|
87
|
-
height: 100%
|
|
88
|
-
border: 3px solid transparent
|
|
89
|
-
border-left: 3px solid getColor(primary)
|
|
90
|
-
animation: rotateOpacity 1s ease infinite .2s;
|
|
91
|
-
border-radius: 50%;
|
|
92
|
-
box-sizing: border-box
|
|
93
|
-
|
|
94
|
-
//border type
|
|
95
|
-
|
|
96
|
-
&.border
|
|
97
|
-
border: 1px solid rgb(240, 240, 240)
|
|
98
|
-
|
|
99
|
-
.effect-1, .effect-2, .effect-3
|
|
100
|
-
border: 1px solid transparent
|
|
101
|
-
border-left: 1px solid getColor(primary)
|
|
102
|
-
|
|
103
|
-
//point type
|
|
104
|
-
|
|
105
|
-
&.point
|
|
106
|
-
.effect-1
|
|
107
|
-
background: getColor(primary, .4)
|
|
108
|
-
position: absolute
|
|
109
|
-
width: 100%
|
|
110
|
-
height: 100%
|
|
111
|
-
animation: scale 1.2s ease infinite;
|
|
112
|
-
border-radius: 50%;
|
|
113
|
-
box-sizing: border-box
|
|
114
|
-
|
|
115
|
-
.effect-2
|
|
116
|
-
background: getColor(primary, .4)
|
|
117
|
-
position: absolute
|
|
118
|
-
width: 100%
|
|
119
|
-
height: 100%
|
|
120
|
-
animation: scale 1.8s ease infinite;
|
|
121
|
-
border-radius: 50%;
|
|
122
|
-
box-sizing: border-box
|
|
123
|
-
|
|
124
|
-
.effect-3
|
|
125
|
-
background: getColor(primary, .4)
|
|
126
|
-
position: absolute
|
|
127
|
-
width: 100%
|
|
128
|
-
height: 100%
|
|
129
|
-
animation: scale 3.6s ease-out infinite;
|
|
130
|
-
border-radius: 50%;
|
|
131
|
-
box-sizing: border-box
|
|
132
|
-
|
|
133
|
-
&.radius
|
|
134
|
-
.effect-1
|
|
135
|
-
position: absolute
|
|
136
|
-
width: 100%
|
|
137
|
-
height: 100%
|
|
138
|
-
border: 3px solid getColor(primary)
|
|
139
|
-
animation: radius 1s ease infinite;
|
|
140
|
-
border-radius: 10px;
|
|
141
|
-
box-sizing: border-box
|
|
142
|
-
|
|
143
|
-
.effect-2
|
|
144
|
-
position: absolute
|
|
145
|
-
width: 100%
|
|
146
|
-
height: 100%
|
|
147
|
-
border: 3px solid getColor(primary)
|
|
148
|
-
animation: radius 2s ease infinite .1s;
|
|
149
|
-
border-radius: 10px;
|
|
150
|
-
box-sizing: border-box
|
|
151
|
-
|
|
152
|
-
.effect-3
|
|
153
|
-
position: absolute
|
|
154
|
-
width: 100%
|
|
155
|
-
height: 100%
|
|
156
|
-
border: 3px solid getColor(primary)
|
|
157
|
-
animation: radius 3s ease infinite .2s;
|
|
158
|
-
border-radius: 10px;
|
|
159
|
-
box-sizing: border-box
|
|
160
|
-
|
|
161
|
-
&.corners
|
|
162
|
-
.effect-1
|
|
163
|
-
position: absolute
|
|
164
|
-
width: 100%
|
|
165
|
-
height: 100%
|
|
166
|
-
border: 3px solid getColor(primary)
|
|
167
|
-
animation: corners 1s ease infinite;
|
|
168
|
-
border-radius: 10px;
|
|
169
|
-
box-sizing: border-box
|
|
170
|
-
|
|
171
|
-
&.sound
|
|
172
|
-
display: flex
|
|
173
|
-
align-items: center
|
|
174
|
-
justify-content: center
|
|
175
|
-
|
|
176
|
-
.effect-1
|
|
177
|
-
position: relative
|
|
178
|
-
width: 5px
|
|
179
|
-
height: 100%
|
|
180
|
-
animation: sound 1.4s ease infinite alternate;
|
|
181
|
-
border-radius: 10px;
|
|
182
|
-
box-sizing: border-box
|
|
183
|
-
background: getColor(primary)
|
|
184
|
-
margin: 0 4px
|
|
185
|
-
|
|
186
|
-
.effect-2
|
|
187
|
-
position: relative
|
|
188
|
-
width: 5px
|
|
189
|
-
height: 60%
|
|
190
|
-
animation: sound .7s ease infinite alternate;
|
|
191
|
-
border-radius: 10px;
|
|
192
|
-
box-sizing: border-box
|
|
193
|
-
background: getColor(primary)
|
|
194
|
-
margin: 0 4px
|
|
195
|
-
|
|
196
|
-
.effect-3
|
|
197
|
-
position: relative
|
|
198
|
-
width: 5px
|
|
199
|
-
height: 80%
|
|
200
|
-
animation: sound 1s ease-out infinite alternate;
|
|
201
|
-
border-radius: 10px;
|
|
202
|
-
box-sizing: border-box
|
|
203
|
-
background: getColor(primary)
|
|
204
|
-
margin: 0 4px
|
|
205
|
-
|
|
206
|
-
.spinner
|
|
207
|
-
animation: rotator 1.4s linear infinite;
|
|
208
|
-
|
|
209
|
-
.path
|
|
210
|
-
stroke-dasharray: 187;
|
|
211
|
-
stroke-dashoffset: 0;
|
|
212
|
-
transform-origin: center;
|
|
213
|
-
animation: dash 1.4s ease-in-out infinite,
|
|
214
|
-
colors 5.6s ease-in-out infinite;
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
.fade-enter-active, .fade-leave-active {
|
|
218
|
-
transition: opacity .3s;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
|
|
222
|
-
{
|
|
223
|
-
opacity: 0;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
.effect-click-leave-active {
|
|
228
|
-
transition: all .3s;
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
.effect-click-leave-to /* .fade-leave-active below version 2.1.8 */
|
|
232
|
-
{
|
|
233
|
-
opacity: 0;
|
|
234
|
-
width: 1000px !important;
|
|
235
|
-
height 1000px !important
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
// default border
|
|
239
|
-
|
|
240
|
-
@keyframes rotate
|
|
241
|
-
0%
|
|
242
|
-
transform: rotate(0deg);
|
|
243
|
-
100%
|
|
244
|
-
transform: rotate(360deg);
|
|
245
|
-
|
|
246
|
-
@keyframes rotateOpacity
|
|
247
|
-
0%
|
|
248
|
-
transform: rotate(0deg);
|
|
249
|
-
opacity .1
|
|
250
|
-
100%
|
|
251
|
-
transform: rotate(360deg);
|
|
252
|
-
opacity 1
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
// point
|
|
256
|
-
|
|
257
|
-
@keyframes scale
|
|
258
|
-
0%
|
|
259
|
-
transform: scale(.1);
|
|
260
|
-
60%
|
|
261
|
-
transform: scale(1);
|
|
262
|
-
100%
|
|
263
|
-
transform: scale(.1);
|
|
264
|
-
|
|
265
|
-
//redius
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
@keyframes radius
|
|
269
|
-
0%
|
|
270
|
-
transform: rotate(0deg) scale(.1);
|
|
271
|
-
opacity 1
|
|
272
|
-
60%
|
|
273
|
-
// border-radius: 80%
|
|
274
|
-
transform: rotate(160deg) scale(1);
|
|
275
|
-
opacity 0
|
|
276
|
-
100%
|
|
277
|
-
transform: rotate(0deg) scale(.1);
|
|
278
|
-
opacity 1
|
|
279
|
-
|
|
280
|
-
// corners
|
|
281
|
-
|
|
282
|
-
@keyframes corners
|
|
283
|
-
0%
|
|
284
|
-
border-radius: 50%
|
|
285
|
-
transform: rotate(0deg)
|
|
286
|
-
25%
|
|
287
|
-
border-radius: 50% 50% 50% 20%
|
|
288
|
-
50%
|
|
289
|
-
border-radius: 50% 50% 20% 30%
|
|
290
|
-
75%
|
|
291
|
-
border-radius: 50% 20% 30% 30%
|
|
292
|
-
100%
|
|
293
|
-
border-radius: 50%
|
|
294
|
-
transform: rotate(-180deg)
|
|
295
|
-
|
|
296
|
-
//sound
|
|
297
|
-
|
|
298
|
-
@keyframes sound
|
|
299
|
-
0%
|
|
300
|
-
transform: scaleY(0)
|
|
301
|
-
opacity .7
|
|
302
|
-
40%
|
|
303
|
-
transform: scaleY(1.2)
|
|
304
|
-
opacity .5
|
|
305
|
-
70%
|
|
306
|
-
transform: scaleY(.2)
|
|
307
|
-
opacity .8
|
|
308
|
-
50%
|
|
309
|
-
transform: scaleY(1)
|
|
310
|
-
opacity 1
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
@keyframes dash
|
|
314
|
-
0%
|
|
315
|
-
stroke-dashoffset: 187;
|
|
316
|
-
50%
|
|
317
|
-
stroke-dashoffset: 46.75;
|
|
318
|
-
transform: rotate(135deg);
|
|
319
|
-
100%
|
|
320
|
-
stroke-dashoffset: 187;
|
|
321
|
-
transform: rotate(450deg);
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
@keyframes colors
|
|
325
|
-
0%
|
|
326
|
-
stroke: #4285F4;
|
|
327
|
-
25%
|
|
328
|
-
stroke: #DE3E35;
|
|
329
|
-
50%
|
|
330
|
-
stroke: #F7C223;
|
|
331
|
-
75%
|
|
332
|
-
stroke: #1B9A59;
|
|
333
|
-
100%
|
|
334
|
-
stroke: #4285F4;
|
|
335
|
-
|
|
336
|
-
@keyframes rotator
|
|
337
|
-
0%
|
|
338
|
-
transform: rotate(0deg);
|
|
339
|
-
100%
|
|
340
|
-
transform: rotate(270deg);
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
for colorx, i in $vs-colors
|
|
344
|
-
.vs-loading-background-{colorx}
|
|
345
|
-
background: getColor(colorx, 1)
|
|
346
|
-
.vs-loading-color-{colorx}
|
|
347
|
-
.default, .border
|
|
348
|
-
.effect-1
|
|
349
|
-
border-left: 3px solid getColor(colorx, 1) !important
|
|
350
|
-
|
|
351
|
-
.effect-2
|
|
352
|
-
border-left: 3px solid getColor(colorx, 1) !important
|
|
353
|
-
|
|
354
|
-
.effect-3
|
|
355
|
-
border-left: 3px solid getColor(colorx, 1) !important
|
|
356
|
-
|
|
357
|
-
//border type
|
|
358
|
-
|
|
359
|
-
.border
|
|
360
|
-
.effect-1, .effect-2, .effect-3
|
|
361
|
-
border-left: 1px solid getColor(colorx, 1) !important
|
|
362
|
-
|
|
363
|
-
//point type
|
|
364
|
-
|
|
365
|
-
.point
|
|
366
|
-
.effect-1
|
|
367
|
-
background: getColor(colorx, .4) !important
|
|
368
|
-
|
|
369
|
-
.effect-2
|
|
370
|
-
background: getColor(colorx, .4) !important
|
|
371
|
-
|
|
372
|
-
.effect-3
|
|
373
|
-
background: getColor(colorx, .4) !important
|
|
374
|
-
|
|
375
|
-
.radius
|
|
376
|
-
.effect-1
|
|
377
|
-
border: 3px solid getColor(colorx, 1) !important
|
|
378
|
-
|
|
379
|
-
.effect-2
|
|
380
|
-
border: 3px solid getColor(colorx, 1) !important
|
|
381
|
-
|
|
382
|
-
.effect-3
|
|
383
|
-
border: 3px solid getColor(colorx, 1) !important
|
|
384
|
-
|
|
385
|
-
.corners
|
|
386
|
-
.effect-1
|
|
387
|
-
border: 3px solid getColor(colorx, 1) !important
|
|
388
|
-
|
|
389
|
-
.sound
|
|
390
|
-
.effect-1
|
|
391
|
-
background: getColor(colorx, 1) !important
|
|
392
|
-
|
|
393
|
-
.effect-2
|
|
394
|
-
background: getColor(colorx, 1) !important
|
|
395
|
-
|
|
396
|
-
.effect-3
|
|
397
|
-
background: getColor(colorx, 1) !important
|
|
1
|
+
.vs-con-loading__container
|
|
2
|
+
position: relative;
|
|
3
|
+
overflow: hidden;
|
|
4
|
+
|
|
5
|
+
.con-vs-loading
|
|
6
|
+
position: absolute !important;
|
|
7
|
+
width: 100%;
|
|
8
|
+
height: 100%;
|
|
9
|
+
min-height: 60px;
|
|
10
|
+
top: 50%;
|
|
11
|
+
left 50%;
|
|
12
|
+
transform: translate(-50%, -50%)
|
|
13
|
+
|
|
14
|
+
.beforeRemove
|
|
15
|
+
opacity 0
|
|
16
|
+
|
|
17
|
+
.con-vs-loading
|
|
18
|
+
width: 100%;
|
|
19
|
+
height 100%;
|
|
20
|
+
position fixed
|
|
21
|
+
left 0;
|
|
22
|
+
top: 0;
|
|
23
|
+
background: rgba(255, 255, 255, .6)
|
|
24
|
+
z-index 300000
|
|
25
|
+
display flex
|
|
26
|
+
align-items: center
|
|
27
|
+
justify-content: center
|
|
28
|
+
flex-direction: column
|
|
29
|
+
transition: all .3s ease
|
|
30
|
+
|
|
31
|
+
&.textAfter
|
|
32
|
+
flex-direction: column-reverse !important
|
|
33
|
+
|
|
34
|
+
.title-loading
|
|
35
|
+
position relative
|
|
36
|
+
padding: 5px;
|
|
37
|
+
|
|
38
|
+
.effect-click
|
|
39
|
+
position absolute
|
|
40
|
+
width: 0;
|
|
41
|
+
height 0;
|
|
42
|
+
background: rgba(0, 0, 0, .1)
|
|
43
|
+
border-radius: 50%;
|
|
44
|
+
transform: translate(-50%, -50%)
|
|
45
|
+
|
|
46
|
+
.vs-loading
|
|
47
|
+
position: relative
|
|
48
|
+
width: 55px;
|
|
49
|
+
height: 55px;
|
|
50
|
+
display: block
|
|
51
|
+
border-radius: 50%;
|
|
52
|
+
box-sizing: border-box
|
|
53
|
+
border: 3px solid transparent
|
|
54
|
+
|
|
55
|
+
.effects
|
|
56
|
+
transition: all .3s ease
|
|
57
|
+
|
|
58
|
+
&.material
|
|
59
|
+
display: flex
|
|
60
|
+
align-items: center
|
|
61
|
+
justify-content: center
|
|
62
|
+
|
|
63
|
+
&.default, &.border
|
|
64
|
+
.effect-1
|
|
65
|
+
position: absolute
|
|
66
|
+
width: 100%
|
|
67
|
+
height: 100%
|
|
68
|
+
border: 3px solid transparent
|
|
69
|
+
border-left: 3px solid getColor(primary)
|
|
70
|
+
animation: rotate 1s ease infinite;
|
|
71
|
+
border-radius: 50%;
|
|
72
|
+
box-sizing: border-box
|
|
73
|
+
|
|
74
|
+
.effect-2
|
|
75
|
+
position: absolute
|
|
76
|
+
width: 100%
|
|
77
|
+
height: 100%
|
|
78
|
+
border: 3px solid transparent
|
|
79
|
+
border-left: 3px solid getColor(primary)
|
|
80
|
+
animation: rotateOpacity 1s ease infinite .1s;
|
|
81
|
+
border-radius: 50%;
|
|
82
|
+
box-sizing: border-box
|
|
83
|
+
|
|
84
|
+
.effect-3
|
|
85
|
+
position: absolute
|
|
86
|
+
width: 100%
|
|
87
|
+
height: 100%
|
|
88
|
+
border: 3px solid transparent
|
|
89
|
+
border-left: 3px solid getColor(primary)
|
|
90
|
+
animation: rotateOpacity 1s ease infinite .2s;
|
|
91
|
+
border-radius: 50%;
|
|
92
|
+
box-sizing: border-box
|
|
93
|
+
|
|
94
|
+
//border type
|
|
95
|
+
|
|
96
|
+
&.border
|
|
97
|
+
border: 1px solid rgb(240, 240, 240)
|
|
98
|
+
|
|
99
|
+
.effect-1, .effect-2, .effect-3
|
|
100
|
+
border: 1px solid transparent
|
|
101
|
+
border-left: 1px solid getColor(primary)
|
|
102
|
+
|
|
103
|
+
//point type
|
|
104
|
+
|
|
105
|
+
&.point
|
|
106
|
+
.effect-1
|
|
107
|
+
background: getColor(primary, .4)
|
|
108
|
+
position: absolute
|
|
109
|
+
width: 100%
|
|
110
|
+
height: 100%
|
|
111
|
+
animation: scale 1.2s ease infinite;
|
|
112
|
+
border-radius: 50%;
|
|
113
|
+
box-sizing: border-box
|
|
114
|
+
|
|
115
|
+
.effect-2
|
|
116
|
+
background: getColor(primary, .4)
|
|
117
|
+
position: absolute
|
|
118
|
+
width: 100%
|
|
119
|
+
height: 100%
|
|
120
|
+
animation: scale 1.8s ease infinite;
|
|
121
|
+
border-radius: 50%;
|
|
122
|
+
box-sizing: border-box
|
|
123
|
+
|
|
124
|
+
.effect-3
|
|
125
|
+
background: getColor(primary, .4)
|
|
126
|
+
position: absolute
|
|
127
|
+
width: 100%
|
|
128
|
+
height: 100%
|
|
129
|
+
animation: scale 3.6s ease-out infinite;
|
|
130
|
+
border-radius: 50%;
|
|
131
|
+
box-sizing: border-box
|
|
132
|
+
|
|
133
|
+
&.radius
|
|
134
|
+
.effect-1
|
|
135
|
+
position: absolute
|
|
136
|
+
width: 100%
|
|
137
|
+
height: 100%
|
|
138
|
+
border: 3px solid getColor(primary)
|
|
139
|
+
animation: radius 1s ease infinite;
|
|
140
|
+
border-radius: 10px;
|
|
141
|
+
box-sizing: border-box
|
|
142
|
+
|
|
143
|
+
.effect-2
|
|
144
|
+
position: absolute
|
|
145
|
+
width: 100%
|
|
146
|
+
height: 100%
|
|
147
|
+
border: 3px solid getColor(primary)
|
|
148
|
+
animation: radius 2s ease infinite .1s;
|
|
149
|
+
border-radius: 10px;
|
|
150
|
+
box-sizing: border-box
|
|
151
|
+
|
|
152
|
+
.effect-3
|
|
153
|
+
position: absolute
|
|
154
|
+
width: 100%
|
|
155
|
+
height: 100%
|
|
156
|
+
border: 3px solid getColor(primary)
|
|
157
|
+
animation: radius 3s ease infinite .2s;
|
|
158
|
+
border-radius: 10px;
|
|
159
|
+
box-sizing: border-box
|
|
160
|
+
|
|
161
|
+
&.corners
|
|
162
|
+
.effect-1
|
|
163
|
+
position: absolute
|
|
164
|
+
width: 100%
|
|
165
|
+
height: 100%
|
|
166
|
+
border: 3px solid getColor(primary)
|
|
167
|
+
animation: corners 1s ease infinite;
|
|
168
|
+
border-radius: 10px;
|
|
169
|
+
box-sizing: border-box
|
|
170
|
+
|
|
171
|
+
&.sound
|
|
172
|
+
display: flex
|
|
173
|
+
align-items: center
|
|
174
|
+
justify-content: center
|
|
175
|
+
|
|
176
|
+
.effect-1
|
|
177
|
+
position: relative
|
|
178
|
+
width: 5px
|
|
179
|
+
height: 100%
|
|
180
|
+
animation: sound 1.4s ease infinite alternate;
|
|
181
|
+
border-radius: 10px;
|
|
182
|
+
box-sizing: border-box
|
|
183
|
+
background: getColor(primary)
|
|
184
|
+
margin: 0 4px
|
|
185
|
+
|
|
186
|
+
.effect-2
|
|
187
|
+
position: relative
|
|
188
|
+
width: 5px
|
|
189
|
+
height: 60%
|
|
190
|
+
animation: sound .7s ease infinite alternate;
|
|
191
|
+
border-radius: 10px;
|
|
192
|
+
box-sizing: border-box
|
|
193
|
+
background: getColor(primary)
|
|
194
|
+
margin: 0 4px
|
|
195
|
+
|
|
196
|
+
.effect-3
|
|
197
|
+
position: relative
|
|
198
|
+
width: 5px
|
|
199
|
+
height: 80%
|
|
200
|
+
animation: sound 1s ease-out infinite alternate;
|
|
201
|
+
border-radius: 10px;
|
|
202
|
+
box-sizing: border-box
|
|
203
|
+
background: getColor(primary)
|
|
204
|
+
margin: 0 4px
|
|
205
|
+
|
|
206
|
+
.spinner
|
|
207
|
+
animation: rotator 1.4s linear infinite;
|
|
208
|
+
|
|
209
|
+
.path
|
|
210
|
+
stroke-dasharray: 187;
|
|
211
|
+
stroke-dashoffset: 0;
|
|
212
|
+
transform-origin: center;
|
|
213
|
+
animation: dash 1.4s ease-in-out infinite,
|
|
214
|
+
colors 5.6s ease-in-out infinite;
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
.fade-enter-active, .fade-leave-active {
|
|
218
|
+
transition: opacity .3s;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
|
|
222
|
+
{
|
|
223
|
+
opacity: 0;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
|
|
227
|
+
.effect-click-leave-active {
|
|
228
|
+
transition: all .3s;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.effect-click-leave-to /* .fade-leave-active below version 2.1.8 */
|
|
232
|
+
{
|
|
233
|
+
opacity: 0;
|
|
234
|
+
width: 1000px !important;
|
|
235
|
+
height 1000px !important
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
// default border
|
|
239
|
+
|
|
240
|
+
@keyframes rotate
|
|
241
|
+
0%
|
|
242
|
+
transform: rotate(0deg);
|
|
243
|
+
100%
|
|
244
|
+
transform: rotate(360deg);
|
|
245
|
+
|
|
246
|
+
@keyframes rotateOpacity
|
|
247
|
+
0%
|
|
248
|
+
transform: rotate(0deg);
|
|
249
|
+
opacity .1
|
|
250
|
+
100%
|
|
251
|
+
transform: rotate(360deg);
|
|
252
|
+
opacity 1
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
// point
|
|
256
|
+
|
|
257
|
+
@keyframes scale
|
|
258
|
+
0%
|
|
259
|
+
transform: scale(.1);
|
|
260
|
+
60%
|
|
261
|
+
transform: scale(1);
|
|
262
|
+
100%
|
|
263
|
+
transform: scale(.1);
|
|
264
|
+
|
|
265
|
+
//redius
|
|
266
|
+
|
|
267
|
+
|
|
268
|
+
@keyframes radius
|
|
269
|
+
0%
|
|
270
|
+
transform: rotate(0deg) scale(.1);
|
|
271
|
+
opacity 1
|
|
272
|
+
60%
|
|
273
|
+
// border-radius: 80%
|
|
274
|
+
transform: rotate(160deg) scale(1);
|
|
275
|
+
opacity 0
|
|
276
|
+
100%
|
|
277
|
+
transform: rotate(0deg) scale(.1);
|
|
278
|
+
opacity 1
|
|
279
|
+
|
|
280
|
+
// corners
|
|
281
|
+
|
|
282
|
+
@keyframes corners
|
|
283
|
+
0%
|
|
284
|
+
border-radius: 50%
|
|
285
|
+
transform: rotate(0deg)
|
|
286
|
+
25%
|
|
287
|
+
border-radius: 50% 50% 50% 20%
|
|
288
|
+
50%
|
|
289
|
+
border-radius: 50% 50% 20% 30%
|
|
290
|
+
75%
|
|
291
|
+
border-radius: 50% 20% 30% 30%
|
|
292
|
+
100%
|
|
293
|
+
border-radius: 50%
|
|
294
|
+
transform: rotate(-180deg)
|
|
295
|
+
|
|
296
|
+
//sound
|
|
297
|
+
|
|
298
|
+
@keyframes sound
|
|
299
|
+
0%
|
|
300
|
+
transform: scaleY(0)
|
|
301
|
+
opacity .7
|
|
302
|
+
40%
|
|
303
|
+
transform: scaleY(1.2)
|
|
304
|
+
opacity .5
|
|
305
|
+
70%
|
|
306
|
+
transform: scaleY(.2)
|
|
307
|
+
opacity .8
|
|
308
|
+
50%
|
|
309
|
+
transform: scaleY(1)
|
|
310
|
+
opacity 1
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
@keyframes dash
|
|
314
|
+
0%
|
|
315
|
+
stroke-dashoffset: 187;
|
|
316
|
+
50%
|
|
317
|
+
stroke-dashoffset: 46.75;
|
|
318
|
+
transform: rotate(135deg);
|
|
319
|
+
100%
|
|
320
|
+
stroke-dashoffset: 187;
|
|
321
|
+
transform: rotate(450deg);
|
|
322
|
+
|
|
323
|
+
|
|
324
|
+
@keyframes colors
|
|
325
|
+
0%
|
|
326
|
+
stroke: #4285F4;
|
|
327
|
+
25%
|
|
328
|
+
stroke: #DE3E35;
|
|
329
|
+
50%
|
|
330
|
+
stroke: #F7C223;
|
|
331
|
+
75%
|
|
332
|
+
stroke: #1B9A59;
|
|
333
|
+
100%
|
|
334
|
+
stroke: #4285F4;
|
|
335
|
+
|
|
336
|
+
@keyframes rotator
|
|
337
|
+
0%
|
|
338
|
+
transform: rotate(0deg);
|
|
339
|
+
100%
|
|
340
|
+
transform: rotate(270deg);
|
|
341
|
+
|
|
342
|
+
|
|
343
|
+
for colorx, i in $vs-colors
|
|
344
|
+
.vs-loading-background-{colorx}
|
|
345
|
+
background: getColor(colorx, 1)
|
|
346
|
+
.vs-loading-color-{colorx}
|
|
347
|
+
.default, .border
|
|
348
|
+
.effect-1
|
|
349
|
+
border-left: 3px solid getColor(colorx, 1) !important
|
|
350
|
+
|
|
351
|
+
.effect-2
|
|
352
|
+
border-left: 3px solid getColor(colorx, 1) !important
|
|
353
|
+
|
|
354
|
+
.effect-3
|
|
355
|
+
border-left: 3px solid getColor(colorx, 1) !important
|
|
356
|
+
|
|
357
|
+
//border type
|
|
358
|
+
|
|
359
|
+
.border
|
|
360
|
+
.effect-1, .effect-2, .effect-3
|
|
361
|
+
border-left: 1px solid getColor(colorx, 1) !important
|
|
362
|
+
|
|
363
|
+
//point type
|
|
364
|
+
|
|
365
|
+
.point
|
|
366
|
+
.effect-1
|
|
367
|
+
background: getColor(colorx, .4) !important
|
|
368
|
+
|
|
369
|
+
.effect-2
|
|
370
|
+
background: getColor(colorx, .4) !important
|
|
371
|
+
|
|
372
|
+
.effect-3
|
|
373
|
+
background: getColor(colorx, .4) !important
|
|
374
|
+
|
|
375
|
+
.radius
|
|
376
|
+
.effect-1
|
|
377
|
+
border: 3px solid getColor(colorx, 1) !important
|
|
378
|
+
|
|
379
|
+
.effect-2
|
|
380
|
+
border: 3px solid getColor(colorx, 1) !important
|
|
381
|
+
|
|
382
|
+
.effect-3
|
|
383
|
+
border: 3px solid getColor(colorx, 1) !important
|
|
384
|
+
|
|
385
|
+
.corners
|
|
386
|
+
.effect-1
|
|
387
|
+
border: 3px solid getColor(colorx, 1) !important
|
|
388
|
+
|
|
389
|
+
.sound
|
|
390
|
+
.effect-1
|
|
391
|
+
background: getColor(colorx, 1) !important
|
|
392
|
+
|
|
393
|
+
.effect-2
|
|
394
|
+
background: getColor(colorx, 1) !important
|
|
395
|
+
|
|
396
|
+
.effect-3
|
|
397
|
+
background: getColor(colorx, 1) !important
|