@sc-360-v2/storefront-cms-library 0.3.56 → 0.3.58

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 (24) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/buyForHeaders.scss +19 -3
  3. package/dist/cart-summary.scss +897 -40
  4. package/dist/checkout.scss +5520 -531
  5. package/dist/confirmationModal.scss +1 -0
  6. package/dist/dropdownTemplate.scss +129 -5
  7. package/dist/employee-bulk-order.scss +644 -489
  8. package/dist/functions.js +1 -1
  9. package/dist/icon-list.scss +117 -29
  10. package/dist/modal.scss +3 -3
  11. package/dist/section.scss +25 -24
  12. package/dist/shipping-payments.scss +846 -650
  13. package/dist/stack.scss +4 -3
  14. package/dist/types/builder/elements/form-builder/index.d.ts +1 -0
  15. package/dist/types/builder/interfaces/global.d.ts +1 -1
  16. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +2833 -188
  17. package/dist/types/builder/tools/element-edit/checkout.d.ts +1935 -541
  18. package/dist/types/builder/tools/element-edit/icon-list.d.ts +53 -1
  19. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  20. package/dist/types/builder/tools/element-edit/productDescription.d.ts +16 -0
  21. package/dist/types/helper/helper-functions copy.d.ts +7 -0
  22. package/dist/types/helper/helper-functions.d.ts +7 -1
  23. package/dist/types/html-elements/element-types.d.ts +2 -2
  24. package/package.json +1 -1
package/dist/shipping-payments.scss CHANGED
@@ -68,7 +68,7 @@ $activeElementSelector: "[data-has-clicked='true']";
68
68
  display: flex;
69
69
  padding: var(--_ctm-lt-pg);
70
70
  flex-direction: column;
71
- gap: var(--_ctm-lt-te-ad-it-gp);
71
+ gap: 4px;
72
72
  word-break: keep-all;
73
73
  padding-bottom: 24px;
74
74
 
@@ -82,9 +82,26 @@ $activeElementSelector: "[data-has-clicked='true']";
82
82
  .accordion {
83
83
  border-radius: 4px;
84
84
  display: flex;
85
- gap: var(--_ctm-lt-an-hg-ad-ve-gp);
85
+ // gap: var(--_ctm-lt-an-hg-ad-ve-gp);
86
86
  flex-direction: column;
87
+ transition: max-height 800ms ease-in;
88
+ &.open {
89
+ transition: max-height 800ms ease-in;
90
+ .accordion-header {
91
+ background-color: var(--_gray-200);
92
+ }
93
+ .accordion-body {
94
+ transition: max-height 800ms ease-in;
95
+ max-height: 2000px;
96
+ padding-block: 12px 24px;
97
+ .shipping-address {
98
+ max-height: fit-content;
99
+ transition: max-height 800ms ease-in;
100
+ }
101
+ }
102
+ }
87
103
 
104
+ // accordion heaer
88
105
  .accordion-header {
89
106
  padding: 12px;
90
107
  display: flex;
@@ -94,6 +111,7 @@ $activeElementSelector: "[data-has-clicked='true']";
94
111
  background-color: #f5f5f5;
95
112
  border-color: #f5f5f5;
96
113
  border-radius: 4px;
114
+ height: 55px;
97
115
 
98
116
  .accordion-title {
99
117
  margin-right: 1rem;
@@ -119,26 +137,27 @@ $activeElementSelector: "[data-has-clicked='true']";
119
137
  }
120
138
  }
121
139
 
140
+ // accordion body
122
141
  .accordion-body {
123
- margin-bottom: 16px;
124
- .summary {
125
- .chk_shipping_method_label {
126
- display: flex;
127
- align-items: center;
128
- gap: 4px;
129
- color: var(--_gray-500);
130
- }
131
-
132
- .chk_shipping_method_heading {
133
- color: var(--_gray-500);
134
- font-weight: 600;
135
- }
136
- }
142
+ transition: max-height 800ms ease-in;
137
143
 
144
+ max-height: 0px;
145
+ overflow: hidden;
146
+ padding: 0;
147
+ // shipping address
138
148
  .shipping-address {
149
+ transition: max-height 800ms ease-in;
150
+ max-height: 0;
139
151
  display: flex;
140
152
  flex-direction: column;
141
- gap: 24px;
153
+ gap: 16px;
154
+
155
+ .btn_link {
156
+ color: var(--_primary-400);
157
+ &:hover {
158
+ text-decoration: underline;
159
+ }
160
+ }
142
161
 
143
162
  .chk_saved_address_button {
144
163
  cursor: pointer;
@@ -153,19 +172,27 @@ $activeElementSelector: "[data-has-clicked='true']";
153
172
  display: flex;
154
173
  flex-direction: column;
155
174
  gap: 24px;
175
+ max-width: 485px;
156
176
  }
157
177
 
158
178
  .shipping_address_heading_container {
159
179
  display: flex;
160
180
  justify-content: space-between;
161
181
  align-items: center;
182
+ font-weight: 600;
183
+ color: var(--_gray-900);
184
+ .icon {
185
+ display: flex;
186
+ align-items: center;
187
+ cursor: pointer;
188
+ }
162
189
  }
163
190
 
164
191
  form {
165
192
  display: flex;
166
193
  flex-direction: column;
167
194
  gap: 0.75rem;
168
- max-width: 85%;
195
+ // max-width: 85%;
169
196
 
170
197
  @media (max-width: 500px) {
171
198
  max-width: 100%;
@@ -194,6 +221,7 @@ $activeElementSelector: "[data-has-clicked='true']";
194
221
  .chk_shipping_address_form_label {
195
222
  color: var(--_gray-600);
196
223
  font-size: 14px;
224
+ padding-bottom: 6px;
197
225
  }
198
226
 
199
227
  .chk_shiping_address_form_input {
@@ -276,6 +304,20 @@ $activeElementSelector: "[data-has-clicked='true']";
276
304
  }
277
305
  }
278
306
 
307
+ .summary {
308
+ .chk_shipping_method_label {
309
+ display: flex;
310
+ align-items: center;
311
+ gap: 4px;
312
+ color: var(--_gray-500);
313
+ }
314
+
315
+ .chk_shipping_method_heading {
316
+ color: var(--_gray-500);
317
+ font-weight: 600;
318
+ }
319
+ }
320
+
279
321
  .chk_multi_address {
280
322
  display: flex;
281
323
  flex-direction: column;
@@ -478,7 +520,7 @@ $activeElementSelector: "[data-has-clicked='true']";
478
520
  &__group {
479
521
  display: flex;
480
522
  flex-direction: column;
481
- gap: 4px;
523
+ gap: 8px;
482
524
 
483
525
  .chk_shipping_method_heading {
484
526
  color: var(--_gray-700);
@@ -517,9 +559,9 @@ $activeElementSelector: "[data-has-clicked='true']";
517
559
  }
518
560
 
519
561
  .chk_shipping_method_label {
520
- color: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
562
+ color: var(--_gray-600);
521
563
  font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
522
- font-size: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se);
564
+ font-size: 14px;
523
565
  font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
524
566
  font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt);
525
567
  line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht);
@@ -528,9 +570,9 @@ $activeElementSelector: "[data-has-clicked='true']";
528
570
  }
529
571
 
530
572
  .chk_shipping_method_value {
531
- color: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-cr);
573
+ color: var(--_gray-900);
532
574
  font-family: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-fy);
533
- font-size: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se);
575
+ font-size: 14px;
534
576
  font-style: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se-ic);
