@festo-ui/react 3.1.0 → 3.2.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 (36) hide show
  1. package/README.md +3 -2
  2. package/index.d.ts +27 -18
  3. package/{react.esm.css → index.esm.css} +815 -488
  4. package/index.esm.js +4771 -0
  5. package/{react.umd.css → index.umd.css} +815 -488
  6. package/index.umd.js +5204 -0
  7. package/lib/components/accordion/Accordion.d.ts +9 -0
  8. package/lib/components/accordion/AccordionContext.d.ts +11 -0
  9. package/lib/components/accordion/accordion-header/AccordionHeader.d.ts +4 -0
  10. package/lib/components/accordion/accordion-item/AccordionItem.d.ts +9 -0
  11. package/lib/components/accordion/accordion-item/AccordionItemContext.d.ts +8 -0
  12. package/lib/components/accordion/accordion-item/accordion-item-body/AccordionItemBody.d.ts +4 -0
  13. package/lib/components/accordion/accordion-item/accordion-item-header/AccordionItemHeader.d.ts +4 -0
  14. package/lib/components/buttons/button/Button.d.ts +1 -0
  15. package/lib/components/chips/chip/Chip.d.ts +1 -1
  16. package/lib/components/modals/ConfirmModal.d.ts +2 -1
  17. package/lib/components/modals/ModalFooter.d.ts +1 -4
  18. package/lib/components/stepper-horizontal/StepperHorizontal.d.ts +7 -0
  19. package/lib/components/stepper-horizontal/step-horizontal/StepHorizontal.d.ts +7 -0
  20. package/lib/components/stepper-vertical/StepperVertical.d.ts +7 -0
  21. package/lib/components/stepper-vertical/step-vertical/StepVertical.d.ts +12 -0
  22. package/lib/components/tab/Tabs.d.ts +7 -5
  23. package/lib/components/tab/tab-pane/TabPane.d.ts +3 -2
  24. package/lib/components/tab/useTabScroll.d.ts +24 -0
  25. package/lib/forms/color-picker/ColorPicker.d.ts +1 -1
  26. package/lib/forms/radio/RadioButton.d.ts +1 -1
  27. package/lib/forms/radio/RadioGroup.d.ts +1 -1
  28. package/lib/forms/slider/Slider.d.ts +1 -1
  29. package/lib/forms/text-editor/TextEditor.d.ts +1 -1
  30. package/lib/forms/time-picker/TimePicker.d.ts +18 -0
  31. package/lib/forms/time-picker/time-picker-dropdown/TimePickerDropdown.d.ts +12 -0
  32. package/lib/helper/useControlled.d.ts +6 -0
  33. package/lib/helper/useOnClickOutside.d.ts +2 -0
  34. package/package.json +6 -6
  35. package/react.esm.js +0 -3499
  36. package/react.umd.js +0 -3562
@@ -1,3 +1,183 @@
1
+ .fr-accordion {
2
+ background-color: var(--fwe-white);
3
+ border-bottom: 1px solid var(--fwe-gray-100);
4
+ }
5
+ .fr-accordion-header {
6
+ display: flex;
7
+ align-items: center;
8
+ height: 48px;
9
+ padding: 0 16px 0 24px;
10
+ font-size: var(--fwe-font-size-md);
11
+ font-weight: var(--fwe-font-weight-bold);
12
+ color: var(--fwe-text);
13
+ border-bottom: 1px solid var(--fwe-gray-100);
14
+ }
15
+ @charset "UTF-8";
16
+ .fr-accordion-item-body {
17
+ overflow: hidden;
18
+ transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
19
+ height: 0px;
20
+ }
21
+ .fr-accordion-item-body > :first-child:not(.fr-accordion-item-body-spacer-bottom):not(.fr-accordion) {
22
+ margin-top: 0 !important;
23
+ padding-top: 0 !important;
24
+ }
25
+ .fr-accordion-item-body > :not(.fr-accordion) {
26
+ margin-right: 0px;
27
+ }
28
+ .fr-accordion-item-body-content {
29
+ margin-right: 64px;
30
+ }
31
+ .fr-accordion-item-body-spacer-bottom {
32
+ margin-top: 24px;
33
+ height: 0;
34
+ width: 0;
35
+ }
36
+
37
+ .fr-accordion-item-body .fr-accordion {
38
+ margin-top: 64px;
39
+ margin-bottom: 24px;
40
+ }
41
+ .fr-accordion-item-body .fr-accordion-item-link {
42
+ display: block;
43
+ top: 8px;
44
+ }
45
+ .fr-accordion-item-body .fr-accordion-item-header {
46
+ padding-top: 32px;
47
+ padding-right: 32px;
48
+ }
49
+ .fr-accordion-item-body .fr-accordion-item::after {
50
+ top: 12px;
51
+ right: 4px;
52
+ color: var(--fwe-caerul);
53
+ font-family: var(--fwe-font-family-icons-16);
54
+ font-size: var(--fwe-font-size-base);
55
+ content: "";
56
+ height: 16px;
57
+ line-height: 16px;
58
+ }
59
+ .fr-accordion-item-body .fr-accordion-item--expanded::before {
60
+ background-color: transparent;
61
+ }
62
+
63
+ @media (min-width: 600px) {
64
+ .fr-accordion-item-body > :not(.fng-accordion) {
65
+ margin-right: 64px;
66
+ }
67
+
68
+ .fr-accordion-item-body .fr-accordion-item-header {
69
+ padding-top: 24px;
70
+ padding-right: 168px;
71
+ }
72
+ .fr-accordion-item-body .fr-accordion-item-link {
73
+ font-size: var(--fwe-font-size-base);
74
+ top: 24px;
75
+ max-width: 128px;
76
+ white-space: nowrap;
77
+ overflow: hidden;
78
+ text-overflow: ellipsis;
79
+ }
80
+ .fr-accordion-item-body .fr-accordion-item::after {
81
+ top: 30px;
82
+ }
83
+ }
84
+ .fr-accordion-item-header {
85
+ display: flex;
86
+ align-items: center;
87
+ padding: 24px 64px 24px 0;
88
+ min-height: 48px;
89
+ cursor: pointer;
90
+ }
91
+ @charset "UTF-8";
92
+ .fr-accordion-item {
93
+ position: relative;
94
+ padding: 0 16px 0 24px;
95
+ border-top: 1px solid var(--fwe-gray-100);
96
+ border-bottom: 1px solid var(--fwe-gray-100);
97
+ }
98
+ .fr-accordion-item-link {
99
+ position: absolute;
100
+ top: 24px;
101
+ right: 24px;
102
+ color: var(--fwe-caerul);
103
+ font-size: var(--fwe-font-size-md);
104
+ pointer-events: none;
105
+ display: none;
106
+ }
107
+ .fr-accordion-item::before {
108
+ position: absolute;
109
+ top: 0;
110
+ left: 0;
111
+ display: block;
112
+ content: "";
113
+ width: 4px;
114
+ height: 0px;
115
+ background-color: var(--fwe-caerul);
116
+ }
117
+ .fr-accordion-item::after {
118
+ position: absolute;
119
+ top: 21px;
120
+ right: 16px;
121
+ display: block;
122
+ font-family: var(--fwe-font-family-icons-32);
123
+ font-size: var(--fwe-font-size-xxl);
124
+ content: "";
125
+ height: 32px;
126
+ line-height: 32px;
127
+ transition: transform 0.2s ease;
128
+ pointer-events: none;
129
+ }
130
+ .fr-accordion-item--expanded .fr-accordion-item-header {
131
+ font-weight: var(--fwe-font-weight-bold);
132
+ }
133
+ .fr-accordion-item--expanded .fr-accordion-item-body {
134
+ height: auto;
135
+ }
136
+ .fr-accordion-item--expanded::after {
137
+ transform: rotate(-180deg);
138
+ }
139
+ .fr-accordion-item--expanded::before {
140
+ height: 100%;
141
+ }
142
+ .fr-accordion-item--collapsed .fr-accordion-item-body {
143
+ height: 0px;
144
+ }
145
+ .fr-accordion-item--collapsed .fr-accordion-item-header {
146
+ font-weight: var(--fwe-font-weight-normal);
147
+ }
148
+ .fr-button .fr-button-text {
149
+ margin: -1px 0px 1px 0px;
150
+ }
151
+ .fwe-chip-container .fr-chip .fwe-icon-menu-close {
152
+ position: absolute;
153
+ right: 5px;
154
+ top: 3px;
155
+ color: #333;
156
+ font-size: var(--fwe-font-size-base);
157
+ line-height: var(--fwe-font-size-base);
158
+ -webkit-font-smoothing: antialiased;
159
+ -moz-osx-font-smoothing: grayscale;
160
+ margin-left: 0;
161
+ padding-right: 0;
162
+ }
163
+ .fwe-chip-container .fr-chip .fwe-icon-menu-close::before {
164
+ font-family: var(--fwe-font-family-icons-32);
165
+ }
166
+ .fwe-chip-container .fr-chip.fwe-chip.fwe-selected.fwe-category::after {
167
+ content: none;
168
+ }
169
+ .fr-waiting-container {
170
+ width: 100%;
171
+ height: 100%;
172
+ display: flex;
173
+ flex-direction: column;
174
+ justify-content: center;
175
+ align-items: center;
176
+ }
177
+
178
+ .fr-waiting-indicator {
179
+ margin-bottom: 16px;
180
+ }
1
181
  .fr-modal {
2
182
  opacity: 0;
3
183
  }
