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

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 (15) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/cart-details.scss +486 -132
  3. package/dist/cartAttributes.scss +65 -1
  4. package/dist/cartDropdownOverlay.scss +46 -6
  5. package/dist/checkout.scss +386 -38
  6. package/dist/faq.scss +79 -84
  7. package/dist/language-selector.scss +451 -0
  8. package/dist/quantity-selector.scss +1 -16
  9. package/dist/section.scss +1 -0
  10. package/dist/types/builder/enums/index.d.ts +1 -0
  11. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +21 -2
  12. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  13. package/dist/types/builder/tools/element-edit/language-menu.d.ts +31 -0
  14. package/dist/widget.scss +1 -0
  15. package/package.json +1 -1
package/dist/cart-details.scss CHANGED
@@ -38,52 +38,111 @@ $resizeActive: '[data-cms-element-resizer="true"]';
38
38
  flex: 1 0 0;
39
39
  max-width: 100%;
40
40
 
41
- .cart_title_wrapper {
42
- display: flex;
43
- // padding: 0px 36px 0px 96px;
44
- align-items: center;
45
- gap: 12px;
46
- align-self: stretch;
47
-
48
- .cart_title {
49
- color: var(--_ctm-dn-ct-hg-ss-cr);
50
- font-size: var(--_ctm-dn-ct-hg-ss-ft-se);
51
- font-weight: var(--_ctm-dn-ct-hg-ss-ft-wt);
52
- line-height: var(--_ctm-dn-ct-hg-ss-le-ht);
53
- font-style: var(--_ctm-dn-ct-hg-ss-ft-se-ic);
54
- text-decoration: var(--_ctm-dn-ct-hg-ss-ue);
55
- letter-spacing: var(--_ctm-dn-ct-hg-ss-lr-sg);
56
- font-family: var(--_ctm-dn-ct-hg-ss-ft-fy);
57
- }
58
-
59
- .number_of_items {
41
+ .car_group_item {
42
+ width: 100%;
43
+ .group_name {
44
+ font-size: 20px;
60
45
  color: #101828;
61
- font-size: 14px;
62
- font-weight: 600;
63
- line-height: 20px;
46
+ font-weight: 700;
64
47
  }
65
48
  }
49
+ .cart_details_section {
50
+ width: 100%;
51
+ .cart_title_wrapper {
52
+ display: flex;
53
+ // padding: 0px 36px 0px 96px;
54
+ align-items: center;
55
+ gap: 12px;
56
+ align-self: stretch;
66
57
 
67
- .cart_actions_wrapper {
68
- display: flex;
69
- // padding-left: 96px;
70
- align-items: center;
71
- gap: 16px;
72
- align-self: stretch;
58
+ .cart_title {
59
+ color: var(--_ctm-dn-ct-hg-ss-cr);
60
+ font-size: var(--_ctm-dn-ct-hg-ss-ft-se);
61
+ font-weight: var(--_ctm-dn-ct-hg-ss-ft-wt);
62
+ line-height: var(--_ctm-dn-ct-hg-ss-le-ht);
63
+ font-style: var(--_ctm-dn-ct-hg-ss-ft-se-ic);
64
+ text-decoration: var(--_ctm-dn-ct-hg-ss-ue);
65
+ letter-spacing: var(--_ctm-dn-ct-hg-ss-lr-sg);
66
+ font-family: var(--_ctm-dn-ct-hg-ss-ft-fy);
67
+ }
68
+
69
+ .number_of_items {
70
+ color: #101828;
71
+ font-size: 14px;
72
+ font-weight: 600;
73
+ line-height: 20px;
74
+ }
75
+ }
73
76
 
74
- .cart_action_button {
77
+ .cart_actions_wrapper {
75
78
  display: flex;
76
- justify-content: center;
77
79
  align-items: center;
78
- gap: 8px;
79
- color: #243dc6;
80
- font-size: 14px;
81
- font-weight: 400;
82
- line-height: 20px;
80
+ gap: var(
81
+ --_ctm-mob-dn-ct-an-ss-im-gp,
82
+ var(--_ctm-tab-dn-ct-an-ss-im-gp, var(--_ctm-dn-ct-an-ss-im-gp))
83
+ );
83
84
 
84
- // &:hover {
85
- // font-weight: 600;
86
- // }
85
+ align-self: stretch;
86
+ white-space: nowrap;
87
+ flex-wrap: wrap;
88
+
89
+ .cart_action_button {
90
+ display: flex;
91
+ justify-content: center;
92
+ align-items: center;
93
+ // gap: 8px;
94
+ padding: var(
95
+ --_ctm-mob-dn-ct-an-ss-pg,
96
+ var(--_ctm-tab-dn-ct-an-ss-pg, var(--_ctm-dn-ct-an-ss-pg))
97
+ );
98
+ // color: var(--_ctm-dn-ct-an-ss-cr);
99
+ // font-size: var(--_ctm-dn-ct-an-ss-ft-se);
100
+ // font-weight: var(--_ctm-dn-ct-an-ss-ft-wt);
101
+ // line-height: var(--_ctm-dn-ct-an-ss-lh);
102
+ // font-family: var(--_ctm-dn-ct-an-ss-ft-fy);
103
+ color: var(
104
+ --_ctm-mob-dn-ct-an-ss-cr,
105
+ var(--_ctm-tab-dn-ct-an-ss-cr, var(--_ctm-dn-ct-an-ss-cr))
106
+ );
107
+ font-family: var(
108
+ --_sf-hr-ff,
109
+ var(
110
+ --_ctm-mob-dn-ct-an-ss-ft-fy,
111
+ var(--_ctm-tab-dn-ct-an-ss-ft-fy, var(--_ctm-dn-ct-an-ss-ft-fy))
112
+ )
113
+ );
114
+ font-size: var(
115
+ --_ctm-mob-dn-ct-an-ss-ft-se,
116
+ var(--_ctm-tab-dn-ct-an-ss-ft-se, var(--_ctm-dn-ct-an-ss-ft-se))
117
+ );
118
+ font-weight: var(
119
+ --_ctm-mob-dn-ct-an-ss-ft-wt,
120
+ var(--_ctm-tab-dn-ct-an-ss-ft-wt, var(--_ctm-dn-ct-an-ss-ft-wt))
121
+ );
122
+ font-style: var(
123
+ --_ctm-mob-dn-ct-an-ss-ft-se-ic,
124
+ var(--_ctm-tab-dn-ct-an-ss-ft-se-ic, var(--_ctm-dn-ct-an-ss-ft-se-ic))
125
+ );
126
+ text-align: var(
127
+ --_ctm-mob-dn-ct-an-ss-tt-an,
128
+ var(--_ctm-tab-dn-ct-an-ss-tt-an, var(--_ctm-dn-ct-an-ss-tt-an))
129
+ );
130
+ letter-spacing: var(
131
+ --_ctm-mob-dn-ct-an-ss-lr-sg,
132
+ var(--_ctm-tab-dn-ct-an-ss-lr-sg, var(--_ctm-dn-ct-an-ss-lr-sg))
133
+ );
134
+ line-height: var(
135
+ --_ctm-mob-dn-ct-an-ss-le-ht,
136
+ var(--_ctm-tab-dn-ct-an-ss-le-ht, var(--_ctm-dn-ct-an-ss-le-ht))
137
+ );
138
+ text-decoration: var(
139
+ --_ctm-mob-dn-ct-an-ss-ue,
140
+ var(--_ctm-tab-dn-ct-an-ss-ue, var(--_ctm-dn-ct-an-ss-ue))
141
+ );
142
+ // &:hover {
143
+ // font-weight: 600;
144
+ // }
145
+ }
87
146
  }
88
147
  }
89
148
  }
@@ -161,7 +220,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
161
220
  }
162
221
  .cart_products_wrapper,
163
222
  .infinite-list-container {
164
- max-height: 100vh;
223
+ max-height: calc(100vh - 148px);
165
224
  overflow: auto;
166
225
  display: flex;
167
226
  // padding: 0px 60px 0px 96px;
@@ -189,13 +248,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
189
248
  justify-content: space-between;
190
249
  align-items: flex-start;
191
250
  align-self: stretch;
192
- height: 162px;
251
+ height: auto;
252
+ flex-wrap: wrap;
193
253
 
194
254
  .cart_product_left_wrapper {
195
255
  display: flex;
196
256
  align-items: flex-start;
197
257
  gap: 16px;
198
- max-width: 60%;
258
+ // max-width: 60%;
199
259
  height: 100%;
200
260
  .checkbox_wrapper {
201
261
  width: fit-content;
@@ -204,14 +264,26 @@ $resizeActive: '[data-cms-element-resizer="true"]';
204
264
  .product_image {
205
265
  width: 128px;
206
266
  background-size: 100%;
207
- height: 100%;
267
+ height: 148px;
208
268
  background-repeat: no-repeat;
209
269
  background-position: center;
270
+ background-color: #eaeaea;
271
+ border-style: var(
272
+ --_ctm-mob-pt-ie-ss-br-se,
273
+ var(--_ctm-tab-pt-ie-ss-br-se, var(--_ctm-pt-ie-ss-br-se))
274
+ );
275
+ border-width: var(
276
+ --_ctm-mob-pt-ie-ss-br-wh,
277
+ var(--_ctm-tab-pt-ie-ss-br-wh, var(--_ctm-pt-ie-ss-br-wh))
278
+ );
279
+ // border: ;
280
+ // border-radius: ;
281
+ // border-color: ;
210
282
  }
211
283
 
212
284
  .product_info_wrapper {
213
285
  display: flex;
214
- width: 320px;
286
+ width: 372px;
215
287
  flex-direction: column;
216
288
  justify-content: space-between;
217
289
  align-items: flex-start;
@@ -226,11 +298,51 @@ $resizeActive: '[data-cms-element-resizer="true"]';
226
298
  word-break: normal;
227
299
 
228
300
  .product_title {
229
- color: var(--_ctm-dn-pt-ne-ss-cr);
230
- font-size: 18px;
231
- font-weight: 700;
232
- align-self: stretch;
233
- line-height: 28px;
301
+ // color: var(--_ctm-dn-pt-ne-ss-cr);
302
+ // font-size: var(--_ctm-dn-pt-ne-ss-ft-se);
303
+ // font-weight: 700;
304
+ // align-self: stretch;
305
+ // line-height: 28px;
306
+ // font-family: var(--_ctm-dn-pt-ne-ss-ft-fy);
307
+ color: var(
308
+ --_ctm-mob-dn-pt-ne-ss-cr,
309
+ var(--_ctm-tab-dn-pt-ne-ss-cr, var(--_ctm-dn-pt-ne-ss-cr))
310
+ );
311
+ font-family: var(
312
+ --_sf-hr-ff,
313
+ var(
314
+ --_ctm-mob-dn-pt-ne-ss-ft-fy,
315
+ var(--_ctm-tab-dn-pt-ne-ss-ft-fy, var(--_ctm-dn-pt-ne-ss-ft-fy))
316
+ )
317
+ );
318
+ font-size: var(
319
+ --_ctm-mob-dn-pt-ne-ss-ft-se,
320
+ var(--_ctm-tab-dn-pt-ne-ss-ft-se, var(--_ctm-dn-pt-ne-ss-ft-se))
321
+ );
322
+ font-weight: var(
323
+ --_ctm-mob-dn-pt-ne-ss-ft-wt,
324
+ var(--_ctm-tab-dn-pt-ne-ss-ft-wt, var(--_ctm-dn-pt-ne-ss-ft-wt))
325
+ );
326
+ font-style: var(
327
+ --_ctm-mob-dn-pt-ne-ss-ft-se-ic,
328
+ var(--_ctm-tab-dn-pt-ne-ss-ft-se-ic, var(--_ctm-dn-pt-ne-ss-ft-se-ic))
329
+ );
330
+ text-align: var(
331
+ --_ctm-mob-dn-pt-ne-ss-tt-an,
332
+ var(--_ctm-tab-dn-pt-ne-ss-tt-an, var(--_ctm-dn-pt-ne-ss-tt-an))
333
+ );
334
+ letter-spacing: var(
335
+ --_ctm-mob-dn-pt-ne-ss-lr-sg,
336
+ var(--_ctm-tab-dn-pt-ne-ss-lr-sg, var(--_ctm-dn-pt-ne-ss-lr-sg))
337
+ );
338
+ line-height: var(
339
+ --_ctm-mob-dn-pt-ne-ss-le-ht,
340
+ var(--_ctm-tab-dn-pt-ne-ss-le-ht, var(--_ctm-dn-pt-ne-ss-le-ht))
341
+ );
342
+ text-decoration: var(
343
+ --_ctm-mob-dn-pt-ne-ss-ue,
344
+ var(--_ctm-tab-dn-pt-ne-ss-ue, var(--_ctm-dn-pt-ne-ss-ue))
345
+ );
234
346
  }
235
347
 
236
348
  .product_code {
@@ -238,12 +350,54 @@ $resizeActive: '[data-cms-element-resizer="true"]';
238
350
  align-items: center;
239
351
  gap: 6px;
240
352
  align-self: stretch;
353
+ flex-wrap: wrap;
354
+ background-color: var(--_ctm-dn-pt-in-ss-bd-cr);
241
355
 
242
356
  p {
243
- color: #475467;
244
- font-size: 14px;
245
- font-weight: 400;
246
- line-height: 20px;
357
+ // color: #475467;
358
+ // font-size: 14px;
359
+ // font-weight: 400;
360
+ // line-height: 20px;
361
+ white-space: nowrap;
362
+ color: var(
363
+ --_ctm-mob-dn-pt-in-ss-cr,
364
+ var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr))
365
+ );
366
+ font-family: var(
367
+ --_sf-hr-ff,
368
+ var(
369
+ --_ctm-mob-dn-pt-in-ss-ft-fy,
370
+ var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy))
371
+ )
372
+ );
373
+ font-size: var(
374
+ --_ctm-mob-dn-pt-in-ss-ft-se,
375
+ var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se))
376
+ );
377
+ font-weight: var(
378
+ --_ctm-mob-dn-pt-in-ss-ft-wt,
379
+ var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt))
380
+ );
381
+ font-style: var(
382
+ --_ctm-mob-dn-pt-in-ss-ft-se-ic,
383
+ var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic))
384
+ );
385
+ text-align: var(
386
+ --_ctm-mob-dn-pt-in-ss-tt-an,
387
+ var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an))
388
+ );
389
+ letter-spacing: var(
390
+ --_ctm-mob-dn-pt-in-ss-lr-sg,
391
+ var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg))
392
+ );
393
+ line-height: var(
394
+ --_ctm-mob-dn-pt-in-ss-le-ht,
395
+ var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht))
396
+ );
397
+ text-decoration: var(
398
+ --_ctm-mob-dn-pt-in-ss-ue,
399
+ var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
400
+ );
247
401
  }