535
577
  font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-wt);
536
578
  line-height: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-le-ht);
@@ -592,6 +634,7 @@ $activeElementSelector: "[data-has-clicked='true']";
592
634
  }
593
635
  }
594
636
 
637
+ // payment options
595
638
  .chk_payment-options {
596
639
  display: flex;
597
640
  flex-direction: column;
@@ -599,6 +642,128 @@ $activeElementSelector: "[data-has-clicked='true']";
599
642
  .gift_crd_chk_payment_option {
600
643
  border: 1px solid var(--_gray-300);
601
644
  border-radius: 4px;
645
+ margin-bottom: 12px;
646
+ .add_gift_card {
647
+ display: flex;
648
+ gap: 12px;
649
+ padding: 16px;
650
+
651
+ .gc_icon {
652
+ svg {
653
+ width: 18px;
654
+ height: 14px;
655
+ }
656
+ }
657
+
658
+ .gc_info {
659
+ display: flex;
660
+ justify-content: space-between;
661
+ width: 100%;
662
+ gap: 6px;
663
+
664
+ .gc_title {
665
+ font-size: 14px;
666
+ font-weight: 600;
667
+ }
668
+ }
669
+ .gc_tertiary_btn {
670
+ color: var(--_primary-400);
671
+
672
+ &:hover {
673
+ color: var(--_primary-500);
674
+ text-decoration: underline;
675
+ }
676
+ }
677
+ }
678
+ .chk_gft_crd_wrapper {
679
+ display: flex;
680
+ justify-content: space-between;
681
+ align-items: center;
682
+ padding: 16px;
683
+ & > button {
684
+ color: var(--_primary-400);
685
+ &:hover {
686
+ text-decoration: underline;
687
+ }
688
+ }
689
+ &_item {
690
+ display: flex;
691
+ align-items: center;
692
+ gap: 16px;
693
+ &_icon {
694
+ width: 40px;
695
+ height: 40px;
696
+ border: 1px solid var(--_gray-200);
697
+ border-radius: 6px;
698
+ display: flex;
699
+ justify-content: center;
700
+ align-items: center;
701
+ }
702
+ &_info {
703
+ display: flex;
704
+ flex-direction: column;
705
+ &_title {
706
+ font-size: 14px;
707
+ margin-bottom: 4px;
708
+ font-weight: 600;
709
+ }
710
+ &_desc {
711
+ display: flex;
712
+ &_value {
713
+ font-size: 12px;
714
+ color: var(--_gray-600);
715
+ }
716
+ &_label {
717
+ font-size: 12px;
718
+ color: var(--_gray-900);
719
+ }
720
+ }
721
+ }
722
+ &_pin {
723
+ margin-left: 36px;
724
+ input[type="number"] {
725
+ border: 1px solid var(--_gray-300);
726
+ border-radius: 4px;
727
+ background-color: var(--_base-white);
728
+ width: 95px;
729
+ height: 44px;
730
+ padding-inline: 10px;
731
+ &:disabled {
732
+ opacity: 0.8;
733
+ cursor: not-allowed;
734
+ }
735
+ &:focus {
736
+ outline: 2px solid var(--_primary-100);
737
+ border: 1px solid var(--_primary-300);
738
+ }
739
+ }
740
+ }
741
+ }
742
+
743
+ &_input {
744
+ border: 1px solid var(--_gray-300);
745
+ border-radius: 4px;
746
+ background-color: var(--_base-white);
747
+ height: 44px;
748
+ width: 120px;
749
+ display: flex;
750
+ align-items: center;
751
+ gap: 8px;
752
+ padding-left: 10px;
753
+ input[type="number"] {
754
+ background-color: var(--_base-white);
755
+ padding-right: 10px;
756
+ &:disabled {
757
+ opacity: 0.8;
758
+ cursor: not-allowed;
759
+ }
760
+ }
761
+ &:focus-within {
762
+ outline: 2px solid var(--_primary-100);
763
+ border: 1px solid var(--_primary-300);
764
+ }
765
+ }
766
+ }
602
767
  }
603
768
  .payment_program {
604
769
  // padding: 0 12px;
@@ -610,7 +775,7 @@ $activeElementSelector: "[data-has-clicked='true']";
610
775
 
611
776
  margin-bottom: 16px;
612
777
 
613
- &_label {
778
+ .payment_program_header_label {
614
779
  display: flex;
615
780
  justify-content: space-between;
616
781
  align-items: center;
@@ -619,7 +784,7 @@ $activeElementSelector: "[data-has-clicked='true']";
619
784
  font-weight: 600;
620
785
  color: var(--_gray-600);
621
786
  }
622
- &_pds {
787
+ .payment_program_header_pds {
623
788
  &_label {
624
789
  font-size: 14px;
625
790
  color: var(--_gray-600);
@@ -643,12 +808,16 @@ $activeElementSelector: "[data-has-clicked='true']";
643
808
 
644
809
  .pp_pmnt_method_groups {
645
810
  .pp_ppm_section {
646
- background: #f5f5f5;
811
+ background: var(---base-white);
812
+ border-bottom: 1px solid var(--_gray-300);
647
813
  padding: 12px 16px;
648
814
  font-size: 12px;
649
815
  display: flex;
650
816
  justify-content: space-between;
651
817
  gap: 8px;
818
+ &:not(:first-child) {
819
+ border-top: 1px solid var(--_gray-200);
820
+ }
652
821
  .pp_ppm_section_label {
653
822
  font-size: 14px;
654
823
  font-weight: 700;
@@ -669,14 +838,17 @@ $activeElementSelector: "[data-has-clicked='true']";
669
838
  display: grid;
670
839
  gap: 8px;
671
840
  .chk_payment_option {
841
+ .chk_payment_options_heading {
842
+ padding: 16px;
843
+ display: flex;
844
+ justify-content: space-between;
845
+ }
672
846
  .chk_payment_section_wrapper {
673
847
  width: 100%;
674
848
  display: flex;
675
849
  justify-content: space-between;
676
850
  padding: 16px;
677
- &:hover {
678
- background-color: var(--_gray-50);
679
- }
851
+
680
852
  .chk_payment_section {
681
853
  display: flex;
682
854
  justify-content: space-between;
@@ -685,6 +857,10 @@ $activeElementSelector: "[data-has-clicked='true']";
685
857
  .chk_payment_section_col_left {
686
858
  display: flex;
687
859
  gap: 12px;
860
+ svg {
861
+ width: 24px;
862
+ height: 24px;
863
+ }
688
864
  .chk_payment_section_method {
689
865
  display: flex;
690
866
  flex-direction: column;
@@ -725,6 +901,10 @@ $activeElementSelector: "[data-has-clicked='true']";
725
901
  }
726
902
  input {
727
903
  height: inherit;
904
+ &:disabled {
905
+ opacity: 0.8;
906
+ cursor: not-allowed;
907
+ }
728
908
  }
729
909
  }
730
910
  }
@@ -737,91 +917,6 @@ $activeElementSelector: "[data-has-clicked='true']";
737
917
  }
738
918
 
739
919
  // gift card styles
740
- .chk_gft_crd_wrapper {
741
- display: flex;
742
- justify-content: space-between;
743
- align-items: center;
744
- padding: 16px 16px 0 16px;
745
- &_item {
746
- display: flex;
747
- align-items: center;
748
- gap: 16px;
749
- &_icon {
750
- width: 40px;
751
- height: 40px;
752
- border: 1px solid var(--_gray-200);
753
- border-radius: 6px;
754
- display: flex;
755
- justify-content: center;
756
- align-items: center;
757
- }
758
- &_info {
759
- display: flex;
760
- flex-direction: column;
761
- &_title {
762
- font-size: 14px;
763
- margin-bottom: 4px;
764
- font-weight: 600;
765
- }
766
- &_desc {
767
- display: flex;
768
- &_value {
769
- font-size: 12px;
770
- color: var(--_gray-600);
771
- }
772
- &_label {
773
- font-size: 12px;
774
- color: var(--_gray-900);
775
- }
776
- }
777
- }
778
- &_pin {
779
- margin-left: 36px;
780
- input[type="number"] {
781
- border: 1px solid var(--_gray-300);
782
- border-radius: 4px;
783
- background-color: var(--_base-white);
784
- width: 95px;
785
- height: 44px;
786
- padding-inline: 10px;
787
- &:focus {
788
- outline: 2px solid var(--_primary-100);
789
- border: 1px solid var(--_primary-300);
790
- }
791
- }
792
- }
793
- }
794
-
795
- &_input {
796
- border: 1px solid var(--_gray-300);
797
- border-radius: 4px;
798
- background-color: var(--_base-white);
799
- height: 44px;
800
- width: 100px;
801
- display: flex;
802
- align-items: center;
803
- gap: 8px;
804
- padding-left: 10px;
805
- input[type="number"] {
806
- background-color: var(--_base-white);
807
- padding-right: 10px;
808
- }
809
- &:focus-within {
810
- outline: 2px solid var(--_primary-100);
811
- border: 1px solid var(--_primary-300);
812
- }
813
- }
814
- }
815
- .chk_gft_crd_wrapper {
816
- &_btn {
817
- text-align: left;
818
- margin-bottom: 16px;
819
- color: var(--_primary-400);
820
- &:hover {
821
- text-decoration: underline;
822
- }
823
- }
824
- }
825
920
 
826
921
  // payment other options styles
827
922
  .chk_pmnt_other_options {
@@ -981,21 +1076,354 @@ $activeElementSelector: "[data-has-clicked='true']";
981
1076
  }
982
1077
  }
983
1078
  }
1079
+ .add_new_credit_card {
1080
+ padding: 16px 16px 0px 16px;
1081
+ display: flex;
1082
+ justify-content: space-between;
1083
+ .cc_tertiary_btn {
1084
+ color: var(--_primary-400);
1085
+ &:hover {
1086
+ text-decoration: underline;
1087
+ }
1088
+ }
1089
+ }
1090
+
1091
+ .chk_payment_cred_section {
1092
+ display: flex;
1093
+ justify-content: space-between;
1094
+ align-items: center;
1095
+ padding: 16px 16px 8px 16px;
1096
+
1097
+ .chk_currency_inp {
1098
+ height: 44px;
1099
+ border: 1px solid var(--_gray-200);
1100
+ border-radius: 4px;
1101
+ background-color: var(--_base-white);
1102
+ display: flex;
1103
+ width: 120px;
1104
+ overflow: hidden;
1105
+ align-items: center;
1106
+ padding-inline: 12px;
1107
+ gap: 12px;
1108
+ &:focus-within {
1109
+ border: 1px solid var(--_primary-200);
1110
+ outline: 2px solid var(--_primary-50);
1111
+ }
1112
+ input {
1113
+ height: inherit;
1114
+ }
1115
+ }
1116
+ .chk_payment_cred_section_col_left {
1117
+ .chk_payment_cred_section_col_left_crd_details {
1118
+ display: flex;
1119
+ gap: 80px;
1120
+ align-items: center;
1121
+ & > div {
1122
+ display: flex;
1123
+ gap: 12px;
1124
+ .card_icon {
1125
+ width: 60px;
1126
+ height: 40px;
1127
+ border-radius: 4px;
1128
+ }
1129
+ .card_details {
1130
+ .card_details_num {
1131
+ font-size: 12px;
1132
+ font-weight: 600;
1133
+ color: var(--_gray-900);
1134
+ }
1135
+ & > div {
1136
+ display: flex;
1137
+ .card_details_label {
1138
+ font-size: 12px;
1139
+ color: var(--_gray-500);
1140
+ }
1141
+ .card_details_value {
1142
+ font-size: 12px;
1143
+ color: var(--_gray-900);
1144
+ }
1145
+ }
1146
+ }
1147
+ }
1148
+ }
1149
+ }
1150
+ }
1151
+
1152
+ .chk_payment_remove_card {
1153
+ padding-inline: 16px;
1154
+ margin-bottom: 16px;
1155
+ .error_msg {
1156
+ font-size: 12px;
1157
+ color: var(--_error-700);
1158
+ }
1159
+ }
984
1160
  }
985
1161
  }
986
1162
  }
987
1163
 
988
- .chk_gft_crd_container {
1164
+ .chk_billing_address {
989
1165
  width: 100%;
990
1166
  display: flex;
991
1167
  flex-direction: column;
992
- gap: var(--_ctm-lt-pt-os-cr-hl-gp);
993
1168
  background-color: var(--_base-white);
994
- border: 1px solid var(--_gray-300);
995
- border-radius: 4px;
996
- overflow: hidden;
997
-
998
- .chk_gft_crd_option_heading {
1169
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
1170
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
1171
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
1172
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
1173
+
1174
+ &_form_container {
1175
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
1176
+ padding-top: 24px;
1177
+ display: flex;
1178
+ flex-direction: column;
1179
+ gap: 24px;
1180
+ }
1181
+
1182
+ .chk_payment_options_heading {
1183
+ font-size: 16px;
1184
+ color: var(--_gray-900);
1185
+ font-weight: 600;
1186
+ &.pl_0 {
1187
+ padding-left: 0px;
1188
+ }
1189
+ }
1190
+
1191
+ &_form_wrapper {
1192
+ display: flex;
1193
+ flex-direction: column;
1194
+ gap: 24px;
1195
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
1196
+ }
1197
+
1198
+ .shipping_address_container {
1199
+ display: flex;
1200
+ flex-direction: column;
1201
+ gap: 24px;
1202
+ }
1203
+
1204
+ .shipping_address_heading_container {
1205
+ display: flex;
1206
+ justify-content: space-between;
1207
+ align-items: center;
1208
+
1209
+ .chk_heading_info {
1210
+ color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
1211
+ font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
1212
+ font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
1213
+ font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
1214
+ font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
1215
+ line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
1216
+ letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
1217
+ text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
1218
+ }
1219
+ .icon {
1220
+ cursor: pointer;
1221
+ }
1222
+ }
1223
+
1224
+ form {
1225
+ display: flex;
1226
+ flex-direction: column;
1227
+ gap: 0.75rem;
1228
+ max-width: 85%;
1229
+
1230
+ @media (max-width: 500px) {
1231
+ max-width: 100%;
1232
+ }
1233
+ }
1234
+
1235
+ .chk_shipping_address_form_group {
1236
+ display: flex;
1237
+ justify-content: space-between;
1238
+ flex-direction: row;
1239
+ gap: 12px;
1240
+ }
1241
+
1242
+ .chk_shipping_address_input_container {
1243
+ display: flex;
1244
+ width: 100%;
1245
+ }
1246
+
1247
+ .chk_shipping_address_input_wrapper {
1248
+ display: flex;
1249
+ flex-direction: column;
1250
+ gap: var(--_ctm-lt-ll-ad-it-gp);
1251
+ width: 100%;
1252
+ }
1253
+
1254
+ .chk_shipping_address_form_label {
1255
+ color: var(--_gray-600);
1256
+ font-size: 14px;
1257
+ }
1258
+
1259
+ .chk_shiping_address_form_input {
1260
+ padding: 8px 12px;
1261
+ width: -webkit-fill-available;
1262
+ height: 40px;
1263
+ background-color: var(--_base-white);
1264
+ border-radius: 6px;
1265
+ border: 1px solid var(--_gray-300);
1266
+
1267
+ &:focus-within {
1268
+ border: 1px solid var(--_primary-300);
1269
+ outline: 2px solid var(--_primary-100);
1270
+ }
1271
+
1272
+ // .input-field {
1273
+ // padding: 8px 12px;
1274
+ // width: -webkit-fill-available;
1275
+ // background-color: var(--_base-white);
1276
+ // border-radius: 6px;
1277
+ // border: 1px solid var(--_gray-300);
1278
+
1279
+ // &:focus-within {
1280
+ // border: 1px solid var(--_primary-300);
1281
+ // outline: 2px solid var(--_primary-100);
1282
+ // }
1283
+ // }
1284
+ }
1285
+
1286
+ input[type="checkbox"] {
1287
+ width: auto;
1288
+ }
1289
+
1290
+ .error-msg {
1291
+ font-size: 12px;
1292
+ color: #ff0000;
1293
+ }
1294
+
1295
+ .chk_shipping_address_use_as_billing_address_chkbx {
1296
+ display: flex;
1297
+ align-items: center;
1298
+ gap: 0.5rem;
1299
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1300
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1301
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1302
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1303
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1304
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1305
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1306
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1307
+
1308
+ .custom-checkbox {
1309
+ width: 20px;
1310
+ height: 20px;
1311
+ border: 1px solid #d0d5dd;
1312
+ border-radius: 4px;
1313
+ position: relative;
1314
+ background-color: #fff;
1315
+ transition: all 0.2s ease;
1316
+
1317
+ &::after {
1318
+ content: "";
1319
+ position: absolute;
1320
+ display: none;
1321
+ left: 5px;
1322
+ top: 0.5px;
1323
+ width: 5px;
1324
+ height: 10px;
1325
+ border: solid #fff;
1326
+ border-width: 0 2px 2px 0;
1327
+ transform: rotate(45deg);
1328
+ }
1329
+ }
1330
+ }
1331
+
1332
+ input[type="checkbox"]:checked + label {
1333
+ .custom-checkbox {
1334
+ background-color: #004dff;
1335
+ border-color: #004dff;
1336
+
1337
+ &::after {
1338
+ display: block;
1339
+ }
1340
+ }
1341
+ }
1342
+
1343
+ .checkbox-group {
1344
+ display: flex;
1345
+ align-items: center;
1346
+ justify-content: start;
1347
+ gap: 8px;
1348
+ }
1349
+
1350
+ &_same_as_billing_address_chkbx {
1351
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1352
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1353
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1354
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1355
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1356
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1357
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1358
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1359
+ }
1360
+
1361
+ &_button_wrapper {
1362
+ display: flex;
1363
+ align-items: center;
1364
+ gap: 16px;
1365
+ }
1366
+ }
1367
+
1368
+ .payment_heading {
1369
+ padding: 12px;
1370
+ display: flex;
1371
+ justify-content: space-between;
1372
+ border-bottom: 1px solid var(--_gray-100);
1373
+ font-weight: 600;
1374
+ .gc_tertiary_btn {
1375
+ color: var(--_primary-400);
1376
+ &:hover {
1377
+ text-decoration: underline;
1378
+ }
1379
+ }
1380
+ }
1381
+
1382
+ .chk_payment_gift_card {
1383
+ border: 1px solid var(--_gray-200);
1384
+ border-radius: 6px;
1385
+
1386
+ .chk_payment_options_heading {
1387
+ padding: 16px;
1388
+ border-bottom: 1px solid var(--_gray-200);
1389
+ display: flex;
1390
+ justify-content: space-between;
1391
+ .payment_options_heading {
1392
+ font-size: 14px;
1393
+ font-weight: 600;
1394
+ }
1395
+ .chk_primary_btn_link {
1396
+ color: var(--_primary-400);
1397
+ &:hover {
1398
+ text-decoration: underline;
1399
+ }
1400
+ }
1401
+ }
1402
+ // gift card styles
1403
+
1404
+ // .chk_gft_crd_wrapper {
1405
+ // &_btn {
1406
+ // text-align: left;
1407
+ // margin-bottom: 16px;
1408
+ // color: var(--_primary-400);
1409
+ // &:hover {
1410
+ // text-decoration: underline;
1411
+ // }
1412
+ // }
1413
+ // }
1414
+ }
1415
+
1416
+ .chk_gft_crd_container {
1417
+ width: 100%;
1418
+ display: flex;
1419
+ flex-direction: column;
1420
+ gap: var(--_ctm-lt-pt-os-cr-hl-gp);
1421
+ background-color: var(--_base-white);
1422
+ border: 1px solid var(--_gray-300);
1423
+ border-radius: 4px;
1424
+ overflow: hidden;
1425
+
1426
+ .chk_gft_crd_option_heading {
999
1427
  display: flex;
1000
1428
  justify-content: space-between;
1001
1429
  align-items: center;
@@ -1078,14 +1506,11 @@ $activeElementSelector: "[data-has-clicked='true']";
1078
1506
  border: 1px solid var(--_primary-300);
1079
1507
  }
1080
1508
  }
1081
- }
1082
- .chk_gft_crd_wrapper {
1083
- &_btn {
1084
- text-align: left;
1085
- margin-bottom: 16px;
1509
+
1510
+ .chk_gft_crd_wrapper_btn {
1086
1511
  color: var(--_primary-400);
1087
1512
  &:hover {
1088
- text-decoration: underline;
1513
+ text-decoration: un;
1089
1514
  }
1090
1515
  }
1091
1516
  }
@@ -1191,263 +1616,55 @@ $activeElementSelector: "[data-has-clicked='true']";
1191
1616
  font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1192
1617
  font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1193
1618
  line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1194
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1195
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1196
- }
1197
- }
1198
-
1199
- &_right_container {
1200
- display: flex;
1201
- gap: 6px;
1202
- align-items: flex-start;
1203
-
1204
- @media (max-width: 500px) {
1205
- justify-content: flex-end;
1206
- }
1207
- }
1208
-
1209
- &_input {
1210
- display: flex;
1211
- padding: 8px 12px;
1212
- width: -webkit-fill-available;
1213
- background-color: var(--_base-white);
1214
- border-radius: 6px;
1215
- border: 1px solid var(--_gray-300);
1216
-
1217
- &:focus-within {
1218
- border: 1px solid var(--_primary-300);
1219
- outline: 2px solid var(--_primary-100);
1220
- }
1221
-
1222
- .icon {
1223
- svg {
1224
- path {
1225
- stroke: var(--_primary-400);
1226
- }
1227
- }
1228
- }
1229
-
1230
- .input_field {
1231
- padding: 8px 12px;
1232
- width: -webkit-fill-available;
1233
- background-color: var(--_base-white);
1234
- border-radius: 6px;
1235
- border: 1px solid var(--_gray-300);
1236
-
1237
- &:focus-within {
1238
- border: 1px solid var(--_primary-300);
1239
- outline: 2px solid var(--_primary-100);
1240
- }
1241
- }
1242
- }
1243
- }
1244
-
1245
- .chk_billing_address {
1246
- width: 100%;
1247
- display: flex;
1248
- flex-direction: column;
1249
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-bd-cr);
1250
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
1251
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
1252
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
1253
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
1254
-
1255
- &_form_container {
1256
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
1257
- padding-top: 24px;
1258
- display: flex;
1259
- flex-direction: column;
1260
- gap: 24px;
1261
- }
1262
-
1263
- .chk_payment_options_heading {
1264
- font-size: 18px;
1265
- color: var(--_gray-900);
1266
- font-weight: 600;
1267
- &.pl_0 {
1268
- padding-left: 0px;
1269
- }
1270
- }
1271
-
1272
- &_form_wrapper {
1273
- display: flex;
1274
- flex-direction: column;
1275
- gap: 24px;
1276
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
1277
- }
1278
-
1279
- .shipping_address_container {
1280
- display: flex;
1281
- flex-direction: column;
1282
- gap: 24px;
1283
- }
1284
-
1285
- .shipping_address_heading_container {
1286
- display: flex;
1287
- justify-content: space-between;
1288
- align-items: center;
1289
-
1290
- .chk_heading_info {
1291
- color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
1292
- font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
1293
- font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
1294
- font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
1295
- font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
1296
- line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
1297
- letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
1298
- text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
1299
- }
1300
- }
1301
-
1302
- form {
1303
- display: flex;
1304
- flex-direction: column;
1305
- gap: 0.75rem;
1306
- max-width: 85%;
1307
-
1308
- @media (max-width: 500px) {
1309
- max-width: 100%;
1310
- }
1311
- }
1312
-
1313
- .chk_shipping_address_form_group {
1314
- display: flex;
1315
- justify-content: space-between;
1316
- flex-direction: row;
1317
- gap: 12px;
1318
- }
1319
-
1320
- .chk_shipping_address_input_container {
1321
- display: flex;
1322
- width: 100%;
1323
- }
1324
-
1325
- .chk_shipping_address_input_wrapper {
1326
- display: flex;
1327
- flex-direction: column;
1328
- gap: var(--_ctm-lt-ll-ad-it-gp);
1329
- width: 100%;
1330
- }
1331
-
1332
- .chk_shipping_address_form_label {
1333
- color: var(--_gray-600);
1334
- font-size: 14px;
1335
- }
1336
-
1337
- .chk_shiping_address_form_input {
1338
- padding: 8px 12px;
1339
- width: -webkit-fill-available;
1340
- background-color: var(--_base-white);
1341
- border-radius: 6px;
1342
- border: 1px solid var(--_gray-300);
1343
-
1344
- &:focus-within {
1345
- border: 1px solid var(--_primary-300);
1346
- outline: 2px solid var(--_primary-100);
1347
- }
1348
-
1349
- .input-field {
1350
- padding: 8px 12px;
1351
- width: -webkit-fill-available;
1352
- background-color: var(--_base-white);
1353
- border-radius: 6px;
1354
- border: 1px solid var(--_gray-300);
1355
-
1356
- &:focus-within {
1357
- border: 1px solid var(--_primary-300);
1358
- outline: 2px solid var(--_primary-100);
1359
- }
1360
- }
1361
- }
1362
-
1363
- input[type="checkbox"] {
1364
- width: auto;
1365
- }
1366
-
1367
- .error-msg {
1368
- font-size: 12px;
1369
- color: #ff0000;
1370
- }
1371
-
1372
- .chk_shipping_address_use_as_billing_address_chkbx {
1373
- display: flex;
1374
- align-items: center;
1375
- gap: 0.5rem;
1376
- color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1377
- font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1378
- font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1379
- font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1380
- font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1381
- line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1382
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1383
- text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1384
-
1385
- .custom-checkbox {
1386
- width: 20px;
1387
- height: 20px;
1388
- border: 1px solid #d0d5dd;
1389
- border-radius: 4px;
1390
- position: relative;
1391
- background-color: #fff;
1392
- transition: all 0.2s ease;
1393
-
1394
- &::after {
1395
- content: "";
1396
- position: absolute;
1397
- display: none;
1398
- left: 5px;
1399
- top: 0.5px;
1400
- width: 5px;
1401
- height: 10px;
1402
- border: solid #fff;
1403
- border-width: 0 2px 2px 0;
1404
- transform: rotate(45deg);
1405
- }
1619
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1620
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1406
1621
  }
1407
1622
  }
1408
1623
 
1409
- input[type="checkbox"]:checked + label {
1410
- .custom-checkbox {
1411
- background-color: #004dff;
1412
- border-color: #004dff;
1624
+ &_right_container {
1625
+ display: flex;
1626
+ gap: 6px;
1627
+ align-items: flex-start;
1413
1628
 
1414
- &::after {
1415
- display: block;
1416
- }
1629
+ @media (max-width: 500px) {
1630
+ justify-content: flex-end;
1417
1631
  }
1418
1632
  }
1419
1633
 
1420
- .checkbox-group {
1634
+ &_input {
1421
1635
  display: flex;
1422
- align-items: center;
1423
- justify-content: start;
1424
- gap: 8px;
1425
- }
1636
+ padding: 8px 12px;
1637
+ width: -webkit-fill-available;
1638
+ background-color: var(--_base-white);
1639
+ border-radius: 6px;
1640
+ border: 1px solid var(--_gray-300);
1426
1641
 
1427
- &_same_as_billing_address_chkbx {
1428
- color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1429
- font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1430
- font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1431
- font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1432
- font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1433
- line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1434
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1435
- text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1436
- }
1642
+ &:focus-within {
1643
+ border: 1px solid var(--_primary-300);
1644
+ outline: 2px solid var(--_primary-100);
1645
+ }
1437
1646
 
1438
- &_button_wrapper {
1439
- display: flex;
1440
- align-items: center;
1441
- gap: 16px;
1442
- }
1443
- }
1647
+ .icon {
1648
+ svg {
1649
+ path {
1650
+ stroke: var(--_primary-400);
1651
+ }
1652
+ }
1653
+ }
1444
1654
 
1445
- .payment_heading {
1446
- padding: 12px;
1447
- display: flex;
1448
- justify-content: space-between;
1449
- border-bottom: 1px solid var(--_gray-100);
1450
- font-weight: 600;
1655
+ .input_field {
1656
+ padding: 8px 12px;
1657
+ width: -webkit-fill-available;
1658
+ background-color: var(--_base-white);
1659
+ border-radius: 6px;
1660
+ border: 1px solid var(--_gray-300);
1661
+
1662
+ &:focus-within {
1663
+ border: 1px solid var(--_primary-300);
1664
+ outline: 2px solid var(--_primary-100);
1665
+ }
1666
+ }
1667
+ }
1451
1668
  }
1452
1669
  }
1453
1670
 
@@ -1476,7 +1693,6 @@ $activeElementSelector: "[data-has-clicked='true']";
1476
1693
  display: flex;
1477
1694
  width: fit-content;
1478
1695
  align-items: center;
1479
- font-family: sans-serif;
1480
1696
  gap: 12px;
1481
1697
 
1482
1698
  input[type="checkbox"] {
@@ -1575,6 +1791,10 @@ $activeElementSelector: "[data-has-clicked='true']";
1575
1791
  }
1576
1792
  }
1577
1793
  }
1794
+ .chk_address_actions {
1795
+ display: flex;
1796
+ gap: 12px;
1797
+ }
1578
1798
  .chk_payment-card__note {
1579
1799
  padding: 8px 6px;
1580
1800
  display: flex;
@@ -1611,6 +1831,7 @@ $activeElementSelector: "[data-has-clicked='true']";
1611
1831
  display: flex;
1612
1832
  flex-direction: column;
1613
1833
  gap: var(--_ctm-lt-sd-sg-as-le-gp);
1834
+ max-width: 700px;
1614
1835
 
1615
1836
  .chk_address {
1616
1837
  display: flex;
@@ -1653,6 +1874,12 @@ $activeElementSelector: "[data-has-clicked='true']";
1653
1874
  &:has(.chk_saved_address_button.selected) {
1654
1875
  display: flex !important;
1655
1876
  }
1877
+ .chk_saved_address_button {
1878
+ display: flex;
1879
+ align-items: center;
1880
+ gap: 4px;
1881
+ color: var(--_primary-400);
1882
+ }
1656
1883
  }
1657
1884
 
1658
1885
  &:hover {
@@ -1665,314 +1892,283 @@ $activeElementSelector: "[data-has-clicked='true']";
1665
1892
  }
1666
1893
  }
1667
1894
  }
1668
- }
1669
1895
 
