@sc-360-v2/storefront-cms-library 0.3.20 → 0.3.21

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 (10) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/checkout.scss +541 -85
  3. package/dist/container.scss +2 -0
  4. package/dist/product-image.scss +3 -0
  5. package/dist/types/builder/elements/container/index.d.ts +0 -1
  6. package/dist/types/builder/elements/form-builder/index.d.ts +24 -0
  7. package/dist/types/builder/elements/section/index.d.ts +0 -1
  8. package/dist/types/builder/tools/element-edit/checkout.d.ts +1 -93
  9. package/dist/types/builder/tools/element-edit/tabs.d.ts +0 -1
  10. package/package.json +1 -1
package/dist/checkout.scss CHANGED
@@ -31,13 +31,19 @@ $dark-color: #343a40;
31
31
  // width: 100%;
32
32
  // }
33
33
 
34
- .checkout_wrapper {
34
+ .chk_checkout_wrapper {
35
35
  font-family: Arial, sans-serif;
36
36
  font-size: 0.95rem;
37
37
  color: $dark-color;
38
+ display: flex;
39
+ flex-direction: column;
40
+ gap: var(--_ctm-lt-im-gp);
41
+
38
42
  .accordion {
39
43
  border-radius: 4px;
40
- margin-bottom: 1rem;
44
+ display: flex;
45
+ gap: var(--_ctm-lt-te-ad-it-gp);
46
+ flex-direction: column;
41
47
 
42
48
  .accordion-header {
43
49
  padding: 1rem;
@@ -45,22 +51,47 @@ $dark-color: #343a40;
45
51
  justify-content: space-between;
46
52
  align-items: flex-start;
47
53
  cursor: pointer;
48
- background-color: $light-color;
54
+ background-color: var(--_ctm-dn-sn-an-cr-dn-bd-cr);
55
+ border-color: var(--_ctm-dn-sn-an-cr-dn-br-cr);
56
+ border-radius: var(--_ctm-dn-sn-an-cr-dn-br-rs);
57
+ border-style: var(--_ctm-dn-sn-an-cr-dn-br-se);
58
+ border-width: var(--_ctm-dn-sn-an-cr-dn-br-wh);
59
+ box-shadow: var(--_ctm-dn-sn-an-cr-dn-sw-ae) var(--_ctm-dn-sn-an-cr-dn-sw-br)
60
+ var(--_ctm-dn-sn-an-cr-dn-sw-sd) var(--_ctm-dn-sn-an-cr-dn-sw-cr);
49
61
 
50
62
  .accordion-title {
51
- font-weight: 600;
52
63
  margin-right: 1rem;
53
64
  white-space: nowrap;
65
+ color: var(--_ctm-dn-sn-an-te-dn-cr);
66
+ font-family: var(--_ctm-dn-sn-an-te-dn-ft-fy);
67
+ font-size: var(--_ctm-dn-sn-an-te-dn-ft-se);
68
+ font-style: var(--_ctm-dn-sn-an-te-dn-ft-se-ic);
69
+ font-weight: var(--_ctm-dn-sn-an-te-dn-ft-wt);
70
+ line-height: var(--_ctm-dn-sn-an-te-dn-le-ht);
71
+ letter-spacing: var(--_ctm-dn-sn-an-te-dn-lr-sg);
72
+ text-align: var(--_ctm-dn-sn-an-te-dn-tt-an);
73
+ text-decoration: var(--_ctm-dn-sn-an-te-dn-ue);
54
74
  }
55
75
  .edit-btn {
56
76
  align-self: flex-end;
57
- background: none;
58
- border: none;
59
- color: $primary-color;
60
77
  cursor: pointer;
61
- font-size: 0.875rem;
62
78
  padding: 0;
63
- margin-top: 4px;
79
+ background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
80
+ border-color: var(--_ctm-dn-sn-an-bn-dn-br-cr);
81
+ border-radius: var(--_ctm-dn-sn-an-bn-dn-br-rs);
82
+ border-style: var(--_ctm-dn-sn-an-bn-dn-br-se);
83
+ border-width: var(--_ctm-dn-sn-an-bn-dn-br-wh);
84
+ color: var(--_ctm-dn-sn-an-bn-dn-cr);
85
+ font-family: var(--_ctm-dn-sn-an-bn-dn-ft-fy);
86
+ font-size: var(--_ctm-dn-sn-an-bn-dn-ft-se);
87
+ font-style: var(--_ctm-dn-sn-an-bn-dn-ft-se-ic);
88
+ font-weight: var(--_ctm-dn-sn-an-bn-dn-ft-wt);
89
+ line-height: var(--_ctm-dn-sn-an-bn-dn-le-ht);
90
+ letter-spacing: var(--_ctm-dn-sn-an-bn-dn-lr-sg);
91
+ box-shadow: var(--_ctm-dn-sn-an-bn-dn-sw-ae) var(--_ctm-dn-sn-an-bn-dn-sw-br)
92
+ var(--_ctm-dn-sn-an-bn-dn-sw-sd) var(--_ctm-dn-sn-an-bn-dn-sw-cr);
93
+ text-align: var(--_ctm-dn-sn-an-bn-dn-tt-an);
94
+ text-decoration: var(--_ctm-dn-sn-an-bn-dn-ue);
64
95
 
65
96
  &:hover {
66
97
  text-decoration: underline;
@@ -69,14 +100,15 @@ $dark-color: #343a40;
69
100
  }
70
101
 
71
102
  .accordion-body {
72
- padding: 1rem 0;
73
103
  .shipping-address {
104
+ display: flex;
105
+ flex-direction: column;
106
+ gap: 24px;
107
+
74
108
  .accordion-summary {
75
109
  flex: 1;
76
110
  display: flex;
77
111
  flex-direction: column;
78
- color: $dark-color;
79
- font-size: 0.95rem;
80
112
  gap: 0.25rem;
81
113
 
82
114
  .summary-content {
@@ -84,17 +116,16 @@ $dark-color: #343a40;
84
116
  flex-direction: row;
85
117
  justify-content: space-between;
86
118
  gap: 0.5rem;
87
- margin-bottom: 25px;
88
119
 
89
- .shipping-summary {
120
+ .chk_shipping-summary {
90
121
  display: flex;
91
122
  flex-direction: column;
92
- gap: 0.3rem;
123
+ gap: 12px;
93
124
 
94
- .address {
95
- font-weight: 500;
96
- color: $dark-color;
97
- line-height: 1.5;
125
+ .chk_address {
126
+ display: flex;
127
+ flex-direction: column;
128
+ gap: 6px;
98
129
  }
99
130
 
100
131
  .contact {
@@ -106,17 +137,21 @@ $dark-color: #343a40;
106
137
 
107
138
  .right-btn {
108
139
  display: flex;
109
- gap: 10px;
140
+ gap: 24px;
110
141
  }
111
142
  }
112
143
  }
113
- .change-link {
114
- color: $primary-color;
115
- font-size: 0.875rem;
116
- text-decoration: underline;
117
- cursor: pointer;
118
- align-self: flex-start;
119
- white-space: nowrap;
144
+
145
+ .shipping_address_container {
146
+ display: flex;
147
+ flex-direction: column;
148
+ gap: 24px;
149
+ }
150
+
151
+ .shipping_address_heading_container {
152
+ display: flex;
153
+ justify-content: space-between;
154
+ align-items: center;
120
155
  }
121
156
 
122
157
  form {
@@ -125,19 +160,72 @@ $dark-color: #343a40;
125
160
  gap: 0.75rem;
126
161
  max-width: calc(100% - 200px);
127
162
  }
128
- .form-group {
163
+
164
+ .chk_shipping_address_form_group {
129
165
  display: flex;
130
166
  justify-content: space-between;
131
167
  flex-direction: row;
132
- gap: 30px;
168
+ gap: var(--_ctm-lt-im-gp);
133
169
  }
134
170
 
135
- .form-input {
136
- font-size: 14px;
171
+ .chk_shipping_address_input_container {
172
+ display: flex;
173
+ width: 100%;
174
+ }
175
+
176
+ .chk_shipping_address_input_wrapper {
177
+ display: flex;
178
+ flex-direction: column;
179
+ gap: var(--_ctm-lt-ll-ad-it-gp);
180
+ width: 100%;
181
+ }
182
+
183
+ .chk_shipping_address_form_label {
184
+ white-space: nowrap;
185
+ color: var(--_ctm-dn-it-ll-dn-cr);
186
+ font-family: var(--_ctm-dn-it-ll-dn-ft-fy);
187
+ font-size: var(--_ctm-dn-it-ll-dn-ft-se);
188
+ font-style: var(--_ctm-dn-it-ll-dn-ft-se-ic);
189
+ font-weight: var(--_ctm-dn-it-ll-dn-ft-wt);
190
+ line-height: var(--_ctm-dn-it-ll-dn-le-ht);
191
+ letter-spacing: var(--_ctm-dn-it-ll-dn-lr-sg);
192
+ text-align: var(--_ctm-dn-it-ll-dn-tt-an);
193
+ text-decoration: var(--_ctm-dn-it-ll-dn-ue);
194
+ }
195
+
196
+ .chk_shiping_address_form_input {
137
197
  padding: 10px;
138
- border: 1px solid $secondary-color;
139
- border-radius: 4px;
140
198
  width: -webkit-fill-available;
199
+ background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
200
+ border-color: var(--_ctm-dn-it-bx-dn-br-cr);
201
+ border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
202
+ border-style: var(--_ctm-dn-it-bx-dn-br-se);
203
+ border-width: var(--_ctm-dn-it-bx-dn-br-wh);
204
+ color: var(--_ctm-dn-it-bx-dn-cr);
205
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
206
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
207
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
208
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
209
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
210
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
211
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
212
+ var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
213
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
214
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
215
+
216
+ .input-field {
217
+ color: var(--_ctm-dn-it-bx-dn-cr);
218
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
219
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
220
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
221
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
222
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
223
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
224
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
225
+ var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
226
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
227
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
228
+ }
141
229
  }
142
230
 
143
231
  input[type="checkbox"] {
@@ -161,13 +249,51 @@ $dark-color: #343a40;
161
249
  justify-content: start;
162
250
  gap: 8px;
163
251
  }
252
+
253
+ .chk_shipping_address_submit_btn {
254
+ padding: 8px 24px;
255
+ width: fit-content;
256
+ background-color: var(--_ctm-dn-it-bn-dn-bd-cr);
257
+ border-color: var(--_ctm-dn-it-bn-dn-br-cr);
258
+ border-radius: var(--_ctm-dn-it-bn-dn-br-rs);
259
+ border-style: var(--_ctm-dn-it-bn-dn-br-se);
260
+ border-width: var(--_ctm-dn-it-bn-dn-br-wh);
261
+ color: var(--_ctm-dn-it-bn-dn-cr);
262
+ font-family: var(--_ctm-dn-it-bn-dn-ft-fy);
263
+ font-size: var(--_ctm-dn-it-bn-dn-ft-se);
264
+ font-style: var(--_ctm-dn-it-bn-dn-ft-se-ic);
265
+ font-weight: var(--_ctm-dn-it-bn-dn-ft-wt);
266
+ line-height: var(--_ctm-dn-it-bn-dn-le-ht);
267
+ letter-spacing: var(--_ctm-dn-it-bn-dn-lr-sg);
268
+ box-shadow: var(--_ctm-dn-it-bn-dn-sw-ae) var(--_ctm-dn-it-bn-dn-sw-br)
269
+ var(--_ctm-dn-it-bn-dn-sw-sd) var(--_ctm-dn-it-bn-dn-sw-cr);
270
+ text-align: var(--_ctm-dn-it-bn-dn-tt-an);
271
+ text-decoration: var(--_ctm-dn-it-bn-dn-ue);
272
+ }
273
+
274
+ .chk_shipping_address_use_as_billing_address_chkbx {
275
+ color: var(--_ctm-dn-cx-ll-dn-cr);
276
+ font-family: var(--_ctm-dn-cx-ll-dn-ft-fy);
277
+ font-size: var(--_ctm-dn-cx-ll-dn-ft-se);
278
+ font-style: var(--_ctm-dn-cx-ll-dn-ft-se-ic);
279
+ font-weight: var(--_ctm-dn-cx-ll-dn-ft-wt);
280
+ line-height: var(--_ctm-dn-cx-ll-dn-le-ht);
281
+ letter-spacing: var(--_ctm-dn-cx-ll-dn-lr-sg);
282
+ text-align: var(--_ctm-dn-cx-ll-dn-tt-an);
283
+ text-decoration: var(--_ctm-dn-cx-ll-dn-ue);
284
+ }
285
+ }
286
+
287
+ .chk_multi_address_wrapper {
288
+ display: flex;
289
+ flex-direction: column;
164
290
  }
165
291
 
166
292
  .shipping-method {
167
293
  &__grid {
168
294
  display: grid;
169
295
  grid-template-columns: 1fr;
170
- gap: 32px;
296
+ gap: var(--_ctm-lt-im-gp);
171
297
 
172
298
  @media (min-width: 768px) {
173
299
  grid-template-columns: 1fr 1fr;
@@ -177,13 +303,7 @@ $dark-color: #343a40;
177
303
  &__group {
178
304
  display: flex;
179
305
  flex-direction: column;
180
- }
181
-
182
- &__group-title {
183
- font-size: 16px;
184
- font-weight: 600;
185
- margin-bottom: 12px;
186
- color: #1f2937;
306
+ gap: var(--_ctm-lt-ll-ad-it-gp);
187
307
  }
188
308
 
189
309
  &__options {
@@ -207,40 +327,227 @@ $dark-color: #343a40;
207
327
  cursor: pointer;
208
328
  }
209
329
 
210
- .label-text {
211
- flex: 1;
212
- color: #374151;
213
- font-size: 0.95rem;
214
- }
215
-
216
- .label-price {
217
- font-weight: 600;
218
- color: #111827;
219
- font-size: 0.95rem;
220
- }
221
-
222
330
  &.selected {
223
331
  background-color: #f0f5ff;
224
332
  border-color: #2563eb;
225
333
  }
226
334
  }
227
335
  }
228
- .payment-options {
229
- .payment-card {
230
- max-width: 400px;
231
- font-family: Arial, sans-serif;
336
+
337
+ .chk_payment-options {
338
+ display: flex;
339
+ flex-direction: column;
340
+ gap: var(--_ctm-lt-im-gp);
341
+
342
+ .chk_payment_option_wrapper {
343
+ display: flex;
344
+ gap: var(--_ctm-lt-im-gp);
345
+ flex-direction: column;
346
+ }
347
+
348
+ .chk_payment_option {
349
+ width: 100%;
350
+ display: flex;
351
+ flex-direction: column;
352
+ background-color: var(--_ctm-dn-pt-os-cr-dn-bd-cr);
353
+ border-color: var(--_ctm-dn-pt-os-cr-dn-br-cr);
354
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
355
+ border-style: var(--_ctm-dn-pt-os-cr-dn-br-se);
356
+ border-width: var(--_ctm-dn-pt-os-cr-dn-br-wh);
357
+ box-shadow: var(--_ctm-dn-pt-os-cr-dn-sw-ae) var(--_ctm-dn-pt-os-cr-dn-sw-br)
358
+ var(--_ctm-dn-pt-os-cr-dn-sw-sd) var(--_ctm-dn-pt-os-cr-dn-sw-cr);
359
+
360
+ &__other_option_wrapper {
361
+ display: flex;
362
+ width: 100%;
363
+ justify-content: space-between;
364
+ padding: 16px;
365
+ }
366
+
367
+ &_left_container {
368
+ display: flex;
369
+ gap: 24px;
370
+ align-items: flex-start;
371
+ }
372
+
373
+ &__left_wrapper {
374
+ display: flex;
375
+ flex-direction: column;
376
+ align-items: flex-start;
377
+ gap: 16px;
378
+ }
379
+
380
+ &__card_icon {
381
+ width: 60px;
382
+ height: 40px;
383
+ }
384
+
385
+ &__remove_card_btn {
386
+ background-color: var(--_ctm-dn-sy-it-bn-dn-bd-cr);
387
+ border-color: var(--_ctm-dn-sy-it-bn-dn-br-cr);
388
+ border-radius: var(--_ctm-dn-sy-it-bn-dn-br-rs);
389
+ border-style: var(--_ctm-dn-sy-it-bn-dn-br-se);
390
+ border-width: var(--_ctm-dn-sy-it-bn-dn-br-wh);
391
+ color: var(--_ctm-dn-sy-it-bn-dn-cr);
392
+ font-family: var(--_ctm-dn-sy-it-bn-dn-ft-fy);
393
+ font-size: var(--_ctm-dn-sy-it-bn-dn-ft-se);
394
+ font-style: var(--_ctm-dn-sy-it-bn-dn-ft-se-ic);
395
+ font-weight: var(--_ctm-dn-sy-it-bn-dn-ft-wt);
396
+ line-height: var(--_ctm-dn-sy-it-bn-dn-le-ht);
397
+ letter-spacing: var(--_ctm-dn-sy-it-bn-dn-lr-sg);
398
+ box-shadow: var(--_ctm-dn-sy-it-bn-dn-sw-ae) var(--_ctm-dn-sy-it-bn-dn-sw-br)
399
+ var(--_ctm-dn-sy-it-bn-dn-sw-sd) var(--_ctm-dn-sy-it-bn-dn-sw-cr);
400
+ text-align: var(--_ctm-dn-sy-it-bn-dn-tt-an);
401
+ text-decoration: var(--_ctm-dn-sy-it-bn-dn-ue);
402
+ }
403
+
404
+ &__info_wrapper {
405
+ display: flex;
406
+ flex-direction: column;
407
+ gap: var(--_ctm-lt-ll-ad-it-gp);
408
+ white-space: nowrap;
409
+ }
410
+
411
+ &_right_container {
412
+ display: flex;
413
+ gap: 6px;
414
+ align-items: flex-start;
415
+ }
416
+
417
+ &_input {
418
+ display: flex;
419
+ padding: 10px;
420
+ max-width: 96px;
421
+ background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
422
+ border-color: var(--_ctm-dn-it-bx-dn-br-cr);
423
+ border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
424
+ border-style: var(--_ctm-dn-it-bx-dn-br-se);
425
+ border-width: var(--_ctm-dn-it-bx-dn-br-wh);
426
+ color: var(--_ctm-dn-it-bx-dn-cr);
427
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
428
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
429
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
430
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
431
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
432
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
433
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
434
+ var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
435
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
436
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
437
+
438
+ .icon {
439
+ svg {
440
+ path {
441
+ stroke: #667085;
442
+ }
443
+ }
444
+ }
445
+
446
+ .input_field {
447
+ color: var(--_ctm-dn-it-bx-dn-cr);
448
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
449
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
450
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
451
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
452
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
453
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
454
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
455
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
456
+ }
457
+ }
458
+ }
459
+
460
+ .chk_billing_address {
461
+ width: 100%;
462
+ display: flex;
463
+ flex-direction: column;
464
+ background-color: var(--_ctm-dn-pt-os-cr-dn-bd-cr);
465
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
466
+
467
+ &_form_container {
468
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
469
+ padding-top: 24px;
470
+ display: flex;
471
+ flex-direction: column;
472
+ gap: 24px;
473
+ }
474
+
475
+ &_form_wrapper {
476
+ display: flex;
477
+ flex-direction: column;
478
+ gap: 24px;
479
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
480
+ }
481
+
482
+ &_same_as_billing_address_chkbx {
483
+ color: var(--_ctm-dn-cx-ll-dn-cr);
484
+ font-family: var(--_ctm-dn-cx-ll-dn-ft-fy);
485
+ font-size: var(--_ctm-dn-cx-ll-dn-ft-se);
486
+ font-style: var(--_ctm-dn-cx-ll-dn-ft-se-ic);
487
+ font-weight: var(--_ctm-dn-cx-ll-dn-ft-wt);
488
+ line-height: var(--_ctm-dn-cx-ll-dn-le-ht);
489
+ letter-spacing: var(--_ctm-dn-cx-ll-dn-lr-sg);
490
+ text-align: var(--_ctm-dn-cx-ll-dn-tt-an);
491
+ text-decoration: var(--_ctm-dn-cx-ll-dn-ue);
492
+ }
493
+
494
+ &_secondary_button {
495
+ background-color: var(--_ctm-dn-sy-it-bn-dn-bd-cr);
496
+ border-color: var(--_ctm-dn-sy-it-bn-dn-br-cr);
497
+ border-radius: var(--_ctm-dn-sy-it-bn-dn-br-rs);
498
+ border-style: var(--_ctm-dn-sy-it-bn-dn-br-se);
499
+ border-width: var(--_ctm-dn-sy-it-bn-dn-br-wh);
500
+ color: var(--_ctm-dn-sy-it-bn-dn-cr);
501
+ font-family: var(--_ctm-dn-sy-it-bn-dn-ft-fy);
502
+ font-size: var(--_ctm-dn-sy-it-bn-dn-ft-se);
503
+ font-style: var(--_ctm-dn-sy-it-bn-dn-ft-se-ic);
504
+ font-weight: var(--_ctm-dn-sy-it-bn-dn-ft-wt);
505
+ line-height: var(--_ctm-dn-sy-it-bn-dn-le-ht);
506
+ letter-spacing: var(--_ctm-dn-sy-it-bn-dn-lr-sg);
507
+ box-shadow: var(--_ctm-dn-sy-it-bn-dn-sw-ae) var(--_ctm-dn-sy-it-bn-dn-sw-br)
508
+ var(--_ctm-dn-sy-it-bn-dn-sw-sd) var(--_ctm-dn-sy-it-bn-dn-sw-cr);
509
+ text-align: var(--_ctm-dn-sy-it-bn-dn-tt-an);
510
+ text-decoration: var(--_ctm-dn-sy-it-bn-dn-ue);
511
+ }
512
+ }
513
+
514
+ .payment_heading {
515
+ padding: 12px;
516
+ border-bottom-color: var(--_ctm-dn-pt-os-cr-dn-br-cr);
517
+ border-bottom-style: var(--_ctm-dn-pt-os-cr-dn-br-se);
518
+ border-bottom-width: thin;
519
+ display: flex;
520
+ justify-content: space-between;
521
+ }
522
+
523
+ .chk_payment-card {
524
+ max-width: 50%;
232
525
 
233
526
  &__form {
234
527
  display: grid;
235
528
  gap: 12px;
236
529
  }
237
530
 
531
+ &__input_wrapper {
532
+ display: flex;
533
+ flex-direction: column;
534
+ gap: var(--_ctm-lt-ll-ad-it-gp);
535
+ width: 100%;
536
+ }
537
+
238
538
  &__label {
239
539
  display: flex;
240
540
  flex-direction: column;
241
- font-size: 0.9rem;
242
- font-weight: 500;
243
- margin: 10px 0;
541
+ white-space: nowrap;
542
+ color: var(--_ctm-dn-it-ll-dn-cr);
543
+ font-family: var(--_ctm-dn-it-ll-dn-ft-fy);
544
+ font-size: var(--_ctm-dn-it-ll-dn-ft-se);
545
+ font-style: var(--_ctm-dn-it-ll-dn-ft-se-ic);
546
+ font-weight: var(--_ctm-dn-it-ll-dn-ft-wt);
547
+ line-height: var(--_ctm-dn-it-ll-dn-le-ht);
548
+ letter-spacing: var(--_ctm-dn-it-ll-dn-lr-sg);
549
+ text-align: var(--_ctm-dn-it-ll-dn-tt-an);
550
+ text-decoration: var(--_ctm-dn-it-ll-dn-ue);
244
551
  }
245
552
 
246
553
  &__card-input-with-logo {
@@ -250,7 +557,7 @@ $dark-color: #343a40;
250
557
  padding-right: 50px;
251
558
  }
252
559
 
253
- .payment-card__logo {
560
+ .chk_payment-card__logo {
254
561
  position: absolute;
255
562
  right: 10px;
256
563
  top: 50%;
@@ -262,18 +569,43 @@ $dark-color: #343a40;
262
569
  }
263
570
 
264
571
  &__input {
265
- border: 1px solid #ccc;
266
- border-radius: 4px;
267
- padding: 8px;
268
- font-size: 1rem;
269
- margin: 5px 0;
270
- width: 100%;
271
- box-sizing: border-box;
572
+ padding: 10px;
573
+ width: -webkit-fill-available;
574
+ background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
575
+ border-color: var(--_ctm-dn-it-bx-dn-br-cr);
576
+ border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
577
+ border-style: var(--_ctm-dn-it-bx-dn-br-se);
578
+ border-width: var(--_ctm-dn-it-bx-dn-br-wh);
579
+ color: var(--_ctm-dn-it-bx-dn-cr);
580
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
581
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
582
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
583
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
584
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
585
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
586
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
587
+ var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
588
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
589
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
590
+
591
+ .input-field {
592
+ color: var(--_ctm-dn-it-bx-dn-cr);
593
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
594
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
595
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
596
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
597
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
598
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
599
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
600
+ var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
601
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
602
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
603
+ }
272
604
  }
273
605
 
274
606
  &__row {
275
607
  display: flex;
276
- gap: 10px;
608
+ gap: var(--_ctm-lt-im-gp);
277
609
  }
278
610
 
279
611
  &__half {
@@ -336,27 +668,151 @@ $dark-color: #343a40;
336
668
  cursor: pointer;
337
669
  text-align: left;
338
670
  }
671
+ }
672
+ }
339
673
 
340
- &__note {
341
- font-size: 0.85rem;
342
- color: #a94442;
343
- margin-top: 12px;
344
- }
674
+ .chk_submit-btn {
675
+ padding: 8px 24px;
676
+ background-color: var(--_ctm-dn-it-bn-dn-bd-cr);
677
+ border-color: var(--_ctm-dn-it-bn-dn-br-cr);
678
+ border-radius: var(--_ctm-dn-it-bn-dn-br-rs);
679
+ border-style: var(--_ctm-dn-it-bn-dn-br-se);
680
+ border-width: var(--_ctm-dn-it-bn-dn-br-wh);
681
+ color: var(--_ctm-dn-it-bn-dn-cr);
682
+ font-family: var(--_ctm-dn-it-bn-dn-ft-fy);
683
+ font-size: var(--_ctm-dn-it-bn-dn-ft-se);
684
+ font-style: var(--_ctm-dn-it-bn-dn-ft-se-ic);
685
+ font-weight: var(--_ctm-dn-it-bn-dn-ft-wt);
686
+ line-height: var(--_ctm-dn-it-bn-dn-le-ht);
687
+ letter-spacing: var(--_ctm-dn-it-bn-dn-lr-sg);
688
+ box-shadow: var(--_ctm-dn-it-bn-dn-sw-ae) var(--_ctm-dn-it-bn-dn-sw-br)
689
+ var(--_ctm-dn-it-bn-dn-sw-sd) var(--_ctm-dn-it-bn-dn-sw-cr);
690
+ text-align: var(--_ctm-dn-it-bn-dn-tt-an);
691
+ text-decoration: var(--_ctm-dn-it-bn-dn-ue);
692
+ }
693
+
694
+ .chk_checkbox_wrapper {
695
+ display: flex;
696
+ align-items: flex-start;
697
+ gap: 6px;
698
+
699
+ input {
700
+ width: auto !important;
345
701
  }
346
702
  }
347
- .submit-btn {
348
- align-self: flex-start;
349
- margin-top: 1rem;
350
- background-color: $primary-color;
351
- color: $light-color;
352
- border: none;
353
- padding: 0.5rem 1rem;
354
- font-size: 14px;
355
- border-radius: 4px;
703
+
704
+ .react-international-phone-country-selector-button {
705
+ border: none !important;
706
+ height: auto !important;
707
+ }
708
+
709
+ .react-international-phone-input {
710
+ height: auto;
711
+ border: none !important;
712
+ color: var(--_ctm-dn-it-bx-dn-cr);
713
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
714
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
715
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
716
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
717
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
718
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
719
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
720
+ var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
721
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
722
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
723
+ }
724
+
725
+ .chk_heading_info {
726
+ color: var(--_ctm-dn-it-hs-dn-cr);
727
+ font-family: var(--_ctm-dn-it-hs-dn-ft-fy);
728
+ font-size: var(--_ctm-dn-it-hs-dn-ft-se);
729
+ font-style: var(--_ctm-dn-it-hs-dn-ft-se-ic);
730
+ font-weight: var(--_ctm-dn-it-hs-dn-ft-wt);
731
+ line-height: var(--_ctm-dn-it-hs-dn-le-ht);
732
+ letter-spacing: var(--_ctm-dn-it-hs-dn-lr-sg);
733
+ text-align: var(--_ctm-dn-it-hs-dn-tt-an);
734
+ text-decoration: var(--_ctm-dn-it-hs-dn-ue);
735
+ }
736
+
737
+ .chk_primary_info {
738
+ color: var(--_ctm-dn-py-ve-tt-dn-cr);
739
+ font-family: var(--_ctm-dn-py-ve-tt-dn-ft-fy);
740
+ font-size: var(--_ctm-dn-py-ve-tt-dn-ft-se);
741
+ font-style: var(--_ctm-dn-py-ve-tt-dn-ft-se-ic);
742
+ font-weight: var(--_ctm-dn-py-ve-tt-dn-ft-wt);
743
+ line-height: var(--_ctm-dn-py-ve-tt-dn-le-ht);
744
+ letter-spacing: var(--_ctm-dn-py-ve-tt-dn-lr-sg);
745
+ text-align: var(--_ctm-dn-py-ve-tt-dn-tt-an);
746
+ text-decoration: var(--_ctm-dn-py-ve-tt-dn-ue);
747
+ }
748
+
749
+ .chk_secondary_info {
750
+ color: var(--_ctm-dn-sy-ve-tt-dn-cr);
751
+ font-family: var(--_ctm-dn-sy-ve-tt-dn-ft-fy);
752
+ font-size: var(--_ctm-dn-sy-ve-tt-dn-ft-se);
753
+ font-style: var(--_ctm-dn-sy-ve-tt-dn-ft-se-ic);
754
+ font-weight: var(--_ctm-dn-sy-ve-tt-dn-ft-wt);
755
+ line-height: var(--_ctm-dn-sy-ve-tt-dn-le-ht);
756
+ letter-spacing: var(--_ctm-dn-sy-ve-tt-dn-lr-sg);
757
+ text-align: var(--_ctm-dn-sy-ve-tt-dn-tt-an);
758
+ text-decoration: var(--_ctm-dn-sy-ve-tt-dn-ue);
759
+ }
760
+
761
+ .chk_change-link {
356
762
  cursor: pointer;
763
+ align-self: flex-start;
764
+ white-space: nowrap;
765
+ display: flex;
766
+ gap: 4px;
767
+ align-items: center;
768
+ background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
769
+ border-color: var(--_ctm-dn-sn-an-bn-dn-br-cr);
770
+ border-radius: var(--_ctm-dn-sn-an-bn-dn-br-rs);
771
+ border-style: var(--_ctm-dn-sn-an-bn-dn-br-se);
772
+ border-width: var(--_ctm-dn-sn-an-bn-dn-br-wh);
773
+ color: var(--_ctm-dn-sn-an-bn-dn-cr);
774
+ font-family: var(--_ctm-dn-sn-an-bn-dn-ft-fy);
775
+ font-size: var(--_ctm-dn-sn-an-bn-dn-ft-se);
776
+ font-style: var(--_ctm-dn-sn-an-bn-dn-ft-se-ic);
777
+ font-weight: var(--_ctm-dn-sn-an-bn-dn-ft-wt);
778
+ line-height: var(--_ctm-dn-sn-an-bn-dn-le-ht);
779
+ letter-spacing: var(--_ctm-dn-sn-an-bn-dn-lr-sg);
780
+ box-shadow: var(--_ctm-dn-sn-an-bn-dn-sw-ae) var(--_ctm-dn-sn-an-bn-dn-sw-br)
781
+ var(--_ctm-dn-sn-an-bn-dn-sw-sd) var(--_ctm-dn-sn-an-bn-dn-sw-cr);
782
+ text-align: var(--_ctm-dn-sn-an-bn-dn-tt-an);
783
+ text-decoration: var(--_ctm-dn-sn-an-bn-dn-ue);
784
+ }
357
785
 
358
- &:hover {
359
- opacity: 0.8;
786
+ .chk_payment-card__note {
787
+ padding: 8px 6px;
788
+ display: flex;
789
+ align-items: center;
790
+ gap: 6px;
791
+ background-color: var(--_ctm-dn-ne-cr-dn-bd-cr);
792
+ border-color: var(--_ctm-dn-ne-cr-dn-br-cr);
793
+ border-radius: var(--_ctm-dn-ne-cr-dn-br-rs);
794
+ border-style: var(--_ctm-dn-ne-cr-dn-br-se);
795
+ border-width: var(--_ctm-dn-ne-cr-dn-br-wh);
796
+ color: var(--_ctm-dn-ne-cr-dn-cr);
797
+ font-family: var(--_ctm-dn-ne-cr-dn-ft-fy);
798
+ font-size: var(--_ctm-dn-ne-cr-dn-ft-se);
799
+ font-style: var(--_ctm-dn-ne-cr-dn-ft-se-ic);
800
+ font-weight: var(--_ctm-dn-ne-cr-dn-ft-wt);
801
+ line-height: var(--_ctm-dn-ne-cr-dn-le-ht);
802
+ letter-spacing: var(--_ctm-dn-ne-cr-dn-lr-sg);
803
+ box-shadow: var(--_ctm-dn-ne-cr-dn-sw-ae) var(--_ctm-dn-ne-cr-dn-sw-br)
804
+ var(--_ctm-dn-ne-cr-dn-sw-sd) var(--_ctm-dn-ne-cr-dn-sw-cr);
805
+ text-align: var(--_ctm-dn-ne-cr-dn-tt-an);
806
+ text-decoration: var(--_ctm-dn-ne-cr-dn-ue);
807
+
808
+ .icon {
809
+ svg {
810
+ width: var(--_ctm-dn-ne-cr-dn-in-se);
811
+ height: var(--_ctm-dn-ne-cr-dn-in-se);
812
+ path {
813
+ stroke: var(--_ctm-dn-ne-cr-dn-in-c1);
814
+ }
815
+ }
360
816
  }
361
817
  }
362
818
  }