intelicoreact 1.0.29 → 1.0.31

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 (127) hide show
  1. package/dist/Atomic/FormElements/ActionAlert/ActionAlert.js +2 -2
  2. package/dist/Atomic/FormElements/ActionAlert/ActionAlert.scss +13 -9
  3. package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.scss +27 -22
  4. package/dist/Atomic/FormElements/Calendar/Calendar.scss +68 -45
  5. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +55 -30
  6. package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.scss +3 -3
  7. package/dist/Atomic/FormElements/CheckboxesLine/partial/AnyOuterClass.scss +1 -1
  8. package/dist/Atomic/FormElements/Dropdown/Dropdown.js +4 -3
  9. package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +100 -51
  10. package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.scss +27 -9
  11. package/dist/Atomic/FormElements/FileLoader/FileLoader.js +95 -0
  12. package/dist/Atomic/FormElements/FileLoader/FileLoader.scss +134 -0
  13. package/dist/Atomic/FormElements/FileLoader/partial/AnyOuterClass.scss +9 -0
  14. package/dist/Atomic/FormElements/FileLoader/partial/LoadZone.js +173 -0
  15. package/dist/Atomic/FormElements/FileLoader/partial/LoadedContent.js +59 -0
  16. package/dist/Atomic/FormElements/Input/Input.scss +63 -38
  17. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +1 -1
  18. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.scss +7 -2
  19. package/dist/Atomic/FormElements/InputColor/InputColor.js +72 -0
  20. package/dist/Atomic/FormElements/InputColor/InputColor.scss +18 -0
  21. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +176 -130
  22. package/dist/Atomic/FormElements/InputLink/InputLink.js +117 -0
  23. package/dist/Atomic/FormElements/InputLink/InputLink.scss +53 -0
  24. package/dist/Atomic/FormElements/InputMask/InputMask.scss +69 -57
  25. package/dist/Atomic/FormElements/InputMask2/InputMask2.js +4 -2
  26. package/dist/Atomic/FormElements/InputMask2/InputMask2.scss +80 -68
  27. package/dist/Atomic/FormElements/InputsRow/InputsRow.scss +10 -4
  28. package/dist/Atomic/FormElements/Label/Label.js +2 -2
  29. package/dist/Atomic/FormElements/Label/Label.scss +19 -15
  30. package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.js +41 -43
  31. package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.scss +41 -34
  32. package/dist/Atomic/FormElements/MultiSelect/MultiSelect.scss +5 -3
  33. package/dist/Atomic/FormElements/NumericInput/NumericInput.scss +63 -37
  34. package/dist/Atomic/FormElements/RadioGroup/RadioGroup.scss +5 -1
  35. package/dist/Atomic/FormElements/RadioInput/RadioInput.scss +27 -16
  36. package/dist/Atomic/FormElements/RadioRowSwitcher/RadioRowSwitcher.scss +72 -40
  37. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +38 -24
  38. package/dist/Atomic/FormElements/RangeInputs/RangeInputs.scss +19 -15
  39. package/dist/Atomic/FormElements/RangeList/RangeList.scss +56 -42
  40. package/dist/Atomic/FormElements/RangeList/partial/AnyOuterClass.scss +7 -10
  41. package/dist/Atomic/FormElements/RangeSlider/RangeSlider.js +6 -6
  42. package/dist/Atomic/FormElements/RangeSlider/RangeSlider.scss +71 -44
  43. package/dist/Atomic/FormElements/RangeSlider/RangeSlider.stories.scss +12 -8
  44. package/dist/Atomic/FormElements/SwitchableRow/SwitchableRow.scss +5 -6
  45. package/dist/Atomic/FormElements/SwitchableRow/partial/AnyOuterClass.scss +3 -3
  46. package/dist/Atomic/FormElements/Switcher/Switcher.scss +29 -21
  47. package/dist/Atomic/FormElements/Switcher/partial/AnyOuterClass.scss +4 -3
  48. package/dist/Atomic/FormElements/SwitcherCheckbox/SwitcherCheckbox.scss +10 -7
  49. package/dist/Atomic/FormElements/SwitcherCheckbox/partial/AnyOuterClass.scss +4 -3
  50. package/dist/Atomic/FormElements/SwitcherHide/SwitcherHide.scss +10 -7
  51. package/dist/Atomic/FormElements/SwitcherHide/partial/AnyOuterClass.scss +4 -3
  52. package/dist/Atomic/FormElements/SwitcherRadio/SwitcherRadio.scss +1 -0
  53. package/dist/Atomic/FormElements/SwitcherRadio/partial/AnyOuterClass.scss +4 -3
  54. package/dist/Atomic/FormElements/SwitcherRange/SwitcherRange.scss +19 -16
  55. package/dist/Atomic/FormElements/SwitcherRangeList/SwitcherRangeList.scss +1 -1
  56. package/dist/Atomic/FormElements/SwitcherRangeList/partial/AnyOuterClass.scss +10 -12
  57. package/dist/Atomic/FormElements/SwitcherTagsDropdown/SwitcherTagsDropdown.js +1 -1
  58. package/dist/Atomic/FormElements/SwitcherTagsDropdown/SwitcherTagsDropdown.scss +35 -33
  59. package/dist/Atomic/FormElements/SwitcherTagsDropdown/partial/AnyOuterClass.scss +4 -3
  60. package/dist/Atomic/FormElements/SwitcherTagsDropdown/partial/States.js +100 -100
  61. package/dist/Atomic/FormElements/SwitcherTextarea/SwitcherTextarea.scss +7 -4
  62. package/dist/Atomic/FormElements/SwitcherTextarea/partial/AnyOuterClass.scss +5 -4
  63. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js +22 -19
  64. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss +86 -43
  65. package/dist/Atomic/FormElements/TextSwitcher/TextSwitcher.scss +40 -27
  66. package/dist/Atomic/FormElements/TextSwitcher/partial/AnyOuterClass.scss +2 -1
  67. package/dist/Atomic/FormElements/Textarea/Textarea.scss +18 -14
  68. package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.scss +9 -7
  69. package/dist/Atomic/FormElements/TimeRange/TimeRange.scss +3 -3
  70. package/dist/Atomic/FormElements/UserContacts/UserContacts.scss +0 -1
  71. package/dist/Atomic/FormElements/UserContacts/partial/AnyOuterClass.scss +11 -10
  72. package/dist/Atomic/FormElements/UserContacts/partial/defaultIcons.js +1 -0
  73. package/dist/Atomic/FormElements/WidgetPseudoTable/WidgetPseudoTable.js +1 -1
  74. package/dist/Atomic/FormElements/WidgetPseudoTable/WidgetPseudoTable.scss +24 -17
  75. package/dist/Atomic/FormElements/WidgetPseudoTable/partial/AnyOuterClass.scss +33 -28
  76. package/dist/Atomic/FormElements/WidgetWithSwitchableRows/WidgetWithSwitchableRows.scss +24 -17
  77. package/dist/Atomic/FormElements/WidgetWithSwitchableRows/partial/AnyOuterClass.scss +33 -28
  78. package/dist/Atomic/Layout/Header/Header.scss +44 -25
  79. package/dist/Atomic/Layout/MainMenu/MainMenu.scss +69 -35
  80. package/dist/Atomic/Layout/Spinner/Spinner.scss +35 -13
  81. package/dist/Atomic/UI/Accordion/Accordion.scss +75 -63
  82. package/dist/Atomic/UI/AccordionTable/AccordionTable.scss +68 -29
  83. package/dist/Atomic/UI/AdvancedTag/AdvancedTags.scss +59 -43
  84. package/dist/Atomic/UI/Alert/Alert.scss +28 -20
  85. package/dist/Atomic/UI/Arrow/Arrow.scss +3 -5
  86. package/dist/Atomic/UI/Button/Button.scss +53 -39
  87. package/dist/Atomic/UI/ButtonsBar/ButtonsBar.js +3 -2
  88. package/dist/Atomic/UI/ButtonsBar/ButtonsBar.scss +2 -1
  89. package/dist/Atomic/UI/Chart/Chart.scss +14 -13
  90. package/dist/Atomic/UI/Chart/partial/AnyOuterClass.scss +20 -15
  91. package/dist/Atomic/UI/Chart/partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon.scss +7 -2
  92. package/dist/Atomic/UI/Chart/partial/datasetSetters.js +0 -6
  93. package/dist/Atomic/UI/Chart/partial/optionsSetters.js +0 -5
  94. package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.scss +28 -22
  95. package/dist/Atomic/UI/DateTime/DateTime.js +2 -2
  96. package/dist/Atomic/UI/DateTime/DateTime.scss +1 -2
  97. package/dist/Atomic/UI/DateTime/partial/AnyOuterClass.scss +6 -5
  98. package/dist/Atomic/UI/DoubleString/DoubleString.scss +11 -7
  99. package/dist/Atomic/UI/DoubleString/partial/AnyOuterClass.scss +8 -6
  100. package/dist/Atomic/UI/ExampleChartIntegration/ExampleChartIntegration.js +1 -1
  101. package/dist/Atomic/UI/ExampleChartIntegration/partial/AnyOuterClass.scss +26 -17
  102. package/dist/Atomic/UI/Hint/Hint.js +7 -7
  103. package/dist/Atomic/UI/Hint/Hint.scss +38 -22
  104. package/dist/Atomic/UI/Modal/Modal.scss +90 -47
  105. package/dist/Atomic/UI/MonoAccordion/MonoAccordion.scss +17 -12
  106. package/dist/Atomic/UI/MonoAccordion/partial/AnyOuterClass.scss +8 -5
  107. package/dist/Atomic/UI/NavLine/NavLine.js +1 -1
  108. package/dist/Atomic/UI/NavLine/NavLine.scss +89 -54
  109. package/dist/Atomic/UI/NavLine/Tabs.js +72 -72
  110. package/dist/Atomic/UI/PageTitle/PageTitle.scss +41 -35
  111. package/dist/Atomic/UI/ProgressLine/ProgressLine.scss +113 -69
  112. package/dist/Atomic/UI/Status/Status.scss +21 -14
  113. package/dist/Atomic/UI/Table/Table.scss +70 -58
  114. package/dist/Atomic/UI/Table/TdTypes/TdTypes.scss +33 -29
  115. package/dist/Atomic/UI/Tag/Tag.scss +38 -24
  116. package/dist/Atomic/UI/TagList/TagList.js +1 -7
  117. package/dist/Atomic/UI/TagList/TagList.scss +11 -8
  118. package/dist/Atomic/UI/UserBox/UserBox.scss +14 -7
  119. package/dist/Functions/fieldValueFormatters.js +55 -24
  120. package/dist/Functions/useInputHighlightError.js +84 -0
  121. package/dist/Functions/usePasswordChecker.js +9 -2
  122. package/dist/Functions/utils.js +1 -1
  123. package/dist/Molecular/FormElement/FormElement.scss +7 -3
  124. package/dist/scss/_fonts.scss +143 -109
  125. package/dist/scss/_vars.scss +21 -21
  126. package/dist/scss/main.scss +33 -27
  127. package/package.json +1 -1