@@ -26,23 +206,9 @@
26
206
  transition: opacity 600ms;
27
207
  opacity: 0;
28
208
  }
29
- .fwe-chip-container .fr-chip .fwe-icon-menu-close {
30
- position: absolute;
31
- right: 5px;
32
- top: 3px;
33
- color: #333;
34
- font-size: 16px;
35
- line-height: 16px;
36
- -webkit-font-smoothing: antialiased;
37
- -moz-osx-font-smoothing: grayscale;
38
- margin-left: 0;
39
- padding-right: 0;
40
- }
41
- .fwe-chip-container .fr-chip .fwe-icon-menu-close::before {
42
- font-family: festo_icons-32;
43
- }
44
- .fwe-chip-container .fr-chip.fwe-chip.fwe-selected.fwe-category::after {
45
- content: none;
209
+ .fwe-page-dot:focus {
210
+ background: var(--fwe-control-border-dark);
211
+ outline: 0;
46
212
  }
47
213
  #arrow,
48
214
  #arrow::after {
@@ -76,25 +242,540 @@
76
242
  .fwe-popover-container[data-popper-placement^=bottom] > #arrow {
77
243
  top: -17px;
78
244
  }
79
- .fwe-popover-container[data-popper-placement^=bottom] > #arrow::after {
80
- top: 11px;
81
- left: 3px;
245
+ .fwe-popover-container[data-popper-placement^=bottom] > #arrow::after {
246
+ top: 11px;
247
+ left: 3px;
248
+ }
249
+
250
+ .fwe-popover-container[data-popper-placement^=left] > #arrow {
251
+ left: 100%;
252
+ }
253
+ .fwe-popover-container[data-popper-placement^=left] > #arrow::after {
254
+ top: 2px;
255
+ left: -6px;
256
+ }
257
+
258
+ .fwe-popover-container[data-popper-placement^=right] > #arrow {
259
+ left: -17px;
260
+ }
261
+ .fwe-popover-container[data-popper-placement^=right] > #arrow::after {
262
+ top: 2px;
263
+ left: 11px;
264
+ }
265
+ .fwe-popover-menu #tooltip {
266
+ background: #fff;
267
+ line-height: 1.5rem;
268
+ padding: 16px;
269
+ font-size: var(--fwe-font-size-base);
270
+ box-shadow: 0px 1px 4px #33333333;
271
+ }
272
+ .fwe-popover-menu .fwe-popover {
273
+ font-size: var(--fwe-font-size-base);
274
+ line-height: 1.5rem;
275
+ padding: 16px;
276
+ }
277
+ .fwe-popover-menu .fwe-list-group .fwe-list-group-item {
278
+ border-bottom: none;
279
+ min-height: 36px;
280
+ padding: 0;
281
+ }
282
+ .fwe-popover-menu .fwe-list-group .fwe-list-group-item button {
283
+ width: 100%;
284
+ margin-left: inherit;
285
+ padding: 0 8px 0 0;
286
+ text-align: left;
287
+ height: 32px;
288
+ max-height: 32px;
289
+ display: inline-flex;
290
+ }
291
+ .fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover {
292
+ color: var(--fwe-black);
293
+ }
294
+ .fwe-popover-menu .fwe-list-group .fwe-list-group-item button i {
295
+ display: inline-flex;
296
+ align-items: center;
297
+ justify-content: center;
298
+ flex-wrap: nowrap;
299
+ height: 24px;
300
+ width: 32px;
301
+ }
302
+ .fwe-popover-menu .fwe-list-group .fwe-list-group-item button i::before {
303
+ display: inline-flex;
304
+ }
305
+ .fwe-popover-menu .fwe-list-group .fwe-list-group-item button span {
306
+ display: inline-flex;
307
+ height: 24px;
308
+ }
309
+ .fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=" fwe-icon-"] {
310
+ margin-left: inherit;
311
+ }
312
+ .fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover {
313
+ color: var(--fwe-black);
314
+ background-color: #3333331a;
315
+ }
316
+ .fwe-popover-menu .fwe-list-group .fwe-list-group-item:active {
317
+ background-color: #33333333;
318
+ }
319
+ .fr-tooltip-container {
320
+ width: -webkit-fit-content;
321
+ width: -moz-fit-content;
322
+ width: fit-content;
323
+ }
324
+ .fr-snackbar-wrapper {
325
+ margin-bottom: 24px;
326
+ height: 48px;
327
+ opacity: 1;
328
+ opacity: 0;
329
+ }
330
+ .fr-snackbar-wrapper-enter-done {
331
+ transition: opacity 600ms ease-out;
332
+ opacity: 1;
333
+ }
334
+ .fr-snackbar-wrapper-exit {
335
+ opacity: 1;
336
+ }
337
+ .fr-snackbar-wrapper-exit-active {
338
+ transition: height 300ms ease-out 300ms, opacity 300ms ease-out, margin-bottom 300ms ease-out 300ms;
339
+ height: 0;
340
+ margin-bottom: 0;
341
+ opacity: 0;
342
+ }
343
+
344
+ .fr-snackbar-wrapper--first {
345
+ transform: translateY(100px);
346
+ margin-bottom: 24px;
347
+ height: 48px;
348
+ opacity: 1;
349
+ }
350
+ .fr-snackbar-wrapper--first-enter-done {
351
+ transition: opacity 600ms ease-out;
352
+ opacity: 1;
353
+ }
354
+ .fr-snackbar-wrapper--first-exit {
355
+ opacity: 1;
356
+ }
357
+ .fr-snackbar-wrapper--first-exit-active {
358
+ transition: height 300ms ease-out 300ms, opacity 300ms ease-out, margin-bottom 300ms ease-out 300ms;
359
+ height: 0;
360
+ margin-bottom: 0;
361
+ opacity: 0;
362
+ }
363
+ .fr-snackbar-wrapper--first-enter-done {
364
+ transition: transform 600ms ease-out;
365
+ transform: translateY(0px);
366
+ }
367
+ .fr-snackbar-wrapper--first-exit-active {
368
+ transform: translateY(0px);
369
+ }
370
+ .overflow-hidden {
371
+ overflow: hidden;
372
+ }
373
+
374
+ @-webkit-keyframes stepperAnimation {
375
+ from {
376
+ transform: translateX(100%);
377
+ }
378
+ to {
379
+ transform: translateX(0%);
380
+ }
381
+ }
382
+
383
+ @keyframes stepperAnimation {
384
+ from {
385
+ transform: translateX(100%);
386
+ }
387
+ to {
388
+ transform: translateX(0%);
389
+ }
390
+ }
391
+ .fr-moving-container {
392
+ -webkit-animation-name: stepperAnimation;
393
+ animation-name: stepperAnimation;
394
+ -webkit-animation-duration: 0.3s;
395
+ animation-duration: 0.3s;
396
+ -webkit-animation-timing-function: ease;
397
+ animation-timing-function: ease;
398
+ }
399
+
400
+ .hidden {
401
+ display: none;
402
+ }
403
+ .fwe-stepper-vertical .fwe-step-container.fwe-step-active .fwe-step-content-container {
404
+ height: 20px;
405
+ }
406
+ .fr-show {
407
+ display: block;
408
+ }
409
+
410
+ .fr-hide {
411
+ display: none;
412
+ }
413
+ /* legacy tab styles */
414
+ .fwe-legacy-tabs {
415
+ margin: 48px 0;
416
+ width: 100%;
417
+ height: 100%;
418
+ }
419
+
420
+ .fwe-legacy-tab-bar {
421
+ display: flex;
422
+ flex-wrap: nowrap;
423
+ width: 75%;
424
+ padding-left: 0;
425
+ margin-bottom: 0;
426
+ margin-top: 0;
427
+ list-style: none;
428
+ font-size: var(--fwe-font-size-base);
429
+ }
430
+ .fwe-legacy-tab-bar.fwe-legacy-tab-bar-full-width {
431
+ width: 100%;
432
+ }
433
+ .fwe-legacy-tab-bar.fwe-legacy-tab-items-fill .fwe-legacy-tab-item {
434
+ flex: 1 1 auto;
435
+ }
436
+ .fwe-legacy-tab-bar.fwe-legacy-tab-items-equal-width .fwe-legacy-tab-item {
437
+ flex: 1 1 0;
438
+ }
439
+
440
+ .fwe-legacy-tab-item {
441
+ height: 48px;
442
+ max-height: 48px;
443
+ background-color: var(--fwe-gray-300);
444
+ border-right: 2px solid var(--fwe-gray-100);
445
+ text-align: center;
446
+ }
447
+ .fwe-legacy-tab-item:last-child {
448
+ border-right: none;
449
+ }
450
+ .fwe-legacy-tab-item.fwe-active {
451
+ background-color: var(--fwe-white);
452
+ }
453
+ .fwe-legacy-tab-item.fwe-active .fwe-legacy-tab-link {
454
+ color: var(--fwe-caerul);
455
+ }
456
+ .fwe-legacy-tab-item:not(.fwe-active) {
457
+ border-bottom: 2px solid var(--fwe-gray-100);
458
+ }
459
+ .fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link {
460
+ padding: 11px 16px;
461
+ }
462
+
463
+ .fwe-legacy-tab-link {
464
+ display: inline-block;
465
+ width: 100%;
466
+ height: 48px;
467
+ padding: 11px 16px 13px 16px;
468
+ line-height: 24px;
469
+ cursor: pointer;
470
+ color: var(--fwe-black);
471
+ white-space: nowrap;
472
+ }
473
+ .fwe-legacy-tab-link i.fwe-icon {
474
+ padding-right: 8px;
475
+ vertical-align: initial;
476
+ }
477
+ .fwe-legacy-tab-link i.fwe-icon.fwe-icon-lg {
478
+ position: relative;
479
+ top: 3px;
480
+ }
481
+ .fwe-legacy-tab-link:hover {
482
+ color: var(--fwe-caerul);
483
+ }
484
+ .fwe-legacy-tab-link:active {
485
+ background-color: var(--fwe-white);
486
+ color: var(--fwe-caerul);
487
+ }
488
+
489
+ .fwe-legacy-tab-panel-content {
490
+ padding: 48px 24px;
491
+ background-color: var(--fwe-white);
492
+ height: 100%;
493
+ overflow: auto;
494
+ }
495
+
496
+ @media (max-width: 375px) {
497
+ .fwe-legacy-tab-bar {
498
+ justify-content: space-between;
499
+ background-color: var(--fwe-white);
500
+ width: 100%;
501
+ }
502
+
503
+ .fwe-legacy-tab-item {
504
+ background-color: var(--fwe-white);
505
+ border-right: 2px solid var(--fwe-white);
506
+ }
507
+ .fwe-legacy-tab-item:not(.fwe-active) {
508
+ border-bottom: 2px solid var(--fwe-white);
509
+ }
510
+ .fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link {
511
+ color: var(--fwe-icon-gray);
512
+ }
513
+ .fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link i.fwe-icon {
514
+ color: var(--fwe-icon-gray);
515
+ }
516
+
517
+ .fwe-legacy-tab-link.fwe-can-swap-icon {
518
+ direction: rtl;
519
+ }
520
+ .fwe-legacy-tab-link.fwe-can-swap-icon i.fwe-icon {
521
+ padding-left: 8px;
522
+ padding-right: 0;
523
+ }
524
+ }
525
+ /* responsive tab styles */
526
+ .fr-tab-panel-content {
527
+ padding: 48px 24px;
528
+ background-color: var(--fwe-white);
529
+ height: 100%;
530
+ overflow: auto;
531
+ }
532
+
533
+ .fr-tab-bar {
534
+ width: 100%;
535
+ }
536
+
537
+ .fr-tab-scroller {
538
+ overflow-y: hidden;
539
+ }
540
+ .fr-tab-scroller-scroll-area {
541
+ position: relative;
542
+ display: flex;
543
+ overflow-x: hidden;
544
+ }
545
+ .fr-tab-scroller-scroll-area::-webkit-scrollbar {
546
+ display: none;
547
+ }
548
+ .fr-tab-scroller-scroll-area--scroll {
549
+ overflow-x: scroll;
550
+ }
551
+ .fr-tab-scroller-scroll-content {
552
+ position: relative;
553
+ display: flex;
554
+ flex: 1 0 auto;
555
+ transform: none;
556
+ will-change: transform;
557
+ padding: 0 17px 0 16px;
558
+ }
559
+ .fr-tab-scroller-scroll-content--with-divider .fr-tab-scroller-divider-line {
560
+ display: block;
561
+ }
562
+ .fr-tab-scroller--animating .fr-tab-scroller-scroll-content {
563
+ transition: 250ms transform cubic-bezier(0.4, 0, 0.2, 1);
564
+ }
565
+ .fr-tab-scroller-divider-line {
566
+ display: none;
567
+ position: absolute;
568
+ top: 0;
569
+ left: 0;
570
+ right: 0;
571
+ bottom: 0;
572
+ border-bottom: 1px solid var(--fwe-control);
573
+ }
574
+
575
+ .fr-tab-indicator {
576
+ display: flex;
577
+ position: absolute;
578
+ top: 0;
579
+ left: 0;
580
+ justify-content: center;
581
+ width: 100%;
582
+ height: 100%;
583
+ pointer-events: none;
584
+ z-index: 1;
585
+ }
586
+ .fr-tab-indicator-content {
587
+ transform-origin: left;
588
+ opacity: 0;
589
+ }
590
+ .fr-tab-indicator-content--underline {
591
+ align-self: flex-end;
592
+ box-sizing: border-box;
593
+ width: 100%;
594
+ border-top-style: solid;
595
+ }
596
+ .fr-tab-indicator .fr-tab-indicator-content {
597
+ transition: 250ms transform cubic-bezier(0.4, 0, 0.2, 1);
598
+ }
599
+ .fr-tab-indicator .fr-tab-indicator-content--underline {
600
+ border-top: 4px solid var(--fwe-caerul);
601
+ }
602
+ .fr-tab-indicator--active .fr-tab-indicator-content {
603
+ opacity: 1;
604
+ }
605
+
606
+ .fr-tab {
607
+ position: relative;
608
+ display: flex;
609
+ flex: 1 0 auto;
610
+ justify-content: center;
611
+ padding: 0;
612
+ margin: 0;
613
+ border: none;
614
+ outline: none;
615
+ background: none;
616
+ text-align: center;
617
+ white-space: nowrap;
618
+ cursor: pointer;
619
+ -webkit-appearance: none;
620
+ z-index: 1;
621
+ height: 36px;
622
+ }
623
+ .fr-tab:not(:last-child) {
624
+ margin-right: 32px;
625
+ }
626
+ .fr-tab::-moz-focus-inner {
627
+ padding: 0;
628
+ border: 0;
629
+ }
630
+ .fr-tab .fr-tab-text-label {
631
+ color: var(--fwe-text);
632
+ }
633
+ .fr-tab--active .fr-tab-text-label {
634
+ color: var(--fwe-caerul);
635
+ }
636
+ .fr-tab-content {
637
+ position: relative;
638
+ display: flex;
639
+ align-items: flex-start;
640
+ justify-content: center;
641
+ height: inherit;
642
+ pointer-events: none;
643
+ }
644
+ .fr-tab-text-label {
645
+ display: inline-block;
646
+ z-index: 2;
647
+ }
648
+
649
+ .fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab {
650
+ flex: none;
651
+ }
652
+ .fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab:not(:last-child) {
653
+ margin-right: 64px;
654
+ }
655
+ .fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab-scroller-scroll-content {
656
+ padding: 0 32px;
657
+ }
658
+ .fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab-scroller-divider-line {
659
+ padding-right: 64px;
660
+ }
661
+ .fwe-checkbox-container {
662
+ font-family: var(--fwe-font-family-sans-serif);
663
+ -webkit-user-select: none;
664
+ -moz-user-select: none;
665
+ -ms-user-select: none;
666
+ user-select: none;
667
+ cursor: pointer;
668
+ display: flex;
669
+ flex-direction: row;
670
+ align-items: center;
671
+ }
672
+ .fwe-checkbox-container.fwe-label-below {
673
+ flex-direction: column;
674
+ }
675
+ .fwe-checkbox-container.fwe-label-below .fwe-checkbox-title {
676
+ margin: 8px 0px 0px 0px;
677
+ }
678
+ .fwe-checkbox-container.fwe-label-before {
679
+ flex-direction: row-reverse;
680
+ justify-content: flex-end;
681
+ }
682
+ .fwe-checkbox-container.fwe-label-before .fwe-checkbox-title {
683
+ margin: 0px 8px 0px 0px;
684
+ }
685
+ .fwe-checkbox-container .fwe-checkbox-indicator-container {
686
+ position: relative;
687
+ }
688
+ .fwe-checkbox-container input {
689
+ opacity: 0;
690
+ cursor: pointer;
691
+ height: 0;
692
+ width: 0;
693
+ }
694
+ .fwe-checkbox-container .fwe-checkbox-title {
695
+ margin-left: 8px;
696
+ line-height: 24px;
697
+ color: var(--fwe-text);
698
+ -webkit-user-select: none;
699
+ -moz-user-select: none;
700
+ -ms-user-select: none;
701
+ user-select: none;
702
+ }
703
+ .fwe-checkbox-container .fwe-checkbox-indicator-background {
704
+ box-sizing: border-box;
705
+ background: var(--fwe-white);
706
+ border: 1px solid var(--fwe-text-light);
707
+ border-radius: 2px;
708
+ height: 16px;
709
+ width: 16px;
710
+ transition: border-width 0.2s ease-out;
711
+ }
712
+ .fwe-checkbox-container .fwe-indeterminate-indicator {
713
+ position: absolute;
714
+ height: 2px;
715
+ width: 10px;
716
+ top: 7px;
717
+ left: 3px;
718
+ background: white;
719
+ }
720
+ .fwe-checkbox-container svg {
721
+ display: block;
722
+ position: absolute;
723
+ top: 0px;
724
+ left: 0px;
725
+ }
726
+ .fwe-checkbox-container.fr-checkbox-large .fwe-checkbox-indicator-background {
727
+ height: 24px;
728
+ width: 24px;
729
+ border-radius: 4px;
730
+ }
731
+ .fwe-checkbox-container.fr-checkbox-large .fwe-indeterminate-indicator {
732
+ top: 11px;
733
+ width: 14px;
734
+ left: 5px;
735
+ }
736
+ .fwe-checkbox-container.fr-checkbox-large.fwe-checked .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-large.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
737
+ border: 12px solid var(--fwe-hero);
738
+ }
739
+ .fwe-checkbox-container:hover .fwe-checkbox-indicator-background {
740
+ background-color: var(--fwe-control);
741
+ }
742
+ .fwe-checkbox-container:active .fwe-checkbox-indicator-background {
743
+ background-color: var(--fwe-control-dark);
744
+ }
745
+ .fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
746
+ border: 8px solid var(--fwe-hero);
747
+ }
748
+ .fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate:hover .fwe-checkbox-indicator-background {
749
+ border-color: var(--fwe-hero-dark);
750
+ }
751
+ .fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate:active .fwe-checkbox-indicator-background {
752
+ border-color: var(--fwe-hero-darker);
753
+ }
754
+ .fwe-checkbox-container.fr-checkbox-invalid .fwe-checkbox-indicator-background {
755
+ border: 1px solid var(--fwe-red);
756
+ background: var(--fwe-white);
757
+ }
758
+ .fwe-checkbox-container.fwe-disabled {
759
+ cursor: default;
760
+ }
761
+ .fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background {
762
+ background-color: var(--fwe-white);
763
+ border: 1px solid var(--fwe-control);
82
764
  }
