@sc-360-v2/storefront-cms-library 0.3.42 → 0.3.43

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.
@@ -468,10 +468,26 @@ $resizeActive: '[data-cms-element-resizer="true"]';
468
468
  background-size: 100%;
469
469
  height: 130px;
470
470
  background-repeat: no-repeat;
471
- background-position: 0 0;
472
- background-color: var(--_base-white);
473
- border: 1px solid var(--_gray-100);
474
- border-radius: 4px;
471
+ background-position: center;
472
+ background-color: #eaeaea;
473
+
474
+ border-style: var(
475
+ --_ctm-mob-dn-pt-ie-ss-br-se,
476
+ var(--_ctm-tab-dn-pt-ie-ss-br-se, var(--_ctm-dn-pt-ie-ss-br-se))
477
+ );
478
+ border-width: var(
479
+ --_ctm-mob-dn-pt-ie-ss-br-wh,
480
+ var(--_ctm-tab-dn-pt-ie-ss-br-wh, var(--_ctm-dn-pt-ie-ss-br-wh))
481
+ );
482
+ // border: ;
483
+ border-radius: var(
484
+ --_ctm-mob-dn-pt-ie-ss-br-rs,
485
+ var(--_ctm-tab-dn-pt-ie-ss-br-rs, var(--_ctm-dn-pt-ie-ss-br-rs))
486
+ );
487
+ border-color: var(
488
+ --_ctm-mob-dn-pt-ie-ss-br-cr,
489
+ var(--_ctm-tab-dn-pt-ie-ss-br-cr, var(--_ctm-dn-pt-ie-ss-br-cr))
490
+ );
475
491
  }
476
492
 