248
402
  }
249
403
 
@@ -252,12 +406,49 @@ $resizeActive: '[data-cms-element-resizer="true"]';
252
406
  align-items: center;
253
407
  gap: 4px;
254
408
  align-self: stretch;
255
-
409
+ flex-wrap: wrap;
410
+ background-color: var(--_ctm-dn-pt-in-ss-bd-cr);
256
411
  p {
257
- color: #475467;
258
- font-size: 14px;
259
- font-weight: 400;
260
- line-height: 20px; /* 142.857% */
412
+ white-space: nowrap;
413
+ color: var(
414
+ --_ctm-mob-dn-pt-in-ss-cr,
415
+ var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr))
416
+ );
417
+ font-family: var(
418
+ --_sf-hr-ff,
419
+ var(
420
+ --_ctm-mob-dn-pt-in-ss-ft-fy,
421
+ var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy))
422
+ )
423
+ );
424
+ font-size: var(
425
+ --_ctm-mob-dn-pt-in-ss-ft-se,
426
+ var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se))
427
+ );
428
+ font-weight: var(
429
+ --_ctm-mob-dn-pt-in-ss-ft-wt,
430
+ var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt))
431
+ );
432
+ font-style: var(
433
+ --_ctm-mob-dn-pt-in-ss-ft-se-ic,
434
+ var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic))
435
+ );
436
+ text-align: var(
437
+ --_ctm-mob-dn-pt-in-ss-tt-an,
438
+ var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an))
439
+ );
440
+ letter-spacing: var(
441
+ --_ctm-mob-dn-pt-in-ss-lr-sg,
442
+ var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg))
443
+ );
444
+ line-height: var(
445
+ --_ctm-mob-dn-pt-in-ss-le-ht,
446
+ var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht))
447
+ );
448
+ text-decoration: var(
449
+ --_ctm-mob-dn-pt-in-ss-ue,
450
+ var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
451
+ );
261
452
  }