83
-
84
- .fwe-popover-container[data-popper-placement^=left] > #arrow {
85
- left: 100%;
765
+ .fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background {
766
+ background-color: var(--fwe-control);
767
+ border: 1px solid var(--fwe-control);
86
768
  }
87
- .fwe-popover-container[data-popper-placement^=left] > #arrow::after {
88
- top: 2px;
89
- left: -6px;
769
+ .fwe-checkbox-container.fwe-disabled.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
770
+ background-color: var(--fwe-control);
771
+ border: 1px solid var(--fwe-control);
90
772
  }
91
-
92
- .fwe-popover-container[data-popper-placement^=right] > #arrow {
93
- left: -17px;
773
+ .fwe-checkbox-container.fwe-disabled.fr-checkbox-invalid .fwe-checkbox-indicator-background {
774
+ background-color: var(--fwe-white);
775
+ border: 1px solid var(--fwe-control);
94
776
  }
95
- .fwe-popover-container[data-popper-placement^=right] > #arrow::after {
96
- top: 2px;
97
- left: 11px;
777
+ .fwe-checkbox-container.fwe-disabled .fwe-checkbox-title {
778
+ color: var(--fwe-text-disabled);
98
779
  }
99
780
  .fwe-color-indicator .fwe-popover-container {
100
781
  position: relative;
@@ -102,7 +783,7 @@
102
783
  .fwe-color-indicator .fwe-popover-container .fwe-popover {
103
784
  background-color: var(--fwe-white);
104
785
  padding: 8px 16px 16px 16px;
105
- font-size: 14px;
786
+ font-size: var(--fwe-font-size-md);
106
787
  line-height: 1rem;
107
788
  box-shadow: 0px 1px 4px #33333333;
108
789
  border-radius: 8px;
@@ -112,8 +793,8 @@
112
793
  }
113
794
  .fwe-color-indicator .fwe-color-label {
114
795
  height: 18px;
115
- font-size: 12px;
116
- font-weight: bold;
796
+ font-size: var(--fwe-font-size-small);
797
+ font-weight: var(--fwe-font-weight-bold);
117
798
  margin-bottom: 4px;
118
799
  }
119
800
  .fwe-color-indicator .fwe-color-container {
@@ -168,7 +849,7 @@
168
849
 
169
850
  .fwe-popover {
170
851
  padding: 8px;
171
- font-size: 14px;
852
+ font-size: var(--fwe-font-size-md);
172
853
  line-height: 1rem;
173
854
  }
174
855
 
@@ -215,7 +896,7 @@
215
896
  }
216
897
 
217
898
  .fwe-popover.fwe-popover-menu {
218
- font-size: 16px;
899
+ font-size: var(--fwe-font-size-base);
219
900
  line-height: 1.5rem;
220
901
  padding: 16px;
221
902
  }
@@ -232,6 +913,7 @@
232
913
  height: 32px;
233
914
  max-height: 32px;
234
915
  display: inline-flex;
916
+ justify-content: unset;
235
917
  }
