@sc-360-v2/storefront-cms-library 0.4.28 → 0.4.29

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 (17) hide show
  1. package/dist/add-products-tab.scss +161 -35
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-order-pad.scss +6 -0
  4. package/dist/buyForHeaders.scss +11 -5
  5. package/dist/default-dropdown.scss +226 -0
  6. package/dist/filters.scss +78 -20
  7. package/dist/modal.scss +8 -0
  8. package/dist/repeater.scss +9 -4
  9. package/dist/review-cart.scss +5 -3
  10. package/dist/shipping-payments.scss +470 -183
  11. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +28 -12
  12. package/dist/types/builder/tools/element-edit/bundle.d.ts +801 -6
  13. package/dist/types/builder/tools/element-edit/filters.d.ts +8 -1
  14. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +1 -6
  15. package/dist/website.js +1 -1
  16. package/dist/widget.scss +1 -0
  17. package/package.json +1 -1
package/dist/shipping-payments.scss CHANGED
@@ -837,213 +837,486 @@ $activeElementSelector: "[data-has-clicked='true']";
837
837
  // padding: 12px;
838
838
  display: grid;
839
839
  gap: 8px;
840
- .chk_payment_option {
841
- .chk_payment_options_heading {
842
- padding: 16px;
843
- display: flex;
844
- justify-content: space-between;
845
- }
846
- .chk_payment_section_wrapper {
847
- width: 100%;
840
+ // .chk_payment_option {
841
+ // .chk_payment_options_heading {
842
+ // padding: 16px;
843
+ // display: flex;
844
+ // justify-content: space-between;
845
+ // }
846
+ // .chk_payment_section {
847
+ // width: 100%;
848
+ // display: flex;
849
+ // justify-content: space-between;
850
+ // padding: 16px;
851
+
852
+ // .chk_payment_section {
853
+ // display: flex;
854
+ // justify-content: space-between;
855
+ // align-items: center;
856
+ // width: 100%;
857
+ // .chk_payment_section_col_left {
858
+ // display: flex;
859
+ // gap: 12px;
860
+ // svg {
861
+ // width: 24px;
862
+ // height: 24px;
863
+ // }
864
+ // .chk_payment_section_method {
865
+ // display: flex;
866
+ // flex-direction: column;
867
+ // .chk_payment_section_method_name {
868
+ // font-size: 14px;
869
+ // font-weight: 700;
870
+ // line-height: 20px;
871
+ // color: var(--_gray-700);
872
+ // }
873
+ // & > div {
874
+ // display: flex;
875
+ // .label {
876
+ // font-size: 12px;
877
+ // color: var(--_gray-500);
878
+ // }
879
+ // .price {
880
+ // font-size: 12px;
881
+ // color: var(--_gray-900);
882
+ // }
883
+ // }
884
+ // }
885
+ // }
886
+ // &_col_right {
887
+ // .chk_currency_inp {
888
+ // height: 44px;
889
+ // border: 1px solid var(--_gray-200);
890
+ // border-radius: 4px;
891
+ // background-color: var(--_base-white);
892
+ // display: flex;
893
+ // width: 120px;
894
+ // overflow: hidden;
895
+ // align-items: center;
896
+ // padding-inline: 12px;
897
+ // gap: 12px;
898
+ // &:focus-within {
899
+ // border: 1px solid var(--_primary-200);
900
+ // outline: 2px solid var(--_primary-50);
901
+ // }
902
+ // input {
903
+ // height: inherit;
904
+ // &:disabled {
905
+ // opacity: 0.8;
906
+ // cursor: not-allowed;
907
+ // }
908
+ // }
909
+ // }
910
+ // }
911
+ // }
912
+
913
+ // .chk_payment_options_heading {
914
+ // color: var(--_gray-900);
915
+ // font-size: 16px;
916
+ // font-weight: 700;
917
+ // }
918
+
919
+ // // gift card styles
920
+
921
+ // // payment other options styles
922
+ // .chk_pmnt_other_options {
923
+ // display: flex;
924
+ // justify-content: space-between;
925
+ // gap: 80px;
926
+ // padding: 16px;
927
+ // .chk_pmnt_other_options_left_container {
928
+ // display: flex;
929
+ // gap: 12px;
930
+ // .chk_pmnt_option_info_wrapper {
931
+ // display: flex;
932
+ // gap: 12px;
933
+ // .cards {
934
+ // display: flex;
935
+ // flex-direction: column;
936
+ // gap: 8px;
937
+ // .chk_payment_options_name {
938
+ // font-weight: 600;
939
+ // }
940
+ // span {
941
+ // font-size: 12px;
942
+ // .chk_payment_options_label {
943
+ // color: var(--_gray-600);
944
+ // }
945
+ // .chk_payment_options_value {
946
+ // color: var(--_gray-900);
947
+ // }
948
+ // }
949
+ // }
950
+ // }
951
+ // }
952
+ // .chk_pmnt_other_options_container {
953
+ // padding: 16px;
954
+ // }
955
+ // }
956
+
957
+ // &__other_option_wrapper {
958
+ // display: flex;
959
+ // width: 100%;
960
+ // justify-content: space-between;
961
+ // padding: 16px;
962
+
963
+ // @media (max-width: 500px) {
964
+ // flex-direction: column;
965
+ // }
966
+ // }
967
+
968
+ // &_left_container {
969
+ // display: flex;
970
+ // gap: 12px;
971
+ // align-items: flex-start;
972
+ // .chk_payment_option__info_wrapper {
973
+ // display: flex;
974
+ // gap: 0px;
975
+ // }
976
+
977
+ // @media (max-width: 500px) {
978
+ // flex-wrap: wrap;
979
+ // }
980
+ // }
981
+
982
+ // &__left_wrapper {
983
+ // display: flex;
984
+ // flex-direction: column;
985
+ // align-items: flex-start;
986
+ // gap: 16px;
987
+ // }
988
+
989
+ // &__card_icon {
990
+ // width: 60px;
991
+ // height: 40px;
992
+ // }
993
+
994
+ // &__info_wrapper {
995
+ // display: flex;
996
+ // flex-direction: column;
997
+
998
+ // .chk_payment_options_name {
999
+ // color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1000
+ // font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1001
+ // font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1002
+ // font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1003
+ // font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1004
+ // line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1005
+ // letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1006
+ // text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1007
+ // }
1008
+
1009
+ // .chk_payment_options_label {
1010
+ // color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1011
+ // font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1012
+ // font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1013
+ // font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1014
+ // font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1015
+ // line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1016
+ // letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1017
+ // text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1018
+ // }
1019
+
1020
+ // .chk_payment_options_value {
1021
+ // color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1022
+ // font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1023
+ // font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1024
+ // font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1025
+ // font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1026
+ // line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1027
+ // letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1028
+ // text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1029
+ // }
1030
+ // }
1031
+
1032
+ // &_right_container {
1033
+ // display: flex;
1034
+ // gap: 6px;
1035
+ // align-items: flex-start;
1036
+
1037
+ // @media (max-width: 500px) {
1038
+ // justify-content: flex-end;
1039
+ // }
1040
+ // }
1041
+
1042
+ // &_input {
1043
+ // display: flex;
1044
+ // padding: 9px 12px;
1045
+ // align-items: center;
1046
+ // max-width: 96px;
1047
+ // background-color: var(--_base-white);
1048
+ // border: 1px solid var(--_gray-300);
1049
+ // border-radius: 6px;
1050
+ // color: var(--_gray-700);
1051
+
1052
+ // &:focus-within {
1053
+ // border: 1px solid var(--_primary-300);
1054
+ // outline: 2px solid var(--_primary-100);
1055
+ // }
1056
+
1057
+ // .icon {
1058
+ // svg {
1059
+ // path {
1060
+ // stroke: var(--_primary-400);
1061
+ // }
1062
+ // }
1063
+ // }
1064
+
1065
+ // .input_field {
1066
+ // background-color: var(--_base-white);
1067
+ // border: 1px solid var(--_gray-300);
1068
+ // border-radius: 6px;
1069
+ // color: var(--_gray-700);
1070
+
1071
+ // &:focus-within {
1072
+ // border: 1px solid var(--_primary-300);
1073
+ // outline: 2px solid var(--_primary-100);
1074
+ // }
1075
+ // }
1076
+ // }
1077
+ // }
1078
+ // }
1079
+ .chk_payment_section {
1080
+ display: flex;
1081
+ justify-content: space-between;
1082
+ align-items: center;
1083
+ width: 100%;
1084
+ padding: 16px;
1085
+ .chk_payment_section_col_left {
848
1086
  display: flex;
849
- justify-content: space-between;
850
- padding: 16px;
851
-
852
- .chk_payment_section {
1087
+ gap: 12px;
1088
+ svg {
1089
+ width: 24px;
1090
+ height: 24px;
1091
+ }
1092
+ .chk_payment_section_method {
853
1093
  display: flex;
854
- justify-content: space-between;
855
- align-items: center;
856
- width: 100%;
857
- .chk_payment_section_col_left {
858
- display: flex;
859
- gap: 12px;
860
- svg {
861
- width: 24px;
862
- height: 24px;
863
- }
864
- .chk_payment_section_method {
1094
+ flex-direction: column;
1095
+ gap: 12px;
1096
+ .chk_payment_section_method_name {
1097
+ font-size: 14px;
1098
+ font-weight: 700;
1099
+ line-height: 20px;
1100
+ color: var(--_gray-700);
1101
+ }
1102
+ .po-container {
1103
+ .po-grid {
865
1104
  display: flex;
866
- flex-direction: column;
867
- .chk_payment_section_method_name {
868
- font-size: 14px;
869
- font-weight: 700;
870
- line-height: 20px;
871
- color: var(--_gray-700);
872
- }
1105
+ gap: 8px;
873
1106
  & > div {
874
- display: flex;
875
- .label {
876
- font-size: 12px;
877
- color: var(--_gray-500);
878
- }
879
- .price {
880
- font-size: 12px;
881
- color: var(--_gray-900);
1107
+ border: 1px solid var(--_gray-300);
1108
+ background-color: var(--_base-white);
1109
+ border-radius: 4px;
1110
+ width: 90px;
1111
+ height: 28px;
1112
+ overflow: hidden;
1113
+ input {
1114
+ padding-inline: 10px;
1115
+ height: 100%;
882
1116
  }
883
1117
  }
884
1118
  }
885
1119
  }
886
- &_col_right {
887
- .chk_currency_inp {
888
- height: 44px;
889
- border: 1px solid var(--_gray-200);
890
- border-radius: 4px;
891
- background-color: var(--_base-white);
892
- display: flex;
893
- width: 120px;
894
- overflow: hidden;
895
- align-items: center;
896
- padding-inline: 12px;
897
- gap: 12px;
898
- &:focus-within {
899
- border: 1px solid var(--_primary-200);
900
- outline: 2px solid var(--_primary-50);
901
- }
902
- input {
903
- height: inherit;
904
- &:disabled {
905
- opacity: 0.8;
906
- cursor: not-allowed;
907
- }
1120
+ & > div {
1121
+ display: flex;
1122
+ gap: 16px;
1123
+ .label {
1124
+ font-size: 12px;
1125
+ color: var(--_gray-500);
1126
+ }
1127
+ .price {
1128
+ font-size: 12px;
1129
+ color: var(--_gray-900);
1130
+ }
1131
+ }
1132
+ }
1133
+ }
1134
+ &_col_right {
1135
+ .chk_currency_inp_sec {
1136
+ display: flex;
1137
+ justify-content: end;
1138
+ .chk_currency_inp {
1139
+ height: 44px;
1140
+ border: 1px solid var(--_gray-200);
1141
+ border-radius: 4px;
1142
+ background-color: var(--_base-white);
1143
+ display: flex;
1144
+ width: 120px;
1145
+ overflow: hidden;
1146
+ align-items: center;
1147
+ padding-inline: 12px;
1148
+ gap: 12px;
1149
+ &:focus-within {
1150
+ border: 1px solid var(--_primary-200);
1151
+ outline: 2px solid var(--_primary-50);
1152
+ }
1153
+ input {
1154
+ height: inherit;
1155
+ &:disabled {
1156
+ opacity: 0.8;
1157
+ cursor: not-allowed;
908
1158
  }
909
1159
  }
910
1160
  }
911
1161
  }
912
-
913
- .chk_payment_options_heading {
914
- color: var(--_gray-900);
915
- font-size: 16px;
916
- font-weight: 700;
1162
+ .cur_conversion {
1163
+ font-size: 12px;
917
1164
  }
1165
+ }
1166
+
1167
+ .chk_payment_options_heading {
1168
+ color: var(--_gray-900);
1169
+ font-size: 16px;
1170
+ font-weight: 700;
1171
+ }
918
1172
 
919
- // gift card styles
1173
+ // gift card styles
920
1174
 
921
- // payment other options styles
922
- .chk_pmnt_other_options {
1175
+ // payment other options styles
1176
+ .chk_pmnt_other_options {
1177
+ display: flex;
1178
+ justify-content: space-between;
1179
+ gap: 80px;
1180
+ padding: 16px;
1181
+ .chk_pmnt_other_options_left_container {
923
1182
  display: flex;
924
- justify-content: space-between;
925
- gap: 80px;
926
- padding: 16px;
927
- .chk_pmnt_other_options_left_container {
1183
+ gap: 12px;
1184
+ .chk_pmnt_option_info_wrapper {
928
1185
  display: flex;
929
1186
  gap: 12px;
930
- .chk_pmnt_option_info_wrapper {
1187
+ .cards {
931
1188
  display: flex;
932
- gap: 12px;
933
- .cards {
934
- display: flex;
935
- flex-direction: column;
936
- gap: 8px;
937
- .chk_payment_options_name {
938
- font-weight: 600;
1189
+ flex-direction: column;
1190
+ gap: 8px;
1191
+ .chk_payment_options_name {
1192
+ font-weight: 600;
1193
+ }
1194
+ span {
1195
+ font-size: 12px;
1196
+ .chk_payment_options_label {
1197
+ color: var(--_gray-600);
939
1198
  }
940
- span {
941
- font-size: 12px;
942
- .chk_payment_options_label {
943
- color: var(--_gray-600);
944
- }
945
- .chk_payment_options_value {
946
- color: var(--_gray-900);
947
- }
1199
+ .chk_payment_options_value {
1200
+ color: var(--_gray-900);
948
1201
  }
949
1202
  }
950
1203
  }
951
1204
  }
952
- .chk_pmnt_other_options_container {
953
- padding: 16px;
954
- }
955
1205
  }
956
-
957
- &__other_option_wrapper {
958
- display: flex;
959
- width: 100%;
960
- justify-content: space-between;
1206
+ .chk_pmnt_other_options_container {
961
1207
  padding: 16px;
962
-
963
- @media (max-width: 500px) {
964
- flex-direction: column;
965
- }
966
1208
  }
1209
+ }
967
1210
 
968
- &_left_container {
969
- display: flex;
970
- gap: 12px;
971
- align-items: flex-start;
972
- .chk_payment_option__info_wrapper {
973
- display: flex;
974
- gap: 0px;
975
- }
1211
+ &__other_option_wrapper {
1212
+ display: flex;
1213
+ width: 100%;
1214
+ justify-content: space-between;
1215
+ padding: 16px;
976
1216
 
977
- @media (max-width: 500px) {
978
- flex-wrap: wrap;
979
- }
1217
+ @media (max-width: 500px) {
1218
+ flex-direction: column;
980
1219
  }
1220
+ }
981
1221
 
982
- &__left_wrapper {
1222
+ &_left_container {
1223
+ display: flex;
1224
+ gap: 12px;
1225
+ align-items: flex-start;
1226
+ .chk_payment_option__info_wrapper {
983
1227
  display: flex;
984
- flex-direction: column;
985
- align-items: flex-start;
986
- gap: 16px;
1228
+ gap: 0px;
987
1229
  }
988
1230
 
989
- &__card_icon {
990
- width: 60px;
991
- height: 40px;
1231
+ @media (max-width: 500px) {
1232
+ flex-wrap: wrap;
992
1233
  }
1234
+ }
993
1235
 
994
- &__info_wrapper {
995
- display: flex;
996
- flex-direction: column;
1236
+ &__left_wrapper {
1237
+ display: flex;
1238
+ flex-direction: column;
1239
+ align-items: flex-start;
1240
+ gap: 16px;
1241
+ }
997
1242
 
998
- .chk_payment_options_name {
999
- color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1000
- font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1001
- font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1002
- font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1003
- font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1004
- line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1005
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1006
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1007
- }
1243
+ &__card_icon {
1244
+ width: 60px;
1245
+ height: 40px;
1246
+ }
1008
1247
 
1009
- .chk_payment_options_label {
1010
- color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1011
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1012
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1013
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1014
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1015
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1016
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1017
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1018
- }
1248
+ &__info_wrapper {
1249
+ display: flex;
1250
+ flex-direction: column;
1019
1251
 
1020
- .chk_payment_options_value {
1021
- color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1022
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1023
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1024
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1025
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1026
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1027
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1028
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1029
- }
1252
+ .chk_payment_options_name {
1253
+ color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1254
+ font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1255
+ font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1256
+ font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1257
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1258
+ line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1259
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1260
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1030
1261
  }
1031
1262
 
1032
- &_right_container {
1033
- display: flex;
1034
- gap: 6px;
1035
- align-items: flex-start;
1263
+ .chk_payment_options_label {
1264
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1265
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1266
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1267
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1268
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1269
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1270
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1271
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1272
+ }
1273
+
1274
+ .chk_payment_options_value {
1275
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1276
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1277
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1278
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1279
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1280
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1281
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1282
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1283
+ }
1284
+ }
1285
+
1286
+ &_right_container {
1287
+ display: flex;
1288
+ gap: 6px;
1289
+ align-items: flex-start;
1290
+
1291
+ @media (max-width: 500px) {
1292
+ justify-content: flex-end;
1293
+ }
1294
+ }
1295
+
1296
+ &_input {
1297
+ display: flex;
1298
+ padding: 9px 12px;
1299
+ align-items: center;
1300
+ max-width: 96px;
1301
+ background-color: var(--_base-white);
1302
+ border: 1px solid var(--_gray-300);
1303
+ border-radius: 6px;
1304
+ color: var(--_gray-700);
1036
1305
 
1037
- @media (max-width: 500px) {
1038
- justify-content: flex-end;
1306
+ &:focus-within {
1307
+ border: 1px solid var(--_primary-300);
1308
+ outline: 2px solid var(--_primary-100);
1309
+ }
1310
+
1311
+ .icon {
1312
+ svg {
1313
+ path {
1314
+ stroke: var(--_primary-400);
1315
+ }
1039
1316
  }
1040
1317
  }
1041
1318
 
1042
- &_input {
1043
- display: flex;
1044
- padding: 9px 12px;
1045
- align-items: center;
1046
- max-width: 96px;
1319
+ .input_field {
1047
1320
  background-color: var(--_base-white);
1048
1321
  border: 1px solid var(--_gray-300);
1049
1322
  border-radius: 6px;
@@ -1053,26 +1326,6 @@ $activeElementSelector: "[data-has-clicked='true']";
1053
1326
  border: 1px solid var(--_primary-300);
1054
1327
  outline: 2px solid var(--_primary-100);
1055
1328
  }
1056
-
1057
- .icon {
1058
- svg {
1059
- path {
1060
- stroke: var(--_primary-400);
1061
- }
1062
- }
1063
- }
1064
-
1065
- .input_field {
1066
- background-color: var(--_base-white);
1067
- border: 1px solid var(--_gray-300);
1068
- border-radius: 6px;
1069
- color: var(--_gray-700);
1070
-
1071
- &:focus-within {
1072
- border: 1px solid var(--_primary-300);
1073
- outline: 2px solid var(--_primary-100);
1074
- }
1075
- }
1076
1329
  }
1077
1330
  }
1078
1331
  }
@@ -1918,6 +2171,16 @@ $activeElementSelector: "[data-has-clicked='true']";
1918
2171
  width: 500px;
1919
2172
  .chk_form_field {
1920
2173
  width: 100%;
2174
+ .est__dropdown {
2175
+ align-items: start;
2176
+ .est__dropdown__button {
2177
+ width: 100%;
2178
+ .value__selected {
2179
+ align-items: center;
2180
+ justify-content: start;
2181
+ }
2182
+ }
2183
+ }
1921
2184
  &.expiry_details {
1922
2185
  width: 80px;
1923
2186
  }
@@ -2124,6 +2387,7 @@ $activeElementSelector: "[data-has-clicked='true']";
2124
2387
 
2125
2388
  .add_credit_card {
2126
2389
  display: flex;
2390
+ align-items: center;
2127
2391
  gap: 12px;
2128
2392
  padding: 16px;
2129
2393
 
@@ -2136,13 +2400,36 @@ $activeElementSelector: "[data-has-clicked='true']";
2136
2400
 
2137
2401
  .cc_info {
2138
2402
  display: flex;
2139
- flex-direction: column;
2403
+ align-items: center;
2404
+ // flex-direction: column;
2140
2405
  gap: 6px;
2406
+ justify-content: space-between;
2407
+ width: 100%;
2141
2408
 
2142
2409
  .cc_title {
2143
2410
  font-size: 14px;
2144
2411
  font-weight: 600;
2145
2412
  }
2413
+ .chk_payment_cred_section_col_right {
2414
+ .chk_currency_inp_sec {
2415
+ display: flex;
2416
+ justify-content: end;
2417
+ .chk_currency_inp {
2418
+ border: 1px solid var(--_gray-200);
2419
+ min-width: 100px;
2420
+ display: flex;
2421
+ gap: 12px;
2422
+ height: 40px;
2423
+ border-radius: 4px;
2424
+ align-items: center;
2425
+ max-width: 120px;
2426
+ padding-inline: 12px;
2427
+ }
2428
+ }
2429
+ .cur_conversion {
2430
+ font-size: 14px;
2431
+ }
2432
+ }
2146
2433
  }
2147
2434
  }
2148
2435
  .add_new_credit_card {