vanilla-jui 1.5.35 → 1.5.37

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.
Files changed (62) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.umd.js +1 -1
  3. package/dist/style.css +1 -1
  4. package/package.json +7 -4
  5. package/src/css/accordion.css +3 -73
  6. package/src/css/animation.css +143 -0
  7. package/src/css/avatar.css +4 -13
  8. package/src/css/badge.css +4 -11
  9. package/src/css/breadcrumb.css +4 -11
  10. package/src/css/button.css +6 -64
  11. package/src/css/card.css +25 -23
  12. package/src/css/components.css +4 -3
  13. package/src/css/drop.css +0 -10
  14. package/src/css/editor.css +84 -67
  15. package/src/css/flow.css +2 -3
  16. package/src/css/form.css +45 -178
  17. package/src/css/index.css +2 -2
  18. package/src/css/layout.css +32 -0
  19. package/src/css/loading.css +230 -1
  20. package/src/css/menu.css +5 -565
  21. package/src/css/modal.css +0 -29
  22. package/src/css/offcanvas.css +0 -35
  23. package/src/css/pagination.css +0 -10
  24. package/src/css/popup.css +0 -3
  25. package/src/css/skeleton.css +14 -8
  26. package/src/css/status.css +6 -1
  27. package/src/css/swiper.css +7 -74
  28. package/src/css/table.css +4 -33
  29. package/src/css/tabs.css +0 -7
  30. package/src/css/theme-palette.css +6 -40
  31. package/src/css/themes/default/accordion.css +84 -7
  32. package/src/css/themes/default/avatar.css +15 -0
  33. package/src/css/themes/default/badge.css +24 -3
  34. package/src/css/themes/default/breadcrumb.css +18 -0
  35. package/src/css/themes/default/button.css +124 -26
  36. package/src/css/themes/default/drop.css +10 -8
  37. package/src/css/themes/default/editor.css +24 -8
  38. package/src/css/themes/default/form.css +170 -0
  39. package/src/css/themes/default/index.css +5 -2
  40. package/src/css/themes/default/loading.css +0 -1
  41. package/src/css/themes/default/menu.css +591 -42
  42. package/src/css/themes/default/modal.css +39 -17
  43. package/src/css/themes/default/offcanvas.css +40 -3
  44. package/src/css/themes/default/pagination.css +11 -4
  45. package/src/css/themes/default/popup.css +4 -3
  46. package/src/css/themes/default/swiper.css +83 -19
  47. package/src/css/themes/default/table.css +22 -14
  48. package/src/css/themes/default/tabs.css +16 -6
  49. package/src/css/themes/default/theme-palette.css +33 -8
  50. package/src/css/themes/default/tip.css +27 -17
  51. package/src/css/themes/default/toast.css +30 -18
  52. package/src/css/themes/default/toc.css +25 -0
  53. package/src/css/themes/default/toolbar.css +54 -9
  54. package/src/css/themes/default/tooltip.css +14 -7
  55. package/src/css/themes/default/tree.css +75 -0
  56. package/src/css/tip.css +2 -27
  57. package/src/css/toast.css +5 -21
  58. package/src/css/toc.css +0 -24
  59. package/src/css/tokens.css +52 -17
  60. package/src/css/toolbar.css +2 -48
  61. package/src/css/tooltip.css +2 -10
  62. package/src/css/tree.css +49 -0
package/src/css/loading.css CHANGED
@@ -3,7 +3,7 @@
3
3
  display: flex;
4
4
  justify-content: center;
5
5
  align-items: center;
6
- position: var(--loader-position);
6
+ position: absolute;
7
7
  width: 100%;
8
8
  height: 100%;
9
9
  }
@@ -17,6 +17,7 @@
17
17
  border-color: var(--loader-fg);
18
18
  border-right-color: transparent;
19
19
  border-radius: 50%;
20
+ -webkit-animation: var(--loader-speed) linear infinite animate-spin;
20
21
  animation: var(--loader-speed) linear infinite animate-spin;
21
22
  }
22
23
 
@@ -25,17 +26,179 @@
25
26
  aspect-ratio: 1;
26
27
  border-radius: 50%;
27
28
  border: 1.5px solid var(--loader-fg);
29
+ -webkit-animation:
30
+ polygon-loader-1 0.8s infinite linear alternate,
31
+ polygon-loader-2 1.6s infinite linear;
28
32
  animation:
