@sc-360-v2/storefront-cms-library 0.4.20 → 0.4.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.
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
3
4
 
4
5
  $lbMain: "#cms_lt_bx_mn";
5
6
  $mnwr: ".cms_lt_wr";
@@ -77,7 +78,10 @@ $activeElementSelector: "[data-has-clicked='true']";
77
78
  --_ctm-mob-lig-dn-bd-se,
78
79
  var(--_ctm-tab-lig-dn-bd-se, var(--_ctm-lig-dn-bd-se))
79
80
  );
80
- border-radius: 10px;
81
+ border-radius: prepareMediaVariable(--_ctm-lig-dn-br-rs, 0px);
82
+ border-width: prepareMediaVariable(--_ctm-lig-dn-br-wh);
83
+ border-style: prepareMediaVariable(--_ctm-lig-dn-br-se);
84
+ border-color: prepareMediaVariable(--_ctm-lig-dn-br-cr);
81
85
  position: var(--_p-relative);
82
86
 
83
87
  // margin-inline-start: 35%;
@@ -1,6 +1,11 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
3
  @use "./functions.scss" as *;
4
+ $defaultValues: (
5
+ --_column-count-two: getListOfResponsive(2, 1),
6
+ --_column-count-three: getListOfResponsive(3, 1, 2),
7
+ --_column-count: getListOfResponsive(3, 2, 2),
8
+ );
4
9
 