477
493
  .product_info_wrapper {
@@ -492,15 +508,55 @@ $resizeActive: '[data-cms-element-resizer="true"]';
492
508
  word-break: normal;
493
509
 
494
510
  .product_title {
495
- color: var(--_gray-900);
496
- font-family: lato;
497
- font-size: 18px;
498
- font-weight: 700;
499
- line-height: 28px;
500
- width: 380px;
501
- white-space: nowrap;
502
- overflow: hidden;
511
+ // color: var(--_gray-900);
512
+ // font-family: lato;
513
+ // font-size: 18px;
514
+ // font-weight: 700;
515
+ // line-height: 28px;
516
+ // width: 380px;
517
+ // white-space: nowrap;
518
+ // overflow: hidden;
503
519
  text-overflow: ellipsis;
520
+
521
+ color: var(
522
+ --_ctm-mob-dn-pt-ne-ss-cr,
523
+ var(--_ctm-tab-dn-pt-ne-ss-cr, var(--_ctm-dn-pt-ne-ss-cr))
524
+ );
525
+ font-family: var(
526
+ --_sf-hr-ff,
527
+ var(
528
+ --_ctm-mob-dn-pt-ne-ss-ft-fy,
529
+ var(--_ctm-tab-dn-pt-ne-ss-ft-fy, var(--_ctm-dn-pt-ne-ss-ft-fy))
530
+ )
531
+ );
532
+ font-size: var(
533
+ --_ctm-mob-dn-pt-ne-ss-ft-se,
534
+ var(--_ctm-tab-dn-pt-ne-ss-ft-se, var(--_ctm-dn-pt-ne-ss-ft-se))
535
+ );
536
+ font-weight: var(
537
+ --_ctm-mob-dn-pt-ne-ss-ft-wt,
538
+ var(--_ctm-tab-dn-pt-ne-ss-ft-wt, var(--_ctm-dn-pt-ne-ss-ft-wt))
539
+ );
540
+ font-style: var(
541
+ --_ctm-mob-dn-pt-ne-ss-ft-se-ic,
542
+ var(--_ctm-tab-dn-pt-ne-ss-ft-se-ic, var(--_ctm-dn-pt-ne-ss-ft-se-ic))
543
+ );
544
+ text-align: var(
545
+ --_ctm-mob-dn-pt-ne-ss-tt-an,
546
+ var(--_ctm-tab-dn-pt-ne-ss-tt-an, var(--_ctm-dn-pt-ne-ss-tt-an))
547
+ );
548
+ letter-spacing: var(
549
+ --_ctm-mob-dn-pt-ne-ss-lr-sg,
550
+ var(--_ctm-tab-dn-pt-ne-ss-lr-sg, var(--_ctm-dn-pt-ne-ss-lr-sg))
551
+ );
552
+ line-height: var(
553
+ --_ctm-mob-dn-pt-ne-ss-le-ht,
554
+ var(--_ctm-tab-dn-pt-ne-ss-le-ht, var(--_ctm-dn-pt-ne-ss-le-ht))
555
+ );
556
+ text-decoration: var(
557
+ --_ctm-mob-dn-pt-ne-ss-ue,
558
+ var(--_ctm-tab-dn-pt-ne-ss-ue, var(--_ctm-dn-pt-ne-ss-ue))
559
+ );
504
560
  }
505
561
 
506
562
  .product_code {
@@ -511,11 +567,45 @@ $resizeActive: '[data-cms-element-resizer="true"]';
511
567
  flex-wrap: wrap;
512
568
 
513
569
  span {
514
- color: var(--_gray-600);
515
- font-size: 14px;
516
- font-weight: 400;
517
- line-height: 20px;
518
- white-space: nowrap;
570
+ color: var(
571
+ --_ctm-mob-dn-pt-in-ss-cr,
572
+ var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr))
573
+ );
574
+ font-family: var(
575
+ --_sf-hr-ff,
576
+ var(
577
+ --_ctm-mob-dn-pt-in-ss-ft-fy,
578
+ var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy))
579
+ )
580
+ );
581
+ font-size: var(
582
+ --_ctm-mob-dn-pt-in-ss-ft-se,
583
+ var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se))
584
+ );
585
+ font-weight: var(
586
+ --_ctm-mob-dn-pt-in-ss-ft-wt,
587
+ var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt))
588
+ );
589
+ font-style: var(
590
+ --_ctm-mob-dn-pt-in-ss-ft-se-ic,
591
+ var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic))
592
+ );
593
+ text-align: var(
594
+ --_ctm-mob-dn-pt-in-ss-tt-an,
595
+ var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an))
596
+ );
597
+ letter-spacing: var(
598
+ --_ctm-mob-dn-pt-in-ss-lr-sg,
599
+ var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg))
600
+ );
601
+ line-height: var(
602
+ --_ctm-mob-dn-pt-in-ss-le-ht,
603
+ var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht))
604
+ );
605
+ text-decoration: var(
606
+ --_ctm-mob-dn-pt-in-ss-ue,
607
+ var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
608
+ );
519
609
  &::after {
520
610
  content: "";
521
611
  display: inline-block;
@@ -538,10 +628,45 @@ $resizeActive: '[data-cms-element-resizer="true"]';
538
628
  flex-wrap: wrap;
539
629
  span {
540
630
  white-space: nowrap;
541
- font-size: 14px;
542
- font-weight: 400;
543
- color: var(--_gray-600);
544
- line-height: 20px;
631
+ color: var(
632
+ --_ctm-mob-dn-pt-in-ss-cr,
633
+ var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr))
634
+ );
635
+ font-family: var(
636
+ --_sf-hr-ff,
637
+ var(
638
+ --_ctm-mob-dn-pt-in-ss-ft-fy,
639
+ var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy))
640
+ )
641
+ );
642
+ font-size: var(
643
+ --_ctm-mob-dn-pt-in-ss-ft-se,
644
+ var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se))
645
+ );
646
+ font-weight: var(
647
+ --_ctm-mob-dn-pt-in-ss-ft-wt,
648
+ var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt))
649
+ );
650
+ font-style: var(
651
+ --_ctm-mob-dn-pt-in-ss-ft-se-ic,
652
+ var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic))
653
+ );
654
+ text-align: var(
655
+ --_ctm-mob-dn-pt-in-ss-tt-an,
656
+ var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an))
657
+ );
658
+ letter-spacing: var(
659
+ --_ctm-mob-dn-pt-in-ss-lr-sg,
660
+ var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg))
661
+ );
662
+ line-height: var(
663
+ --_ctm-mob-dn-pt-in-ss-le-ht,
664
+ var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht))
665
+ );
666
+ text-decoration: var(
667
+ --_ctm-mob-dn-pt-in-ss-ue,
668
+ var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
669
+ );
545
670
  &::after {
546
671
  content: "/";
547
672
  padding-left: 4px;
@@ -560,9 +685,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
560
685
  min-height: 28px;
561
686
  .svg_icon {
562
687
  display: flex;
563
- svg path {
564
- stroke: var(--_primary-400);
565
- }
688
+ // svg path {
689
+ // stroke: var(--_primary-400);
690
+ // }
566
691
  }
567
692
 
568
693
  .customization_button {
@@ -571,10 +696,45 @@ $resizeActive: '[data-cms-element-resizer="true"]';
571
696
  align-items: center;
572
697
  gap: 4px;
573
698
  white-space: nowrap;
574
- color: var(--_primary-400);
575
- font-size: 14px;
576
- font-weight: 400;
577
- line-height: 20px;
699
+ color: var(
700
+ --_ctm-mob-dn-pt-as-ss-cr,
701
+ var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr))
702
+ );
703
+ font-family: var(
704
+ --_sf-hr-ff,
705
+ var(
706
+ --_ctm-mob-dn-pt-as-ss-ft-fy,
707
+ var(--_ctm-tab-dn-pt-as-ss-ft-fy, var(--_ctm-dn-pt-as-ss-ft-fy))
708
+ )
709
+ );
710
+ font-size: var(
711
+ --_ctm-mob-dn-pt-as-ss-ft-se,
712
+ var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se))
713
+ );
714
+ font-weight: var(
715
+ --_ctm-mob-dn-pt-as-ss-ft-wt,
716
+ var(--_ctm-tab-dn-pt-as-ss-ft-wt, var(--_ctm-dn-pt-as-ss-ft-wt))
717
+ );
718
+ font-style: var(
719
+ --_ctm-mob-dn-pt-as-ss-ft-se-ic,
720
+ var(--_ctm-tab-dn-pt-as-ss-ft-se-ic, var(--_ctm-dn-pt-as-ss-ft-se-ic))
721
+ );
722
+ text-align: var(
723
+ --_ctm-mob-dn-pt-as-ss-tt-an,
724
+ var(--_ctm-tab-dn-pt-as-ss-tt-an, var(--_ctm-dn-pt-as-ss-tt-an))
725
+ );
726
+ letter-spacing: var(
727
+ --_ctm-mob-dn-pt-as-ss-lr-sg,
728
+ var(--_ctm-tab-dn-pt-as-ss-lr-sg, var(--_ctm-dn-pt-as-ss-lr-sg))
729
+ );
730
+ line-height: var(
731
+ --_ctm-mob-dn-pt-as-ss-le-ht,
732
+ var(--_ctm-tab-dn-pt-as-ss-le-ht, var(--_ctm-dn-pt-as-ss-le-ht))
733
+ );
734
+ text-decoration: var(
735
+ --_ctm-mob-dn-pt-as-ss-ue,
736
+ var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue))
737
+ );
578
738
  .attr_val_info_detail {
579
739
  b {
580
740
  margin-right: 4px;
@@ -585,7 +745,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
585
745
  transition: all 400ms linear;
586
746
  svg {
587
747
  path {
588
- stroke: var(--_primary-400);
748
+ stroke: var(
749
+ --_ctm-mob-dn-pt-as-ss-cr,
750
+ var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr))
751
+ );
589
752
  }
590
753
  width: 18px;
591
754
  height: 18px;
@@ -594,6 +757,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
594
757
  }