@@ -40,8 +40,8 @@ var ActionAlert = function ActionAlert(_ref) {
40
40
  className: "action-alert__message"
41
41
  }, message || children)), !noButton && /*#__PURE__*/_react.default.createElement(_Button.default, {
42
42
  style: {
43
- 'backgroundColor': buttonColor || '#F59A2F',
44
- 'borderColor': buttonColor || '#F59A2F'
43
+ backgroundColor: buttonColor || '#F59A2F',
44
+ borderColor: buttonColor || '#F59A2F'
45
45
  },
46
46
  className: "ml5",
47
47
  label: buttonLabel,
@@ -1,20 +1,24 @@
1
- @import '../../../scss/vars';
1
+ @import "../../../scss/vars";
2
2
 
3
3
  .action-alert {
4
- padding: 10px 8px;
5
- height: 20px;
6
4
  display: flex;
7
- align-items:center;
5
+ align-items: center;
8
6
  justify-content: space-between;
9
- font-size: 13px;
10
- font-weight: 400;
11
- background-color: #EBEFF2;
7
+
8
+ height: 20px;
9
+ padding: 10px 8px;
10
+
12
11
  color: #1E1E2D;
13
12
  border-radius: 4px;
13
+ background-color: #EBEFF2;
14
+
15
+ font-size: 13px;
16
+ font-weight: 400;
14
17
 
15
18
  &__time {
16
- color: #9AA0B9;
17
19
  margin-right: 8px;
20
+
21
+ color: #9AA0B9;
18
22
  }
19
23
 
20
24
  &--pending {
@@ -26,7 +30,7 @@
26
30
  }
27
31
 
28
32
  &--confirm {
29
- background-color:#E4F3E8;
33
+ background-color: #E4F3E8;
30
34
  }
31
35
 
32
36
  &__message-box,
@@ -1,44 +1,48 @@
1
- @import '../../../scss/vars';
1
+ @import "../../../scss/vars";
2
2
 
3
3
  .advanced-status {
4
- width: 100%;
5
4
  display: flex;
5
+ align-items: center;
6
6
  flex-flow: row nowrap;
7
7
  justify-content: flex-start;
8
- align-items: center;
8
+
9
+ width: 100%;
9
10
 
10
11
  &__switcher {
11
12
  height: fit-content;
12
13
  min-height: 28px;
14
+
13
15
  border: none;
14
16
 
15
17
  .text-switcher__btn {
16
- cursor: pointer;
17
- min-width: 58px;
18
- white-space: nowrap;
19
- padding: 0 14px;
20
- height: 100%;
21
18
  position: relative;
22
19
  z-index: 2;
23
- background-color: transparent;
24
20
 
25
21
  display: flex;
22
+ align-items: center;
26
23
  flex-flow: row nowrap;
27
24
  justify-content: center;
28
- align-items: center;
29
-
25
+
26
+ min-width: 58px;
27
+ height: 100%;
28
+ padding: 0 14px;
29
+
30
+ cursor: pointer;
31
+ text-align: center;
32
+ white-space: nowrap;
33
+
30
34
  text-transform: capitalize;
31
- font-style: normal;
32
- font-weight: 400;
35
+
36
+ color: $color--primary;
37
+ background-color: transparent;
38
+
33
39
  font-size: 13px;
40
+ font-weight: 400;
41
+ font-style: normal;
34
42
  line-height: 20px;
35
- display: flex;
36
- align-items: center;
37
- text-align: center;
38
- color: $color--primary;
39
43
 
40
44
  &_off {
41
- color: #1E1E2D;;
45
+ color: #1E1E2D;
42
46
  }
43
47
  }
44
48
 
@@ -48,7 +52,8 @@
48
52
  }
49
53
  }
50
54
 
51
- &_undefined, &_disabled {
55
+ &_undefined,
56
+ &_disabled {
52
57
  .advanced-status__switcher {
53
58
  cursor: auto;
54
59
  pointer-events: none;
@@ -63,10 +68,10 @@
63
68
 
64
69
  &__status {
65
70
  display: flex;
71
+ align-items: center;
66
72
  flex-flow: row nowrap;
67
73
  justify-content: flex-start;
68
- align-items: center;
69
-
74
+
70
75
  margin-left: 5px;
71
76
  }
72
- }
77
+ }
@@ -439,38 +439,45 @@
439
439
  // }
440
440
 
441
441
  .calendar {
442
- background: #ffffff;
443
- border: 1px solid #e2e5ec;
444
- box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
442
+ display: flex;
443
+ flex-direction: column;
444
+
445
+ width: 260px;
446
+
447
+ min-height: 195px;
445
448
  margin-top: 4px;
446
449
  padding: 5px 0;
447
450
 
448
- min-height: 195px;
449
- width: 260px;
450
- display: flex;
451
- flex-direction: column;
452
451
  user-select: none;
453
452
 
453
+ border: 1px solid #E2E5EC;
454
+ background: #FFF;
455
+ box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
456
+
454
457
  &-header {
455
458
  display: flex;
456
- justify-content: center;
457
459
  align-items: center;
460
+ justify-content: center;
458
461
 
459
462
  box-sizing: border-box;
463
+
460
464
  &__title {
461
465
  &-month {
462
466
  margin-right: 5px;
463
467
  }
468
+
464
469
  &-year {
470
+ display: flex;
471
+ align-items: center;
472
+ flex-flow: row nowrap;
473
+ justify-content: center;
474
+
465
475
  box-sizing: border-box;
466
476
  width: 45px;
467
477
  height: 100%;
468
478
  padding: 0 5px;
479
+
469
480
  cursor: pointer;
470
- display: flex;
471
- flex-flow: row nowrap;
472
- justify-content: center;
473
- align-items: center;
474
481
 
475
482
  &:hover:not(.calendar-header__title-year_change-mode) {
476
483
  text-decoration: underline;
@@ -479,23 +486,27 @@
479
486
  &.calendar-header__title-year_change-mode {
480
487
  height: 24px;
481
488
  padding: 0 3px;
482
- border-style: solid;
489
+
483
490
  border-width: 1px;
491
+ border-style: solid;
484
492
  border-color: inherit;
485
493
  border-radius: var(--border-radius);
486
494
  }
487
495
 
488
496
  &-change-input {
497
+ display: inline;
498
+
489
499
  box-sizing: border-box;
490
500
  width: 100%;
491
- border: none;
492
- outline: none;
493
501
  margin: 0;
494
502
  padding: 0;
495
- display: inline;
503
+
504
+ border: none;
505
+ outline: none;
506
+
496
507
  font-size: inherit;
497
- line-height: inherit;
498
508
  font-weight: inherit;
509
+ line-height: inherit;
499
510
  }
500
511
  }
501
512
  }
@@ -503,7 +514,9 @@
503
514
  &__prev,
504
515
  &__next {
505
516
  display: flex;
517
+
506
518
  height: auto;
519
+
507
520
  cursor: pointer;
508
521
  }
509
522
  }
@@ -513,28 +526,32 @@
513
526
  }
514
527
 
515
528
  &__day {
516
- font-size: 13px;
517
- line-height: 20px;
518
- margin: 1px 0;
519
- flex-grow: 1;
520
529
  flex-basis: 0;
521
- text-align: center;
530
+ flex-grow: 1;
531
+
532
+ margin: 1px 0;
522
533
  padding: 1px 6px;
534
+
523
535
  user-select: none;
536
+ text-align: center;
537
+
538
+ font-size: 13px;
539
+ line-height: 20px;
524
540
 
525
541
  &--clickable {
526
542
  cursor: pointer;
527
543
 
528
544
  &:hover {
529
- background: #e2e6f8;
545
+ background: #E2E6F8;
530
546
  }
531
547
  }
532
548
 
533
549
  &--disabled {
534
550
  cursor: default;
535
- color: #9aa0b9;
536
551
  pointer-events: none;
537
552
 
553
+ color: #9AA0B9;
554
+
538
555
  &:hover {
539
556
  background: inherit;
540
557
  }
@@ -542,31 +559,32 @@
542
559
 
543
560
  &--range-end,
544
561
  &--selected {
545
- background: #6b81dd;
546
562
  color: white;
547
563
  border-radius: 4px;
564
+ background: #6B81DD;
548
565
 
549
566
  &:hover {
550
- background: #6b81dd;
567
+ background: #6B81DD;
551
568
  }
552
569
  }
553
570
 
554
571
  &--range-inside {
555
- background: #e2e6f8;
572
+ background: #E2E6F8;
556
573
  }
557
574
 
558
575
  &--prev-range-end {
559
- background: #e2e5ec;
560
576
  border-radius: 4px;
577
+ background: #E2E5EC;
561
578
  }
562
579
 
563
580
  &--prev-range-inside {
564
- background: #f7f8fa;
581
+ background: #F7F8FA;
565
582
  }
566
583
 
567
584
  &--title {
585
+ color: #9AA0B9;
586
+
568
587
  font-size: 10px;
569
- color: #9aa0b9;
570
588
  font-weight: normal;
571
589
 
572
590
  &:hover {
@@ -576,32 +594,37 @@
576
594
  }
577
595
 
578
596
  &-dropdown {
579
- appearance: none;
580
- background-color: white;
581
- cursor: pointer;
582
- width: 100%;
583
- height: 28px;
584
-
585
597
  display: flex;
586
- cursor: pointer;
587
- padding-left: 9px;
588
- font-weight: 400;
589
598
  overflow: hidden;
590
599
  align-items: center;
591
600
 
592
- border: 1px solid #e2e5ec;
593
601
  box-sizing: border-box;
594
- border-radius: 3px;
602
+ width: 100%;
603
+ height: 28px;
604
+ padding-left: 9px;
605
+
606
+ cursor: pointer;
595
607
  user-select: none;
608
+
609
+ border: 1px solid #E2E5EC;
610
+ border-radius: 3px;
611
+ background-color: white;
612
+
613
+ font-weight: 400;
614
+ appearance: none;
596
615
  }
616
+
597
617
  &-placeholder {
598
618
  width: 100%;
599
- background: none;
600
- border: none;
601
- padding: 0 15px 0 0;
602
619
  height: 16px;
620
+ padding: 0 15px 0 0;
621
+
603
622
  text-overflow: ellipsis;
604
- font-weight: 400;
623
+
624
+ border: none;
625
+ background: none;
626
+
605
627
  font-size: 13px;
628
+ font-weight: 400;
606
629
  }
607
630
  }
@@ -1,6 +1,7 @@
1
1
  .checkbox-input {
2
2
  display: flex;
3
3
  align-items: center;
4
+
4
5
  cursor: pointer;
5
6
 
6
7
  input {
@@ -8,30 +9,35 @@
8
9
  }
9
10
 
10
11
  &_disabled {
11
- opacity: 0.5;
12
- pointer-events: none;
13
12
  cursor: auto;
13
+ pointer-events: none;
14
+
15
+ opacity: 0.5;
14
16
  }
15
17
 
16
18
  &:hover {
17
19
  .checkbox-input__input {
18
- background-color: rgba(#6b81dd, 0.2);
20
+ background-color: rgba(#6B81DD, 0.2);
19
21
  }
20
22
  }
21
23
 
22
24
  &__input {
23
- box-sizing: border-box;
24
25
  position: relative;
25
- height: 16px;
26
+
27
+ overflow: hidden;
28
+
29
+ box-sizing: border-box;
26
30
  width: 16px;
27
31
  min-width: 16px;
28
- border: 1px solid #9aa0b9;
29
- border-radius: 2px;
30
- overflow: hidden;
32
+ height: 16px;
31
33
  margin-right: 5px;
34
+
32
35
  cursor: pointer;
33
36
  transition: background-color 0.2s ease;
34
- background-color: #ffff;
37
+
38
+ border: 1px solid #9AA0B9;
39
+ border-radius: 2px;
40
+ background-color: #FFFF;
35
41
 
36
42
  &_checked,
37
43
  &_indeterminate {
@@ -40,79 +46,98 @@
40
46
 
41
47
  .checkbox-input__checkbox:checked ~ .checkbox-input__mark {
42
48
  display: block;
49
+
43
50
  width: 100%;
44
51
  height: 100%;
52
+
45
53
  border-radius: 2px;
46
54
  }
47
55
  }
48
56
 
49
57
  &__checkbox {
50
- opacity: 0;
51
58
  position: absolute;
52
- height: 0;
59
+
53
60
  width: 0;
61
+ height: 0;
62
+
63
+ opacity: 0;
54
64
  }
55
65
 
56
66
  &__mark {
57
- display: none;
58
67
  position: absolute;
68
+
69
+ display: none;
70
+
59
71
  width: 100%;
60
72
  height: 100%;
61
- background-color: #6b81dd;
62
73
 
63
- &:after {
64
- content: "";
74
+ background-color: #6B81DD;
75
+
76
+ &::after {
65
77
  position: absolute;
66
78
  top: -2px;
79
+ right: 0;
67
80
  bottom: 0;
68
81
  left: 0;
69
- right: 0;
70
- margin: auto;
82
+
71
83
  width: 4px;
72
84
  height: 8px;
85
+ margin: auto;
86
+
87
+ content: "";
88
+ transform: rotate(45deg);
89
+
73
90
  border: solid white;
74
- border-radius: 2px;
75
91
  border-width: 0 2px 2px 0;
76
- transform: rotate(45deg);
92
+ border-radius: 2px;
77
93
  }
78
94
  }
79
95
 
80
96
  &__label {
81
- font-size: 13px;
82
97
  user-select: none;
98
+
99
+ font-size: 13px;
83
100
  }
84
101
 
85
102
  input[type="checkbox" i] {
86
103
  &:indeterminate + span {
87
104
  display: block;
105
+
88
106
  width: 100%;
89
107
  height: 100%;
90
108
 
91
- &:after {
92
- content: "";
109
+ &::after {
93
110
  position: absolute;
94
111
  top: 0;
112
+ right: 0;
95
113
  bottom: 0;
96
114
  left: 0;
97
- right: 0;
98
- margin: auto;
115
+
99
116
  width: 100%;
100
117
  height: 100%;
101
- background-color: #6b81dd;
118
+ margin: auto;
119
+
120
+ content: "";
102
121
  transform: rotate(0deg);
122
+
103
123
  border: none;
124
+ background-color: #6B81DD;
104
125
  }
105
- &:before {
106
- content: "";
126
+
127
+ &::before {
107
128
  position: absolute;
129
+ z-index: 1;
108
130
  top: 50%;
109
131
  left: 50%;
132
+
110
133
  width: 45%;
134
+
135
+ content: "";
136
+ transform: scale(1, 0.9) translateX(-50%) translateY(-50%);
137
+
111
138
  border: solid white;
112
- border-radius: 2px;
113
139
  border-width: 0 1px 2px 0;
114
- transform: scale(1, 0.9) translateX(-50%) translateY(-50%);
115
- z-index: 1;
140
+ border-radius: 2px;
116
141
  }
117
142
  }
118
143
  }
@@ -1,8 +1,8 @@
1
1
  .checkboxes-line {
2
2
  display: flex;
3
+ align-items: center;
3
4
  flex-flow: row wrap;
4
5
  justify-content: flex-start;
5
- align-items: center;
6
6
 
7
7
  &__checkbox-input {
8
8
  width: fit-content;
@@ -14,8 +14,8 @@
14
14
  }
15
15
 
16
16
  &_column {
17
- flex-flow: column wrap;
18
17
  align-items: flex-start;
18
+ flex-flow: column wrap;
19
19
 
20
20
  .checkboxes-line__checkbox-input {
21
21
  margin-right: 0;
@@ -26,4 +26,4 @@
26
26
  }
27
27
  }
28
28
  }
29
- }
29
+ }
@@ -2,4 +2,4 @@
2
2
  .checkboxes-line__checkbox-input {
3
3
  margin-right: 30px;
4
4
  }
5
- }
5
+ }
@@ -275,7 +275,7 @@ var Dropdown = function Dropdown(_ref) {
275
275
  };
276
276
 
277
277
  var setListContainerStyles = function setListContainerStyles() {
278
- var _dropdownRef$current$, _getComputedStyle$mar, _getComputedStyle, _getComputedStyle$mar2, _getComputedStyle$max, _getComputedStyle2, _getComputedStyle2$ma;
278
+ var _dropdownRef$current$, _getComputedStyle$mar, _getComputedStyle, _getComputedStyle$mar2, _getComputedStyle$max, _getComputedStyle2, _getComputedStyle2$ma, _sw$getBoundingClient;
279
279
 
280
280
  var lc = getListContainer();
281
281
  if (!lc || !isOpen) return false;
@@ -293,12 +293,13 @@ var Dropdown = function Dropdown(_ref) {
293
293
  if (initListHeight === null) setInitListHeight(maxHeight);
294
294
  var toTop = top - margin;
295
295
  var toBottom = windowHeight - top - height - margin * 2;
296
- var swHeight = toTop >= maxHeight || toBottom >= maxHeight ? maxHeight - 3 * margin : toTop > toBottom ? toTop - 3 * margin : toBottom - 4 * margin;
296
+ var swHeight = sw === null || sw === void 0 ? void 0 : (_sw$getBoundingClient = sw.getBoundingClientRect()) === null || _sw$getBoundingClient === void 0 ? void 0 : _sw$getBoundingClient.height;
297
+ var maxSwHeight = toTop >= maxHeight || toBottom >= maxHeight ? maxHeight - 3 * margin : toTop > toBottom ? toTop - 3 * margin : toBottom - 4 * margin;
297
298
  var listPos = toTop < toBottom || toBottom >= swHeight ? 'bottom' : 'top';
298
299
  lc.style.minWidth = "".concat(width, "px");
299
300
  lc.style.left = "".concat(left, "px");
300
301
  lc.style.top = "".concat(listPos === 'bottom' ? top + height : top - swHeight - 3 * margin, "px");
301
- sw.style.maxHeight = "".concat(swHeight, "px");
302
+ sw.style.maxHeight = "".concat(maxSwHeight, "px");
302
303
  };
303
304
 
304
305
  var renderListContainer = function renderListContainer() {