5
10
  [data-div-type="element"] {
6
11
  &[data-element-type="orderStatus"] {
@@ -33,6 +38,7 @@
33
38
  }
34
39
 
35
40
  .order-confirmation {
41
+ @include prepareMediaQueries($defaultValues);
36
42
  display: flex;
37
43
  flex-direction: column;
38
44
  padding: prepareMediaVariable(--_ctm-dn-or-wt-pg);
@@ -396,7 +402,8 @@
396
402
 
397
403
  .order-details-wrapper {
398
404
  display: grid;
399
- grid-template-columns: 2fr 1fr;
405
+ // grid-template-columns: 2fr 1fr;
406
+ grid-template-columns: repeat(var(--_column-count-two, 2), 1fr);
400
407
  border-color: var(
401
408
  --_ctm-mob-dn-or-cr-br-cr,
402
409
  var(--_ctm-tab-dn-or-cr-br-cr, var(--_ctm-dn-or-cr-br-cr))
@@ -684,7 +691,8 @@
684
691
 
685
692
  /* Second row: three equal columns */
686
693
  &:nth-child(2) {
687
- grid-template-columns: repeat(3, 1fr);
694
+ // grid-template-columns: repeat(3, 1fr);
695
+ grid-template-columns: repeat(var(--_column-count, 3), 2fr);
688
696
  margin-top: 24px;
689
697
  }
690
698
 
@@ -704,11 +712,11 @@
704
712
  --_ctm-mob-dn-or-io-or-ne-ft-fy,
705
713
  var(--_ctm-tab-dn-or-io-or-ne-ft-fy, var(--_ctm-dn-or-io-or-ne-ft-fy))
706
714
  );
707
- // font-size: var(
708
- // --_ctm-mob-dn-or-io-or-ne-ft-se,
709
- // var(--_ctm-tab-dn-or-io-or-ne-ft-se, var(--_ctm-dn-or-io-or-ne-ft-se))
710
- // );
711
- font-size: 14px;
715
+ font-size: var(
716
+ --_ctm-mob-dn-or-io-or-ne-ft-se,
717
+ var(--_ctm-tab-dn-or-io-or-ne-ft-se, var(--_ctm-dn-or-io-or-ne-ft-se))
718
+ );
719
+ // font-size: 14px;
712
720
  color: var(
713
721
  --_ctm-mob-dn-or-io-or-ne-cr,
714
722
  var(--_ctm-tab-dn-or-io-or-ne-cr, var(--_ctm-dn-or-io-or-ne-cr))
@@ -755,11 +763,11 @@
755
763
  --_ctm-mob-dn-or-io-or-id-ft-fy,
756
764
  var(--_ctm-tab-dn-or-io-or-id-ft-fy, var(--_ctm-dn-or-io-or-id-ft-fy))
757
765
  );
758
- // font-size: var(
759
- // --_ctm-mob-dn-or-io-or-id-ft-se,
760
- // var(--_ctm-tab-dn-or-io-or-id-ft-se, var(--_ctm-dn-or-io-or-id-ft-se))
761
- // );
762
- font-size: 16px;
766
+ font-size: var(
767
+ --_ctm-mob-dn-or-io-or-id-ft-se,
768
+ var(--_ctm-tab-dn-or-io-or-id-ft-se, var(--_ctm-dn-or-io-or-id-ft-se))
769
+ );
770
+ // font-size: 16px;
763
771
  color: var(
764
772
  --_ctm-mob-dn-or-io-or-id-cr,
765
773
  var(--_ctm-tab-dn-or-io-or-id-cr, var(--_ctm-dn-or-io-or-id-cr))
@@ -872,11 +880,11 @@
872
880
  --_ctm-mob-dn-or-io-or-de-ft-fy,
873
881
  var(--_ctm-tab-dn-or-io-or-de-ft-fy, var(--_ctm-dn-or-io-or-de-ft-fy))
874
882
  );
875
- // font-size: var(
876
- // --_ctm-mob-dn-or-io-or-de-ft-se,
877
- // var(--_ctm-tab-dn-or-io-or-de-ft-se, var(--_ctm-dn-or-io-or-de-ft-se))
878
- // );
879
- font-size: 14px;
883
+ font-size: var(
884
+ --_ctm-mob-dn-or-io-or-de-ft-se,
885
+ var(--_ctm-tab-dn-or-io-or-de-ft-se, var(--_ctm-dn-or-io-or-de-ft-se))
886
+ );
887
+ // font-size: 14px;
880
888
  color: var(
881
889
  --_ctm-mob-dn-or-io-or-de-cr,
882
890
  var(--_ctm-tab-dn-or-io-or-de-cr, var(--_ctm-dn-or-io-or-de-cr))
@@ -919,10 +927,47 @@
919
927
  .shipping-method,
920
928
  .payment-mode {
921
929
  .sgmd_title {
922
- font-size: 14px;
930
+ // font-size: 14px;
931
+ // color: var(
932
+ // --_ctm-mob-dn-or-io-or-io-hr-cr,
933
+ // var(--_ctm-tab-dn-or-io-or-io-hr-cr, var(--_ctm-dn-or-io-or-io-hr-cr))
934
+ // );
935
+ font-family: var(
936
+ --_ctm-mob-dn-or-io-or-ne-ft-fy,
937
+ var(--_ctm-tab-dn-or-io-or-ne-ft-fy, var(--_ctm-dn-or-io-or-ne-ft-fy))
938
+ );
939
+ font-size: var(
940
+ --_ctm-mob-dn-or-io-or-ne-ft-se,
941
+ var(--_ctm-tab-dn-or-io-or-ne-ft-se, var(--_ctm-dn-or-io-or-ne-ft-se))
942
+ );
943
+ // font-size: 14px;
923
944
  color: var(
924
- --_ctm-mob-dn-or-io-or-io-hr-cr,
925
- var(--_ctm-tab-dn-or-io-or-io-hr-cr, var(--_ctm-dn-or-io-or-io-hr-cr))
945
+ --_ctm-mob-dn-or-io-or-ne-cr,
946
+ var(--_ctm-tab-dn-or-io-or-ne-cr, var(--_ctm-dn-or-io-or-ne-cr))
947
+ );
948
+ font-weight: var(
949
+ --_ctm-mob-dn-or-io-or-ne-ft-wt,
950
+ var(--_ctm-tab-dn-or-io-or-ne-ft-wt, var(--_ctm-dn-or-io-or-ne-ft-wt))
951
+ );
952
+ text-decoration: var(
953
+ --_ctm-mob-dn-or-io-or-ne-ue,
954
+ var(--_ctm-tab-dn-or-io-or-ne-ue, var(--_ctm-dn-or-io-or-ne-ue))
955
+ );
956
+ letter-spacing: var(
957
+ --_ctm-mob-dn-or-io-or-ne-lr-sg,
958
+ var(--_ctm-tab-dn-or-io-or-ne-lr-sg, var(--_ctm-dn-or-io-or-ne-lr-sg))
959
+ );
960
+ line-height: var(
961
+ --_ctm-mob-dn-or-io-or-ne-le-ht,
962
+ var(--_ctm-tab-dn-or-io-or-ne-le-ht, var(--_ctm-dn-or-io-or-ne-le-ht))
963
+ );
964
+ font-style: var(
965
+ --_ctm-mob-dn-or-io-or-ne-ft-se-ic,
966
+ var(--_ctm-tab-dn-or-io-or-ne-ft-se-ic, var(--_ctm-dn-or-io-or-ne-ft-se-ic))
967
+ );
968
+ text-align: var(
969
+ --_ctm-mob-dn-or-io-or-ne-tt-an,
970
+ var(--_ctm-tab-dn-or-io-or-ne-tt-an, var(--_ctm-dn-or-io-or-ne-tt-an))
926
971
  );
927
972
  }
928
973
  .sgmd_details {
@@ -1172,7 +1217,8 @@
1172
1217
 
1173
1218
  .items-grid {
1174
1219
  display: grid;
1175
- grid-template-columns: repeat(3, 1fr);
1220
+ // grid-template-columns: repeat(3, 1fr);
1221
+ grid-template-columns: repeat(var(--_column-count-three, 3), 1fr);
1176
1222
  gap: var(
1177
1223
  --_ctm-mob-dn-pt-wt-pt-wt-wr-im-gp,
1178
1224
  var(--_ctm-tab-dn-pt-wt-pt-wt-wr-im-gp, var(--_ctm-dn-pt-wt-pt-wt-wr-im-gp))
@@ -1291,6 +1337,9 @@
1291
1337
  // }
1292
1338
 
1293
1339
  .item-details {
1340
+ display: flex;
1341
+ flex-direction: column;
1342
+ gap: 4px;
1294
1343
  flex: 1;
1295
1344
 
1296
1345
  .item-name {
@@ -1299,15 +1348,15 @@
1299
1348
  -webkit-box-orient: vertical;
1300
1349
  overflow: hidden;
1301
1350
  text-overflow: ellipsis;
1302
- margin: 0 0 4px;
1351
+ // margin: 0 0 4px;
1303
1352
  // font-size: 14px;
1304
1353
  // font-weight: 600;
1305
1354
  // color: var(--_gray-900);
1306
1355
  // line-height: 20px;
1307
- padding: var(
1308
- --_ctm-mob-dn-pt-wt-pt-ne-pg,
1309
- var(--_ctm-tab-dn-pt-wt-pt-ne-im-pg, var(--_ctm-dn-pt-wt-pt-ne-pg))
1310
- );
1356
+ // padding: var(
1357
+ // --_ctm-mob-dn-pt-wt-pt-ne-pg,
1358
+ // var(--_ctm-tab-dn-pt-wt-pt-ne-im-pg, var(--_ctm-dn-pt-wt-pt-ne-pg))
1359
+ // );
1311
1360
  font-family: var(
1312
1361
  --_ctm-mob-dn-pt-wt-pt-ne-ft-fy,
1313
1362
  var(--_ctm-tab-dn-pt-wt-pt-ne-ft-fy, var(--_ctm-dn-pt-wt-pt-ne-ft-fy))
@@ -1355,11 +1404,11 @@
1355
1404
  --_ctm-mob-dn-pt-wt-pt-ce-ft-fy,
1356
1405
  var(--_ctm-tab-dn-pt-wt-pt-ce-ft-fy, var(--_ctm-dn-pt-wt-pt-ce-ft-fy))
1357
1406
  );
1358
- // font-size: var(
1359
- // --_ctm-mob-dn-pt-wt-pt-ce-ft-se,
1360
- // var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se, var(--_ctm-dn-pt-wt-pt-ce-ft-se))
1361
- // );
1362
- font-size: 12px;
1407
+ font-size: var(
1408
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-se,
1409
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se, var(--_ctm-dn-pt-wt-pt-ce-ft-se))
1410
+ );
1411
+ // font-size: 12px;
1363
1412
  color: var(
1364
1413
  --_ctm-mob-dn-pt-wt-pt-ce-cr,
1365
1414
  var(--_ctm-tab-dn-pt-wt-pt-ce-cr, var(--_ctm-dn-pt-wt-pt-ce-cr))
@@ -1398,11 +1447,11 @@
1398
1447
  --_ctm-mob-dn-pt-wt-pt-qy-ft-fy,
1399
1448
  var(--_ctm-tab-dn-pt-wt-pt-qy-ft-fy, var(--_ctm-dn-pt-wt-pt-qy-ft-fy))
1400
1449
  );
1401
- // font-size: var(
1402
- // --_ctm-mob-dn-pt-wt-pt-qy-ft-se,
1403
- // var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se, var(--_ctm-dn-pt-wt-pt-qy-ft-se))
1404
- // );
1405
- font-size: 12px;
1450
+ font-size: var(
1451
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se,
1452
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se, var(--_ctm-dn-pt-wt-pt-qy-ft-se))
1453
+ );
1454
+ // font-size: 12px;
1406
1455
  color: var(
1407
1456
  --_ctm-mob-dn-pt-wt-pt-qy-cr,
1408
1457
  var(--_ctm-tab-dn-pt-wt-pt-qy-cr, var(--_ctm-dn-pt-wt-pt-qy-cr))
@@ -1528,11 +1577,11 @@
1528
1577
  --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy-dc,
1529
1578
  var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy-dc))
1530
1579
  );
1531
- // font-size: var(
1532
- // --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc,
1533
- // var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc))
1534
- // );
1535
- font-size: 12px;
1580
+ font-size: var(
1581
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc,
1582
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc))
1583
+ );
1584
+ // font-size: 12px;
1536
1585
  color: var(
1537
1586
  --_ctm-mob-dn-pt-wt-pt-ed-de-cr-dc,
1538
1587
  var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr-dc, var(--_ctm-dn-pt-wt-pt-ed-de-cr-dc))
@@ -427,6 +427,172 @@
427
427
  )
428
428
  );
429
429
  }
430
+ .denominations_container {
431
+ font-size: 16px;
432
+ display: flex;
433
+ flex-direction: column;
434
+ gap: 6px;
435
+ padding-bottom: 14px;
436
+ .denominations_title {
437
+ margin-bottom: 4px;
438
+ font-size: 16px;
439
+ color: #000000;
440
+ font-weight: 500;
441
+ line-height: 150%;
442
+ }
443
+ .denominations_grid {
444
+ display: flex;
445
+ gap: 8px;
446
+ flex-wrap: wrap;
447
+ margin-bottom: 10px;
448
+ flex-direction: row;
449
+ gap: 12px;
450
+ .amount_btn {
451
+ transition: color 0.3s ease;
452
+ cursor: pointer;
453
+ display: flex;
454
+ align-items: center;
455
+ justify-content: center;
456
+ padding: 4px;
457
+ min-width: 20px;
458
+ min-height: 20px;
459
+ box-sizing: content-box;
460
+ font-size: 16px;
461
+ font-weight: 600;
462
+ line-height: 150%;
463
+ background-color: #ffffff;
464
+ border: 1px solid #d6d6d6;
465
+
466
+ &.active {
467
+ background-color: #f5f5f5;
468
+ border: 1px solid #3e4784;
469
+ color: #000080;
470
+ }
471
+ }
472
+ }
473
+ .custom_amount_input {
474
+ height: 40px;
475
+ display: flex;
476
+ position: relative;
477
+ gap: 6px;
478
+ align-items: center;
479
+ border-radius: 4px;
480
+ background: #fff;
481
+ border: 1px solid #d0d5dd;
482
+ padding: 8px 12px;
483
+ width: 220px;
484
+ transition:
485
+ background-color 0.2s,
486
+ color 0.2s,
487
+ border-color 0.2s,
488
+ box-shadow 0.2s;
489
+ .svg_icon {
490
+ color: var(--_gray-500);
491
+ font-weight: 500;
492
+ font-size: 14px;
493
+ line-height: 24px;
494
+ margin-top: 2px;
495
+ }
496
+ input {
497
+ &::placeholder {
498
+ color: var(--_gray-500);
499
+ font-weight: 500;
500
+ font-size: 14px;
501
+ line-height: 24px;
502
+ }
503
+ }
504
+ &:focus-within {
505
+ outline: 0 none;
506
+ outline-offset: 0;
507
+ border-radius: 4px;
508
+ box-shadow:
509
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
510
+ 0px 0px 0px 2px var(--_primary-100);
511
+ border: 1px solid var(--_primary-300);
512
+ }
513
+ }
514
+ .delivery_details_container {
515
+ .delivery_details_title {
516
+ display: inline-block;
517
+ margin-top: 8px;
518
+ margin-bottom: 4px;
519
+ font-size: 16px;
520
+ color: #000000;
521
+ font-weight: 500;
522
+ line-height: 150%;
523
+ }
524
+ .input_container {
525
+ display: flex;
526
+ flex-direction: column;
527
+ gap: 4px;
528
+ margin-bottom: 12px;
529
+
530
+ &:last-child {
531
+ margin-bottom: 0;
532
+ }
533
+ label {
534
+ display: block;
535
+ color: var(--_gray-700);
536
+ font-weight: 500;
537
+ font-size: 14px;
538
+ line-height: 20px;
539
+ }
540
+ .message_text {
541
+ background-color: var(--_base-white);
542
+ padding: 8px 12px;
543
+ border: 1px solid var(--_gray-300);
544
+ border-radius: 4px;
545
+ transition:
546
+ background-color 0.2s,
547
+ color 0.2s,
548
+ border-color 0.2s,
549
+ box-shadow 0.2s;
550
+ &::placeholder {
551
+ color: var(--_gray-500);
552
+ font-weight: 500;
553
+ font-size: 14px;
554
+ line-height: 24px;
555
+ }
556
+ &:focus {
557
+ outline: 0 none;
558
+ outline-offset: 0;
559
+ border-radius: 4px;
560
+ box-shadow:
561
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
562
+ 0px 0px 0px 2px var(--_primary-100);
563
+ border: 1px solid var(--_primary-300);
564
+ }
565
+ }
566
+ input {
567
+ background-color: var(--_base-white);
568
+ padding: 8px 12px;
569
+ border: 1px solid var(--_gray-300);
570
+ border-radius: 4px;
571
+ height: 40px;
572
+ transition:
573
+ background-color 0.2s,
574
+ color 0.2s,
575
+ border-color 0.2s,
576
+ box-shadow 0.2s;
577
+ &::placeholder {
578
+ color: var(--_gray-500);
579
+ font-weight: 500;
580
+ font-size: 14px;
581
+ line-height: 24px;
582
+ }
583
+ &:focus {
584
+ outline: 0 none;
585
+ outline-offset: 0;
586
+ border-radius: 4px;
587
+ box-shadow:
588
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
589
+ 0px 0px 0px 2px var(--_primary-100);
590
+ border: 1px solid var(--_primary-300);
591
+ }
592
+ }
593
+ }
594
+ }
595
+ }
430
596
  }
