halleyx-ui-framework 4.6.3 → 4.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -467,7 +467,7 @@
467
467
 
468
468
  .add-style {
469
469
  border-color: var(--hlx-color-primary) !important;
470
- .cutom-multi-select-title{
470
+ .custom-multi-select-title{
471
471
  color: var(--hlx-color-primary) !important;
472
472
  }
473
473
  }
@@ -840,7 +840,7 @@ button {
840
840
  color: black;
841
841
  }
842
842
 
843
- .custom-multi-select {
843
+ .inline-multi-select{
844
844
  height: 36px;
845
845
  width: 100%;
846
846
  border: 1px solid var(--hlx-border-color);
@@ -850,64 +850,105 @@ button {
850
850
  align-items: center;
851
851
  background-color: white;
852
852
  position: relative;
853
+ margin-bottom: 20px;
853
854
  cursor: pointer;
854
855
  &:hover {
855
856
  border-color: var(--hlx-color-primary);
856
- .cutom-multi-select-title
857
+ .custom-multi-select-title
857
858
  {
858
859
  color: var(--hlx-color-primary) !important;
859
860
  }
860
861
  }
861
- .custom-multi-select-tag-value {
862
- margin-left: 8px;
863
- cursor: pointer;
864
-
865
- .multiselect-inline-tag-option {
866
- width: 100px;
867
- height:25px;
868
- background: var(--hlx-color-primary-light);
869
- color: var(--hlx-color-primary-dark);
870
- }
862
+ .asterik{
863
+ color: var(--hlx-color-error);
871
864
  }
872
- .multi-select-inline-count-value {
873
- width: 25px;
874
- display: flex;
875
- align-items: center;
876
- background: var(--hlx-color-primary-light);
877
- color: var(--hlx-color-primary-dark);
878
- // background: var(--hlx-color-primary);
879
- border-radius: 25px;
880
- height: 25px;
865
+ .customerror {
866
+ position: absolute;
881
867
  font-size: 12px;
882
- margin-left: 2px;
883
- // color: var(--hlx-color-white);
884
- justify-content: center;
885
- // position: absolute;
868
+ color: var(--hlx-color-error);
869
+ top: 35px;
870
+ left: 1px;
886
871
  }
887
- .custom-multi-select-input {
872
+ .inline-input-section{
873
+ display:flex;
874
+ width:100%;
875
+ height:100%;
876
+ input{
888
877
  width: 97%;
889
878
  height: 100%;
890
879
  border: none;
891
- // background-color: blue;
892
- padding-left: 8px;
893
- border-top-left-radius: 4px;
894
880
  cursor: pointer;
895
- border-bottom-left-radius: 4px;
881
+ }
882
+ .inline-multi-select-tag-value{
883
+ width: 97%;
884
+ height: 100%;
885
+ border: none;
886
+ display: flex;
887
+
888
+ .custom-multi-select-tag-value{
889
+ width:100px;
890
+ display: flex;
891
+ justify-content: center;
892
+ align-items: center;
893
+ margin-right: 3px;
894
+ .multiselect-inline-tag-option {
895
+ width: 95px;
896
+ height:25px;
897
+ background: var(--hlx-color-primary-light);
898
+ color: var(--hlx-color-primary-dark);
899
+ }
900
+ }
901
+ }
902
+ .inline-multi-select-count-section{
903
+ height:30px;
904
+ width:30px;
905
+ display: flex;
906
+ justify-content: center;
907
+ align-items: center;
908
+ .inline-multi-select-count{
909
+ width: 25px;
910
+ display: flex;
911
+ align-items: center;
912
+ background: var(--hlx-color-primary-light);
913
+ color: var(--hlx-color-primary-dark);
914
+ border-radius: 25px;
915
+ height: 25px;
916
+ font-size: 12px;
917
+ margin-left: 2px;
918
+ justify-content: center;
919
+ }
896
920
  }
897
- .icon-angle-down-regular,
898
- .icon-angle-up-regular {
899
- position: absolute;
900
- right: 0px;
901
- font-size: 14px;
902
- width:30px;
903
- height: 29px;
904
- display: flex;
905
- align-items: center;
906
- border-bottom-right-radius: 2px;
907
- border-top-right-radius: 2px;
908
- background-color: white;
921
+ .icon-angle-down-regular,.icon-angle-up-regular{
922
+ height: 30px;
923
+ width: 30px;
924
+ font-size: 14px;
925
+ padding-right:7px;
926
+ display: flex;
927
+ // justify-content: center;
928
+ align-items: center;
929
+ }
930
+ .custom-multi-select-title1{
931
+ position: absolute;
932
+ top: 7px;
933
+ // background: white;
934
+ font-size: 14px;
935
+ left: 6px;
936
+ margin: 0 5px 0 5px;
937
+ padding: 0 5px 0 5px;
938
+ color: #a6a6a6;
939
+ }
940
+ .custom-multi-select-title{
941
+ position: absolute;
942
+ top: -12px;
943
+ background: white;
944
+ font-size: 12px;
945
+ left: 6px;
946
+ margin: 0 5px 0 5px;
947
+ padding: 0 5px 0 5px;
948
+ color: #a6a6a6;
949
+ }
909
950
  }
910
- .custom-multi-select-option-container {
951
+ .inline-multi-select-option-container{
911
952
  position: absolute;
912
953
  height: 200px;
913
954
  width: 100%;
@@ -918,55 +959,168 @@ button {
918
959
  padding-bottom: 8px;
919
960
  top: 39px;
920
961
  left: 0px;
921
- overflow-y: none;
962
+ overflow-y: auto;
922
963
  z-index: 10000000000000000;
923
964
  display: flex;
924
965
  flex-direction: column;
925
966
  // flex-wrap: wrap;
926
967
  height: auto;
927
968
  max-height: 250px;
928
-
929
- .input-container232{
930
- padding-top: 8px;
931
- padding-left: 8px;
932
- overflow-y: scroll;
933
- overflow-x: hidden;
934
- // height:100%;
935
- // height:180px;
936
- }
937
- .custom-multi-select-footer{
938
- display: flex;
939
- overflow: none;
940
- justify-content: flex-end;
941
- padding-top: 8px;
942
- border-top: 1px solid var(--hlx-border-color);
943
- .primary{
944
- margin-right: 10px;
945
- margin-left: 10px;
946
- height: 30px;
947
- }
948
- .secondary-success {
949
- height: 30px;
950
-
951
- }
952
- }
953
969
  }
954
- .custom-multi-select-option-container .input-container232{
955
- overflow-x: none !important;
970
+ .inline-multi-select-placeholder{
971
+ border: none;
972
+ width: 100%;
973
+ text-align: left;
974
+ outline: none;
975
+ cursor: pointer;
976
+ font-size: 14px;
977
+ color: #a6a6a6;
978
+ white-space: nowrap;
979
+ overflow: hidden;
980
+ text-overflow: ellipsis;
981
+ border-top-left-radius: 4px;
982
+ border-bottom-left-radius: 4px;
983
+ height: 34px;
984
+ padding: 8px 12px;
956
985
  }
957
-
958
- .cutom-multi-select-title {
959
- position: absolute;
986
+ .custom-multi-select-title{
987
+ position: absolute;
960
988
  top: -12px;
961
989
  background: white;
962
990
  font-size: 12px;
963
991
  left: 6px;
964
992
  margin: 0 5px 0 5px;
965
993
  padding: 0 5px 0 5px;
966
- color: #a6a6a6;
967
994
  }
968
995
  }
969
996
 
997
+ // .custom-multi-select {
998
+ // height: 36px;
999
+ // width: 100%;
1000
+ // border: 1px solid var(--hlx-border-color);
1001
+ // border-radius: 4px;
1002
+ // padding-left: 8px;
1003
+ // display: flex;
1004
+ // align-items: center;
1005
+ // background-color: white;
1006
+ // position: relative;
1007
+ // cursor: pointer;
1008
+ // &:hover {
1009
+ // border-color: var(--hlx-color-primary);
1010
+ // .cutom-multi-select-title
1011
+ // {
1012
+ // color: var(--hlx-color-primary) !important;
1013
+ // }
1014
+ // }
1015
+ // .custom-multi-select-tag-value {
1016
+ // margin-left: 8px;
1017
+ // cursor: pointer;
1018
+
1019
+ // .multiselect-inline-tag-option {
1020
+ // width: 100px;
1021
+ // height:25px;
1022
+ // background: var(--hlx-color-primary-light);
1023
+ // color: var(--hlx-color-primary-dark);
1024
+ // }
1025
+ // }
1026
+ // .multi-select-inline-count-value {
1027
+ // width: 25px;
1028
+ // display: flex;
1029
+ // align-items: center;
1030
+ // background: var(--hlx-color-primary-light);
1031
+ // color: var(--hlx-color-primary-dark);
1032
+ // // background: var(--hlx-color-primary);
1033
+ // border-radius: 25px;
1034
+ // height: 25px;
1035
+ // font-size: 12px;
1036
+ // margin-left: 2px;
1037
+ // // color: var(--hlx-color-white);
1038
+ // justify-content: center;
1039
+ // // position: absolute;
1040
+ // }
1041
+ // .custom-multi-select-input {
1042
+ // width: 97%;
1043
+ // height: 100%;
1044
+ // border: none;
1045
+ // // background-color: blue;
1046
+ // padding-left: 8px;
1047
+ // border-top-left-radius: 4px;
1048
+ // cursor: pointer;
1049
+ // border-bottom-left-radius: 4px;
1050
+ // }
1051
+ // .icon-angle-down-regular,
1052
+ // .icon-angle-up-regular {
1053
+ // position: absolute;
1054
+ // right: 0px;
1055
+ // font-size: 14px;
1056
+ // width:30px;
1057
+ // height: 29px;
1058
+ // display: flex;
1059
+ // align-items: center;
1060
+ // border-bottom-right-radius: 2px;
1061
+ // border-top-right-radius: 2px;
1062
+ // background-color: white;
1063
+ // }
1064
+ // .custom-multi-select-option-container {
1065
+ // position: absolute;
1066
+ // height: 200px;
1067
+ // width: 100%;
1068
+ // border: 1px solid var(--hlx-border-color);
1069
+ // background-color: white;
1070
+ // // overflow: scroll;
1071
+ // border-radius: 5px;
1072
+ // padding-bottom: 8px;
1073
+ // top: 39px;
1074
+ // left: 0px;
1075
+ // overflow-y: none;
1076
+ // z-index: 10000000000000000;
1077
+ // display: flex;
1078
+ // flex-direction: column;
1079
+ // // flex-wrap: wrap;
1080
+ // height: auto;
1081
+ // max-height: 250px;
1082
+
1083
+ // .input-container232{
1084
+ // padding-top: 8px;
1085
+ // padding-left: 8px;
1086
+ // overflow-y: scroll;
1087
+ // overflow-x: hidden;
1088
+ // // height:100%;
1089
+ // // height:180px;
1090
+ // }
1091
+ // .custom-multi-select-footer{
1092
+ // display: flex;
1093
+ // overflow: none;
1094
+ // justify-content: flex-end;
1095
+ // padding-top: 8px;
1096
+ // border-top: 1px solid var(--hlx-border-color);
1097
+ // .primary{
1098
+ // margin-right: 10px;
1099
+ // margin-left: 10px;
1100
+ // height: 30px;
1101
+ // }
1102
+ // .secondary-success {
1103
+ // height: 30px;
1104
+
1105
+ // }
1106
+ // }
1107
+ // }
1108
+ // .custom-multi-select-option-container .input-container232{
1109
+ // overflow-x: none !important;
1110
+ // }
1111
+
1112
+ // .cutom-multi-select-title {
1113
+ // position: absolute;
1114
+ // top: -12px;
1115
+ // background: white;
1116
+ // font-size: 12px;
1117
+ // left: 6px;
1118
+ // margin: 0 5px 0 5px;
1119
+ // padding: 0 5px 0 5px;
1120
+ // color: #a6a6a6;
1121
+ // }
1122
+ // }
1123
+
970
1124
 
971
1125
  .not-all-tag{
972
1126
  // width:95%;