urfu-ui-kit-vanilla 1.0.62 → 1.0.64

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/main.css +102 -79
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "UrFU UI-Kit for Vanilla Web",
4
4
  "license": "UNLICENSED",
5
5
  "private": false,
6
- "version": "1.0.62",
6
+ "version": "1.0.64",
7
7
  "type": "module",
8
8
  "scripts": {
9
9
  "start": "vite",
package/src/main.css CHANGED
@@ -79,7 +79,7 @@ button {
79
79
  font-weight: 400;
80
80
  font-stretch: normal;
81
81
  font-display: swap;
82
- src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf) format('truetype');
82
+ src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf) format('truetype');
83
83
  }
84
84
  @font-face {
85
85
  font-family: 'Open Sans';
@@ -87,7 +87,7 @@ button {
87
87
  font-weight: 600;
88
88
  font-stretch: normal;
89
89
  font-display: swap;
90
- src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4n.ttf) format('truetype');
90
+ src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4n.ttf) format('truetype');
91
91
  }
92
92
  @font-face {
93
93
  font-family: 'Open Sans';
@@ -95,7 +95,7 @@ button {
95
95
  font-weight: 700;
96
96
  font-stretch: normal;
97
97
  font-display: swap;
98
- src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4n.ttf) format('truetype');
98
+ src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4n.ttf) format('truetype');
99
99
  }