262
453
  }
263
454
  }
@@ -272,14 +463,54 @@ $resizeActive: '[data-cms-element-resizer="true"]';
272
463
  justify-content: center;
273
464
  align-items: center;
274
465
  gap: 8px;
275
- color: #243dc6;
276
- font-size: 14px;
277
- font-weight: 400;
278
- line-height: 20px;
279
-
280
- &:hover {
281
- font-weight: 600;
282
- }
466
+ // color: #243dc6;
467
+ // font-size: 14px;
468
+ // font-weight: 400;
469
+ // line-height: 20px;
470
+ // color: prepareMediaVariable(--_ctm-dn-pt-as-ss-cr);
471
+ color: var(
472
+ --_ctm-mob-dn-pt-as-ss-cr,
473
+ var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr))
474
+ );
475
+ font-family: var(
476
+ --_sf-hr-ff,
477
+ var(
478
+ --_ctm-mob-dn-pt-as-ss-ft-fy,
479
+ var(--_ctm-tab-dn-pt-as-ss-ft-fy, var(--_ctm-dn-pt-as-ss-ft-fy))
480
+ )
481
+ );
482
+ font-size: var(
483
+ --_ctm-mob-dn-pt-as-ss-ft-se,
484
+ var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se))
485
+ );
486
+ font-weight: var(
487
+ --_ctm-mob-dn-pt-as-ss-ft-wt,
488
+ var(--_ctm-tab-dn-pt-as-ss-ft-wt, var(--_ctm-dn-pt-as-ss-ft-wt))
489
+ );
490
+ font-style: var(
491
+ --_ctm-mob-dn-pt-as-ss-ft-se-ic,
492
+ var(--_ctm-tab-dn-pt-as-ss-ft-se-ic, var(--_ctm-dn-pt-as-ss-ft-se-ic))
493
+ );
494
+ text-align: var(
495
+ --_ctm-mob-dn-pt-as-ss-tt-an,
496
+ var(--_ctm-tab-dn-pt-as-ss-tt-an, var(--_ctm-dn-pt-as-ss-tt-an))
497
+ );
498
+ letter-spacing: var(
499
+ --_ctm-mob-dn-pt-as-ss-lr-sg,
500
+ var(--_ctm-tab-dn-pt-as-ss-lr-sg, var(--_ctm-dn-pt-as-ss-lr-sg))
501
+ );
502
+ line-height: var(
503
+ --_ctm-mob-dn-pt-as-ss-le-ht,
504
+ var(--_ctm-tab-dn-pt-as-ss-le-ht, var(--_ctm-dn-pt-as-ss-le-ht))
505
+ );
506
+ text-decoration: var(
507
+ --_ctm-mob-dn-pt-as-ss-ue,
508
+ var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue))
509
+ );
510
+
511
+ // &:hover {
512
+ // font-weight: 600;
513
+ // }
283
514
  }