1670
- // &[data-view-state="full"] {
1671
- // width: auto;
1672
- // margin: 0;
1673
- // justify-self: stretch !important;
1674
- // align-self: stretch !important;
1675
- // cursor: auto;
1676
- // &:is(#{$activeElementSelector}) {
1677
- // & > div {
1678
- // &[data-div-type="wrapper__layer"] {
1679
- // --_sf-vt-zz: visible;
1680
- // --_sf-op-zz: 1;
1681
- // }
1682
- // }
1683
- // }
1684
- // }
1685
- }
1686
- }
1896
+ // credit card form syles
1897
+ .chk_cred_form_details {
1898
+ border-top: 1px solid var(--_gray-100);
1899
+ padding: 16px;
1900
+ .chk_basic_form_title {
1901
+ font-size: 14px;
1902
+ margin-bottom: 16px;
1903
+ font-weight: 600;
1904
+ }
1905
+ .chk_form_fields {
1906
+ h3 {
1907
+ font-size: 14px;
1908
+ margin-bottom: 8px;
1909
+ }
1910
+ display: flex;
1911
+ flex-direction: column;
1912
+ gap: 24px;
1913
+ width: 500px;
1914
+ .chk_form_field {
1915
+ width: 100%;
1916
+ &.expiry_details {
1917
+ width: 80px;
1918
+ }
1687
1919
 
1688
- // credit card form syles
1689
- .chk_cred_form_details {
1690
- border-top: 1px solid var(--_gray-100);
1691
- padding: 16px;
1692
- .chk_basic_form_title {
1693
- font-size: 14px;
1694
- margin-bottom: 16px;
1695
- font-weight: 600;
1696
- }
1697
- .chk_form_fields {
1698
- h3 {
1699
- font-size: 14px;
1700
- margin-bottom: 8px;
1701
- }
1702
- display: flex;
1703
- flex-direction: column;
1704
- gap: 24px;
1705
- width: 500px;
1706
- .chk_form_field {
1707
- width: 100%;
1708
- &.expiry_details {
1709
- width: 80px;
1710
- }
1920
+ display: flex;
1921
+ flex-direction: column;
1922
+ gap: 6px;
1923
+ width: 100%;
1711
1924
 
1712
- display: flex;
1713
- flex-direction: column;
1714
- gap: 6px;
1715
- width: 100%;
1925
+ .chk_form_field_label {
1926
+ font-size: 14px;
1927
+ color: var(--_gray-600);
1928
+ }
1929
+ .chk_form_field_inp {
1930
+ height: 40px;
1931
+ border: 1px solid var(--_gray-300);
1932
+ border-radius: 4px;
1933
+ padding-inline: 10px;
1934
+ &:placeholder-shown {
1935
+ color: var(--_gray-400);
1936
+ padding-left: 16px;
1937
+ }
1938
+ &:focus {
1939
+ border: 1px solid var(--_primary-300);
1940
+ outline: 2px solid var(--_primary-100);
1941
+ }
1942
+ }
1943
+ .error_msg {
1944
+ display: block;
1945
+ color: var(--_error-700);
1946
+ font-size: 12px;
1947
+ }
1948
+ }
1716
1949
 
1717
- .chk_form_field_label {
1718
- font-size: 14px;
1719
- color: var(--_gray-600);
1720
- }
1721
- .chk_form_field_inp {
1722
- height: 40px;
1723
- border: 1px solid var(--_gray-300);
1724
- border-radius: 4px;
1725
- padding-inline: 10px;
1726
- &:placeholder-shown {
1727
- color: var(--_gray-400);
1728
- padding-left: 16px;
1729
- }
1730
- &:focus {
1731
- border: 1px solid var(--_primary-300);
1732
- outline: 2px solid var(--_primary-100);
1733
- }
1734
- }
1735
- .error_msg {
1736
- display: block;
1737
- color: var(--_error-700);
1738
- font-size: 12px;
1739
- }
1740
- }
1950
+ .checkbox {
1951
+ width: auto;
1741
1952
 
1742
- .checkbox {
1743
- width: auto;
1953
+ label {
1954
+ display: flex;
1955
+ align-items: center;
1956
+ gap: 8px;
1957
+ cursor: pointer;
1958
+ position: relative;
1959
+ user-select: none;
1744
1960
 
1745
- label {
1746
- display: flex;
1747
- align-items: center;
1748
- gap: 8px;
1749
- cursor: pointer;
1750
- position: relative;
1751
- user-select: none;
1961
+ input[type="checkbox"] {
1962
+ display: none;
1752
1963
 
1753
- input[type="checkbox"] {
1754
- display: none;
1964
+ &:checked + .custom-checkbox::after {
1965
+ opacity: 1;
1966
+ }
1967
+ }
1755
1968
 
1756
- &:checked + .custom-checkbox::after {
1757
- opacity: 1;
1758
- }
1759
- }
1969
+ .custom-checkbox {
1970
+ width: 16px;
1971
+ height: 16px;
1972
+ border: 2px solid var(--_primary-400);
1973
+ border-radius: 4px;
1974
+ position: relative;
1975
+ display: inline-block;
1976
+ box-sizing: border-box;
1760
1977
 
1761
- .custom-checkbox {
1762
- width: 16px;
1763
- height: 16px;
1764
- border: 2px solid var(--_primary-400);
1765
- border-radius: 4px;
1766
- position: relative;
1767
- display: inline-block;
1768
- box-sizing: border-box;
1769
-
1770
- &::after {
1771
- content: "";
1772
- position: absolute;
1773
- left: 3px;
1774
- top: 0px;
1775
- width: 4px;
1776
- height: 8px;
1777
- border: solid var(--_primary-400);
1778
- border-width: 0 1px 1px 0;
1779
- transform: rotate(45deg);
1780
- opacity: 0;
1781
- transition: opacity 0.2s ease-in-out;
1978
+ &::after {
1979
+ content: "";
1980
+ position: absolute;
1981
+ left: 3px;
1982
+ top: 0px;
1983
+ width: 4px;
1984
+ height: 8px;
1985
+ border: solid var(--_primary-400);
1986
+ border-width: 0 1px 1px 0;
1987
+ transform: rotate(45deg);
1988
+ opacity: 0;
1989
+ transition: opacity 0.2s ease-in-out;
1990
+ }
1991
+ }
1992
+ }
1993
+ }
1994
+ .expiry_details {
1995
+ display: flex;
1996
+ gap: 12px;
1997
+ .cvv_inp {
1998
+ width: 110px;
1999
+ }
1782
2000
  }
1783
2001
  }
1784
2002
  }
1785
- }
1786
- .expiry_details {
1787
- display: flex;
1788
- gap: 12px;
1789
- .cvv_inp {
1790
- width: 110px;
1791
- }
1792
- }
1793
- }
1794
- }
1795
2003
 
1796
- // giftcard form styles
1797
- .chk_gift_card_details {
1798
- border-top: 1px solid var(--_gray-300);
1799
- padding: 16px;
1800
- .chk_gift_card_form {
1801
- display: flex;
1802
- flex-direction: column;
1803
- gap: 16px;
1804
- max-width: 480px;
1805
- .chk_gift_cart_form_title {
1806
- font-size: 14px;
1807
- font-weight: 600;
1808
- }
2004
+ // giftcard form styles
2005
+ .chk_gift_card_details {
2006
+ border-top: 1px solid var(--_gray-300);
2007
+ padding: 16px;
2008
+ .chk_gift_card_form {
2009
+ display: flex;
2010
+ flex-direction: column;
2011
+ gap: 16px;
2012
+ max-width: 480px;
2013
+ .chk_gift_cart_form_title {
2014
+ font-size: 14px;
2015
+ font-weight: 600;
2016
+ }
1809
2017
 
1810
- .chk_gift_form_fields {
1811
- display: flex;
1812
- gap: 12px;
1813
- width: 100%;
1814
- .chk_gift_inp_field {
2018
+ .chk_gift_form_fields {
2019
+ display: flex;
2020
+ gap: 12px;
2021
+ width: 100%;
2022
+ .chk_gift_inp_field {
2023
+ display: flex;
2024
+ flex-direction: column;
2025
+ gap: 6px;
2026
+ width: 100%;
2027
+ label {
2028
+ color: var(--_gray-600);
2029
+ }
2030
+ .chk_gift_inp {
2031
+ border: 1px solid var(--_gray-300);
2032
+ border-radius: 6px;
2033
+ height: 40px;
2034
+ padding-inline: 10px;
2035
+ &:placeholder-shown {
2036
+ padding-left: 10px;
2037
+ color: var(--_gray-400);
2038
+ }
2039
+ &:focus {
2040
+ border: 1px solid var(--_primary-300);
2041
+ outline: 2px solid var(--_primary-100);
2042
+ }
2043
+ }
2044
+ &.pin {
2045
+ width: 110px;
2046
+ }
2047
+ .error_msg {
2048
+ display: block;
2049
+ color: var(--_error-700);
2050
+ font-size: 12px;
2051
+ }
2052
+ }
2053
+ .error_msg {
2054
+ color: var(--_error-700);
2055
+ font-size: 14px;
2056
+ }
2057
+ }
2058
+ }
2059
+ }
2060
+ .chk_form_actions {
1815
2061
  display: flex;
1816
- flex-direction: column;
1817
- gap: 6px;
1818
- width: 100%;
1819
- label {
1820
- color: var(--_gray-600);
2062
+ gap: 12px;
2063
+ .chk_sav_btn {
2064
+ padding: 12px 16px;
2065
+ background-color: var(--_primary-400);
2066
+ border-radius: 6px;
2067
+ color: var(--_base-white);
2068
+ &:hover {
2069
+ background-color: var(--_primary-500);
2070
+ }
1821
2071
  }
1822
- .chk_gift_inp {
1823
- border: 1px solid var(--_gray-300);
2072
+ .chk_can_btn {
2073
+ padding: 12px 16px;
2074
+ background-color: transparent;
1824
2075
  border-radius: 6px;
1825
- height: 40px;
2076
+ color: var(--_gray-600);
1826
2077
  padding-inline: 10px;
1827
- &:placeholder-shown {
1828
- padding-left: 10px;
1829
- color: var(--_gray-400);
1830
- }
1831
- &:focus {
1832
- border: 1px solid var(--_primary-300);
1833
- outline: 2px solid var(--_primary-100);
2078
+ &:hover {
2079
+ background-color: var(--_gray-50);
2080
+ color: var(--_gray-900);
1834
2081
  }
1835
2082
  }
1836
- &.pin {
1837
- width: 110px;
2083
+ }
2084
+
2085
+ .tertiary_primary_btn {
2086
+ font-size: 12px;
2087
+ color: var(--_primary-400);
2088
+ display: inline-flex;
2089
+ width: fit-content;
2090
+ &:hover {
2091
+ color: var(--_primary-500);
2092
+ text-decoration: underline;
1838
2093
  }
1839
- .error_msg {
1840
- display: block;
1841
- color: var(--_error-700);
1842
- font-size: 12px;
2094
+ }
2095
+ .chk_primary_bnt {
2096
+ padding: 12px 24px;
2097
+ background-color: var(--_primary-400);
2098
+ color: var(--_base-white);
2099
+ font-weight: 600;
2100
+ border-radius: 6px;
2101
+ width: max-content;
2102
+ &:hover {
2103
+ background-color: var(--_primary-500);
1843
2104
  }
1844
2105
  }
1845
- .error_msg {
1846
- color: var(--_error-700);
1847
- font-size: 14px;
2106
+ .chk_secondary_bnt {
2107
+ padding: 16px 24px;
2108
+ background-color: transparent;
2109
+ color: var(--_gray-600);
2110
+ font-weight: 600;
2111
+ border-radius: 6px;
2112
+
2113
+ &:hover {
2114
+ background-color: var(--_gray-50);
2115
+ color: var(--_gray-900);
2116
+ }
1848
2117
  }
1849
2118
  }
1850
- }
1851
- }
1852
- .chk_form_actions {
1853
- display: flex;
1854
- gap: 12px;
1855
- .chk_sav_btn {
1856
- padding: 12px 16px;
1857
- background-color: var(--_primary-400);
1858
- border-radius: 6px;
1859
- color: var(--_base-white);
1860
- &:hover {
1861
- background-color: var(--_primary-500);
1862
- }
1863
- }
1864
- .chk_can_btn {
1865
- padding: 12px 16px;
1866
- background-color: transparent;
1867
- border-radius: 6px;
1868
- color: var(--_gray-600);
1869
- padding-inline: 10px;
1870
- &:hover {
1871
- background-color: var(--_gray-50);
1872
- color: var(--_gray-900);
1873
- }
1874
- }
1875
- }
1876
2119
 
1877
- .chk_payment_cred_section {
1878
- display: flex;
1879
- justify-content: space-between;
1880
- align-items: center;
1881
- padding: 16px 16px 8px 16px;
1882
-
1883
- .chk_currency_inp {
1884
- height: 44px;
1885
- border: 1px solid var(--_gray-200);
1886
- border-radius: 4px;
1887
- background-color: var(--_base-white);
1888
- display: flex;
1889
- width: 120px;
1890
- overflow: hidden;
1891
- align-items: center;
1892
- padding-inline: 12px;
1893
- gap: 12px;
1894
- &:focus-within {
1895
- border: 1px solid var(--_primary-200);
1896
- outline: 2px solid var(--_primary-50);
1897
- }
1898
- input {
1899
- height: inherit;
1900
- }
1901
- }
1902
- .chk_payment_cred_section_col_left {
1903
- .chk_payment_cred_section_col_left_crd_details {
2120
+ .add_credit_card {
1904
2121
  display: flex;
1905
- gap: 80px;
1906
- align-items: center;
1907
- & > div {
1908
- display: flex;
1909
- gap: 12px;
1910
- .card_icon {
1911
- width: 60px;
1912
- height: 40px;
1913
- border-radius: 4px;
2122
+ gap: 12px;
2123
+ padding: 16px;
2124
+
2125
+ .cc_icon {
2126
+ svg {
2127
+ width: 18px;
2128
+ height: 14px;
1914
2129
  }
1915
- .card_details {
1916
- .card_details_num {
1917
- font-size: 12px;
1918
- font-weight: 600;
1919
- color: var(--_gray-900);
1920
- }
1921
- & > div {
1922
- display: flex;
1923
- .card_details_label {
1924
- font-size: 12px;
1925
- color: var(--_gray-500);
1926
- }
1927
- .card_details_value {
1928
- font-size: 12px;
1929
- color: var(--_gray-900);
1930
- }
1931
- }
2130
+ }
2131
+
2132
+ .cc_info {
2133
+ display: flex;
2134
+ flex-direction: column;
2135
+ gap: 6px;
2136
+
2137
+ .cc_title {
2138
+ font-size: 14px;
2139
+ font-weight: 600;
1932
2140
  }
1933
2141
  }
1934
2142
  }
1935
- }
1936
- }
2143
+ .add_new_credit_card {
2144
+ display: flex;
2145
+ justify-content: space-between;
2146
+ align-items: center;
2147
+ padding-inline: 16px;
2148
+ }
2149
+ .cc_tertiary_btn {
2150
+ color: var(--_primary-400);
1937
2151
 
1938
- .chk_payment_remove_card {
1939
- padding-inline: 16px;
1940
- margin-bottom: 16px;
1941
- .error_msg {
1942
- font-size: 12px;
1943
- color: var(--_error-700);
1944
- }
1945
- }
2152
+ &:hover {
2153
+ color: var(--_primary-500);
2154
+ text-decoration: underline;
2155
+ }
2156
+ }
1946
2157
 
1947
- .tertiary_primary_btn {
1948
- font-size: 12px;
1949
- color: var(--_primary-400);
1950
- display: inline-flex;
1951
- &:hover {
1952
- color: var(--_primary-500);
1953
- text-decoration: underline;
1954
- }
1955
- }
1956
- .chk_primary_bnt {
1957
- padding: 12px 24px;
1958
- background-color: var(--_primary-400);
1959
- color: var(--_base-white);
1960
- font-weight: 600;
1961
- border-radius: 6px;
1962
- width: max-content;
1963
- &:hover {
1964
- background-color: var(--_primary-500);
1965
- }
1966
- }
1967
- .chk_secondary_bnt {
1968
- padding: 12px 24px;
1969
- background-color: transparent;
1970
- color: var(--_gray-600);
1971
- font-weight: 600;
1972
- border-radius: 6px;
1973
-
1974
- &:hover {
1975
- background-color: var(--_gray-50);
1976
- color: var(--_gray-900);
2158
+ // &[data-view-state="full"] {
2159
+ // width: auto;
2160
+ // margin: 0;
2161
+ // justify-self: stretch !important;
2162
+ // align-self: stretch !important;
2163
+ // cursor: auto;
2164
+ // &:is(#{$activeElementSelector}) {
2165
+ // & > div {
2166
+ // &[data-div-type="wrapper__layer"] {
2167
+ // --_sf-vt-zz: visible;
2168
+ // --_sf-op-zz: 1;
2169
+ // }
2170
+ // }
2171
+ // }
2172
+ // }
1977
2173
  }
1978
2174
  }