595
758
  }
596
759
  }
760
+ .attributes_validation_info_sec {
761
+ display: flex;
762
+ justify-content: center;
763
+ align-items: center;
764
+ gap: 4px;
765
+ white-space: nowrap;
766
+ b {
767
+ margin-right: 4px;
768
+ }
769
+ }
597
770
  .svg_icon svg {
598
771
  vertical-align: middle;
599
772
  }
@@ -714,12 +887,50 @@ $resizeActive: '[data-cms-element-resizer="true"]';
714
887
  }
715
888
 
716
889
  .product_price {
717
- color: var(--_gray-900);
718
- text-align: right;
719
- font-size: 20px;
720
- font-weight: 700;
721
- line-height: 30px;
890
+ // color: var(--_gray-900);
891
+ // text-align: right;
892
+ // font-size: 20px;
893
+ // font-weight: 700;
894
+ // line-height: 30px;
895
+ // white-space: nowrap;
896
+ // min-width: 80px;
722
897
  white-space: nowrap;
898
+ color: var(
899
+ --_ctm-mob-dn-pt-pe-ss-cr,
900
+ var(--_ctm-tab-dn-pt-pe-ss-cr, var(--_ctm-dn-pt-pe-ss-cr))
901
+ );
902
+ font-family: var(
903
+ --_sf-hr-ff,
904
+ var(
905
+ --_ctm-mob-dn-pt-pe-ss-ft-fy,
906
+ var(--_ctm-tab-dn-pt-pe-ss-ft-fy, var(--_ctm-dn-pt-pe-ss-ft-fy))
907
+ )
908
+ );
909
+ font-size: var(
910
+ --_ctm-mob-dn-pt-pe-ss-ft-se,
911
+ var(--_ctm-tab-dn-pt-pe-ss-ft-se, var(--_ctm-dn-pt-pe-ss-ft-se))
912
+ );
913
+ font-weight: var(
914
+ --_ctm-mob-dn-pt-pe-ss-ft-wt,
915
+ var(--_ctm-tab-dn-pt-pe-ss-ft-wt, var(--_ctm-dn-pt-pe-ss-ft-wt))
916
+ );
917
+ font-style: var(
918
+ --_ctm-mob-dn-pt-pe-ss-ft-se-ic,
919
+ var(--_ctm-tab-dn-pt-pe-ss-ft-se-ic, var(--_ctm-dn-pt-pe-ss-ft-se-ic))
920
+ );
921
+ text-align: right;
922
+ letter-spacing: var(
923
+ --_ctm-mob-dn-pt-pe-ss-lr-sg,
924
+ var(--_ctm-tab-dn-pt-pe-ss-lr-sg, var(--_ctm-dn-pt-pe-ss-lr-sg))
925
+ );
926
+ line-height: var(
927
+ --_ctm-mob-dn-pt-pe-ss-le-ht,
928
+ var(--_ctm-tab-dn-pt-pe-ss-le-ht, var(--_ctm-dn-pt-pe-ss-le-ht))
929
+ );
930
+ text-decoration: var(
931
+ --_ctm-mob-dn-pt-pe-ss-ue,
932
+ var(--_ctm-tab-dn-pt-pe-ss-ue, var(--_ctm-dn-pt-pe-ss-ue))
933
+ );
723
934
  min-width: 80px;
724
935
  }