431
597
  .product-actual-price-container {
432
598
  .product-actual-discount {
@@ -31,7 +31,7 @@
31
31
  .sizechart__buttons__wrapper {
32
32
  width: 100%;
33
33
  height: 100%;
34
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
34
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
35
35
 
36
36
  display: flex;
37
37
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
@@ -45,6 +45,7 @@
45
45
 
46
46
  .btn__with__text {
47
47
  white-space: nowrap;
48
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
48
49
  }
49
50
 
50
51
  .show__more__btn__wrapper {
package/dist/section.scss CHANGED
@@ -122,7 +122,10 @@ section {
122
122
  }
123
123
  &[data-div-type="cms-section-wrapper"] {
124
124
  // max-width: var(--_sf-wp-mx-wt);
125
- max-width: min(100%, prepareMediaVariable(--_ctm-sec-lt-wh)) !important;
125
+ max-width: var(
126
+ --_sf-dt-sec-mw,
127
+ min(100%, prepareMediaVariable(--_ctm-sec-lt-wh))
128
+ ) !important;
126
129
  // min-height: prepareMediaVariable(--_ctm-sec-lt-mn-ht);
127
130
  margin-inline: auto;
128
131
  position: var(--_p-relative);
@@ -132,6 +135,10 @@ section {
132
135
  padding: prepareMediaVariable(--_ctm-sec-lt-pg);
133
136
  column-gap: prepareMediaVariable(--_ctm-sec-lt-cn-gp);
134
137
  row-gap: prepareMediaVariable(--_ctm-sec-lt-rw-gp);
138
+
139
+ &[data-vf="true"] {
140
+ --_sf-dt-sec-mw: 100%;
141
+ }
135
142
  }
136
143
  }
137
144
  }