@sc-360-v2/storefront-cms-library 0.3.47 → 0.3.49

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,26 +1,27 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
3
4
 
4
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
5
6
  $resizeActive: '[data-cms-element-resizer="true"]';
6
7
  [data-div-type="element"] {
7
8
  &[data-element-type="userElements"] {
8
- width: var(
9
- --_sf-mob-el-wh-st-mx,
10
- var(
11
- --_sf-tab-el-wh-st-mx,
12
- var(
13
- --_sf-el-wh-st-mx,
14
- calc(
15
- 1% *
16
- var(
17
- --_ctm-mob-bun-ele-nw-wh-vl,
18
- var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh)))
19
- )
20
- )
21
- )
22
- )
23
- );
9
+ // width: var(
10
+ // --_sf-mob-el-wh-st-mx,
11
+ // var(
12
+ // --_sf-tab-el-wh-st-mx,
13
+ // var(
14
+ // --_sf-el-wh-st-mx,
15
+ // calc(
16
+ // 1% *
17
+ // var(
18
+ // --_ctm-mob-bun-ele-nw-wh-vl,
19
+ // var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh)))
20
+ // )
21
+ // )
22
+ // )
23
+ // )
24
+ // );
24
25
 
25
26
  height: auto;
26
27
 
@@ -32,60 +33,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
32
33
  )
33
34
  );
34
35
 
35
- background-color: var(
36
- --_ctm-mob-bun-dn-bd-cr,
37
- var(--_ctm-tab-bun-dn-bd-cr, var(--_ctm-bun-dn-bd-cr))
38
- );
39
- background-image: var(
40
- --_ctm-mob-bun-dn-bd-ie,
41
- var(--_ctm-tab-bun-dn-bd-ie, var(--_ctm-bun-dn-bd-ie))
42
- );
43
- background-attachment: var(
44
- --_ctm-mob-bun-dn-bd-at,
45
- var(--_ctm-tab-bun-dn-bd-at, var(--_ctm-bun-dn-bd-at))
46
- );
47
- background-position: var(
48
- --_ctm-mob-bun-dn-bd-pn,
49
- var(--_ctm-tab-bun-dn-bd-pn, var(--_ctm-bun-dn-bd-pn))
50
- );
51
- background-repeat: var(
52
- --_ctm-mob-bun-dn-bd-rt,
53
- var(--_ctm-tab-bun-dn-bd-rt, var(--_ctm-bun-dn-bd-rt))
54
- );
55
- background-size: var(
56
- --_ctm-mob-bun-dn-bd-se,
57
- var(--_ctm-tab-bun-dn-bd-se, var(--_ctm-bun-dn-bd-se))
58
- );
59
- padding: var(--_ctm-mob-bun-lt-pg, var(--_ctm-tab-bun-lt-pg, var(--_ctm-bun-lt-pg)));
60
-
61
- border-color: var(
62
- --_ctm-mob-bun-dn-br-cr,
63
- var(--_ctm-tab-bun-dn-br-cr, var(--_ctm-bun-dn-br-cr))
64
- );
65
-
66
- border-style: var(
67
- --_ctm-mob-bun-dn-br-se,
68
- var(--_ctm-tab-bun-dn-br-se, var(--_ctm-bun-dn-br-se))
69
- );
70
-
71
- border-width: var(
72
- --_ctm-mob-bun-dn-br-wh,
73
- var(--_ctm-tab-bun-dn-br-wh, var(--_ctm-bun-dn-br-wh))
74
- );
75
-
76
- border-radius: var(
77
- --_ctm-mob-bun-dn-br-rs,
78
- var(--_ctm-tab-bun-dn-br-rs, var(--_ctm-bun-dn-br-rs))
79
- );
80
-
81
- box-shadow: var(
82
- --_show-shadow,
83
- var(--_ctm-mob-bun-dn-sw-ae, var(--_ctm-tab-bun-dn-sw-ae, var(--_ctm-bun-dn-sw-ae)))
84
- var(--_ctm-mob-bun-dn-sw-br, var(--_ctm-tab-bun-dn-sw-br, var(--_ctm-bun-dn-sw-br)))
85
- var(--_ctm-mob-bun-dn-sw-sd, var(--_ctm-tab-bun-dn-sw-sd, var(--_ctm-bun-dn-sw-sd)))
86
- var(--_ctm-mob-bun-dn-sw-cr, var(--_ctm-tab-bun-dn-sw-cr, var(--_ctm-bun-dn-sw-cr)))
87
- );
88
-
89
36
  & > div {
90
37
  &.wrapper {
91
38
  width: 100%;
@@ -625,22 +572,72 @@ $resizeActive: '[data-cms-element-resizer="true"]';
625
572
  }
626
573
  }
627
574
  }