284
515
  }
285
516
  }
@@ -344,12 +575,51 @@ $resizeActive: '[data-cms-element-resizer="true"]';
344
575
  }
345
576
 
346
577
  .product_price {
347
- color: #101828;
348
- text-align: right;
349
- font-size: 20px;
350
- font-weight: 700;
351
- line-height: 30px;
578
+ // color: #101828;
579
+ // text-align: right;
580
+ // font-size: 20px;
581
+ // font-weight: 700;
582
+ // line-height: 30px;
352
583
  white-space: nowrap;
584
+ color: var(
585
+ --_ctm-mob-dn-pt-pe-ss-cr,
586
+ var(--_ctm-tab-dn-pt-pe-ss-cr, var(--_ctm-dn-pt-pe-ss-cr))
587
+ );
588
+ font-family: var(
589
+ --_sf-hr-ff,
590
+ var(
591
+ --_ctm-mob-dn-pt-pe-ss-ft-fy,
592
+ var(--_ctm-tab-dn-pt-pe-ss-ft-fy, var(--_ctm-dn-pt-pe-ss-ft-fy))
593
+ )
594
+ );
595
+ font-size: var(
596
+ --_ctm-mob-dn-pt-pe-ss-ft-se,
597
+ var(--_ctm-tab-dn-pt-pe-ss-ft-se, var(--_ctm-dn-pt-pe-ss-ft-se))
598
+ );
599
+ font-weight: var(
600
+ --_ctm-mob-dn-pt-pe-ss-ft-wt,
601
+ var(--_ctm-tab-dn-pt-pe-ss-ft-wt, var(--_ctm-dn-pt-pe-ss-ft-wt))
602
+ );
603
+ font-style: var(
604
+ --_ctm-mob-dn-pt-pe-ss-ft-se-ic,
605
+ var(--_ctm-tab-dn-pt-pe-ss-ft-se-ic, var(--_ctm-dn-pt-pe-ss-ft-se-ic))
606
+ );
607
+ text-align: var(
608
+ --_ctm-mob-dn-pt-pe-ss-tt-an,
609
+ var(--_ctm-tab-dn-pt-pe-ss-tt-an, var(--_ctm-dn-pt-pe-ss-tt-an))
610
+ );
611
+ letter-spacing: var(
612
+ --_ctm-mob-dn-pt-pe-ss-lr-sg,
613
+ var(--_ctm-tab-dn-pt-pe-ss-lr-sg, var(--_ctm-dn-pt-pe-ss-lr-sg))
614
+ );
615
+ line-height: var(
616
+ --_ctm-mob-dn-pt-pe-ss-le-ht,
617
+ var(--_ctm-tab-dn-pt-pe-ss-le-ht, var(--_ctm-dn-pt-pe-ss-le-ht))
618
+ );
619
+ text-decoration: var(
620
+ --_ctm-mob-dn-pt-pe-ss-ue,
621
+ var(--_ctm-tab-dn-pt-pe-ss-ue, var(--_ctm-dn-pt-pe-ss-ue))
622
+ );
353
623
  }
