wini-web-components 2.8.2 → 2.8.4

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 (65) hide show
  1. package/package.json +6 -2
  2. package/src/component/button/button.module.css +210 -0
  3. package/src/component/button/button.tsx +57 -0
  4. package/src/component/calendar/calendar.module.css +153 -0
  5. package/src/component/calendar/calendar.tsx +389 -0
  6. package/src/component/carousel/carousel.css +622 -0
  7. package/src/component/carousel/carousel.tsx +91 -0
  8. package/src/component/checkbox/checkbox.module.css +48 -0
  9. package/src/component/checkbox/checkbox.tsx +80 -0
  10. package/src/component/ck-editor/ck-editor.css +206 -0
  11. package/src/component/ck-editor/ckeditor.tsx +522 -0
  12. package/src/component/component-status.tsx +53 -0
  13. package/src/component/date-time-picker/date-time-picker.module.css +94 -0
  14. package/src/component/date-time-picker/date-time-picker.tsx +663 -0
  15. package/src/component/dialog/dialog.module.css +111 -0
  16. package/src/component/dialog/dialog.tsx +109 -0
  17. package/src/component/import-file/import-file.module.css +83 -0
  18. package/src/component/import-file/import-file.tsx +174 -0
  19. package/src/component/infinite-scroll/infinite-scroll.module.css +34 -0
  20. package/src/component/infinite-scroll/infinite-scroll.tsx +35 -0
  21. package/src/component/input-multi-select/input-multi-select.module.css +121 -0
  22. package/src/component/input-multi-select/input-multi-select.tsx +263 -0
  23. package/src/component/input-otp/input-otp.module.css +41 -0
  24. package/src/component/input-otp/input-otp.tsx +110 -0
  25. package/src/component/number-picker/number-picker.module.css +137 -0
  26. package/src/component/number-picker/number-picker.tsx +107 -0
  27. package/src/component/pagination/pagination.module.css +48 -0
  28. package/src/component/pagination/pagination.tsx +88 -0
  29. package/src/component/popup/popup.css +136 -0
  30. package/src/component/popup/popup.tsx +125 -0
  31. package/src/component/progress-bar/progress-bar.module.css +42 -0
  32. package/src/component/progress-bar/progress-bar.tsx +33 -0
  33. package/src/component/progress-circle/progress-circle.css +0 -0
  34. package/src/component/progress-circle/progress-circle.tsx +25 -0
  35. package/src/component/radio-button/radio-button.module.css +51 -0
  36. package/src/component/radio-button/radio-button.tsx +60 -0
  37. package/src/component/rating/rating.module.css +11 -0
  38. package/src/component/rating/rating.tsx +65 -0
  39. package/src/component/select1/select1.module.css +108 -0
  40. package/src/component/select1/select1.tsx +271 -0
  41. package/src/component/switch/switch.module.css +53 -0
  42. package/src/component/switch/switch.tsx +68 -0
  43. package/src/component/table/table.css +74 -0
  44. package/src/component/table/table.tsx +108 -0
  45. package/src/component/tag/tag.module.css +108 -0
  46. package/src/component/tag/tag.tsx +31 -0
  47. package/src/component/text/text.css +27 -0
  48. package/src/component/text/text.tsx +24 -0
  49. package/src/component/text-area/text-area.module.css +57 -0
  50. package/src/component/text-area/text-area.tsx +65 -0
  51. package/src/component/text-field/text-field.module.css +71 -0
  52. package/src/component/text-field/text-field.tsx +102 -0
  53. package/src/component/toast-noti/toast-noti.css +866 -0
  54. package/src/component/toast-noti/toast-noti.tsx +22 -0
  55. package/src/component/wini-icon/winicon.module.css +110 -0
  56. package/src/component/wini-icon/winicon.tsx +9424 -0
  57. package/src/form/login/view.module.css +80 -0
  58. package/src/form/login/view.tsx +138 -0
  59. package/src/global.d.ts +5 -0
  60. package/src/index.tsx +66 -0
  61. package/src/language/i18n.tsx +143 -0
  62. package/src/skin/layout.css +649 -0
  63. package/src/skin/root.css +294 -0
  64. package/src/skin/typography.css +314 -0
  65. package/src/vite-env.d.ts +1 -0
@@ -0,0 +1,649 @@
1
+ * {
2
+ flex-shrink: 0;
3
+ box-sizing: border-box;
4
+ }
5
+
6
+ .row {
7
+ display: -webkit-flex;
8
+ display: flex;
9
+ flex-direction: row;
10
+ align-items: center;
11
+ overflow: hidden;
12
+ }
13
+
14
+ .row>.remain {
15
+ width: auto !important;
16
+ min-width: auto !important;
17
+ flex: 1 !important;
18
+ }
19
+
20
+ /* .col>.remain {
21
+ height: auto !important;
22
+ min-height: auto !important;
23
+ flex: 1 !important;
24
+ } */
25
+
26
+ .col {
27
+ display: flex;
28
+ flex-direction: column;
29
+ overflow: hidden;
30
+ }
31
+
32
+ .row>.col0 {
33
+ display: none !important;
34
+ }
35
+
36
+ .row>.col1 {
37
+ width: auto !important;
38
+ min-width: auto !important;
39
+ flex: 0 calc((100% * 1 / 24) - var(--gutter) * 23 / 24) !important;
40
+ }
41
+
42
+ .row>.col2 {
43
+ width: auto !important;
44
+ min-width: auto !important;
45
+ flex: 0 calc((100% * 2 / 24) - var(--gutter) * 11 / 12) !important;
46
+ }
47
+
48
+ .row>.col3 {
49
+ width: auto !important;
50
+ min-width: auto !important;
51
+ flex: 0 calc((100% * 3 / 24) - var(--gutter) * 7 / 8) !important;
52
+ }
53
+
54
+ .row>.col4 {
55
+ width: auto !important;
56
+ min-width: auto !important;
57
+ flex: 0 calc((100% * 4 / 24) - var(--gutter) * 5 / 6) !important;
58
+ }
59
+
60
+ .row>.col6 {
61
+ width: auto !important;
62
+ min-width: auto !important;
63
+ flex: 0 calc((100% * 6 / 24) - var(--gutter) * 3 / 4) !important;
64
+ }
65
+
66
+ .row>.col8 {
67
+ width: auto !important;
68
+ min-width: auto !important;
69
+ flex: 0 calc((100% * 8 / 24) - var(--gutter) * 2 / 3) !important;
70
+ }
71
+
72
+ .row>.col10 {
73
+ width: auto !important;
74
+ min-width: auto !important;
75
+ flex: 0 calc((100% * 10 / 24) - var(--gutter) * 5 / 6) !important;
76
+ }
77
+
78
+ .row>.col12 {
79
+ width: auto !important;
80
+ min-width: auto !important;
81
+ flex: 0 calc((100% * 12 / 24) - var(--gutter) / 2) !important;
82
+ }
83
+
84
+ .row>.col16 {
85
+ width: auto !important;
86
+ min-width: auto !important;
87
+ flex: 0 calc((100% * 16 / 24) - var(--gutter) * 1 / 3) !important;
88
+ }
89
+
90
+ .row>.col18 {
91
+ width: auto !important;
92
+ min-width: auto !important;
93
+ flex: 0 calc((100% * 18 / 24) - var(--gutter) * 1 / 4) !important;
94
+ }
95
+
96
+ .row>.col20 {
97
+ width: auto !important;
98
+ min-width: auto !important;
99
+ flex: 0 calc((100% * 20 / 24) - var(--gutter) * 1 / 6) !important;
100
+ }
101
+
102
+ .row>.col24 {
103
+ width: auto !important;
104
+ min-width: auto !important;
105
+ flex: 0 100% !important;
106
+ }
107
+
108
+ /* Extra small devices (phones, 576px and down) min*/
109
+ @media only screen and (max-width: 576px) {
110
+ :root {
111
+ font-size: 6.8px !important;
112
+ }
113
+
114
+ .row>.remain-min {
115
+ width: auto !important;
116
+ min-width: auto !important;
117
+ flex: 1 !important;
118
+ }
119
+
120
+ .row>.col0-min {
121
+ display: none !important;
122
+ }
123
+
124
+ .row>.col1-min {
125
+ width: auto !important;
126
+ min-width: auto !important;
127
+ flex: 0 calc((100% * 1 / 24) - var(--gutter) * 23 / 24) !important;
128
+ }
129
+
130
+ .row>.col2-min {
131
+ width: auto !important;
132
+ min-width: auto !important;
133
+ flex: 0 calc((100% * 2 / 24) - var(--gutter) * 11 / 12) !important;
134
+ }
135
+
136
+ .row>.col3-min {
137
+ width: auto !important;
138
+ min-width: auto !important;
139
+ flex: 0 calc((100% * 3 / 24) - var(--gutter) * 7 / 8) !important;
140
+ }
141
+
142
+ .row>.col4-min {
143
+ width: auto !important;
144
+ min-width: auto !important;
145
+ flex: 0 calc((100% * 4 / 24) - var(--gutter) * 5 / 6) !important;
146
+ }
147
+
148
+ .row>.col6-min {
149
+ width: auto !important;
150
+ min-width: auto !important;
151
+ flex: 0 calc((100% * 6 / 24) - var(--gutter) * 3 / 4) !important;
152
+ }
153
+
154
+ .row>.col8-min {
155
+ width: auto !important;
156
+ min-width: auto !important;
157
+ flex: 0 calc((100% * 8 / 24) - var(--gutter) * 2 / 3) !important;
158
+ }
159
+
160
+ .row>.col10-min {
161
+ width: auto !important;
162
+ min-width: auto !important;
163
+ flex: 0 calc((100% * 10 / 24) - var(--gutter) * 5 / 6) !important;
164
+ }
165
+
166
+ .row>.col12-min {
167
+ width: auto !important;
168
+ min-width: auto !important;
169
+ flex: 0 calc((100% * 12 / 24) - var(--gutter) / 2) !important;
170
+ }
171
+
172
+ .row>.col16-min {
173
+ width: auto !important;
174
+ min-width: auto !important;
175
+ flex: 0 calc((100% * 16 / 24) - var(--gutter) * 1 / 3) !important;
176
+ }
177
+
178
+ .row>.col18-min {
179
+ width: auto !important;
180
+ min-width: auto !important;
181
+ flex: 0 calc((100% * 18 / 24) - var(--gutter) * 1 / 4) !important;
182
+ }
183
+
184
+ .row>.col20-min {
185
+ width: auto !important;
186
+ min-width: auto !important;
187
+ flex: 0 calc((100% * 20 / 24) - var(--gutter) * 1 / 6) !important;
188
+ }
189
+
190
+ .row>.col24-min {
191
+ width: auto !important;
192
+ min-width: auto !important;
193
+ flex: 0 100% !important;
194
+ }
195
+
196
+ /* more config responsive */
197
+ }
198
+
199
+ /* Small devices (portrait tablets and large phones, 576px and up) Small (sm)*/
200
+ @media only screen and (min-width: 576px) and (max-width: 768px) {
201
+ :root {
202
+ font-size: 7.2px !important;
203
+ }
204
+
205
+ .row>.remain-sm {
206
+ width: auto !important;
207
+ min-width: auto !important;
208
+ flex: 1 !important;
209
+ }
210
+
211
+ .row>.col0-sm {
212
+ display: none !important;
213
+ }
214
+
215
+ .row>.col1-sm {
216
+ width: auto !important;
217
+ min-width: auto !important;
218
+ flex: 0 calc((100% * 1 / 24) - var(--gutter) * 23 / 24) !important;
219
+ }
220
+
221
+ .row>.col2-sm {
222
+ width: auto !important;
223
+ min-width: auto !important;
224
+ flex: 0 calc((100% * 2 / 24) - var(--gutter) * 11 / 12) !important;
225
+ }
226
+
227
+ .row>.col3-sm {
228
+ width: auto !important;
229
+ min-width: auto !important;
230
+ flex: 0 calc((100% * 3 / 24) - var(--gutter) * 7 / 8) !important;
231
+ }
232
+
233
+ .row>.col4-sm {
234
+ width: auto !important;
235
+ min-width: auto !important;
236
+ flex: 0 calc((100% * 4 / 24) - var(--gutter) * 5 / 6) !important;
237
+ }
238
+
239
+ .row>.col6-sm {
240
+ width: auto !important;
241
+ min-width: auto !important;
242
+ flex: 0 calc((100% * 6 / 24) - var(--gutter) * 3 / 4) !important;
243
+ }
244
+
245
+ .row>.col8-sm {
246
+ width: auto !important;
247
+ min-width: auto !important;
248
+ flex: 0 calc((100% * 8 / 24) - var(--gutter) * 2 / 3) !important;
249
+ }
250
+
251
+ .row>.col10-sm {
252
+ width: auto !important;
253
+ min-width: auto !important;
254
+ flex: 0 calc((100% * 10 / 24) - var(--gutter) * 5 / 6) !important;
255
+ }
256
+
257
+
258
+ .row>.col12-sm {
259
+ width: auto !important;
260
+ min-width: auto !important;
261
+ flex: 0 calc((100% * 12 / 24) - var(--gutter) / 2) !important;
262
+ }
263
+
264
+ .row>.col16-sm {
265
+ width: auto !important;
266
+ min-width: auto !important;
267
+ flex: 0 calc((100% * 16 / 24) - var(--gutter) * 1 / 3) !important;
268
+ }
269
+
270
+ .row>.col18-sm {
271
+ width: auto !important;
272
+ min-width: auto !important;
273
+ flex: 0 calc((100% * 18 / 24) - var(--gutter) * 1 / 4) !important;
274
+ }
275
+
276
+ .row>.col20-sm {
277
+ width: auto !important;
278
+ min-width: auto !important;
279
+ flex: 0 calc((100% * 20 / 24) - var(--gutter) * 1 / 6) !important;
280
+ }
281
+
282
+ .row>.col24-sm {
283
+ width: auto !important;
284
+ min-width: auto !important;
285
+ flex: 0 100% !important;
286
+ }
287
+ }
288
+
289
+ /* Medium devices (landscape tablets, 768px and up) Medium (md)*/
290
+ @media only screen and (min-width: 768px) and (max-width: 992px) {
291
+ :root {
292
+ font-size: 7.6px !important;
293
+ }
294
+
295
+ .row>.remain-md {
296
+ width: auto !important;
297
+ min-width: auto !important;
298
+ flex: 1 !important;
299
+ }
300
+
301
+ .row>.col0-md {
302
+ display: none !important;
303
+ }
304
+
305
+ .row>.col1-md {
306
+ width: auto !important;
307
+ min-width: auto !important;
308
+ flex: 0 calc((100% * 1 / 24) - var(--gutter) * 23 / 24) !important;
309
+ }
310
+
311
+ .row>.col2-md {
312
+ width: auto !important;
313
+ min-width: auto !important;
314
+ flex: 0 calc((100% * 2 / 24) - var(--gutter) * 11 / 12) !important;
315
+ }
316
+
317
+ .row>.col3-md {
318
+ width: auto !important;
319
+ min-width: auto !important;
320
+ flex: 0 calc((100% * 3 / 24) - var(--gutter) * 7 / 8) !important;
321
+ }
322
+
323
+ .row>.col4-md {
324
+ width: auto !important;
325
+ min-width: auto !important;
326
+ flex: 0 calc((100% * 4 / 24) - var(--gutter) * 5 / 6) !important;
327
+ }
328
+
329
+ .row>.col6-md {
330
+ width: auto !important;
331
+ min-width: auto !important;
332
+ flex: 0 calc((100% * 6 / 24) - var(--gutter) * 3 / 4) !important;
333
+ }
334
+
335
+ .row>.col8-md {
336
+ width: auto !important;
337
+ min-width: auto !important;
338
+ flex: 0 calc((100% * 8 / 24) - var(--gutter) * 2 / 3) !important;
339
+ }
340
+
341
+ .row>.col10-md {
342
+ width: auto !important;
343
+ min-width: auto !important;
344
+ flex: 0 calc((100% * 10 / 24) - var(--gutter) * 5 / 6) !important;
345
+ }
346
+
347
+ .row>.col12-md {
348
+ width: auto !important;
349
+ min-width: auto !important;
350
+ flex: 0 calc((100% * 12 / 24) - var(--gutter) / 2) !important;
351
+ }
352
+
353
+ .row>.col16-md {
354
+ width: auto !important;
355
+ min-width: auto !important;
356
+ flex: 0 calc((100% * 16 / 24) - var(--gutter) * 1 / 3) !important;
357
+ }
358
+
359
+ .row>.col18-md {
360
+ width: auto !important;
361
+ min-width: auto !important;
362
+ flex: 0 calc((100% * 18 / 24) - var(--gutter) * 1 / 4) !important;
363
+ }
364
+
365
+ .row>.col20-md {
366
+ width: auto !important;
367
+ min-width: auto !important;
368
+ flex: 0 calc((100% * 20 / 24) - var(--gutter) * 1 / 6) !important;
369
+ }
370
+
371
+ .row>.col24-md {
372
+ width: auto !important;
373
+ min-width: auto !important;
374
+ flex: 0 100% !important;
375
+ }
376
+
377
+ /* more config resposive */
378
+ }
379
+
380
+ /* Large devices (laptops/desktops, 992px and up) Large (lg)*/
381
+ @media only screen and (min-width: 992px) and (max-width: 1200px) {
382
+ :root {
383
+ font-size: 8.4px !important;
384
+ }
385
+
386
+ .row>.remain-lg {
387
+ width: auto !important;
388
+ min-width: auto !important;
389
+ flex: 1 !important;
390
+ }
391
+
392
+ .row>.col0-lg {
393
+ display: none !important;
394
+ }
395
+
396
+ .row>.col1-lg {
397
+ width: auto !important;
398
+ min-width: auto !important;
399
+ flex: 0 calc((100% * 1 / 24) - var(--gutter) * 23 / 24) !important;
400
+ }
401
+
402
+ .row>.col2-lg {
403
+ width: auto !important;
404
+ min-width: auto !important;
405
+ flex: 0 calc((100% * 2 / 24) - var(--gutter) * 11 / 12) !important;
406
+ }
407
+
408
+ .row>.col3-lg {
409
+ width: auto !important;
410
+ min-width: auto !important;
411
+ flex: 0 calc((100% * 3 / 24) - var(--gutter) * 7 / 8) !important;
412
+ }
413
+
414
+ .row>.col4-lg {
415
+ width: auto !important;
416
+ min-width: auto !important;
417
+ flex: 0 calc((100% * 4 / 24) - var(--gutter) * 5 / 6) !important;
418
+ }
419
+
420
+ .row>.col6-lg {
421
+ width: auto !important;
422
+ min-width: auto !important;
423
+ flex: 0 calc((100% * 6 / 24) - var(--gutter) * 3 / 4) !important;
424
+ }
425
+
426
+ .row>.col8-lg {
427
+ width: auto !important;
428
+ min-width: auto !important;
429
+ flex: 0 calc((100% * 8 / 24) - var(--gutter) * 2 / 3) !important;
430
+ }
431
+
432
+ .row>.col10-lg {
433
+ width: auto !important;
434
+ min-width: auto !important;
435
+ flex: 0 calc((100% * 10 / 24) - var(--gutter) * 5 / 6) !important;
436
+ }
437
+
438
+ .row>.col12-lg {
439
+ width: auto !important;
440
+ min-width: auto !important;
441
+ flex: 0 calc((100% * 12 / 24) - var(--gutter) / 2) !important;
442
+ }
443
+
444
+ .row>.col16-lg {
445
+ width: auto !important;
446
+ min-width: auto !important;
447
+ flex: 0 calc((100% * 16 / 24) - var(--gutter) * 1 / 3) !important;
448
+ }
449
+
450
+ .row>.col18-lg {
451
+ width: auto !important;
452
+ min-width: auto !important;
453
+ flex: 0 calc((100% * 18 / 24) - var(--gutter) * 1 / 4) !important;
454
+ }
455
+
456
+ .row>.col20-lg {
457
+ width: auto !important;
458
+ min-width: auto !important;
459
+ flex: 0 calc((100% * 20 / 24) - var(--gutter) * 1 / 6) !important;
460
+ }
461
+
462
+ .row>.col24-lg {
463
+ width: auto !important;
464
+ min-width: auto !important;
465
+ flex: 0 100% !important;
466
+ }
467
+
468
+ /* more config resposive */
469
+ }
470
+
471
+ /* Extra large devices (large laptops and desktops, 1200px and up) X-large (xl)*/
472
+ @media only screen and (min-width: 1200px) {
473
+ :root {
474
+ font-size: 8.8px !important;
475
+ }
476
+
477
+ .row>.remain-xl {
478
+ width: auto !important;
479
+ min-width: auto !important;
480
+ flex: 1 !important;
481
+ }
482
+
483
+ .row>.col0-xl {
484
+ display: none !important;
485
+ }
486
+
487
+ .row>.col1-xl {
488
+ width: auto !important;
489
+ min-width: auto !important;
490
+ flex: 0 calc((100% * 1 / 24) - var(--gutter) * 23 / 24) !important;
491
+ }
492
+
493
+ .row>.col2-xl {
494
+ width: auto !important;
495
+ min-width: auto !important;
496
+ flex: 0 calc((100% * 2 / 24) - var(--gutter) * 11 / 12) !important;
497
+ }
498
+
499
+ .row>.col3-xl {
500
+ width: auto !important;
501
+ min-width: auto !important;
502
+ flex: 0 calc((100% * 3 / 24) - var(--gutter) * 7 / 8) !important;
503
+ }
504
+
505
+ .row>.col4-xl {
506
+ width: auto !important;
507
+ min-width: auto !important;
508
+ flex: 0 calc((100% * 4 / 24) - var(--gutter) * 5 / 6) !important;
509
+ }
510
+
511
+ .row>.col6-xl {
512
+ width: auto !important;
513
+ min-width: auto !important;
514
+ flex: 0 calc((100% * 6 / 24) - var(--gutter) * 3 / 4) !important;
515
+ }
516
+
517
+ .row>.col8-xl {
518
+ width: auto !important;
519
+ min-width: auto !important;
520
+ flex: 0 calc((100% * 8 / 24) - var(--gutter) * 2 / 3) !important;
521
+ }
522
+
523
+ .row>.col10-xl {
524
+ width: auto !important;
525
+ min-width: auto !important;
526
+ flex: 0 calc((100% * 10 / 24) - var(--gutter) * 5 / 6) !important;
527
+ }
528
+
529
+ .row>.col12-xl {
530
+ width: auto !important;
531
+ min-width: auto !important;
532
+ flex: 0 calc((100% * 12 / 24) - var(--gutter) / 2) !important;
533
+ }
534
+
535
+ .row>.col16-xl {
536
+ width: auto !important;
537
+ min-width: auto !important;
538
+ flex: 0 calc((100% * 16 / 24) - var(--gutter) * 1 / 3) !important;
539
+ }
540
+
541
+ .row>.col18-xl {
542
+ width: auto !important;
543
+ min-width: auto !important;
544
+ flex: 0 calc((100% * 18 / 24) - var(--gutter) * 1 / 4) !important;
545
+ }
546
+
547
+ .row>.col20-xl {
548
+ width: auto !important;
549
+ min-width: auto !important;
550
+ flex: 0 calc((100% * 20 / 24) - var(--gutter) * 1 / 6) !important;
551
+ }
552
+
553
+ .row>.col24-xl {
554
+ width: auto !important;
555
+ min-width: auto !important;
556
+ flex: 0 100% !important;
557
+ }
558
+
559
+ /* more config resposive */
560
+ }
561
+
562
+ /* Extra large devices (large laptops and desktops, 1600px and up) XX-large (xxl) */
563
+ @media only screen and (min-width: 1600px) {
564
+ :root {
565
+ font-size: 10px !important;
566
+ }
567
+
568
+ .row>.remain-xxl {
569
+ width: auto !important;
570
+ min-width: auto !important;
571
+ flex: 1 !important;
572
+ }
573
+
574
+ .row>.col0-xxl {
575
+ display: none !important;
576
+ }
577
+
578
+ .row>.col1-xxl {
579
+ width: auto !important;
580
+ min-width: auto !important;
581
+ flex: 0 calc((100% * 1 / 24) - var(--gutter) * 23 / 24) !important;
582
+ }
583
+
584
+ .row>.col2-xxl {
585
+ width: auto !important;
586
+ min-width: auto !important;
587
+ flex: 0 calc((100% * 2 / 24) - var(--gutter) * 11 / 12) !important;
588
+ }
589
+
590
+ .row>.col3-xxl {
591
+ width: auto !important;
592
+ min-width: auto !important;
593
+ flex: 0 calc((100% * 3 / 24) - var(--gutter) * 7 / 8) !important;
594
+ }
595
+
596
+ .row>.col4-xxl {
597
+ width: auto !important;
598
+ min-width: auto !important;
599
+ flex: 0 calc((100% * 4 / 24) - var(--gutter) * 5 / 6) !important;
600
+ }
601
+
602
+ .row>.col6-xxl {
603
+ width: auto !important;
604
+ min-width: auto !important;
605
+ flex: 0 calc((100% * 6 / 24) - var(--gutter) * 3 / 4) !important;
606
+ }
607
+
608
+ .row>.col8-xxl {
609
+ width: auto !important;
610
+ min-width: auto !important;
611
+ flex: 0 calc((100% * 8 / 24) - var(--gutter) * 2 / 3) !important;
612
+ }
613
+
614
+ .row>.col10-xxl {
615
+ width: auto !important;
616
+ min-width: auto !important;
617
+ flex: 0 calc((100% * 10 / 24) - var(--gutter) * 5 / 6) !important;
618
+ }
619
+
620
+ .row>.col12-xxl {
621
+ width: auto !important;
622
+ min-width: auto !important;
623
+ flex: 0 calc((100% * 12 / 24) - var(--gutter) / 2) !important;
624
+ }
625
+
626
+ .row>.col16-xxl {
627
+ width: auto !important;
628
+ min-width: auto !important;
629
+ flex: 0 calc((100% * 16 / 24) - var(--gutter) * 1 / 3) !important;
630
+ }
631
+
632
+ .row>.col18-xxl {
633
+ width: auto !important;
634
+ min-width: auto !important;
635
+ flex: 0 calc((100% * 18 / 24) - var(--gutter) * 1 / 4) !important;
636
+ }
637
+
638
+ .row>.col20-xxl {
639
+ width: auto !important;
640
+ min-width: auto !important;
641
+ flex: 0 calc((100% * 20 / 24) - var(--gutter) * 1 / 6) !important;
642
+ }
643
+
644
+ .row>.col24-xxl {
645
+ width: auto !important;
646
+ min-width: auto !important;
647
+ flex: 0 100% !important;
648
+ }
649
+ }