100
100
  * {
101
101
  font-family: 'Montserrat';
@@ -576,7 +576,7 @@ button {
576
576
  .u-selectbox-select-open .u-selectbox-select-icon {
577
577
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7071 10.3819C11.3166 10.7724 10.6834 10.7724 10.2929 10.3819L5.99999 6.08902L1.70711 10.3819C1.31658 10.7724 0.683418 10.7724 0.292894 10.3819C-0.0976305 9.99139 -0.0976315 9.35822 0.292892 8.9677L5.29288 3.9677C5.48042 3.78016 5.73477 3.67481 5.99999 3.6748C6.26521 3.6748 6.51956 3.78016 6.7071 3.9677L11.7071 8.9677C12.0976 9.35822 12.0976 9.99139 11.7071 10.3819Z' fill='%231E4391'/%3E%3C/svg%3E ");
578
578
  }
579
- .u-selectbox-select-open + .u-selectbox-options-wrapper {
579
+ .u-selectbox-select-open + .u-selectbox-options {
580
580
  display: block;
581
581
  }
582
582
  .u-selectbox-select-icon-arrow {
@@ -616,26 +616,23 @@ button {
616
616
  text-overflow: ellipsis;
617
617
  }
618
618
  .u-selectbox-options {
619
- border-top-left-radius: 10px;
620
- border-bottom-left-radius: 10px;
621
- border-top-right-radius: 6px;
622
- border-bottom-right-radius: 6px;
623
- padding-right: 2px;
624
- overflow-y: auto;
625
- max-height: 195px;
626
- background-color: #FFFFFF;
627
- position: relative;
628
- }
629
- .u-selectbox-options-wrapper {
630
- padding-right: 2px;
631
619
  display: none;
632
620
  background-color: #FFFFFF;
633
- position: absolute;
634
621
  z-index: 100;
635
622
  border-radius: 10px;
636
623
  border: 1px solid #748AB9;
637
624
  margin-top: 2px;
638
625
  width: 100%;
626
+ overflow-y: auto;
627
+ max-height: 195px;
628
+ position: relative;
629
+ }
630
+ .u-selectbox-options::-webkit-scrollbar {
631
+ width: calc(0.45vw + 4px);
632
+ }
633
+ .u-selectbox-options::-webkit-scrollbar-thumb {
634
+ background-clip: content-box;
635
+ border: 2px solid transparent;
639
636
  }
640
637
  .u-selectbox-option {
641
638
  cursor: pointer;
@@ -648,7 +645,7 @@ button {
648
645
  font-size: 14px;
649
646
  line-height: 20px;
650
647
  }
651
- .u-selectbox-option:last-child:hover {
648
+ .u-selectbox-option:last-child {
652
649
  border-bottom: none;
653
650
  }
654
651
  .u-selectbox-option:hover {
@@ -657,37 +654,43 @@ button {
657
654
  .u-multiselectbox {
658
655
  position: relative;
659
656
  }
660
- .u-multiselectbox:hover .u-multiselectbox-select-wrapper {
657
+ .u-multiselectbox:hover .u-multiselectbox-select {
661
658
  border: 1px solid #748AB9;
662
659
  }
663
660
  .u-multiselectbox.u-multiselectbox-disabled * {
664
661
  cursor: not-allowed;
665
662
  }
666
- .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select-wrapper {
667
- border: none;
663
+ .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select {
664
+ border: 1px solid #F6F6F6;
668
665
  background-color: #F6F6F6;
666
+ padding: 8px 16px 7px 16px;
667
+ }
668
+ .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select::-webkit-scrollbar {
669
+ width: calc(0.45vw + 4px);
670
+ }
671
+ .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select::-webkit-scrollbar-thumb {
672
+ background-clip: content-box;
673
+ border: 2px solid transparent;
674
+ }
675
+ .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select .u-multiselectbox-select-cross {
676
+ display: none;
677
+ }
678
+ .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select .u-multiselectbox-select-item-container {
679
+ background-color: #D9D9D9;
680
+ }
681
+ .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select .u-multiselectbox-select-item {
682
+ width: 100%;
669
683
  }
670
684
  .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select-icon-arrow {
671
- background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292892 4.29289C0.683416 3.90237 1.31658 3.90237 1.70711 4.29289L6.00001 8.58579L10.2929 4.29289C10.6834 3.90237 11.3166 3.90237 11.7071 4.29289C12.0976 4.68342 12.0976 5.31658 11.7071 5.70711L6.70712 10.7071C6.51958 10.8946 6.26523 11 6.00001 11C5.73479 11 5.48044 10.8946 5.2929 10.7071L0.292894 5.70711C-0.0976308 5.31658 -0.0976314 4.68342 0.292892 4.29289Z' fill='%23A7A7A7'/%3E%3C/svg%3E ");
685
+ display: none;
672
686
  }
673
687
  .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select-icon-cross {
674
- background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%23A7A7A7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%23A7A7A7'/%3E%3C/svg%3E ");
688
+ display: none;
675
689
  }
676
- .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select-open ~ .u-multiselectbox-options-wrapper {
690
+ .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select-open ~ .u-multiselectbox-options {
677
691
  display: none;
678
692
  }
679
693
  .u-multiselectbox-select {
680
- max-height: 132px;
681
- overflow: auto;
682
- line-height: 30px;
683
- position: relative;
684
- display: flex;
685
- flex-wrap: wrap;
686
- padding: 8px 75px 7px 16px;
687
- grid-row-gap: 8px;
688
- grid-column-gap: 4px;
689
- }
690
- .u-multiselectbox-select-wrapper {
691
694
  height: 48px;
692
695
  padding: 14px 16px;
693
696
  border-radius: 10px;
@@ -701,50 +704,59 @@ button {
701
704
  transition-duration: 0.15s;
702
705
  transition-timing-function: ease-in-out;
703
706
  border: 1px solid #D3D3D3;
707
+ max-height: 132px;
708
+ overflow: auto;
709
+ line-height: 30px;
710
+ position: relative;
711
+ display: flex;
712
+ flex-wrap: wrap;
713
+ padding: 8px 75px 7px 16px;
714
+ grid-row-gap: 8px;
715
+ grid-column-gap: 4px;
704
716
  min-height: 48px;
705
717
  height: 100%;
706
- padding: 0 2px 0 0;
707
718
  z-index: 100 !important;
719
+ padding-right: 75px;
708
720
  }
709
- .u-multiselectbox-select-wrapper:hover,
710
- .u-multiselectbox-select-wrapper.active {
721
+ .u-multiselectbox-select:hover,
722
+ .u-multiselectbox-select.active {
711
723
  border: 1px solid #748AB9;
712
724
  }
713
- .u-multiselectbox-select-wrapper:focus {
725
+ .u-multiselectbox-select:focus {
714
726
  outline: 0;
715
727
  border: 1px solid #748AB9;
716
728
  }
717
- .u-multiselectbox-select-wrapper:disabled,
718
- .u-multiselectbox-select-wrapper.disabled {
729
+ .u-multiselectbox-select:disabled,
730
+ .u-multiselectbox-select.disabled {
719
731
  cursor: not-allowed;
720
732
  border: none;
721
733
  background-color: #F6F6F6;
722
734
  }
723
- .u-multiselectbox-select-wrapper::placeholder {
735
+ .u-multiselectbox-select::placeholder {
724
736
  /* Chrome, Firefox, Opera, Safari 10.1+ */
725
737
  color: #A7A7A7;
726
738
  opacity: 1;
727
739
  /* Firefox */
728
740
  }
729
- .u-multiselectbox-select-wrapper:-ms-input-placeholder {
741
+ .u-multiselectbox-select:-ms-input-placeholder {
730
742
  /* Internet Explorer 10-11 */
731
743
  color: #A7A7A7;
732
744
  }
733
- .u-multiselectbox-select-wrapper::placeholder {
745
+ .u-multiselectbox-select::placeholder {
734
746
  color: #A7A7A7;
735
747
  }
736
- .u-multiselectbox-select-wrapper[type="number"] {
748
+ .u-multiselectbox-select[type="number"] {
737
749
  display: block;
738
750
  box-sizing: border-box;
739
751
  -moz-appearance: textfield;
740
752
  -webkit-appearance: textfield;
741
753
  appearance: textfield;
742
754
  }
743
- .u-multiselectbox-select-wrapper[type="number"]::-webkit-outer-spin-button,
744
- .u-multiselectbox-select-wrapper[type="number"]::-webkit-inner-spin-button {
755
+ .u-multiselectbox-select[type="number"]::-webkit-outer-spin-button,
756
+ .u-multiselectbox-select[type="number"]::-webkit-inner-spin-button {
745
757
  display: none;
746
758
  }
747
- .u-multiselectbox-select-wrapper[type="search"]::-webkit-search-cancel-button {
759
+ .u-multiselectbox-select[type="search"]::-webkit-search-cancel-button {
748
760
  transition-property: color, background-color, border-color, background-image;
749
761
  transition-duration: 0.15s;
750
762
  transition-timing-function: ease-in-out;
@@ -756,10 +768,10 @@ button {
756
768
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%23A7A7A7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%23A7A7A7'/%3E%3C/svg%3E ");
757
769
  background-repeat: no-repeat;
758
770
  }
759
- .u-multiselectbox-select-wrapper[type="search"]::-webkit-search-cancel-button:hover {
771
+ .u-multiselectbox-select[type="search"]::-webkit-search-cancel-button:hover {
760
772
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%231E4391'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%231E4391'/%3E%3C/svg%3E ");
761
773
  }
762
- .u-multiselectbox-select-wrapper-required {
774
+ .u-multiselectbox-select-required {
763
775
  height: 48px;
764
776
  padding: 14px 16px;
765
777
  border-radius: 10px;
@@ -774,28 +786,35 @@ button {
774
786
  transition-timing-function: ease-in-out;
775
787
  border: 1px solid #EF302B;
776
788
  }
777
- .u-multiselectbox-select-wrapper-required:hover,
778
- .u-multiselectbox-select-wrapper-required.active {
789
+ .u-multiselectbox-select-required:hover,
790
+ .u-multiselectbox-select-required.active {
779
791
  border: 1px solid #748AB9;
780
792
  }
781
- .u-multiselectbox-select-wrapper-required:focus {
793
+ .u-multiselectbox-select-required:focus {
782
794
  outline: 0;
783
795
  border: 1px solid #748AB9;
784
796
  }
785
- .u-multiselectbox-select-wrapper-required::placeholder {
797
+ .u-multiselectbox-select-required::placeholder {
786
798
  /* Chrome, Firefox, Opera, Safari 10.1+ */
787
799
  color: #A7A7A7;
788
800
  opacity: 1;
789
801
  /* Firefox */
790
802
  }
791
- .u-multiselectbox-select-wrapper-required:-ms-input-placeholder {
803
+ .u-multiselectbox-select-required:-ms-input-placeholder {
792
804
  /* Internet Explorer 10-11 */
793
805
  color: #A7A7A7;
794
806
  }
795
- .u-multiselectbox-select-wrapper-required::-ms-input-placeholder {
807
+ .u-multiselectbox-select-required::-ms-input-placeholder {
796
808
  /* Microsoft Edge */
797
809
  color: #A7A7A7;
798
810
  }
811
+ .u-multiselectbox-select::-webkit-scrollbar {
812
+ width: calc(0.45vw + 4px);
813
+ }
814
+ .u-multiselectbox-select::-webkit-scrollbar-thumb {
815
+ background-clip: content-box;
816
+ border: 2px solid transparent;
817
+ }
799
818
  .u-multiselectbox-select-item {
800
819
  text-overflow: ellipsis;
801
820
  overflow: hidden;
@@ -832,10 +851,10 @@ button {
832
851
  .u-multiselectbox-select-open ~ .u-multiselectbox-select-icon-arrow {
833
852
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7071 10.3819C11.3166 10.7724 10.6834 10.7724 10.2929 10.3819L5.99999 6.08902L1.70711 10.3819C1.31658 10.7724 0.683418 10.7724 0.292894 10.3819C-0.0976305 9.99139 -0.0976315 9.35822 0.292892 8.9677L5.29288 3.9677C5.48042 3.78016 5.73477 3.67481 5.99999 3.6748C6.26521 3.6748 6.51956 3.78016 6.7071 3.9677L11.7071 8.9677C12.0976 9.35822 12.0976 9.99139 11.7071 10.3819Z' fill='%231E4391'/%3E%3C/svg%3E ");
834
853
  }
835
- .u-multiselectbox-select-open ~ .u-multiselectbox-options-wrapper {
854
+ .u-multiselectbox-select-open ~ .u-multiselectbox-options {
836
855
  display: block;
837
856
  }
838
- .u-multiselectbox-select-open.u-multiselectbox-select-wrapper {
857
+ .u-multiselectbox-select-open.u-multiselectbox-select {
839
858
  border: 1px solid #748AB9;
840
859
  }
841
860
  .u-multiselectbox-select-icon-arrow {
@@ -877,24 +896,23 @@ button {
877
896
  }
878
897
  .u-multiselectbox-options {
879
898
  overflow-y: auto;
880
- border-top-left-radius: 10px;
881
- border-bottom-left-radius: 10px;
882
- border-top-right-radius: 6px;
883
- border-bottom-right-radius: 6px;
884
- padding-right: 2px;
899
+ border-radius: 10px;
885
900
  max-height: 195px;
886
- }
887
- .u-multiselectbox-options-wrapper {
888
- padding-right: 2px;
889
901
  display: none;
890
902
  background-color: #FFFFFF;
891
903
  position: absolute;
892
904
  z-index: 100;
893
- border-radius: 10px;
894
905
  border: 1px solid #748AB9;
895
906
  margin-top: 2px;
896
907
  width: 100%;
897
908
  }
909
+ .u-multiselectbox-options::-webkit-scrollbar {
910
+ width: calc(0.45vw + 4px);
911
+ }
912
+ .u-multiselectbox-options::-webkit-scrollbar-thumb {
913
+ background-clip: content-box;
914
+ border: 2px solid transparent;
915
+ }
898
916
  .u-multiselectbox-option {
899
917
  background-color: #FFFFFF;
900
918
  border-bottom: 1px solid #CAD1E1;
@@ -960,7 +978,7 @@ button {
960
978
  .u-multiselectbox-simple.u-multiselectbox-simple-disabled .u-multiselectbox-simple-select-icon-cross {
961
979
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%23A7A7A7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%23A7A7A7'/%3E%3C/svg%3E ");
962
980
  }
963
- .u-multiselectbox-simple.u-multiselectbox-simple-disabled .u-multiselectbox-simple-select-open ~ .u-multiselectbox-simple-options-wrapper {
981
+ .u-multiselectbox-simple.u-multiselectbox-simple-disabled .u-multiselectbox-simple-select-open ~ .u-multiselectbox-simple-options {
964
982
  display: none;
965
983
  }
966
984
  .u-multiselectbox-simple-select {
@@ -1090,7 +1108,7 @@ button {
1090
1108
  .u-multiselectbox-simple-select-open ~ .u-multiselectbox-simple-select-icon-arrow {
1091
1109
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7071 10.3819C11.3166 10.7724 10.6834 10.7724 10.2929 10.3819L5.99999 6.08902L1.70711 10.3819C1.31658 10.7724 0.683418 10.7724 0.292894 10.3819C-0.0976305 9.99139 -0.0976315 9.35822 0.292892 8.9677L5.29288 3.9677C5.48042 3.78016 5.73477 3.67481 5.99999 3.6748C6.26521 3.6748 6.51956 3.78016 6.7071 3.9677L11.7071 8.9677C12.0976 9.35822 12.0976 9.99139 11.7071 10.3819Z' fill='%231E4391'/%3E%3C/svg%3E ");
1092
1110
  }
1093
- .u-multiselectbox-simple-select-open ~ .u-multiselectbox-simple-options-wrapper {
1111
+ .u-multiselectbox-simple-select-open ~ .u-multiselectbox-simple-options {
1094
1112
  display: block;
1095
1113
  }
1096
1114
  .u-multiselectbox-simple-select-icon-arrow {
@@ -1126,23 +1144,22 @@ button {
1126
1144
  .u-multiselectbox-simple-options {
1127
1145
  overflow-y: auto;
1128
1146
  max-height: 195px;
1129
- border-top-left-radius: 10px;
1130
- border-bottom-left-radius: 10px;
1131
- border-top-right-radius: 6px;
1132
- border-bottom-right-radius: 6px;
1133
- padding-right: 2px;
1134
- }
1135
- .u-multiselectbox-simple-options-wrapper {
1136
- padding-right: 2px;
1147
+ border-radius: 10px;
1137
1148
  display: none;
1138
1149
  background-color: #FFFFFF;
1139
1150
  position: absolute;
1140
1151
  z-index: 102;
1141
- border-radius: 10px;
1142
1152
  border: 1px solid #748AB9;
1143
1153
  margin-top: 2px;
1144
1154
  width: 100%;
1145
1155
  }
1156
+ .u-multiselectbox-simple-options::-webkit-scrollbar {
1157
+ width: calc(0.45vw + 4px);
1158
+ }
1159
+ .u-multiselectbox-simple-options::-webkit-scrollbar-thumb {
1160
+ background-clip: content-box;
1161
+ border: 2px solid transparent;
1162
+ }
1146
1163
  .u-multiselectbox-simple-option {
1147
1164
  background-color: #FFFFFF;
1148
1165
  border-bottom: 1px solid #CAD1E1;
@@ -1849,11 +1866,11 @@ button {
1849
1866
  text-decoration: none;
1850
1867
  color: #A7A7A7;
1851
1868
  border-bottom: 1px solid #A7A7A7;
1869
+ padding-bottom: 1px;
1852
1870
  }
1853
1871
  .u-tab-line:hover {
1854
1872
  color: #748AB9;
1855
1873
  background-color: #F2F3F5;
1856
- border-bottom: 1px solid #748AB9;
1857
1874
  border-top-left-radius: 10px;
1858
1875
  border-top-right-radius: 10px;
1859
1876
  text-decoration: none;
@@ -2172,6 +2189,7 @@ button {
2172
2189
  padding: 15px 16px 15px 52px;
2173
2190
  background-color: #FDEAEA;
2174
2191
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23EF302B' stroke-width='2'%3E%3C/circle%3E%3Ccircle cx='10' cy='15' r='1' fill='%23EF302B'%3E%3C/circle%3E%3Cpath d='M8.59357 6.49708C8.54286 5.68582 9.18716 5 10 5C10.8128 5 11.4571 5.68582 11.4064 6.49708L11.0624 12.0019C11.0273 12.563 10.5621 13 10 13C9.4379 13 8.97268 12.563 8.93762 12.0019L8.59357 6.49708Z' fill='%23EF302B'%3E%3C/path%3E%3C/svg%3E");
2192
+ min-height: 54px;
2175
2193
  }
2176
2194
  .u-message-success {
2177
2195
  display: flex;
@@ -2185,6 +2203,7 @@ button {
2185
2203
  padding: 15px 16px 15px 52px;
2186
2204
  background-color: #EDF7EB;
2187
2205
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23147246' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M6 10.5L9.10148 13.6015C9.31345 13.8134 9.663 13.7925 9.8482 13.5568L15 7' stroke='%23147246' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E");
2206
+ min-height: 54px;
2188
2207
  }
2189
2208
  .u-message-warning {
2190
2209
  display: flex;
@@ -2198,6 +2217,7 @@ button {
2198
2217
  padding: 15px 16px 15px 52px;
2199
2218
  background-color: #FCF4E6;
2200
2219
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23E98446' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M9.24233 13C9.03869 13 8.87361 12.8349 8.87361 12.6313C8.87361 12.229 8.92092 11.8715 9.01552 11.5587C9.11013 11.2458 9.25795 10.9665 9.45898 10.7207C9.67184 10.4749 9.84922 10.2905 9.99113 10.1676C10.1449 10.0335 10.3696 9.86034 10.6652 9.64805C10.9017 9.48045 11.0791 9.34637 11.1973 9.24581C11.3274 9.13408 11.4693 8.99441 11.6231 8.82682C11.7886 8.64804 11.9069 8.4581 11.9778 8.25698C12.0488 8.05587 12.0843 7.82681 12.0843 7.56983C12.0843 7.20112 11.9897 6.8771 11.8004 6.59777C11.6231 6.30727 11.3747 6.08939 11.0554 5.94413C10.748 5.78771 10.3991 5.7095 10.0089 5.7095C9.42942 5.7095 8.92683 5.87709 8.50111 6.21229C8.33022 6.34607 8.19259 6.4989 8.08823 6.67078C7.82922 7.09735 7.45131 7.51955 6.95227 7.51955C6.4297 7.51955 5.99284 7.08288 6.12856 6.57825C6.30589 5.91891 6.6651 5.37233 7.20621 4.93855C7.99852 4.31285 8.93275 4 10.0089 4C11.1323 4 12.0783 4.32402 12.847 4.97207C13.6157 5.62012 14 6.48603 14 7.56983C14 7.97207 13.9527 8.32961 13.8581 8.64246C13.7635 8.95531 13.6157 9.24023 13.4146 9.49721C13.2136 9.74302 13.0362 9.93296 12.8825 10.067C12.7288 10.2011 12.51 10.3743 12.2262 10.5866C11.9778 10.7765 11.7945 10.9218 11.6763 11.0223C11.5698 11.1117 11.4339 11.2458 11.2683 11.4246C11.1146 11.6034 11.0022 11.7933 10.9313 11.9944C10.8721 12.1844 10.8426 12.3966 10.8426 12.6313C10.8426 12.8349 10.6775 13 10.4739 13H9.24233Z' fill='%23E98446'%3E%3C/path%3E%3Ccircle cx='10' cy='15' r='1' fill='%23E98446'%3E%3C/circle%3E%3C/svg%3E");
2220
+ min-height: 54px;
2201
2221
  }
2202
2222
  .u-message-small {
2203
2223
  padding: 7px 16px 7px 52px;
@@ -2225,6 +2245,7 @@ button {
2225
2245
  padding: 7px 16px 7px 52px;
2226
2246
  background-color: #FDEAEA;
2227
2247
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23EF302B' stroke-width='2'%3E%3C/circle%3E%3Ccircle cx='10' cy='15' r='1' fill='%23EF302B'%3E%3C/circle%3E%3Cpath d='M8.59357 6.49708C8.54286 5.68582 9.18716 5 10 5C10.8128 5 11.4571 5.68582 11.4064 6.49708L11.0624 12.0019C11.0273 12.563 10.5621 13 10 13C9.4379 13 8.97268 12.563 8.93762 12.0019L8.59357 6.49708Z' fill='%23EF302B'%3E%3C/path%3E%3C/svg%3E");
2248
+ min-height: 38px;
2228
2249
  }
2229
2250
  .u-message-small-success {
2230
2251
  display: flex;
@@ -2238,6 +2259,7 @@ button {
2238
2259
  padding: 7px 16px 7px 52px;
2239
2260
  background-color: #EDF7EB;
2240
2261
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23147246' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M6 10.5L9.10148 13.6015C9.31345 13.8134 9.663 13.7925 9.8482 13.5568L15 7' stroke='%23147246' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E");
2262
+ min-height: 38px;
2241
2263
  }
2242
2264
  .u-message-small-warning {
2243
2265
  display: flex;
@@ -2251,6 +2273,7 @@ button {
2251
2273
  padding: 7px 16px 7px 52px;
2252
2274
  background-color: #FCF4E6;
2253
2275
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23E98446' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M9.24233 13C9.03869 13 8.87361 12.8349 8.87361 12.6313C8.87361 12.229 8.92092 11.8715 9.01552 11.5587C9.11013 11.2458 9.25795 10.9665 9.45898 10.7207C9.67184 10.4749 9.84922 10.2905 9.99113 10.1676C10.1449 10.0335 10.3696 9.86034 10.6652 9.64805C10.9017 9.48045 11.0791 9.34637 11.1973 9.24581C11.3274 9.13408 11.4693 8.99441 11.6231 8.82682C11.7886 8.64804 11.9069 8.4581 11.9778 8.25698C12.0488 8.05587 12.0843 7.82681 12.0843 7.56983C12.0843 7.20112 11.9897 6.8771 11.8004 6.59777C11.6231 6.30727 11.3747 6.08939 11.0554 5.94413C10.748 5.78771 10.3991 5.7095 10.0089 5.7095C9.42942 5.7095 8.92683 5.87709 8.50111 6.21229C8.33022 6.34607 8.19259 6.4989 8.08823 6.67078C7.82922 7.09735 7.45131 7.51955 6.95227 7.51955C6.4297 7.51955 5.99284 7.08288 6.12856 6.57825C6.30589 5.91891 6.6651 5.37233 7.20621 4.93855C7.99852 4.31285 8.93275 4 10.0089 4C11.1323 4 12.0783 4.32402 12.847 4.97207C13.6157 5.62012 14 6.48603 14 7.56983C14 7.97207 13.9527 8.32961 13.8581 8.64246C13.7635 8.95531 13.6157 9.24023 13.4146 9.49721C13.2136 9.74302 13.0362 9.93296 12.8825 10.067C12.7288 10.2011 12.51 10.3743 12.2262 10.5866C11.9778 10.7765 11.7945 10.9218 11.6763 11.0223C11.5698 11.1117 11.4339 11.2458 11.2683 11.4246C11.1146 11.6034 11.0022 11.7933 10.9313 11.9944C10.8721 12.1844 10.8426 12.3966 10.8426 12.6313C10.8426 12.8349 10.6775 13 10.4739 13H9.24233Z' fill='%23E98446'%3E%3C/path%3E%3Ccircle cx='10' cy='15' r='1' fill='%23E98446'%3E%3C/circle%3E%3C/svg%3E");
2276
+ min-height: 38px;
2254
2277
  }
2255
2278
  #u-help {
2256
2279
  position: relative;