725
936
  }
@@ -728,37 +939,132 @@ $resizeActive: '[data-cms-element-resizer="true"]';
728
939
  display: flex;
729
940
  align-items: center;
730
941
  gap: 16px;
731
- .delete_cart_icon {
942
+ .edit_icon {
732
943
  svg {
944
+ width: var(
945
+ --_ctm-mob-dn-pt-an-pt-an-et-in-se,
946
+ var(--_ctm-tab-dn-pt-an-pt-an-et-in-se, var(--_ctm-dn-pt-an-pt-an-et-in-se))
947
+ );
948
+ height: var(
949
+ --_ctm-mob-dn-pt-an-pt-an-et-in-se,
950
+ var(--_ctm-tab-dn-pt-an-pt-an-et-in-se, var(--_ctm-dn-pt-an-pt-an-et-in-se))
951
+ );
733
952
  path {
734
- stroke: var(--_error-500);
953
+ stroke: var(
954
+ --_ctm-mob-dn-pt-an-pt-an-et-in-c1,
955
+ var(--_ctm-tab-dn-pt-an-pt-an-et-in-c1, var(--_ctm-dn-pt-an-pt-an-et-in-c1))
956
+ );
735
957
  }
736
958
  }
737
959
  &:hover {
738
960
  svg {
961
+ width: var(
962
+ --_ctm-mob-dn-pt-an-pt-an-et-in-se,
963
+ var(--_ctm-tab-dn-pt-an-pt-an-et-in-se, var(--_ctm-dn-pt-an-pt-an-et-in-se))
964
+ );
965
+ height: var(
966
+ --_ctm-mob-dn-pt-an-pt-an-et-in-se,
967
+ var(--_ctm-tab-dn-pt-an-pt-an-et-in-se, var(--_ctm-dn-pt-an-pt-an-et-in-se))
968
+ );
739
969
  path {
740
- stroke: var(--_error-700);
970
+ stroke: var(
971
+ --_ctm-mob-dn-pt-an-pt-an-et-in-c1,
972
+ var(--_ctm-tab-dn-pt-an-pt-an-et-in-c1, var(--_ctm-dn-pt-an-pt-an-et-in-c1))
973
+ );
741
974
  }
742
975
  }
743
976
  }
744
977
  }
745
- .svg_icon {
746
- display: flex;
747
- justify-content: center;
748
- align-items: center;
749
-
978
+ .wishlist_icon {
979
+ svg {
980
+ width: var(
981
+ --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
982
+ var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
983
+ );
984
+ height: var(
985
+ --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
986
+ var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
987
+ );
988
+ path {
989
+ stroke: var(
990
+ --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
991
+ var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
992
+ );
993
+ }
994
+ }
750
995
  &:hover {
751
996
  svg {
997
+ width: var(
998
+ --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
999
+ var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
1000
+ );
1001
+ height: var(
1002
+ --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
1003
+ var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
1004
+ );
752
1005
  path {
753
- stroke: var(--_gray-900);
1006
+ stroke: var(
1007
+ --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
1008
+ var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
1009
+ );
754
1010
  }
755
1011
  }
756
1012
  }
1013
+ }
1014
+
1015
+ .delete_cart_icon {
757
1016
  svg {
1017
+ width: var(
1018
+ --_ctm-mob-dn-pt-an-pt-an-de-in-se,
1019
+ var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
1020
+ );
1021
+ height: var(
1022
+ --_ctm-mob-dn-pt-an-pt-an-de-in-se,
1023
+ var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
1024
+ );
758
1025
  path {
759
- stroke: var(--_gray-600);
1026
+ stroke: var(
1027
+ --_ctm-mob-dn-pt-an-pt-an-de-in-c1,
1028
+ var(--_ctm-tab-dn-pt-an-pt-an-de-in-c1, var(--_ctm-dn-pt-an-pt-an-de-in-c1))
1029
+ );
760
1030
  }
761
1031
  }
1032
+ &:hover {
1033
+ svg {
1034
+ width: var(
1035
+ --_ctm-mob-dn-pt-an-pt-an-de-in-se,
1036
+ var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
1037
+ );
1038
+ height: var(
1039
+ --_ctm-mob-dn-pt-an-pt-an-de-in-se,
1040
+ var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
1041
+ );
1042
+ path {
1043
+ stroke: var(
1044
+ --_ctm-mob-dn-pt-an-pt-an-de-in-c1,
1045
+ var(--_ctm-tab-dn-pt-an-pt-an-de-in-c1, var(--_ctm-dn-pt-an-pt-an-de-in-c1))
1046
+ );
1047
+ }
1048
+ }
1049
+ }
1050
+ }
1051
+ .svg_icon {
1052
+ display: flex;
1053
+ justify-content: center;
1054
+ align-items: center;
1055
+
1056
+ // &:hover {
1057
+ // svg {
1058
+ // path {
1059
+ // stroke: var(--_gray-900);
1060
+ // }
1061
+ // }
1062
+ // }
1063
+ // svg {
1064
+ // path {
1065
+ // stroke: var(--_gray-600);
1066
+ // }
1067
+ // }
762
1068
  }
763
1069
  .product_action_button {
764
1070
  display: flex;