29
33
  polygon-loader-1 0.8s infinite linear alternate,
30
34
  polygon-loader-2 1.6s infinite linear;
31
35
  }
32
36
 
37
+ @-webkit-keyframes polygon-loader-1 {
38
+ 0% {
39
+ -webkit-clip-path: polygon(
40
+ 50% 50%,
41
+ 0 0,
42
+ 50% 0%,
43
+ 50% 0%,
44
+ 50% 0%,
45
+ 50% 0%,
46
+ 50% 0%
47
+ );
48
+ clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
49
+ }
50
+
51
+ 12.5% {
52
+ -webkit-clip-path: polygon(
53
+ 50% 50%,
54
+ 0 0,
55
+ 50% 0%,
56
+ 100% 0%,
57
+ 100% 0%,
58
+ 100% 0%,
59
+ 100% 0%
60
+ );
61
+ clip-path: polygon(
62
+ 50% 50%,
63
+ 0 0,
64
+ 50% 0%,
65
+ 100% 0%,
66
+ 100% 0%,
67
+ 100% 0%,
68
+ 100% 0%
69
+ );
70
+ }
71
+
72
+ 25% {
73
+ -webkit-clip-path: polygon(
74
+ 50% 50%,
75
+ 0 0,
76
+ 50% 0%,
77
+ 100% 0%,
78
+ 100% 100%,
79
+ 100% 100%,
80
+ 100% 100%
81
+ );
82
+ clip-path: polygon(
83
+ 50% 50%,
84
+ 0 0,
85
+ 50% 0%,
86
+ 100% 0%,
87
+ 100% 100%,
88
+ 100% 100%,
89
+ 100% 100%
90
+ );
91
+ }
92
+
93
+ 50% {
94
+ -webkit-clip-path: polygon(
95
+ 50% 50%,
96
+ 0 0,
97
+ 50% 0%,
98
+ 100% 0%,
99
+ 100% 100%,
100
+ 50% 100%,
101
+ 0% 100%
102
+ );
103
+ clip-path: polygon(
104
+ 50% 50%,
105
+ 0 0,
106
+ 50% 0%,
107
+ 100% 0%,
108
+ 100% 100%,
109
+ 50% 100%,
110
+ 0% 100%
111
+ );
112
+ }
113
+
114
+ 62.5% {
115
+ -webkit-clip-path: polygon(
116
+ 50% 50%,
117
+ 100% 0,
118
+ 100% 0%,
119
+ 100% 0%,
120
+ 100% 100%,
121
+ 50% 100%,
122
+ 0% 100%
123
+ );
124
+ clip-path: polygon(
125
+ 50% 50%,
126
+ 100% 0,
127
+ 100% 0%,
128
+ 100% 0%,
129
+ 100% 100%,
130
+ 50% 100%,
131
+ 0% 100%
132
+ );
133
+ }
134
+
135
+ 75% {
136
+ -webkit-clip-path: polygon(
137
+ 50% 50%,
138
+ 100% 100%,
139
+ 100% 100%,
140
+ 100% 100%,
141
+ 100% 100%,
142
+ 50% 100%,
143
+ 0% 100%
144
+ );
145
+ clip-path: polygon(
146
+ 50% 50%,
147
+ 100% 100%,
148
+ 100% 100%,
149
+ 100% 100%,
150
+ 100% 100%,
151
+ 50% 100%,
152
+ 0% 100%
153
+ );
154
+ }
155
+
156
+ 100% {
157
+ -webkit-clip-path: polygon(
158
+ 50% 50%,
159
+ 50% 100%,
160
+ 50% 100%,
161
+ 50% 100%,
162
+ 50% 100%,
163
+ 50% 100%,
164
+ 0% 100%
165
+ );
166
+ clip-path: polygon(
167
+ 50% 50%,
168
+ 50% 100%,
169
+ 50% 100%,
170
+ 50% 100%,
171
+ 50% 100%,
172
+ 50% 100%,
173
+ 0% 100%
174
+ );
175
+ }
176
+ }
177
+
33
178
  @keyframes polygon-loader-1 {
34
179
  0% {
180
+ -webkit-clip-path: polygon(
181
+ 50% 50%,
182
+ 0 0,
183
+ 50% 0%,
184
+ 50% 0%,
185
+ 50% 0%,
186
+ 50% 0%,
187
+ 50% 0%
188
+ );
35
189
  clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
36
190
  }
37
191
 
38
192
  12.5% {
193
+ -webkit-clip-path: polygon(
194
+ 50% 50%,
195
+ 0 0,
196
+ 50% 0%,
197
+ 100% 0%,
198
+ 100% 0%,
199
+ 100% 0%,
200
+ 100% 0%
201
+ );
39
202
  clip-path: polygon(
40
203
  50% 50%,
41
204
  0 0,
@@ -48,6 +211,15 @@
48
211
  }
49
212
 
50
213
  25% {
214
+ -webkit-clip-path: polygon(
215
+ 50% 50%,
216
+ 0 0,
217
+ 50% 0%,
218
+ 100% 0%,
219
+ 100% 100%,
220
+ 100% 100%,
221
+ 100% 100%
222
+ );
51
223
  clip-path: polygon(
52
224
  50% 50%,
53
225
  0 0,
@@ -60,6 +232,15 @@
60
232
  }
61
233
 
62
234
  50% {
235
+ -webkit-clip-path: polygon(
236
+ 50% 50%,
237
+ 0 0,
238
+ 50% 0%,
239
+ 100% 0%,
240
+ 100% 100%,
241
+ 50% 100%,
242
+ 0% 100%
243
+ );
63
244
  clip-path: polygon(
64
245
  50% 50%,
65
246
  0 0,
@@ -72,6 +253,15 @@
72
253
  }
73
254
 
74
255
  62.5% {
256
+ -webkit-clip-path: polygon(
257
+ 50% 50%,
258
+ 100% 0,
259
+ 100% 0%,
260
+ 100% 0%,
261
+ 100% 100%,
262
+ 50% 100%,
263
+ 0% 100%
264
+ );
75
265
  clip-path: polygon(
76
266
  50% 50%,
77
267
  100% 0,
@@ -84,6 +274,15 @@
84
274
  }
85
275
 
86
276
  75% {
277
+ -webkit-clip-path: polygon(
278
+ 50% 50%,
279
+ 100% 100%,
280
+ 100% 100%,
281
+ 100% 100%,
282
+ 100% 100%,
283
+ 50% 100%,
284
+ 0% 100%
285
+ );
87
286
  clip-path: polygon(
88
287
  50% 50%,
89
288
  100% 100%,
@@ -96,6 +295,15 @@
96
295
  }
97
296
 
98
297
  100% {
298
+ -webkit-clip-path: polygon(
299
+ 50% 50%,
300
+ 50% 100%,
301
+ 50% 100%,
302
+ 50% 100%,
303
+ 50% 100%,
304
+ 50% 100%,
305
+ 0% 100%
306
+ );
99
307
  clip-path: polygon(
100
308
  50% 50%,
101
309
  50% 100%,
@@ -108,6 +316,24 @@
108
316
  }
109
317
  }
110
318
 
319
+ @-webkit-keyframes polygon-loader-2 {
320
+ 0% {
321
+ transform: scaleY(1) rotate(0deg);
322
+ }
323
+
324
+ 49.99% {
325
+ transform: scaleY(1) rotate(135deg);
326
+ }
327
+
328
+ 50% {
329
+ transform: scaleY(-1) rotate(0deg);
330
+ }
331
+
332
+ 100% {
333
+ transform: scaleY(-1) rotate(-135deg);
334
+ }
335
+ }
336
+
111
337
  @keyframes polygon-loader-2 {
112
338
  0% {
113
339
  transform: scaleY(1) rotate(0deg);
@@ -134,6 +360,7 @@
134
360
  border-color: var(--loader-fg);
135
361
  border-top-color: var(--loader-top-fg);
136
362
  border-radius: 50%;
363
+ -webkit-animation: 1s linear infinite animate-spin;
137
364
  animation: 1s linear infinite animate-spin;
138
365
  }
139
366
 
@@ -144,7 +371,9 @@
144
371
  border-radius: 50%;
145
372
  aspect-ratio: 1;
146
373
  background: var(--loader-bg);
374
+ -webkit-mask: var(--loader-mask);
147
375
  mask: var(--loader-mask);
376
+ -webkit-animation: 1s linear infinite animate-spin;
148
377
  animation: 1s linear infinite animate-spin;
149
378
  }
150
379
  }