354
624
  }
355
625
 
@@ -363,29 +633,68 @@ $resizeActive: '[data-cms-element-resizer="true"]';
363
633
  justify-content: center;
364
634
  align-items: center;
365
635
  gap: 8px;
366
- color: #243dc6;
367
- font-size: 14px;
368
- font-weight: 400;
369
- line-height: 20px;
636
+ // color: #243dc6;
637
+ // font-size: 14px;
638
+ // font-weight: 400;
639
+ // line-height: 20px;
370
640
  white-space: nowrap;
641
+ color: var(
642
+ --_ctm-mob-dn-pt-as-ss-cr,
643
+ var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr))
644
+ );
645
+ font-family: var(
646
+ --_sf-hr-ff,
647
+ var(
648
+ --_ctm-mob-dn-pt-as-ss-ft-fy,
649
+ var(--_ctm-tab-dn-pt-as-ss-ft-fy, var(--_ctm-dn-pt-as-ss-ft-fy))
650
+ )
651
+ );
652
+ font-size: var(
653
+ --_ctm-mob-dn-pt-as-ss-ft-se,
654
+ var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se))
655
+ );
656
+ font-weight: var(
657
+ --_ctm-mob-dn-pt-as-ss-ft-wt,
658
+ var(--_ctm-tab-dn-pt-as-ss-ft-wt, var(--_ctm-dn-pt-as-ss-ft-wt))
659
+ );
660
+ font-style: var(
661
+ --_ctm-mob-dn-pt-as-ss-ft-se-ic,
662
+ var(--_ctm-tab-dn-pt-as-ss-ft-se-ic, var(--_ctm-dn-pt-as-ss-ft-se-ic))
663
+ );
664
+ text-align: var(
665
+ --_ctm-mob-dn-pt-as-ss-tt-an,
666
+ var(--_ctm-tab-dn-pt-as-ss-tt-an, var(--_ctm-dn-pt-as-ss-tt-an))
667
+ );
668
+ letter-spacing: var(
669
+ --_ctm-mob-dn-pt-as-ss-lr-sg,
670
+ var(--_ctm-tab-dn-pt-as-ss-lr-sg, var(--_ctm-dn-pt-as-ss-lr-sg))
671
+ );
672
+ line-height: var(
673
+ --_ctm-mob-dn-pt-as-ss-le-ht,
674
+ var(--_ctm-tab-dn-pt-as-ss-le-ht, var(--_ctm-dn-pt-as-ss-le-ht))
675
+ );
676
+ text-decoration: var(
677
+ --_ctm-mob-dn-pt-as-ss-ue,
678
+ var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue))
679
+ );
371
680
 