628
-
629
- .user_elements_horizontal_container {
575
+ .user__element__container {
630
576
  display: flex;
631
577
  flex-direction: column;
632
- width: 100%;
633
- border: 1px solid #d0d5dd;
634
- border-radius: 6px;
635
- padding: 24px;
636
- gap: 16px;
578
+ gap: prepareMediaVariable(--_ctm-lt-im-sg);
579
+ background-color: var(
580
+ --_ctm-mob-dn-wt-se-bd-cr,
581
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
582
+ );
583
+
584
+ border-color: var(
585
+ --_ctm-mob-dn-wt-se-br-cr,
586
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
587
+ );
588
+
589
+ border-style: var(
590
+ --_ctm-mob-dn-wt-se-br-se,
591
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
592
+ );
593
+
594
+ border-width: var(
595
+ --_ctm-mob-dn-wt-se-br-wh,
596
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
597
+ );
598
+
599
+ border-radius: var(
600
+ --_ctm-mob-dn-wt-se-br-rs,
601
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
602
+ );
603
+
604
+ box-shadow: var(
605
+ --_show-shadow,
606
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
607
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
608
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
609
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
610
+ );
611
+
612
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
613
+ .user__element__item {
614
+ position: relative;
615
+ }
637
616
 
638
- &.vertical {
639
- flex-direction: row;
617
+ &[data-show-divider="true"] {
618
+ .user__element__item:not(:last-child)::before {
619
+ content: "";
620
+ position: absolute;
621
+ left: 0;
622
+ right: 0;
623
+ bottom: calc(
624
+ -1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
625
+ );
640
626
 
627
+ height: var(
628
+ --_ctm-mob-dn-wt-se-dr-wt,
629
+ var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
630
+ );
631
+ background-color: var(
632
+ --_ctm-mob-dn-wt-se-dr-cr,
633
+ var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
634
+ );
635
+ }
636
+ }
637
+ &[data-display-type="Vertical"] {
641
638
  &[data-content-alignment="Vertical"] {
642
639
  flex-direction: column;
643
- max-width: 350px;
640
+ // max-width: 350px;
644
641
  }
645
642
 
646
643
  .user_elements_user_info_wrapper {
@@ -668,25 +665,20 @@ $resizeActive: '[data-cms-element-resizer="true"]';
668
665
  .user_elements_quota_wrapper {
669
666
  flex-direction: column;
670
667
  align-items: flex-start;
671
- height: fit-content;
672
- background-color: var(--_ctm-dn-qa-dn-fl-ad-oy-bd-cr);
673
- border-color: var(--_ctm-dn-qa-dn-fl-ad-oy-br-cr);
674
- border-radius: var(--_ctm-dn-qa-dn-fl-ad-oy-br-rs);
675
- border-style: var(--_ctm-dn-qa-dn-fl-ad-oy-br-se);
676
- border-width: var(--_ctm-dn-qa-dn-fl-ad-oy-br-wh);
677
- box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br)
678
- var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
668
+
669
+ position: relative;
679
670
 
680
671
  .quote_vertical_scroll_wrapper {
681
- overflow-y: scroll;
682
- gap: var(--_ctm-lt-qa-im-sg);
672
+ overflow-y: auto;
673
+ gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
683
674
  display: flex;
684
675
  width: 100%;
685
- max-height: 250px;
676
+ // max-height: 250px;
686
677
  flex-direction: column;
687
678
 
688
679
  .quote_item_wrapper {
689
680
  flex-direction: column;
681
+ position: relative;
690
682
 
691
683
  .quote_info_wrapper {
692
684
  justify-content: space-between;
@@ -698,6 +690,61 @@ $resizeActive: '[data-cms-element-resizer="true"]';
698
690
  }
699
691
  }
700
692
  }
693
+ .quota_label_wrapper {
694
+ width: 100%;
695
+ position: relative;
696
+ &::after {
697
+ content: "";
698
+ position: absolute;
699
+ left: 0;
700
+ right: 0;
701
+ bottom: calc(
702
+ -1 *
703
+ (
704
+ var(
705
+ --_ctm-mob-lt-qa-im-sg,
706
+ var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
707
+ ) /
708
+ 2
709
+ )
710
+ );
711
+ height: var(
712
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
713
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
714
+ );
715
+ background-color: var(
716
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
717
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
718
+ );
719
+ }
720
+ }
721
+ &[data-show-divider="true"] {
722
+ .quote_item_wrapper:not(:last-child)::before {
723
+ content: "";
724
+ position: absolute;
725
+ left: 0;
726
+ right: 0;
727
+ bottom: calc(
728
+ -1 *
729
+ (
730
+ var(
731
+ --_ctm-mob-lt-qa-im-sg,
732
+ var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
733
+ ) /
734
+ 2
735
+ )
736
+ );
737
+
738
+ height: var(
739
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
740
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
741
+ );
742
+ background-color: var(
743
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
744
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
745
+ );
746
+ }
747
+ }
701
748
 
702
749
  .quote_vertical_scroll_wrap {
703
750
  height: auto;
@@ -730,38 +777,56 @@ $resizeActive: '[data-cms-element-resizer="true"]';
730
777
  .user_elements_allowance_wrapper {
731
778
  flex-direction: column;
732
779
  align-items: flex-start;
733
- background-color: var(--_ctm-dn-ae-dn-fl-ad-oy-bd-cr);
734
- border-color: var(--_ctm-dn-ae-dn-fl-ad-oy-br-cr);
735
- border-radius: var(--_ctm-dn-ae-dn-fl-ad-oy-br-rs);
736
- border-style: var(--_ctm-dn-ae-dn-fl-ad-oy-br-se);
737
- border-width: var(--_ctm-dn-ae-dn-fl-ad-oy-br-wh);
738
- box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br)
739
- var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
780
+ position: relative;
740
781
 
741
782
  .allowance_vertical_scroll_wrapper {
742
- overflow-y: scroll;
743
- gap: var(--_ctm-lt-qa-im-sg);
783
+ overflow-y: auto;
784
+ gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
744
785
  display: flex;
745
786
  width: 100%;
746
- max-height: 250px;
747
787
  flex-direction: column;
748
788
 
749
789
  .allowance_item_wrapper {
750
790
  flex-direction: column;
791
+ position: relative;
751
792
 
752
793
  .allowance_info_wrapper {
753
794
  justify-content: space-between;
754
795
  }
796
+ }
797
+ }
755
798
 
756
- .allowance_divider {
757
- width: 100%;
758
- height: 1px;
759
- }
799
+ .allowance_label_wrapper {
800
+ width: 100%;
801
+ position: relative;
802
+ &::after {
803
+ content: "";
804
+ position: absolute;
805
+ left: 0;
806
+ right: 0;
807
+ bottom: calc(
808
+ -1 *
809
+ (
810
+ var(
811
+ --_ctm-mob-lt-ae-im-sg,
812
+ var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
813
+ ) /
814
+ 2
815
+ )
816
+ );
817
+ height: var(
818
+ --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-wt,
819
+ var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
820
+ );
821
+ background-color: var(
822
+ --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
823
+ var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
824
+ );
760
825
  }
761
826
  }
762
827
 
763
828
  .allowance_vertical_scroll_wrap {
764
- gap: var(--_ctm-lt-qa-im-sg);
829
+ gap: var(--_ctm-lt-ae-im-sg);
765
830
  display: flex;
766
831
  width: 100%;
767
832
  flex-direction: column;
@@ -772,11 +837,33 @@ $resizeActive: '[data-cms-element-resizer="true"]';
772
837
  .allowance_info_wrapper {
773
838
  justify-content: space-between;
774
839
  }
840
+ }
841
+ }
842
+ &[data-show-divider="true"] {
843
+ .allowance_item_wrapper:not(:last-child)::before {
844
+ content: "";
845
+ position: absolute;
846
+ left: 0;
847
+ right: 0;
848
+ bottom: calc(
849
+ -1 *
850
+ (
851
+ var(
852
+ --_ctm-mob-lt-ae-im-sg,
853
+ var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
854
+ ) /
855
+ 2
856
+ )
857
+ );
775
858
 
776
- .allowance_divider {
777
- width: 100%;
778
- height: 1px;
779
- }
859
+ height: var(
860
+ --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-wt,
861
+ var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
862
+ );
863
+ background-color: var(
864
+ --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
865
+ var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
866
+ );
780
867
  }
781
868
  }
782
869
  }
@@ -784,31 +871,28 @@ $resizeActive: '[data-cms-element-resizer="true"]';
784
871
  .user_elements_user_info_secondary_wrapper {
785
872
  flex-direction: column;
786
873
  align-items: flex-start;
787
- height: max-content;
788
- background-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-bd-cr);
789
- border-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-cr);
790
- border-radius: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
791
- border-style: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-se);
792
- border-width: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-wh);
793
- box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae)
794
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd)
795
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
796
-
797
- .overview_text {
798
- color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-cr);
799
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-fy);
800
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se);
801
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se-ic);
802
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-wt);
803
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-le-ht);
804
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-lr-sg);
805
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-an);
806
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ue);
807
- }
808
874
 
