@ldmjs/ui 1.0.89 → 2.0.0-beta.0

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 (101) hide show
  1. package/README.md +39 -94
  2. package/dist/components/ld-avatar.js +1 -0
  3. package/dist/components/ld-badge.js +1 -0
  4. package/dist/components/ld-breadcrumbs.js +1 -0
  5. package/dist/components/ld-button.js +1 -0
  6. package/dist/components/ld-calendar.js +1 -0
  7. package/dist/components/ld-checkbox.js +1 -0
  8. package/dist/components/ld-chip.js +1 -0
  9. package/dist/components/ld-combobox.js +1 -0
  10. package/dist/components/ld-data-iterator.js +1 -0
  11. package/dist/components/ld-datepicker.js +1 -0
  12. package/dist/components/ld-dialog.js +1 -0
  13. package/dist/components/ld-edit-list-box.js +1 -0
  14. package/dist/components/ld-edit-masked-text.js +1 -0
  15. package/dist/components/ld-edit-text.js +1 -0
  16. package/dist/components/ld-icon.js +1 -0
  17. package/dist/components/ld-loader.js +1 -0
  18. package/dist/components/ld-page-toolbar.js +1 -0
  19. package/dist/components/ld-pager.js +1 -0
  20. package/dist/components/ld-progress.js +1 -0
  21. package/dist/components/ld-radiobutton.js +1 -0
  22. package/dist/components/ld-radiogroup.js +1 -0
  23. package/dist/components/ld-select-list-box.js +1 -0
  24. package/dist/components/ld-select.js +1 -0
  25. package/dist/components/ld-slider.js +1 -0
  26. package/dist/components/ld-splitter.js +1 -0
  27. package/dist/components/ld-step.js +1 -0
  28. package/dist/components/ld-switch.js +1 -0
  29. package/dist/components/ld-tab.js +1 -0
  30. package/dist/components/ld-tabs.js +1 -0
  31. package/dist/components/ld-text-markup.js +1 -0
  32. package/dist/components/ld-text-viewer.js +1 -0
  33. package/dist/components/ld-textarea.js +1 -0
  34. package/dist/components/ld-timepicker.js +1 -0
  35. package/dist/components/ld-toggle-buttons.js +1 -0
  36. package/dist/components/ld-uploader.js +1 -0
  37. package/dist/fonts/Roboto-Medium.ttf +0 -0
  38. package/dist/fonts/Roboto-Medium.woff +0 -0
  39. package/dist/fonts/Roboto-Medium.woff2 +0 -0
  40. package/dist/fonts/Roboto-SemiBold.ttf +0 -0
  41. package/dist/fonts/Roboto-SemiBold.woff +0 -0
  42. package/dist/fonts/Roboto-SemiBold.woff2 +0 -0
  43. package/dist/i18n/ru/ru-Ru.json +49 -2
  44. package/dist/index.d.ts +18 -15
  45. package/dist/index.js +1 -21178
  46. package/dist/lib/runtime-template.js +1 -1
  47. package/dist/lib/toastification.js +1 -1
  48. package/dist/scss/_animations.scss +31 -12
  49. package/dist/scss/_avatar.scss +333 -0
  50. package/dist/scss/_badge.scss +128 -0
  51. package/dist/scss/_breadcrumbs.scss +133 -17
  52. package/dist/scss/_buttons.scss +584 -282
  53. package/dist/scss/_calendar.scss +154 -51
  54. package/dist/scss/_checkbox.scss +245 -0
  55. package/dist/scss/_chip.scss +163 -63
  56. package/dist/scss/_colors.scss +21 -19
  57. package/dist/scss/_dialogs.scss +285 -178
  58. package/dist/scss/_editor.scss +146 -0
  59. package/dist/scss/_fonts.scss +115 -0
  60. package/dist/scss/_inputs.scss +905 -138
  61. package/dist/scss/_loader.scss +163 -0
  62. package/dist/scss/_pager.scss +83 -16
  63. package/dist/scss/_progress.scss +282 -0
  64. package/dist/scss/_radiobutton.scss +218 -0
  65. package/dist/scss/_radiogroup.scss +86 -0
  66. package/dist/scss/_scroll.scss +65 -0
  67. package/dist/scss/_shadows.scss +47 -0
  68. package/dist/scss/_slider.scss +53 -0
  69. package/dist/scss/_splitter.scss +60 -0
  70. package/dist/scss/_step.scss +179 -0
  71. package/dist/scss/_switch.scss +192 -0
  72. package/dist/scss/_tabs.scss +318 -0
  73. package/dist/scss/_textmarkup.scss +47 -0
  74. package/dist/scss/_textviewer.scss +13 -0
  75. package/dist/scss/_toasted.scss +44 -22
  76. package/dist/scss/_toggle.scss +125 -0
  77. package/dist/scss/_toolbar.scss +40 -1
  78. package/dist/scss/_tooltip.scss +30 -0
  79. package/dist/scss/_treeview.scss +35 -0
  80. package/dist/scss/_uploader.scss +167 -0
  81. package/dist/scss/_variables.scss +5 -27
  82. package/dist/scss/index.scss +140 -16
  83. package/dist/scss/utils.scss +17 -0
  84. package/dist/types/breadcrumbs.d.ts +2 -0
  85. package/dist/types/calendar.d.ts +8 -73
  86. package/dist/types/combobox.d.ts +10 -0
  87. package/dist/types/dialogs.d.ts +26 -1
  88. package/dist/types/form.d.ts +6 -0
  89. package/dist/types/options.d.ts +8 -1
  90. package/dist/types/toasted.d.ts +4 -4
  91. package/dist/utils/validators.js +1 -1
  92. package/package.json +122 -120
  93. package/dist/css/calendar.css +0 -1066
  94. package/dist/css/index.css +0 -20
  95. package/dist/css/root.css +0 -86
  96. package/dist/lib/calendar.js +0 -1
  97. package/dist/lib/floating.js +0 -1
  98. package/dist/lib/multiselect.js +0 -1
  99. package/dist/scss/_multiselect.scss +0 -170
  100. package/dist/scss/_toasted-old.scss +0 -408
  101. package/dist/scss/index-old.scss +0 -16