372
- &:hover {
373
- font-weight: 600;
374
- }
681
+ // &:hover {
682
+ // font-weight: 600;
683
+ // }
375
684
  }
376
685
 
377
686
  .remove_button {
378
687
  display: flex;
379
688
  justify-content: center;
380
689
  align-items: center;
381
- color: #667085;
690
+ color: #dc2626;
382
691
  font-size: 14px;
383
692
  font-weight: 400;
384
693
  line-height: 20px;
385
-
386
- &:hover {
387
- font-weight: 600;
388
- }
694
+ white-space: nowrap;
695
+ // &:hover {
696
+ // font-weight: 600;
697
+ // }
389
698
  }
390
699
  }
391
700
  }
@@ -400,6 +709,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
400
709
  }
401
710
  }
402
711
 
712
+ .infinite-group-list-container {
713
+ max-height: calc(100vh - 200px);
714
+ }
715
+
403
716
  .space-y-4 > div {
404
717
  width: 100%;
405
718
  }
@@ -421,56 +734,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
421
734
  color: #dc2626;
422
735
  }
423
736
  }
424
-
425
- .section-body {
426
- padding-top: 1rem;
427
- .attribute {
428
- margin-bottom: 1.25rem;
429
- .label {
430
- display: block;
431
- font-size: 0.875rem;
432
- font-weight: 500;
433
- color: #374151;
434
- margin-bottom: 0.5rem;
435
-
436
- &.required::after {
437
- content: " *";
438
- color: #dc2626;
439
- }
440
- }
441
- .attribute_form_field {
442
- width: 100% !important;
443
- padding: 8px 12px !important;
444
- border-radius: 4px;
445
- border: 1px solid #ccc;
446
- /* background-color: #f9fafb !important; */
447
- outline: none;
448
- transition: border-color 0.2s ease-in-out;
449
- font-size: 14px;
450
- height: 40px;
451
-
452
- &:focus {
453
- border-color: #3b82f6;
454
- background-color: #fff;
455
- }
456
-
457
- &.error {
458
- border-color: #dc2626;
459
- background-color: #fef2f2;
460
- }
461
- }
462
-
463
- textarea {
464
- min-height: 100px;
465
- resize: vertical;
466
- }
467
- }
468
- .cart_item_attr_disabled {
469
- pointer-events: none;
470
- opacity: 0.5;
471
- cursor: none;
472
- }
473
- }
474
737
  }