236
918
  .fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover {
237
919
  color: var(--fwe-black);
@@ -343,9 +1025,9 @@
343
1025
  display: flex;
344
1026
  }
345
1027
  .fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type {
346
- font-size: 12px;
347
- line-height: 17px;
348
- font-weight: bold;
1028
+ font-size: var(--fwe-font-size-small);
1029
+ line-height: calc(var(--fwe-font-size-small) + 5px);
1030
+ font-weight: var(--fwe-font-weight-bold);
349
1031
  }
350
1032
  .fwe-color-picker .fwe-type-select .fwe-type-indicator:hover {
351
1033
  color: var(--fwe-hero);
@@ -390,350 +1072,97 @@
390
1072
  padding-right: 0px !important;
391
1073
  text-align: center;
392
1074
  }
393
- .fwe-color-picker .fwe-hex-input {
394
- width: 75px;
395
- margin-right: 16px;
396
- }
397
- .fwe-color-picker .fwe-red-input {
398
- width: 32px;
399
- margin-right: 8px;
400
- }
401
- .fwe-color-picker .fwe-green-input {
402
- width: 32px;
403
- margin-right: 8px;
404
- }
405
- .fwe-color-picker .fwe-blue-input {
406
- width: 32px;
407
- }
408
- .fwe-color-picker .fwe-alpha-input span input {
409
- width: 48px;
410
- padding-right: 16px !important;
411
- }
412
- .fwe-color-picker .fwe-alpha-input .fwe-percent-char {
413
- margin-left: -16px;
414
- }
415
- .fwe-color-picker .fwe-color-grid {
416
- display: flex;
417
- flex-wrap: wrap;
418
- margin-right: -8px;
419
- margin-bottom: -8px;
420
- }
421
- .fwe-color-picker .fwe-color-grid .fwe-color-item {
422
- align-items: center;
423
- display: flex;
424
- justify-content: center;
425
- color: white;
426
- height: 24px;
427
- width: 24px;
428
- border-radius: 4px;
429
- margin-right: 8px;
430
- margin-bottom: 8px;
431
- }
432
- .fwe-color-picker .fwe-color-grid .fwe-color-item.fwe-white-item {
433
- border: 1px solid var(--fwe-control-border);
434
- color: black;
435
- }
436
- .fwe-color-picker .fwe-color-grid .fwe-remove-color-button {
437
- align-items: center;
438
- display: flex;
439
- justify-content: center;
440
- height: 24px;
441
- width: 24px;
442
- border-radius: 4px;
443
- border: 1px solid var(--fwe-control-border);
444
- color: var(--fwe-control);
445
- margin-right: 8px;
446
- margin-bottom: 8px;
447
- }
448
- .fwe-color-picker .fwe-color-grid .fwe-remove-color-button .fwe-no-color-pattern {
449
- margin: 2px;
450
- }
451
- .fwe-color-picker .fwe-color-grid .fwe-remove-color-button i {
452
- color: transparent;
453
- position: absolute;
454
- }
455
- .fwe-color-picker .fwe-knob {
456
- position: absolute;
457
- z-index: 1;
458
- height: 14px;
459
- width: 14px;
460
- border-radius: 50%;
461
- border: 2px solid white;
462
- box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
463
- }
464
- .fwe-border-hero {
465
- border-color: var(--fwe-hero) !important;
466
- }
467
-
468
- .flatpickr-calendar {
469
- margin-top: 6px;
470
- }
471
- .flatpickr-calendar:not(.open) {
472
- display: none;
473
- }
474
- .fwe-border-hero {
475
- border-color: var(--fwe-hero) !important;
476
- }
477
-
478
- .fr-date-range-picker:hover input {
479
- color: var(--fwe-hero);
480
- }
481
- .fr-date-range-picker-inputs {
482
- display: flex;
483
- order: 2;
484
- }
485
- .fr-waiting-container {
486
- width: 100%;
487
- height: 100%;
488
- display: flex;
489
- flex-direction: column;
490
- justify-content: center;
491
- align-items: center;
492
- }
493
-
494
- .fr-waiting-indicator {
495
- margin-bottom: 16px;
496
- }
497
- .fwe-page-dot:focus {
498
- background: var(--fwe-control-border-dark);
499
- outline: 0;
500
- }
501
- .fwe-tabs {
502
- margin: 48px 0;
503
- width: 100%;
504
- height: 100%;
505
- }
506
-
507
- .fwe-tab-bar {
508
- display: flex;
509
- flex-wrap: nowrap;
510
- width: 75%;
511
- padding-left: 0;
512
- margin-bottom: 0;
513
- margin-top: 0;
514
- list-style: none;
515
- font-size: 16px;
516
- }
517
- .fwe-tab-bar.fwe-tab-bar-full-width {
518
- width: 100%;
519
- }
520
- .fwe-tab-bar.fwe-tab-items-fill .fwe-tab-item {
521
- flex: 1 1 auto;
522
- }
523
- .fwe-tab-bar.fwe-tab-items-equal-width .fwe-tab-item {
524
- flex: 1 1 0;
525
- }
526
-
527
- .fwe-tab-item {
528
- height: 48px;
529
- max-height: 48px;
530
- background-color: var(--fwe-gray-300);
531
- border-right: 2px solid var(--fwe-gray-100);
532
- text-align: center;
533
- }
534
- .fwe-tab-item:last-child {
535
- border-right: none;
536
- }
537
- .fwe-tab-item.fwe-active {
538
- background-color: var(--fwe-white);
539
- }
540
- .fwe-tab-item.fwe-active .fwe-tab-link {
541
- color: var(--fwe-caerul);
542
- }
543
- .fwe-tab-item:not(.fwe-active) {
544
- border-bottom: 2px solid var(--fwe-gray-100);
545
- }
546
- .fwe-tab-item:not(.fwe-active) .fwe-tab-link {
547
- padding: 11px 16px;
548
- }
549
-
550
- .fwe-tab-link {
551
- display: inline-block;
552
- width: 100%;
553
- height: 48px;
554
- padding: 11px 16px 13px 16px;
555
- line-height: 24px;
556
- cursor: pointer;
557
- color: var(--fwe-black);
558
- white-space: nowrap;
559
- }
560
- .fwe-tab-link i.fwe-icon {
561
- padding-right: 8px;
562
- vertical-align: initial;
563
- }
564
- .fwe-tab-link i.fwe-icon.fwe-icon-lg {
565
- position: relative;
566
- top: 3px;
567
- }
568
- .fwe-tab-link:hover {
569
- color: var(--fwe-caerul);
570
- }
571
- .fwe-tab-link:active {
572
- background-color: var(--fwe-white);
573
- color: var(--fwe-caerul);
574
- }
575
-
576
- .fwe-tab-content {
577
- padding: 48px 24px;
578
- background-color: var(--fwe-white);
579
- height: 100%;
580
- overflow: auto;
581
- }
582
-
583
- @media (max-width: 375px) {
584
- .fwe-tab-bar {
585
- justify-content: space-between;
586
- background-color: var(--fwe-white);
587
- width: 100%;
588
- }
589
-
590
- .fwe-tab-item {
591
- background-color: var(--fwe-white);
592
- border-right: 2px solid var(--fwe-white);
593
- }
594
- .fwe-tab-item:not(.fwe-active) {
595
- border-bottom: 2px solid var(--fwe-white);
596
- }
597
- .fwe-tab-item:not(.fwe-active) .fwe-tab-link {
598
- color: var(--fwe-icon-gray);
599
- }
600
- .fwe-tab-item:not(.fwe-active) .fwe-tab-link i.fwe-icon {
601
- color: var(--fwe-icon-gray);
602
- }
603
-
604
- .fwe-tab-link.fwe-can-swap-icon {
605
- direction: rtl;
606
- }
607
- .fwe-tab-link.fwe-can-swap-icon i.fwe-icon {
608
- padding-left: 8px;
609
- padding-right: 0;
610
- }
611
- }
612
- .fr-show {
613
- display: block;
614
- }
615
-
616
- .fr-hide {
617
- display: none;
618
- }
619
- .fwe-checkbox-container {
620
- font-family: "MetaPro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
621
- -webkit-user-select: none;
622
- -moz-user-select: none;
623
- -ms-user-select: none;
624
- user-select: none;
625
- cursor: pointer;
626
- display: flex;
627
- flex-direction: row;
628
- align-items: center;
629
- }
630
- .fwe-checkbox-container.fwe-label-below {
631
- flex-direction: column;
632
- }
633
- .fwe-checkbox-container.fwe-label-below .fwe-checkbox-title {
634
- margin: 8px 0px 0px 0px;
635
- }
636
- .fwe-checkbox-container.fwe-label-before {
637
- flex-direction: row-reverse;
638
- justify-content: flex-end;
639
- }
640
- .fwe-checkbox-container.fwe-label-before .fwe-checkbox-title {
641
- margin: 0px 8px 0px 0px;
642
- }
643
- .fwe-checkbox-container .fwe-checkbox-indicator-container {
644
- position: relative;
1075
+ .fwe-color-picker .fwe-hex-input {
1076
+ width: 75px;
1077
+ margin-right: 16px;
645
1078
  }
646
- .fwe-checkbox-container input {
647
- opacity: 0;
648
- cursor: pointer;
649
- height: 0;
650
- width: 0;
1079
+ .fwe-color-picker .fwe-red-input {
1080
+ width: 32px;
1081
+ margin-right: 8px;
651
1082
  }
652
- .fwe-checkbox-container .fwe-checkbox-title {
653
- margin-left: 8px;
654
- line-height: 24px;
655
- color: var(--fwe-text);
656
- -webkit-user-select: none;
657
- -moz-user-select: none;
658
- -ms-user-select: none;
659
- user-select: none;
1083
+ .fwe-color-picker .fwe-green-input {
1084
+ width: 32px;
1085
+ margin-right: 8px;
660
1086
  }
661
- .fwe-checkbox-container .fwe-checkbox-indicator-background {
662
- box-sizing: border-box;
663
- background: var(--fwe-white);
664
- border: 1px solid var(--fwe-text-light);
665
- border-radius: 2px;
666
- height: 16px;
667
- width: 16px;
668
- transition: border-width 0.2s ease-out;
1087
+ .fwe-color-picker .fwe-blue-input {
1088
+ width: 32px;
669
1089
  }
670
- .fwe-checkbox-container .fwe-indeterminate-indicator {
671
- position: absolute;
672
- height: 2px;
673
- width: 10px;
674
- top: 7px;
675
- left: 3px;
676
- background: white;
1090
+ .fwe-color-picker .fwe-alpha-input span input {
1091
+ width: 48px;
1092
+ padding-right: 16px !important;
677
1093
  }
678
- .fwe-checkbox-container svg {
679
- display: block;
680
- position: absolute;
681
- top: 0px;
682
- left: 0px;
1094
+ .fwe-color-picker .fwe-alpha-input .fwe-percent-char {
1095
+ margin-left: -16px;
683
1096
  }
684
- .fwe-checkbox-container.fr-checkbox-large .fwe-checkbox-indicator-background {
1097
+ .fwe-color-picker .fwe-color-grid {
1098
+ display: flex;
1099
+ flex-wrap: wrap;
1100
+ margin-right: -8px;
1101
+ margin-bottom: -8px;
1102
+ }
1103
+ .fwe-color-picker .fwe-color-grid .fwe-color-item {
1104
+ align-items: center;
1105
+ display: flex;
1106
+ justify-content: center;
1107
+ color: white;
685
1108
  height: 24px;
686
1109
  width: 24px;
687
1110
  border-radius: 4px;
1111
+ margin-right: 8px;
1112
+ margin-bottom: 8px;
688
1113
  }
689
- .fwe-checkbox-container.fr-checkbox-large .fwe-indeterminate-indicator {
690
- top: 11px;
691
- width: 14px;
692
- left: 5px;
693
- }
694
- .fwe-checkbox-container.fr-checkbox-large.fwe-checked .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-large.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
695
- border: 12px solid var(--fwe-hero);
696
- }
697
- .fwe-checkbox-container:hover .fwe-checkbox-indicator-background {
698
- background-color: var(--fwe-control);
699
- }
700
- .fwe-checkbox-container:active .fwe-checkbox-indicator-background {
701
- background-color: var(--fwe-control-dark);
1114
+ .fwe-color-picker .fwe-color-grid .fwe-color-item.fwe-white-item {
1115
+ border: 1px solid var(--fwe-control-border);
1116
+ color: black;
702
1117
  }
703
- .fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
704
- border: 8px solid var(--fwe-hero);
1118
+ .fwe-color-picker .fwe-color-grid .fwe-remove-color-button {
1119
+ align-items: center;
1120
+ display: flex;
1121
+ justify-content: center;
1122
+ height: 24px;
1123
+ width: 24px;
1124
+ border-radius: 4px;
1125
+ border: 1px solid var(--fwe-control-border);
1126
+ color: var(--fwe-control);
1127
+ margin-right: 8px;
1128
+ margin-bottom: 8px;
705
1129
  }
706
- .fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate:hover .fwe-checkbox-indicator-background {
707
- border-color: var(--fwe-hero-dark);
1130
+ .fwe-color-picker .fwe-color-grid .fwe-remove-color-button .fwe-no-color-pattern {
1131
+ margin: 2px;
708
1132
  }
709
- .fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate:active .fwe-checkbox-indicator-background {
710
- border-color: var(--fwe-hero-darker);
1133
+ .fwe-color-picker .fwe-color-grid .fwe-remove-color-button i {
1134
+ color: transparent;
1135
+ position: absolute;
711
1136
  }
712
- .fwe-checkbox-container.fr-checkbox-invalid .fwe-checkbox-indicator-background {
713
- border: 1px solid var(--fwe-red);
714
- background: var(--fwe-white);
1137
+ .fwe-color-picker .fwe-knob {
1138
+ position: absolute;
1139
+ z-index: 1;
1140
+ height: 14px;
1141
+ width: 14px;
1142
+ border-radius: 50%;
1143
+ border: 2px solid white;
1144
+ box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
715
1145
  }
716
- .fwe-checkbox-container.fwe-disabled {
717
- cursor: default;
1146
+ .fwe-border-hero {
1147
+ border-color: var(--fwe-hero) !important;
718
1148
  }
719
- .fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background {
720
- background-color: var(--fwe-white);
721
- border: 1px solid var(--fwe-control);
1149
+
1150
+ .flatpickr-calendar {
1151
+ margin-top: 6px;
722
1152
  }
723
- .fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background {
724
- background-color: var(--fwe-control);
725
- border: 1px solid var(--fwe-control);
1153
+ .flatpickr-calendar:not(.open) {
1154
+ display: none;
726
1155
  }
727
- .fwe-checkbox-container.fwe-disabled.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
728
- background-color: var(--fwe-control);
729
- border: 1px solid var(--fwe-control);
1156
+ .fwe-border-hero {
1157
+ border-color: var(--fwe-hero) !important;
730
1158
  }
731
- .fwe-checkbox-container.fwe-disabled.fr-checkbox-invalid .fwe-checkbox-indicator-background {
732
- background-color: var(--fwe-white);
733
- border: 1px solid var(--fwe-control);
1159
+
1160
+ .fr-date-range-picker:hover input {
1161
+ color: var(--fwe-hero);
734
1162
  }
735
- .fwe-checkbox-container.fwe-disabled .fwe-checkbox-title {
736
- color: var(--fwe-text-disabled);
1163
+ .fr-date-range-picker-inputs {
1164
+ display: flex;
1165
+ order: 2;
737
1166
  }
738
1167
  .fwe-select-wrapper {
739
1168
  min-width: 48px;
@@ -785,7 +1214,7 @@
785
1214
  color: var(--fwe-text-disabled);
786
1215
  }
787
1216
  .fwe-select-wrapper .fwe-select-options-container {
788
- font-size: 16px;
1217
+ font-size: var(--fwe-font-size-base);
789
1218
  position: absolute;
790
1219
  top: 56px;
791
1220
  left: 0px;
@@ -847,7 +1276,7 @@ label.fwe-slider.fr-slider-label {
847
1276
  }
848
1277
  label.fwe-slider .fr-slider-value {
849
1278
  color: var(--fwe-text);
850
- font-size: 16px;
1279
+ font-size: var(--fwe-font-size-base);
851
1280
  margin-bottom: 0px;
852
1281
  position: absolute;
853
1282
  bottom: 0px;
@@ -856,60 +1285,14 @@ label.fwe-slider .fr-slider-value {
856
1285
  -ms-user-select: none;
857
1286
  user-select: none;
858
1287
  }
859
- .fr-snackbar-wrapper {
860
- margin-bottom: 24px;
861
- height: 48px;
862
- opacity: 1;
863
- opacity: 0;
864
- }
865
- .fr-snackbar-wrapper-enter-done {
866
- transition: opacity 600ms ease-out;
867
- opacity: 1;
868
- }
869
- .fr-snackbar-wrapper-exit {
870
- opacity: 1;
871
- }
872
- .fr-snackbar-wrapper-exit-active {
873
- transition: height 300ms ease-out 300ms, opacity 300ms ease-out, margin-bottom 300ms ease-out 300ms;
874
- height: 0;
875
- margin-bottom: 0;
876
- opacity: 0;
877
- }
878
-
879
- .fr-snackbar-wrapper--first {
880
- transform: translateY(100px);
881
- margin-bottom: 24px;
882
- height: 48px;
883
- opacity: 1;
884
- }
885
- .fr-snackbar-wrapper--first-enter-done {
886
- transition: opacity 600ms ease-out;
887
- opacity: 1;
888
- }
889
- .fr-snackbar-wrapper--first-exit {
890
- opacity: 1;
891
- }
892
- .fr-snackbar-wrapper--first-exit-active {
893
- transition: height 300ms ease-out 300ms, opacity 300ms ease-out, margin-bottom 300ms ease-out 300ms;
894
- height: 0;
895
- margin-bottom: 0;
896
- opacity: 0;
897
- }
898
- .fr-snackbar-wrapper--first-enter-done {
899
- transition: transform 600ms ease-out;
900
- transform: translateY(0px);
901
- }
902
- .fr-snackbar-wrapper--first-exit-active {
903
- transform: translateY(0px);
904
- }
905
1288
  label.fwe-input-text .fwe-input-text-count {
906
1289
  display: block;
907
- line-height: 1.5;
1290
+ line-height: var(--fwe-line-height-base);
908
1291
  position: absolute;
909
1292
  right: 0px;
910
1293
  bottom: 0px;
911
1294
  color: var(--fwe-text-disabled);
912
- font-size: 12px;
1295
+ font-size: var(--fwe-font-size-small);
913
1296
  }
914
1297
  label.fwe-input-text .fr-textarea {
915
1298
  overflow: visible;
@@ -2615,9 +2998,10 @@ label.fwe-input-text .fr-textarea {
2615
2998
  overflow-y: auto;
2616
2999
  scrollbar-width: thin;
2617
3000
  scrollbar-color: var(--fwe-control-scrollbar) var(--fwe-gray-100);
2618
- margin-top: 8px;
3001
+ padding-top: 4px;
2619
3002
  padding-bottom: 4px;
2620
- border-bottom: var(--fwe-gray-400) solid 1px;
3003
+ padding-left: 8px;
3004
+ border: var(--fwe-control-border) solid 1px;
2621
3005
  }
2622
3006
  .fwe-editor-container::-webkit-scrollbar {
2623
3007
  width: 12px;
@@ -2634,16 +3018,16 @@ label.fwe-input-text .fr-textarea {
2634
3018
  border-radius: 6px;
2635
3019
  }
2636
3020
  .fwe-editor-container:hover {
2637
- border-bottom: var(--fwe-caerul) solid 1px;
3021
+ border-color: var(--fwe-hero);
2638
3022
  }
2639
3023
  .fwe-editor-container--error, .fwe-editor-container--error:hover {
2640
- border-bottom: var(--fwe-red) solid 1px;
3024
+ border-color: var(--fwe-red);
2641
3025
  }
2642
3026
  .fwe-editor-container[contenteditable=true] {
2643
3027
  outline: none;
2644
3028
  }
2645
3029
  .fwe-editor-container[contenteditable=true]:focus {
2646
- border-bottom: var(--fwe-caerul) solid 1px;
3030
+ border-color: var(--fwe-hero);
2647
3031
  }
2648
3032
 
2649
3033
  label.fwe-input-text {
@@ -2651,13 +3035,13 @@ label.fwe-input-text {
2651
3035
  }
2652
3036
  label.fwe-input-text .fwe-input-text-count {
2653
3037
  display: block;
2654
- line-height: 1.5;
3038
+ line-height: var(--fwe-line-height-base);
2655
3039
  position: absolute;
2656
3040
  right: 0;
2657
3041
  bottom: 0;
2658
3042
  z-index: 1;
2659
3043
  color: var(--fwe-text-disabled);
2660
- font-size: 12px;
3044
+ font-size: var(--fwe-font-size-small);
2661
3045
  }
2662
3046
  label.fwe-input-text .fwe-input-text-label {
2663
3047
  order: -1;
@@ -2667,14 +3051,14 @@ label.fwe-input-text .fwe-text-editor-info {
2667
3051
  overflow: hidden;
2668
3052
  text-overflow: ellipsis;
2669
3053
  display: inline-block;
2670
- line-height: 1.5;
3054
+ line-height: var(--fwe-line-height-base);
2671
3055
  position: absolute;
2672
3056
  left: 0;
2673
3057
  top: unset;
2674
3058
  bottom: 0;
2675
3059
  z-index: 2;
2676
3060
  color: var(--fwe-text-disabled);
2677
- font-size: 12px;
3061
+ font-size: var(--fwe-font-size-small);
2678
3062
  }
2679
3063
  label.fwe-input-text .fwe-text-editor-invalid {
2680
3064
  line-height: 1.5;
@@ -2683,7 +3067,7 @@ label.fwe-input-text .fwe-text-editor-invalid {
2683
3067
  bottom: 0;
2684
3068
  z-index: 2;
2685
3069
  color: var(--fwe-red);
2686
- font-size: 12px;
3070
+ font-size: var(--fwe-font-size-small);
2687
3071
  }
2688
3072
  label.fwe-input-text .fwe-text-editor-invalid ~ .fwe-text-editor-info {
2689
3073
  display: none;
@@ -2695,17 +3079,17 @@ label.fwe-input-text.fwe-disabled .fwe-input-text-label {
2695
3079
  color: var(--fwe-text-disabled);
2696
3080
  }
2697
3081
  label.fwe-input-text.fwe-disabled .fwe-editor-container {
2698
- border-bottom: 1px solid var(--fwe-control-disabled) !important;
3082
+ border-color: var(--fwe-control-disabled) !important;
2699
3083
  }
2700
3084
  label.fwe-input-text.fwe-disabled .fwe-editor-container:hover {
2701
- border-bottom: 1px solid var(--fwe-control-disabled) !important;
3085
+ border-color: var(--fwe-control-disabled) !important;
2702
3086
  }
2703
3087
  label.fwe-input-text.fwe-disabled .fwe-divider-y {
2704
3088
  background-color: var(--fwe-text-disabled);
2705
3089
  }
2706
3090
 
2707
3091
  .fwe-text-bold {
2708
- font-weight: 700;
3092
+ font-weight: var(--fwe-font-weight-bold);
2709
3093
  }
2710
3094
 
2711
3095
  .fwe-text-italic {
@@ -2721,8 +3105,8 @@ label.fwe-input-text.fwe-disabled .fwe-divider-y {
2721
3105
  }
2722
3106
 
2723
3107
  .ql-editor {
2724
- font-family: "MetaPro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
2725
- font-size: 16px;
3108
+ font-family: var(--fwe-font-family-sans-serif);
3109
+ font-size: var(--fwe-font-size-base);
2726
3110
  padding: 0;
2727
3111
  min-height: 72px;
2728
3112
  overflow-x: hidden;
@@ -2766,7 +3150,6 @@ label.fwe-input-text.fwe-disabled .fwe-divider-y {
2766
3150
 
2767
3151
  .ql-toolbar.ql-snow {
2768
3152
  border: 0;
2769
- border-bottom: 1px solid var(--fwe-gray-400);
2770
3153
  padding: 4px 0 8px 0;
2771
3154
  }
2772
3155
  .ql-toolbar.ql-snow button {
@@ -2840,62 +3223,6 @@ label.fwe-input-text.fwe-disabled .ql-toolbar button {
2840
3223
  .fwe-icon-text-align-right.fwe-gray {
2841
3224
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" fill="rgb(185, 186, 187)" viewBox="0 0 12 10"><path d="M2,3H14V5H2Z" transform="translate(-2 -3)"/><path d="M8,7h6V9H8Z" transform="translate(-2 -3)"/><path d="M2,11H14v2H2Z" transform="translate(-2 -3)"/></svg>');
2842
3225
  }
2843
- .fwe-popover-menu #tooltip {
2844
- background: #fff;
2845
- line-height: 1.5rem;
2846
- padding: 16px;
2847
- font-size: 16px;
2848
- box-shadow: 0px 1px 4px #33333333;
2849
- }
2850
- .fwe-popover-menu .fwe-popover {
2851
- font-size: 16px;
2852
- line-height: 1.5rem;
2853
- padding: 16px;
2854
- }
2855
- .fwe-popover-menu .fwe-list-group .fwe-list-group-item {
2856
- border-bottom: none;
2857
- min-height: 36px;
2858
- padding: 0;
2859
- }
2860
- .fwe-popover-menu .fwe-list-group .fwe-list-group-item button {
2861
- width: 100%;
2862
- margin-left: inherit;
2863
- padding: 0 8px 0 0;
2864
- text-align: left;
2865
- height: 32px;
2866
- max-height: 32px;
2867
- display: inline-flex;
2868
- }
2869
- .fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover {
2870
- color: var(--fwe-black);
2871
- }
2872
- .fwe-popover-menu .fwe-list-group .fwe-list-group-item button i {
2873
- display: inline-flex;
2874
- align-items: center;
2875
- justify-content: center;
2876
- flex-wrap: nowrap;
2877
- height: 24px;
2878
- width: 32px;
2879
- }
2880
- .fwe-popover-menu .fwe-list-group .fwe-list-group-item button i::before {
2881
- display: inline-flex;
2882
- }
2883
- .fwe-popover-menu .fwe-list-group .fwe-list-group-item button span {
2884
- display: inline-flex;
2885
- height: 24px;
2886
- }
2887
- .fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=" fwe-icon-"] {
2888
- margin-left: inherit;
2889
- }
2890
- .fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover {
2891
- color: var(--fwe-black);
2892
- background-color: #3333331a;
2893
- }
2894
- .fwe-popover-menu .fwe-list-group .fwe-list-group-item:active {
2895
- background-color: #33333333;
2896
- }
2897
- .fr-tooltip-container {
2898
- width: -webkit-fit-content;
2899
- width: -moz-fit-content;
2900
- width: fit-content;
3226
+ .fr-timepicker {
3227
+ z-index: var(--fwe-z-index-modal);
2901
3228
  }