809
- .shipping_address_wrapper {
810
- flex-direction: row;
811
- gap: 6px;
875
+ .secondary_vertical_scroll_wrapper {
876
+ overflow-y: auto;
877
+ gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
878
+ display: flex;
879
+ width: 100%;
880
+ // max-height: 250px;
881
+ flex-direction: column;
882
+
883
+ .secondary_item_wrapper {
884
+ flex-direction: column;
885
+ position: relative;
886
+
887
+ .quote_info_wrapper {
888
+ justify-content: space-between;
889
+ }
890
+
891
+ .quota_divider {
892
+ width: 100%;
893
+ height: 1px;
894
+ }
895
+ }
812
896
  }
813
897
 
814
898
  .secondary_info_divider {
@@ -833,6 +917,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
833
917
  }
834
918
  }
835
919
 
920
+ // without conditions
921
+
836
922
  .user_elements_user_info_wrapper {
837
923
  display: flex;
838
924
  justify-content: space-between;
@@ -972,7 +1058,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
972
1058
  flex-direction: row;
973
1059
  width: 100%;
974
1060
  align-items: center;
975
- gap: 16px;
1061
+
976
1062
  background-color: var(--_ctm-dn-qa-dn-fl-ad-oy-bd-cr);
977
1063
  border-color: var(--_ctm-dn-qa-dn-fl-ad-oy-br-cr);
978
1064
  border-radius: var(--_ctm-dn-qa-dn-fl-ad-oy-br-rs);
@@ -980,7 +1066,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
980
1066
  border-width: var(--_ctm-dn-qa-dn-fl-ad-oy-br-wh);
981
1067
  box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br)