475
738
 
476
739
  // .error-text {
@@ -480,6 +743,68 @@ $resizeActive: '[data-cms-element-resizer="true"]';
480
743
  // }
481
744
  }
482
745
 
746
+ .attributes-section-body {
747
+ padding-top: 1rem;
748
+ width: 100%;
749
+ display: flex;
750
+ flex-wrap: wrap;
751
+ gap: 16px;
752
+ padding: 8px;
753
+ .attribute {
754
+ // margin-bottom: 1.25rem;
755
+ width: 240px;
756
+ div * {
757
+ // width: 100%;
758
+ }
759
+ .label {
760
+ display: block;
761
+ font-size: 0.875rem;
762
+ font-weight: 500;
763
+ color: #374151;
764
+ margin-bottom: 0.5rem;
765
+
766
+ &.required::after {
767
+ content: " *";
768
+ color: #dc2626;
769
+ }
770
+ }
771
+ .attribute_form_field {
772
+ width: 100% !important;
773
+ padding: 8px 12px !important;
774
+ border-radius: 4px;
775
+ border: 1px solid #ccc;
776
+ /* background-color: #f9fafb !important; */
777
+ outline: none;
778
+ transition: border-color 0.2s ease-in-out;
779
+ font-size: 14px;
780
+ height: 40px;
781
+
782
+ &:focus {
783
+ border-color: #3b82f6;
784
+ background-color: #fff;
785
+ }
786
+
787
+ &.error {
788
+ border-color: #dc2626;
789
+ background-color: #fef2f2;
790
+ }
791
+ }
792
+
793
+ textarea {
794
+ min-height: 100px;
795
+ resize: vertical;
796
+ }
797
+ }
798
+ .text_area_attribute {
799
+ width: 100%;
800
+ }
801
+ .cart_item_attr_disabled {
802
+ pointer-events: none;
803
+ opacity: 0.5;
804
+ cursor: auto;
805
+ }
806
+ }
807
+
483
808
  .infinite-list-container {
484
809
  display: flex;
485
810
  flex-direction: column;
@@ -545,3 +870,32 @@ $resizeActive: '[data-cms-element-resizer="true"]';
545
870
  height: 1px;
546
871
  }
547
872
  }
873
+
874
+ @media screen and (max-width: 750px) {
875
+ .product_qty_price_wrapper {
876
+ justify-content: flex-start !important;
877
+ }
878
+ .cart_product_right_wrapper {
879
+ flex-direction: inherit;
880
+ align-items: center;
881
+ margin-top: 24px !important;
882
+ width: 100%;
883
+ }
884
+ }
885
+ @media screen and (max-width: 448px) {
886
+ .cart_product_right_wrapper {
887
+ display: block;
888
+ }
889
+ .product_qty_price_wrapper {
890
+ margin-bottom: 12px;
891
+ }
892
+ .cart_product_left_wrapper {
893
+ display: block;
894
+ }
895
+ .cart_product_left_wrapper .product_image {
896
+ margin-bottom: 12px;
897
+ }
898
+ .product_info_wrapper {
899
+ width: 100%;
900
+ }
901
+ }