@@ -1,1066 +0,0 @@
1
-
2
- .vc-popover-content-wrapper {
3
- --popover-horizontal-content-offset: 8px;
4
- --popover-vertical-content-offset: 10px;
5
- --popover-caret-horizontal-offset: 18px;
6
- --popover-caret-vertical-offset: 8px;
7
-
8
- position: absolute;
9
- display: block;
10
- outline: none;
11
- z-index: 10;
12
- &:not(.is-interactive) {
13
- pointer-events: none;
14
- }
15
- }
16
- .vc-popover-content {
17
- position: relative;
18
- color: var(--vc-popover-content-color);
19
- font-weight: var(--vc-font-medium);
20
- background-color: var(--vc-popover-content-bg);
21
- border: 1px solid;
22
- border-color: var(--vc-popover-content-border);
23
- border-radius: var(--vc-rounded-lg);
24
- padding: 4px;
25
- outline: none;
26
- z-index: 10;
27
- box-shadow: var(--vc-shadow-lg);
28
- &.direction-bottom {
29
- margin-top: var(--popover-vertical-content-offset);
30
- }
31
- &.direction-top {
32
- margin-bottom: var(--popover-vertical-content-offset);
33
- }
34
- &.direction-left {
35
- margin-right: var(--popover-horizontal-content-offset);
36
- }
37
- &.direction-right {
38
- margin-left: var(--popover-horizontal-content-offset);
39
- }
40
- }
41
- .vc-popover-caret {
42
- content: '';
43
- position: absolute;
44
- display: block;
45
- width: 12px;
46
- height: 12px;
47
- border-top: inherit;
48
- border-left: inherit;
49
- background-color: inherit;
50
- z-index: -1;
51
- &.direction-bottom {
52
- top: 0;
53
- &.align-left {
54
- transform: translateY(-50%) rotate(45deg);
55
- }
56
- &.align-center {
57
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
58
- }
59
- &.align-right {
60
- transform: translateY(-50%) rotate(45deg);
61
- }
62
- }
63
- &.direction-top {
64
- top: 100%;
65
- &.align-left {
66
- transform: translateY(-50%) rotate(-135deg);
67
- }
68
- &.align-center {
69
- transform: translateX(-50%) translateY(-50%) rotate(-135deg);
70
- }
71
- &.align-right {
72
- transform: translateY(-50%) rotate(-135deg);
73
- }
74
- }
75
- &.direction-left {
76
- left: 100%;
77
- &.align-top {
78
- transform: translateX(-50%) rotate(135deg);
79
- }
80
- &.align-middle {
81
- transform: translateY(-50%) translateX(-50%) rotate(135deg);
82
- }
83
- &.align-bottom {
84
- transform: translateX(-50%) rotate(135deg);
85
- }
86
- }
87
- &.direction-right {
88
- left: 0;
89
- &.align-top {
90
- transform: translateX(-50%) rotate(-45deg);
91
- }
92
- &.align-middle {
93
- transform: translateY(-50%) translateX(-50%) rotate(-45deg);
94
- }
95
- &.align-bottom {
96
- transform: translateX(-50%) rotate(-45deg);
97
- }
98
- }
99
- &.align-left {
100
- left: var(--popover-caret-horizontal-offset);
101
- }
102
- &.align-center {
103
- left: 50%;
104
- }
105
- &.align-right {
106
- right: var(--popover-caret-horizontal-offset);
107
- }
108
- &.align-top {
109
- top: var(--popover-caret-vertical-offset);
110
- }
111
- &.align-middle {
112
- top: 50%;
113
- }
114
- &.align-bottom {
115
- bottom: var(--popover-caret-vertical-offset);
116
- }
117
- }
118
-
119
-
120
- .vc-day-popover-row {
121
- display: flex;
122
- align-items: center;
123
- transition: var(--vc-day-content-transition);
124
- }
125
- .vc-day-popover-row-indicator {
126
- display: flex;
127
- justify-content: center;
128
- align-items: center;
129
- flex-grow: 0;
130
- width: 15px;
131
- & span {
132
- transition: var(--vc-day-content-transition);
133
- }
134
- }
135
- .vc-day-popover-row-label {
136
- display: flex;
137
- align-items: center;
138
- flex-wrap: none;
139
- flex-grow: 1;
140
- width: max-content;
141
- margin-left: 4px;
142
- margin-right: 4px;
143
- font-size: var(--vc-text-xs);
144
- line-height: var(--vc-leading-normal);
145
- }
146
- .vc-day-popover-row-highlight {
147
- width: 8px;
148
- height: 5px;
149
- border-radius: 3px;
150
- }
151
- .vc-day-popover-row-bar {
152
- width: 10px;
153
- height: 3px;
154
- }
155
-
156
-
157
- .vc-base-icon {
158
- display: inline-block;
159
- stroke: currentColor;
160
- stroke-width: 2;
161
- fill: none;
162
- }
163
-
164
-
165
- .vc-header {
166
- display: grid;
167
- grid-gap: 4px;
168
- align-items: center;
169
- height: 30px;
170
- margin-top: 10px;
171
- padding-left: 10px;
172
- padding-right: 10px;
173
- &.is-lg {
174
- font-size: var(--vc-text-lg);
175
- }
176
- &.is-xl {
177
- font-size: var(--vc-text-xl);
178
- }
179
- &.is-2xl {
180
- font-size: var(--vc-text-2xl);
181
- }
182
- .vc-title-wrapper {
183
- grid-row: 1;
184
- grid-column: title;
185
- }
186
- .vc-prev {
187
- grid-row: 1;
188
- grid-column: prev;
189
- }
190
- .vc-next {
191
- grid-row: 1;
192
- grid-column: next;
193
- }
194
- .vc-title,
195
- .vc-prev,
196
- .vc-next {
197
- display: flex;
198
- align-items: center;
199
- border: 0;
200
- border-radius: var(--vc-rounded);
201
- pointer-events: auto;
202
- user-select: none;
203
- cursor: pointer;
204
- }
205
- .vc-title {
206
- color: var(--vc-header-title-color);
207
- font-weight: var(--vc-font-semibold);
208
- white-space: nowrap;
209
- padding: 0 8px;
210
- margin: 0;
211
- line-height: 30px;
212
- &:hover {
213
- opacity: 0.75;
214
- }
215
- }
216
- .vc-arrow {
217
- display: flex;
218
- justify-content: center;
219
- align-items: center;
220
- color: var(--vc-header-arrow-color);
221
- width: 28px;
222
- height: 30px;
223
- margin: 0;
224
- padding: 0;
225
- &:hover {
226
- background: var(--vc-header-arrow-hover-bg);
227
- }
228
- &:disabled {
229
- opacity: 0.25;
230
- pointer-events: none;
231
- }
232
- }
233
- }
234
-
235
-
236
- .vc-nav-header {
237
- display: flex;
238
- justify-content: space-between;
239
- }
240
- .vc-nav-title,
241
- .vc-nav-arrow,
242
- .vc-nav-item {
243
- font-size: var(--vc-text-sm);
244
- margin: 0;
245
- cursor: pointer;
246
- user-select: none;
247
- border: 0;
248
- border-radius: var(--vc-rounded);
249
- white-space: nowrap;
250
- &:hover {
251
- background-color: var(--vc-nav-hover-bg);
252
- }
253
- &:disabled {
254
- opacity: 0.25;
255
- pointer-events: none;
256
- }
257
- }
258
- .vc-nav-title {
259
- color: var(--vc-nav-title-color);
260
- font-weight: var(--vc-font-bold);
261
- line-height: var(--vc-leading-snug);
262
- height: 30px;
263
- padding: 0 6px;
264
- }
265
- .vc-nav-arrow {
266
- display: flex;
267
- justify-content: center;
268
- align-items: center;
269
- color: var(--vc-header-arrow-color);
270
- width: 26px;
271
- height: 30px;
272
- padding: 0;
273
- }
274
- .vc-nav-items {
275
- display: grid;
276
- grid-template-columns: repeat(3, 1fr);
277
- grid-row-gap: 2px;
278
- grid-column-gap: 5px;
279
- margin-top: 2px;
280
- }
281
- .vc-nav-item {
282
- width: 48px;
283
- text-align: center;
284
- font-weight: var(--vc-font-semibold);
285
- line-height: var(--vc-leading-snug);
286
- padding: 6px 0;
287
- &.is-active {
288
- color: var(--vc-nav-item-active-color);
289
- background-color: var(--vc-nav-item-active-bg);
290
- font-weight: var(--vc-font-bold);
291
- &:not(:focus) {
292
- box-shadow: var(--vc-nav-item-active-box-shadow);
293
- }
294
- }
295
- &.is-current {
296
- color: var(--vc-nav-item-current-color);
297
- }
298
- }
299
-
300
-
301
- .vc-day {
302
- position: relative;
303
- min-height: 32px;
304
- z-index: 1;
305
- /* &.is-not-in-month * {
306
- opacity: 0;
307
- pointer-events: none;
308
- } */
309
- }
310
- .vc-monthly .is-not-in-month * {
311
- opacity: 0;
312
- pointer-events: none;
313
- }
314
- .vc-day-layer {
315
- position: absolute;
316
- left: 0;
317
- right: 0;
318
- top: 0;
319
- bottom: 0;
320
- pointer-events: none;
321
- }
322
- .vc-day-box-center-center {
323
- display: flex;
324
- justify-content: center;
325
- align-items: center;
326
- transform-origin: 50% 50%;
327
- }
328
- .vc-day-box-left-center {
329
- display: flex;
330
- justify-content: flex-start;
331
- align-items: center;
332
- transform-origin: 0% 50%;
333
- }
334
- .vc-day-box-right-center {
335
- display: flex;
336
- justify-content: flex-end;
337
- align-items: center;
338
- transform-origin: 100% 50%;
339
- }
340
- .vc-day-box-center-bottom {
341
- display: flex;
342
- justify-content: center;
343
- align-items: flex-end;
344
- }
345
- .vc-day-content {
346
- display: flex;
347
- justify-content: center;
348
- align-items: center;
349
- font-size: var(--vc-text-sm);
350
- font-weight: var(--vc-font-medium);
351
- width: 28px;
352
- height: 28px;
353
- line-height: 28px;
354
- border-radius: var(--vc-rounded-full);
355
- user-select: none;
356
- cursor: pointer;
357
- &:hover {
358
- background-color: var(--vc-day-content-hover-bg);
359
- }
360
- &.vc-disabled {
361
- color: var(--vc-day-content-disabled-color);
362
- }
363
- }
364
-
365
- /* ----Content---- */
366
- .vc-content:not(.vc-base) {
367
- font-weight: var(--vc-font-bold);
368
- color: var(--vc-content-color);
369
- }
370
-
371
- /* ----Highlights---- */
372
- .vc-highlights {
373
- overflow: hidden;
374
- pointer-events: none;
375
- z-index: -1;
376
- }
377
- .vc-highlight {
378
- width: 28px;
379
- height: 28px;
380
- &.vc-highlight-base-start {
381
- width: 50% !important;
382
- border-radius: 0 !important;
383
- border-right-width: 0 !important;
384
- }
385
- &.vc-highlight-base-end {
386
- width: 50% !important;
387
- border-radius: 0 !important;
388
- border-left-width: 0 !important;
389
- }
390
- &.vc-highlight-base-middle {
391
- width: 100%;
392
- border-radius: 0 !important;
393
- border-left-width: 0 !important;
394
- border-right-width: 0 !important;
395
- margin: 0 -1px;
396
- }
397
- }
398
- .vc-highlight-bg-outline,
399
- .vc-highlight-bg-none {
400
- background-color: var(--vc-highlight-outline-bg);
401
- border: 2px solid;
402
- border-color: var(--vc-highlight-outline-border);
403
- border-radius: var(--vc-rounded-full);
404
- }
405
- .vc-highlight-bg-light {
406
- background-color: var(--vc-highlight-light-bg);
407
- border-radius: var(--vc-rounded-full);
408
- }
409
- .vc-highlight-bg-solid {
410
- background-color: var(--vc-highlight-solid-bg);
411
- border-radius: var(--vc-rounded-full);
412
- }
413
- .vc-highlight-content-outline,
414
- .vc-highlight-content-none {
415
- font-weight: var(--vc-font-bold);
416
- color: var(--vc-highlight-outline-content-color);
417
- }
418
- .vc-highlight-content-light {
419
- font-weight: var(--vc-font-bold);
420
- color: var(--vc-highlight-light-content-color);
421
- }
422
- .vc-highlight-content-solid {
423
- font-weight: var(--vc-font-bold);
424
- color: var(--vc-highlight-solid-content-color);
425
- }
426
-
427
- /* ----Dots---- */
428
- .vc-dots {
429
- display: flex;
430
- justify-content: center;
431
- align-items: center;
432
- }
433
- .vc-dot {
434
- width: 5px;
435
- height: 5px;
436
- border-radius: 9999px;
437
- transition: var(--vc-day-content-transition);
438
- background-color: var(--vc-dot-bg);
439
- &:not(:last-child) {
440
- margin-right: 3px;
441
- }
442
- }
443
-
444
- /* ----Bars---- */
445
- .vc-bars {
446
- display: flex;
447
- justify-content: flex-start;
448
- align-items: center;
449
- width: 75%;
450
- }
451
- .vc-bar {
452
- flex-grow: 1;
453
- height: 3px;
454
- transition: var(--vc-day-content-transition);
455
- background-color: var(--vc-bar-bg);
456
- }
457
-
458
-
459
- .vc-pane {
460
- min-width: 250px;
461
- }
462
- .vc-weeknumber {
463
- display: flex;
464
- justify-content: center;
465
- align-items: center;
466
- position: absolute;
467
- &.is-left {
468
- left: calc(var(--vc-weeknumber-offset-inside) * -1);
469
- }
470
- &.is-right {
471
- right: calc(var(--vc-weeknumber-offset-inside) * -1);
472
- }
473
- &.is-left-outside {
474
- left: calc(var(--vc-weeknumber-offset-outside) * -1);
475
- }
476
- &.is-right-outside {
477
- right: calc(var(--vc-weeknumber-offset-outside) * -1);
478
- }
479
- }
480
- .vc-weeknumber-content {
481
- display: flex;
482
- justify-content: center;
483
- align-items: center;
484
- font-size: var(--vc-text-xs);
485
- font-weight: var(--vc-font-medium);
486
- font-style: italic;
487
- width: 28px;
488
- height: 28px;
489
- margin-top: 2px;
490
- color: var(--vc-weeknumber-color);
491
- user-select: none;
492
- }
493
- .vc-weeks {
494
- position: relative;
495
- /* overflow: auto; */
496
- -webkit-overflow-scrolling: touch;
497
- padding: 6px;
498
- min-width: 232px;
499
- &.vc-show-weeknumbers-left {
500
- margin-left: var(--vc-weeknumber-offset-inside);
501
- }
502
- &.vc-show-weeknumbers-right {
503
- margin-right: var(--vc-weeknumber-offset-inside);
504
- }
505
- }
506
- .vc-weekday {
507
- text-align: center;
508
- color: var(--vc-weekday-color);
509
- font-size: var(--vc-text-sm);
510
- font-weight: var(--vc-font-bold);
511
- line-height: 14px;
512
- padding-top: 4px;
513
- padding-bottom: 8px;
514
- cursor: default;
515
- user-select: none;
516
- }
517
- .vc-week,
518
- .vc-weekdays {
519
- display: grid;
520
- grid-template-columns: repeat(7, 1fr);
521
- position: relative;
522
- }
523
-
524
-
525
- .vc-pane-container {
526
- width: 100%;
527
- position: relative;
528
- &.in-transition {
529
- overflow: hidden;
530
- }
531
- }
532
- .vc-pane-layout {
533
- display: grid;
534
- }
535
- .vc-pane-header-wrapper {
536
- position: absolute;
537
- top: 0;
538
- width: 100%;
539
- pointer-events: none;
540
- }
541
- .vc-day-popover-container {
542
- font-size: var(--vc-text-xs);
543
- font-weight: var(--vc-font-medium);
544
- }
545
- .vc-day-popover-header {
546
- font-size: var(--vc-text-xs);
547
- color: var(--vc-day-popover-header-color);
548
- font-weight: var(--vc-font-semibold);
549
- text-align: center;
550
- }
551
-
552
- .vc-base-select{position:relative;display:flex;justify-content:center;align-items:center;height:30px;font-size:var(--vc-text-base);font-weight:var(--vc-font-medium)}.vc-base-select.vc-has-icon select{padding:0 27px 0 9px}.vc-base-select.vc-has-icon .vc-base-sizer{padding:0 28px 0 10px}.vc-base-select.vc-fit-content select{position:absolute;top:0;left:0;width:100%}.vc-base-select .vc-base-icon{position:absolute;top:6px;right:4px;opacity:.6;pointer-events:none}.vc-base-select .vc-base-sizer{font-size:var(--vc-text-base);font-weight:var(--vc-font-medium);color:rgba(0,0,0,0);padding:0px 8px;margin:0}.vc-base-select select{justify-content:center;color:var(--vc-select-color);display:block;appearance:none;background-color:var(--vc-select-bg);border-radius:var(--vc-rounded);height:30px;width:max-content;padding:0px 7px;margin:0;line-height:var(--leading-none);text-indent:0px;background-image:none;cursor:pointer;text-align:center}.vc-base-select select:hover{background-color:var(--vc-select-hover-bg)}.vc-base-select select.vc-align-left{text-align:left}.vc-base-select select.vc-align-right{text-align:right}
553
-
554
- .vc-time-picker {
555
- display: flex;
556
- flex-direction: column;
557
- align-items: center;
558
- padding: 8px 4px;
559
- &.vc-invalid {
560
- pointer-events: none;
561
- opacity: 0.5;
562
- }
563
- &.vc-attached {
564
- border-top: 1px solid var(--vc-time-picker-border);
565
- }
566
- > * + * {
567
- margin-top: 4px;
568
- }
569
- }
570
- .vc-time-header {
571
- display: flex;
572
- align-items: center;
573
- font-size: var(--vc-text-sm);
574
- font-weight: var(--vc-font-semibold);
575
- text-transform: uppercase;
576
- margin-top: -4px;
577
- padding-left: 4px;
578
- padding-right: 4px;
579
- line-height: 21px;
580
- }
581
- .vc-time-select-group {
582
- display: inline-flex;
583
- align-items: center;
584
- padding: 0 4px;
585
- background: var(--vc-time-select-group-bg);
586
- border-radius: var(--vc-rounded-md);
587
- border: 1px solid var(--vc-time-select-group-border);
588
- .vc-base-icon {
589
- margin-right: 4px;
590
- color: var(--vc-time-select-group-icon-color);
591
- }
592
- select {
593
- background: transparent;
594
- padding: 0px 4px;
595
- }
596
- }
597
- .vc-time-weekday {
598
- color: var(--vc-time-weekday-color);
599
- letter-spacing: var(--tracking-wide);
600
- }
601
- .vc-time-month {
602
- color: var(--vc-time-month-color);
603
- margin-left: 8px;
604
- }
605
- .vc-time-day {
606
- color: var(--vc-time-day-color);
607
- margin-left: 4px;
608
- }
609
- .vc-time-year {
610
- color: var(--vc-time-year-color);
611
- margin-left: 8px;
612
- }
613
- .vc-time-colon {
614
- margin: 0 1px 2px 2px;
615
- }
616
- .vc-time-decimal {
617
- margin: 0 0 0 1px;
618
- }
619
-
620
- .vc-none-enter-active,
621
- .vc-none-leave-active {
622
- transition-duration: 0s;
623
- }
624
-
625
- .vc-fade-enter-active,
626
- .vc-fade-leave-active,
627
- .vc-slide-left-enter-active,
628
- .vc-slide-left-leave-active,
629
- .vc-slide-right-enter-active,
630
- .vc-slide-right-leave-active,
631
- .vc-slide-up-enter-active,
632
- .vc-slide-up-leave-active,
633
- .vc-slide-down-enter-active,
634
- .vc-slide-down-leave-active,
635
- .vc-slide-fade-enter-active,
636
- .vc-slide-fade-leave-active {
637
- transition: transform var(--vc-slide-duration) var(--vc-slide-timing),
638
- opacity var(--vc-slide-duration) var(--vc-slide-timing);
639
- backface-visibility: hidden;
640
- pointer-events: none;
641
- }
642
-
643
- .vc-none-leave-active,
644
- .vc-fade-leave-active,
645
- .vc-slide-left-leave-active,
646
- .vc-slide-right-leave-active,
647
- .vc-slide-up-leave-active,
648
- .vc-slide-down-leave-active {
649
- position: absolute !important;
650
- width: 100%;
651
- }
652
-
653
- .vc-none-enter-from,
654
- .vc-none-leave-to,
655
- .vc-fade-enter-from,
656
- .vc-fade-leave-to,
657
- .vc-slide-left-enter-from,
658
- .vc-slide-left-leave-to,
659
- .vc-slide-right-enter-from,
660
- .vc-slide-right-leave-to,
661
- .vc-slide-up-enter-from,
662
- .vc-slide-up-leave-to,
663
- .vc-slide-down-enter-from,
664
- .vc-slide-down-leave-to,
665
- .vc-slide-fade-enter-from,
666
- .vc-slide-fade-leave-to {
667
- opacity: 0;
668
- }
669
-
670
- .vc-slide-left-enter-from,
671
- .vc-slide-right-leave-to,
672
- .vc-slide-fade-enter-from.direction-left,
673
- .vc-slide-fade-leave-to.direction-left {
674
- transform: translateX(var(--vc-slide-translate));
675
- }
676
-
677
- .vc-slide-right-enter-from,
678
- .vc-slide-left-leave-to,
679
- .vc-slide-fade-enter-from.direction-right,
680
- .vc-slide-fade-leave-to.direction-right {
681
- transform: translateX(calc(-1 * var(--vc-slide-translate)));
682
- }
683
-
684
- .vc-slide-up-enter-from,
685
- .vc-slide-down-leave-to,
686
- .vc-slide-fade-enter-from.direction-top,
687
- .vc-slide-fade-leave-to.direction-top {
688
- transform: translateY(var(--vc-slide-translate));
689
- }
690
-
691
- .vc-slide-down-enter-from,
692
- .vc-slide-up-leave-to,
693
- .vc-slide-fade-enter-from.direction-bottom,
694
- .vc-slide-fade-leave-to.direction-bottom {
695
- transform: translateY(calc(-1 * var(--vc-slide-translate)));
696
- }
697
-
698
- :root {
699
- --vc-white: #ffffff;
700
- --vc-black: #000000;
701
-
702
- --vc-gray-50: #f8fafc;
703
- --vc-gray-100: #f1f5f9;
704
- --vc-gray-200: #e2e8f0;
705
- --vc-gray-300: #cbd5e1;
706
- --vc-gray-400: #94a3b8;
707
- --vc-gray-500: #64748b;
708
- --vc-gray-600: #475569;
709
- --vc-gray-700: #334155;
710
- --vc-gray-800: #1e293b;
711
- --vc-gray-900: #0f172a;
712
-
713
- --vc-font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto',
714
- 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
715
- 'Helvetica', 'Arial', sans-serif;
716
-
717
- --vc-font-normal: 400;
718
- --vc-font-medium: 500;
719
- --vc-font-semibold: 600;
720
- --vc-font-bold: 700;
721
-
722
- --vc-text-2xs: 10px;
723
- --vc-text-xs: 12px;
724
- --vc-text-sm: 14px;
725
- --vc-text-base: 16px;
726
- --vc-text-lg: 18px;
727
- --vc-text-xl: 20px;
728
- --vc-text-2xl: 24px;
729
-
730
- --vc-leading-none: 1;
731
- --vc-leading-tight: 1.25;
732
- --vc-leading-snug: 1.375;
733
- --vc-leading-normal: 1.5;
734
-
735
- --vc-rounded: 0.25rem;
736
- --vc-rounded-md: 0.375rem;
737
- --vc-rounded-lg: 0.5rem;
738
- --vc-rounded-full: 9999px;
739
-
740
- --vc-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
741
- --vc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
742
- 0 4px 6px -2px rgba(0, 0, 0, 0.05);
743
- --vc-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
744
-
745
- --vc-slide-translate: 22px;
746
- --vc-slide-duration: 0.15s;
747
- --vc-slide-timing: ease;
748
-
749
- --vc-day-content-transition: all 0.13s ease-in;
750
- --vc-weeknumber-offset-inside: 26px;
751
- --vc-weeknumber-offset-outside: 34px;
752
- }
753
-
754
- .vc-gray {
755
- --vc-accent-50: var(--vc-gray-50);
756
- --vc-accent-100: var(--vc-gray-100);
757
- --vc-accent-200: var(--vc-gray-200);
758
- --vc-accent-300: var(--vc-gray-300);
759
- --vc-accent-400: var(--vc-gray-400);
760
- --vc-accent-500: var(--vc-gray-500);
761
- --vc-accent-600: var(--vc-gray-600);
762
- --vc-accent-700: var(--vc-gray-700);
763
- --vc-accent-800: var(--vc-gray-800);
764
- --vc-accent-900: var(--vc-gray-900);
765
- }
766
-
767
- .vc-red {
768
- --vc-accent-50: #fef2f2;
769
- --vc-accent-100: #fee2e2;
770
- --vc-accent-200: #fecaca;
771
- --vc-accent-300: #fca5a5;
772
- --vc-accent-400: #f87171;
773
- --vc-accent-500: #ef4444;
774
- --vc-accent-600: #dc2626;
775
- --vc-accent-700: #b91c1c;
776
- --vc-accent-800: #991b1b;
777
- --vc-accent-900: #7f1d1d;
778
- }
779
-
780
- .vc-orange {
781
- --vc-accent-50: #fff7ed;
782
- --vc-accent-100: #ffedd5;
783
- --vc-accent-200: #fed7aa;
784
- --vc-accent-300: #fdba74;
785
- --vc-accent-400: #fb923c;
786
- --vc-accent-500: #f97316;
787
- --vc-accent-600: #ea580c;
788
- --vc-accent-700: #c2410c;
789
- --vc-accent-800: #9a3412;
790
- --vc-accent-900: #7c2d12;
791
- }
792
-
793
- .vc-yellow {
794
- --vc-accent-50: #fefce8;
795
- --vc-accent-100: #fef9c3;
796
- --vc-accent-200: #fef08a;
797
- --vc-accent-300: #fde047;
798
- --vc-accent-400: #facc15;
799
- --vc-accent-500: #eab308;
800
- --vc-accent-600: #ca8a04;
801
- --vc-accent-700: #a16207;
802
- --vc-accent-800: #854d0e;
803
- --vc-accent-900: #713f12;
804
- }
805
-
806
- .vc-green {
807
- --vc-accent-50: #f0fdf4;
808
- --vc-accent-100: #dcfce7;
809
- --vc-accent-200: #bbf7d0;
810
- --vc-accent-300: #86efac;
811
- --vc-accent-400: #4ade80;
812
- --vc-accent-500: #22c55e;
813
- --vc-accent-600: #16a34a;
814
- --vc-accent-700: #15803d;
815
- --vc-accent-800: #166534;
816
- --vc-accent-900: #14532d;
817
- }
818
-
819
- .vc-teal {
820
- --vc-accent-50: #f0fdfa;
821
- --vc-accent-100: #ccfbf1;
822
- --vc-accent-200: #99f6e4;
823
- --vc-accent-300: #5eead4;
824
- --vc-accent-400: #2dd4bf;
825
- --vc-accent-500: #14b8a6;
826
- --vc-accent-600: #0d9488;
827
- --vc-accent-700: #0f766e;
828
- --vc-accent-800: #115e59;
829
- --vc-accent-900: #134e4a;
830
- }
831
-
832
- .vc-blue {
833
- --vc-accent-50: #eff6ff;
834
- --vc-accent-100: #dbeafe;
835
- --vc-accent-200: #bfdbfe;
836
- --vc-accent-300: #93c5fd;
837
- --vc-accent-400: #60a5fa;
838
- --vc-accent-500: #3b82f6;
839
- --vc-accent-600: #2563eb;
840
- --vc-accent-700: #1d4ed8;
841
- --vc-accent-800: #1e40af;
842
- --vc-accent-900: #1e3a8a;
843
- }
844
-
845
- .vc-indigo {
846
- --vc-accent-50: #eef2ff;
847
- --vc-accent-100: #e0e7ff;
848
- --vc-accent-200: #c7d2fe;
849
- --vc-accent-300: #a5b4fc;
850
- --vc-accent-400: #818cf8;
851
- --vc-accent-500: #6366f1;
852
- --vc-accent-600: #4f46e5;
853
- --vc-accent-700: #4338ca;
854
- --vc-accent-800: #3730a3;
855
- --vc-accent-900: #312e81;
856
- }
857
-
858
- .vc-purple {
859
- --vc-accent-50: #faf5ff;
860
- --vc-accent-100: #f3e8ff;
861
- --vc-accent-200: #e9d5ff;
862
- --vc-accent-300: #d8b4fe;
863
- --vc-accent-400: #c084fc;
864
- --vc-accent-500: #a855f7;
865
- --vc-accent-600: #9333ea;
866
- --vc-accent-700: #7e22ce;
867
- --vc-accent-800: #6b21a8;
868
- --vc-accent-900: #581c87;
869
- }
870
-
871
- .vc-pink {
872
- --vc-accent-50: #fdf2f8;
873
- --vc-accent-100: #fce7f3;
874
- --vc-accent-200: #fbcfe8;
875
- --vc-accent-300: #f9a8d4;
876
- --vc-accent-400: #f472b6;
877
- --vc-accent-500: #ec4899;
878
- --vc-accent-600: #db2777;
879
- --vc-accent-700: #be185d;
880
- --vc-accent-800: #9d174d;
881
- --vc-accent-900: #831843;
882
- }
883
-
884
- .vc-focus {
885
- &:focus-within {
886
- outline: 0;
887
- box-shadow: var(--vc-focus-ring);
888
- }
889
- }
890
-
891
- .vc-light {
892
- /* Base */
893
- --vc-color: var(--vc-gray-900);
894
- --vc-bg: var(--vc-white);
895
- --vc-border: var(--vc-gray-300);
896
- --vc-hover-bg: hsla(211, 25%, 84%, 0.3);
897
- --vc-focus-ring: 0 0 0 2px rgb(59, 131, 246, 0.4);
898
- /* Calendar header */
899
- --vc-header-arrow-color: var(--vc-gray-500);
900
- --vc-header-arrow-hover-bg: var(--vc-gray-200);
901
- --vc-header-title-color: var(--vc-gray-900);
902
- /* Calendar weekdays */
903
- --vc-weekday-color: var(--vc-gray-500);
904
- /* Calendar weeknumbers */
905
- --vc-weeknumber-color: var(--vc-gray-400);
906
- /* Calendar nav */
907
- --vc-nav-hover-bg: var(--vc-gray-200);
908
- --vc-nav-title-color: var(--vc-gray-900);
909
- --vc-nav-item-hover-box-shadow: none;
910
- --vc-nav-item-active-color: var(--vc-white);
911
- --vc-nav-item-active-bg: var(--vc-accent-500);
912
- --vc-nav-item-active-box-shadow: var(--vc-shadow);
913
- --vc-nav-item-current-color: var(--vc-accent-600);
914
- /* Calendar day popover */
915
- --vc-day-popover-container-color: var(--vc-white);
916
- --vc-day-popover-container-bg: var(--vc-gray-800);
917
- --vc-day-popover-container-border: var(--vc-gray-700);
918
- --vc-day-popover-header-color: var(--vc-gray-700);
919
- /* Popover content */
920
- --vc-popover-content-color: var(--vc-gray-900);
921
- --vc-popover-content-bg: var(--vc-gray-50);
922
- --vc-popover-content-border: var(--vc-gray-300);
923
- /* Time picker */
924
- --vc-time-picker-border: var(--vc-gray-300);
925
- --vc-time-weekday-color: var(--vc-gray-700);
926
- --vc-time-month-color: var(--vc-accent-600);
927
- --vc-time-day-color: var(--vc-accent-600);
928
- --vc-time-year-color: var(--vc-gray-500);
929
- /* Time select group */
930
- --vc-time-select-group-bg: var(--vc-gray-50);
931
- --vc-time-select-group-border: var(--vc-gray-300);
932
- --vc-time-select-group-icon-color: var(--vc-accent-500);
933
- /* Base select */
934
- --vc-select-color: var(--vc-gray-900);
935
- --vc-select-bg: var(--vc-gray-100);
936
- --vc-select-hover-bg: var(--vc-gray-200);
937
- /* Calendar day */
938
- --vc-day-content-hover-bg: var(--vc-hover-bg);
939
- --vc-day-content-disabled-color: var(--vc-gray-400);
940
- /* Calendar attributes */
941
- &.vc-attr,
942
- & .vc-attr {
943
- --vc-content-color: var(--vc-accent-600);
944
- --vc-highlight-outline-bg: var(--vc-white);
945
- --vc-highlight-outline-border: var(--vc-accent-600);
946
- --vc-highlight-outline-content-color: var(--vc-accent-700);
947
- --vc-highlight-light-bg: var(--vc-accent-200);
948
- --vc-highlight-light-content-color: var(--vc-accent-900);
949
- --vc-highlight-solid-bg: var(--vc-accent-600);
950
- --vc-highlight-solid-content-color: var(--vc-white);
951
- --vc-dot-bg: var(--vc-accent-600);
952
- --vc-bar-bg: var(--vc-accent-600);
953
- }
954
- }
955
-
956
- .vc-dark {
957
- /* Base */
958
- --vc-color: var(--vc-white);
959
- --vc-bg: var(--vc-gray-900);
960
- --vc-border: var(--vc-gray-700);
961
- --vc-hover-bg: hsla(216, 15%, 52%, 0.3);
962
- --vc-focus-ring: 0 0 0 2px rgb(59 130 246 / 0.7);
963
- /* Calendar header */
964
- --vc-header-arrow-color: var(--vc-gray-300);
965
- --vc-header-arrow-hover-bg: var(--vc-gray-800);
966
- --vc-header-title-color: var(--vc-gray-100);
967
- /* Calendar weekdays */
968
- --vc-weekday-color: var(--vc-accent-200);
969
- /* Calendar weeknumbers */
970
- --vc-weeknumber-color: var(--vc-gray-500);
971
- /* Calendar nav */
972
- --vc-nav-hover-bg: var(--vc-gray-700);
973
- --vc-nav-title-color: var(--vc-gray-100);
974
- --vc-nav-item-hover-box-shadow: none;
975
- --vc-nav-item-active-color: var(--vc-white);
976
- --vc-nav-item-active-bg: var(--vc-accent-500);
977
- --vc-nav-item-active-box-shadow: none;
978
- --vc-nav-item-current-color: var(--vc-accent-400);
979
- /* Calendar day popover */
980
- --vc-day-popover-container-color: var(--vc-gray-800);
981
- --vc-day-popover-container-bg: var(--vc-white);
982
- --vc-day-popover-container-border: var(--vc-gray-100);
983
- --vc-day-popover-header-color: var(--vc-gray-300);
984
- /* Popover content */
985
- --vc-popover-content-color: var(--vc-white);
986
- --vc-popover-content-bg: var(--vc-gray-800);
987
- --vc-popover-content-border: var(--vc-gray-700);
988
- /* Time picker */
989
- --vc-time-picker-border: var(--vc-gray-700);
990
- --vc-time-weekday-color: var(--vc-gray-400);
991
- --vc-time-month-color: var(--vc-accent-400);
992
- --vc-time-day-color: var(--vc-accent-400);
993
- --vc-time-year-color: var(--vc-gray-500);
994
- /* Time select group */
995
- --vc-time-select-group-bg: var(--vc-gray-700);
996
- --vc-time-select-group-border: var(--vc-gray-500);
997
- --vc-time-select-group-icon-color: var(--vc-accent-400);
998
- /* Base select */
999
- --vc-select-color: var(--vc-gray-200);
1000
- --vc-select-bg: var(--vc-gray-700);
1001
- --vc-select-hover-bg: var(--vc-gray-600);
1002
- /* Calendar day */
1003
- --vc-day-content-hover-bg: var(--vc-hover-bg);
1004
- --vc-day-content-disabled-color: var(--vc-gray-600);
1005
- /* Calendar attributes */
1006
- &.vc-attr,
1007
- & .vc-attr {
1008
- --vc-content-color: var(--vc-accent-500);
1009
- --vc-highlight-outline-bg: var(--vc-gray-900);
1010
- --vc-highlight-outline-border: var(--vc-accent-300);
1011
- --vc-highlight-outline-content-color: var(--vc-accent-200);
1012
- --vc-highlight-light-bg: var(--vc-accent-800);
1013
- --vc-highlight-light-content-color: var(--vc-accent-100);
1014
- --vc-highlight-solid-bg: var(--vc-accent-500);
1015
- --vc-highlight-solid-content-color: var(--vc-white);
1016
- --vc-dot-bg: var(--vc-accent-500);
1017
- --vc-bar-bg: var(--vc-accent-500);
1018
- }
1019
- }
1020
-
1021
- .vc-container {
1022
- position: relative;
1023
- display: inline-flex;
1024
- width: max-content;
1025
- height: max-content;
1026
- font-family: var(--vc-font-family);
1027
- color: var(--vc-color);
1028
- background-color: var(--vc-bg);
1029
- -webkit-font-smoothing: antialiased;
1030
- -moz-osx-font-smoothing: grayscale;
1031
- -webkit-tap-highlight-color: transparent;
1032
- &,
1033
- & * {
1034
- box-sizing: border-box;
1035
- &:focus {
1036
- outline: none;
1037
- }
1038
- }
1039
- /* Hides double border within popovers */
1040
- & .vc-container {
1041
- border: none;
1042
- }
1043
- }
1044
-
1045
- .vc-bordered {
1046
- border: 1px solid;
1047
- border-color: var(--vc-border);
1048
- border-radius: var(--vc-rounded-lg);
1049
- }
1050
-
1051
- .vc-expanded {
1052
- min-width: 100%;
1053
- }
1054
-
1055
- .vc-transparent {
1056
- background-color: transparent;
1057
- }
1058
-
1059
- .vc-date-picker-content {
1060
- padding: 0;
1061
- background-color: var(--vc-bg);
1062
- .vc-container {
1063
- border: 0;
1064
- }
1065
- }
1066
-