982
1068
  var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
983
-
1069
+ gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
984
1070
  .quota_label_wrapper {
985
1071
  display: flex;
986
1072
  flex: 1 0 0;
@@ -1079,7 +1165,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1079
1165
  flex-direction: row;
1080
1166
  width: 100%;
1081
1167
  align-items: center;
1082
- gap: 16px;
1168
+
1083
1169
  background-color: var(--_ctm-dn-ae-dn-fl-ad-oy-bd-cr);
1084
1170
  border-color: var(--_ctm-dn-ae-dn-fl-ad-oy-br-cr);
1085
1171
  border-radius: var(--_ctm-dn-ae-dn-fl-ad-oy-br-rs);
@@ -1087,7 +1173,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1087
1173
  border-width: var(--_ctm-dn-ae-dn-fl-ad-oy-br-wh);
1088
1174
  box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br)
1089
1175
  var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
1090
-
1176
+ gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
1091
1177
  .allowance_label_wrapper {
1092
1178
  display: flex;
1093
1179
  flex: 1 0 0;
@@ -1172,13 +1258,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1172
1258
  text-decoration: var(--_ctm-dn-ae-dn-ae-iy-dn-ue);
1173
1259
  }
1174
1260
  }
1175
-
1176
- .allowance_divider {
1177
- content: "";
1178
- height: auto;
1179
- width: 1px;
1180
- background-color: #d0d5dd;
1181
- }
1182
1261
  }
1183
1262
  }
1184
1263
 
@@ -1186,7 +1265,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1186
1265
  display: flex;
1187
1266
  width: 100%;
1188
1267
  align-items: center;
1189
- gap: 16px;
1190
1268
  background-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-bd-cr);
1191
1269
  border-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-cr);
1192
1270
  border-radius: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
@@ -1195,38 +1273,48 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1195
1273
  box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae)
1196
1274
  var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd)
1197
1275
  var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
1276
+ gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
1277
+ .shipping_address_label {
1278
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1279
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1280
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1281
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1282
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1283
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1284
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1285
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1286
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1287
+ }
1288
+
1289
+ .shipping_address {
1290
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1291
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1292
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1293
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1294
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1295
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1296
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1297
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1298
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1299
+ }
1300
+ .secondary_label {
1301
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-cr);
1302
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-fy);
1303
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se);
1304
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se-ic);
1305
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-wt);
1306
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-le-ht);
1307
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-lr-sg);
1308
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-an);
1309
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ue);
1310
+ }
1198
1311
 
1199
- .shipping_address_wrapper {
1312
+ .secondary_vertical_scroll_wrapper {
1313
+ overflow-y: auto;
1314
+ gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
1200
1315
  display: flex;
1316
+ width: 100%;
1201
1317
  flex-direction: column;
1202
- gap: 4px;
1203
- flex: 1 0 0;
1204
- align-self: stretch;
1205
- justify-content: flex-start;
1206
-
1207
- .shipping_address_label {
1208
- color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1209
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1210
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1211
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1212
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1213
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1214
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1215
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1216
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1217
- }
1218
-
1219
- .shipping_address {
1220
- color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1221
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1222
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1223
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1224
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1225
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1226
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1227
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1228
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1229
- }
1230
1318
  }
1231
1319
 
1232
1320
  .secondary_info_divider {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.3.47",
3
+ "version": "0.3.49",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {