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

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.
@@ -208,7 +208,6 @@ $button-padding: 6px 12px;
208
208
  justify-content: center;
209
209
  flex: 1 0 0;
210
210
  margin: $spacing-md 0px;
211
-
212
211
  &.disabled {
213
212
  opacity: 0.5;
214
213
  pointer-events: none;
@@ -109,33 +109,49 @@ $link-color: #243dc6;
109
109
  }
110
110
 
111
111
  // customization tree
112
- .lightbox-overlay {
113
- background: red;
114
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
115
- border-radius: 6px;
116
- padding: 10px;
117
- min-width: 200px;
118
- height: 100px;
119
- transition: all 0.3s ease;
120
112
 
121
- &.top {
122
- transform-origin: bottom;
113
+ .modal-overlay-main-element {
114
+ .modal-overlay-backdrop {
115
+ position: fixed;
116
+ top: 0;
117
+ left: 0;
118
+ width: 100%;
119
+ height: 100%;
120
+ background-color: rgba(0, 0, 0, 0.2);
121
+ z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
122
+ animation: fadeIn 0.4s forwards;
123
+ cursor: auto;
123
124
  }
124
-
125
- &.bottom {
126
- transform-origin: top;
127
- }
128
-
129
- .custom_attr_lb_img img {
130
- max-width: 100%;
131
- height: auto;
132
- display: block;
133
- }
134
-
135
- .custom_attr_lb_footer {
136
- margin-top: 8px;
137
- font-size: 12px;
138
- text-align: center;
139
- color: #555;
125
+ .modal-overlay-container {
126
+ position: fixed;
127
+ top: 50%;
128
+ left: 50%;
129
+ transform: translate(-50%, -50%);
130
+ background-color: var(--_base-white);
131
+ width: var(--_sf-ml-wh, 450px);
132
+ max-width: 250px;
133
+ height: 300px;
134
+ padding: 12px;
135
+ border-radius: 6px;
136
+ display: flex;
137
+ flex-direction: column;
138
+ gap: 12px;
139
+ z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
140
+ cursor: auto;
141
+ .custom_image_overlay {
142
+ .custom_image_container {
143
+ height: 230px;
144
+ width: 100%;
145
+ background-color: var(--_gray-200);
146
+ }
147
+ .custom_image_footer {
148
+ width: 100%;
149
+ background-color: var(-_base-white);
150
+ display: flex;
151
+ justify-content: space-between;
152
+ align-items: center;
153
+ padding: 16px;
154
+ }
155
+ }
140
156
  }
141
157
  }
@@ -570,19 +570,7 @@
570
570
  justify-content: space-between;
571
571
  transform: translate(-50%, -50%);
572
572
  // padding-left: 20px;
573
- &[data-control-type="Side"] {
574
- .left-button,
575
- .right-button {
576
- background-color: transparent;
577
- }
578
- }
579
- &[data-background-shape="Round"] {
580
- .left-button,
581
- .right-button {
582
- background-color: #f2f5f5;
583
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
584
- }
585
- }
573
+
586
574
  &[data-control-type="Bottom-Overflow"] {
587
575
  transform: translateX(-50%);
588
576
  width: 100%;
@@ -599,90 +587,104 @@
599
587
  gap: 12px;
600
588
  margin-top: 10px;
601
589
  }
602
- .left-button {
603
- padding: 10px;
604
- border-radius: 50%;
605
- border: none;
606
- width: var(
607
- --_ctm-mob-dn-pn-as-aw-se,
608
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
609
- );
610
- height: var(
611
- --_ctm-mob-dn-pn-as-aw-se,
612
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
613
- );
590
+ }
591
+ .left-button {
592
+ padding: 10px;
593
+ border-radius: 50%;
594
+ border: none;
595
+ width: var(
596
+ --_ctm-mob-dn-pn-as-aw-se,
597
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
598
+ );
599
+ height: var(
600
+ --_ctm-mob-dn-pn-as-aw-se,
601
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
602
+ );
614
603
 
615
- display: flex;
616
- align-items: center;
617
- justify-content: center;
618
- cursor: pointer;
619
- outline: none;
620
- margin-left: 12px;
621
- &:disabled {
622
- & svg {
623
- path {
624
- stroke: rgb(192, 192, 192);
625
- }
604
+ display: flex;
605
+ align-items: center;
606
+ justify-content: center;
607
+ cursor: pointer;
608
+ outline: none;
609
+ margin-left: 12px;
610
+ &:disabled {
611
+ & svg {
612
+ path {
613
+ stroke: rgb(192, 192, 192);
626
614
  }
627
615
  }
628
616
  }
629
- .right-button {
630
- border-radius: 50%;
631
- border: none;
632
- width: var(
633
- --_ctm-mob-dn-pn-as-aw-se,
634
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
635
- );
636
- height: var(
637
- --_ctm-mob-dn-pn-as-aw-se,
638
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
639
- );
617
+ }
618
+ .right-button {
619
+ border-radius: 50%;
620
+ border: none;
621
+ width: var(
622
+ --_ctm-mob-dn-pn-as-aw-se,
623
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
624
+ );
625
+ height: var(
626
+ --_ctm-mob-dn-pn-as-aw-se,
627
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
628
+ );
640
629
 
641
- display: flex;
642
- align-items: center;
643
- justify-content: center;
644
- cursor: pointer;
645
- outline: none;
646
- margin-right: 12px;
647
- padding: 10px;
648
-
649
- &:disabled {
650
- & svg {
651
- path {
652
- stroke: rgb(192, 192, 192);
653
- }
630
+ display: flex;
631
+ align-items: center;
632
+ justify-content: center;
633
+ cursor: pointer;
634
+ outline: none;
635
+ margin-right: 12px;
636
+ padding: 10px;
637
+
638
+ &:disabled {
639
+ & svg {
640
+ path {
641
+ stroke: rgb(192, 192, 192);
654
642
  }
655
643
  }
656
644
  }
657
- .icon {
658
- display: flex;
645
+ }
646
+ .icon {
647
+ display: flex;
659
648
 
660
- svg {
661
- width: calc(
662
- var(
663
- --_ctm-mob-dn-pn-as-aw-se,
664
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
665
- ) *
666
- 0.5
667
- );
668
- height: calc(
669
- var(
670
- --_ctm-mob-dn-pn-as-aw-se,
671
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
672
- ) *
673
- 0.5
674
- );
649
+ svg {
650
+ width: calc(
651
+ var(
652
+ --_ctm-mob-dn-pn-as-aw-se,
653
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
654
+ ) *
655
+ 0.5
656
+ );
657
+ height: calc(
658
+ var(
659
+ --_ctm-mob-dn-pn-as-aw-se,
660
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
661
+ ) *
662
+ 0.5
663
+ );
675
664
 
676
- path {
677
- stroke: var(
678
- --_ctm-mob-dn-pn-as-aw-cr,
679
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
680
- );
681
- }
665
+ path {
666
+ stroke: var(
667
+ --_ctm-mob-dn-pn-as-aw-cr,
668
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
669
+ );
682
670
  }
683
671
  }
684
672
  }
685
673
 
674
+ &[data-control-type="Side"] {
675
+ .left-button,
676
+ .right-button {
677
+ background-color: transparent;
678
+ }
679
+ }
680
+ &[data-background-shape="Round"] {
681
+ .left-button,
682
+ .right-button {
683
+ background-color: #f2f5f5;
684
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
685
+ }
686
+ }
687
+
686
688
  &[data-control-type="Side"] {
687
689
  .embla__viewport {
688
690
  width: calc(100% - 120px);
@@ -4,7 +4,8 @@
4
4
  [data-div-type="element"] {
5
5
  &[data-element-type="image"],
6
6
  &[data-element-type="brandImage"],
7
- &[data-element-type="categoryImage"] {
7
+ &[data-element-type="categoryImage"],
8
+ &[data-element-type="productBrandImage"] {
8
9
  cursor: pointer;
9
10
  // width: var(--_lt-wh);
10
11
  // height: var(--_lt-ht);
@@ -3,7 +3,9 @@
3
3
  @use "./functions.scss" as *;
4
4
 
5
5
  [data-div-type="element"] {
6
- &[data-element-type="languageMenu"] {
6
+ &[data-element-type="languageMenu"],
7
+ &[data-element-type="currencySelector"],
8
+ &[data-element-type="warehouseSelector"] {
7
9
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
8
10
 
9
11
  & > .wrapper {
package/dist/modal.scss CHANGED
@@ -166,7 +166,8 @@ $active_btn_text_color: #fff;
166
166
  justify-content: center;
167
167
 
168
168
  &:hover {
169
- background-color: darken(#d92d20, 5%);
169
+ // background-color: darken(#d92d20, 5%);
170
+ background-color: color-mix(in srgb, #d92d20 95%, var(--_base-black) 5%);
170
171
  }
171
172
  }
172
173
  }
@@ -75,7 +75,7 @@ $VariableTypes: (
75
75
  @if ($type != maxHeight) {
76
76
  &#{$elementSelector} {
77
77
  &:is(:not(#{convertListToCommaSeparateString($prefixList)})) {
78
- #{$var}: #{prepareMediaVariable(--_ctm-#{map.get($VariableTypes, $type), $defaultValue})};
78
+ #{$var}: #{prepareMediaVariable(--_ctm-#{map.get($VariableTypes, $type)}, $defaultValue)};
79
79
  }
80
80
  }
81
81
  }
@@ -464,6 +464,7 @@
464
464
  }
465
465
  }
466
466
  }
467
+
467
468
  .embla {
468
469
  width: 100%;
469
470
  height: 100%;
@@ -687,26 +688,16 @@
687
688
  justify-content: space-between;
688
689
  transform: translate(-50%, -50%);
689
690
  // padding-left: 20px;
690
- &[data-control-type="Side"] {
691
- .left-button,
692
- .right-button {
693
- background-color: transparent;
694
- }
695
- }
696
- &[data-background-shape="Round"] {
697
- .left-button,
698
- .right-button {
699
- background-color: #f2f5f5;
700
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
701
- }
702
- }
691
+
703
692
  &[data-control-type="Bottom-Overflow"] {
704
693
  transform: translateX(-50%);
705
694
  width: 100%;
706
695
  justify-content: center;
707
696
  gap: 12px;
697
+ // top: unset;
698
+ // bottom: 6px;
699
+ bottom: 10px;
708
700
  top: unset;
709
- bottom: 6px;
710
701
  }
711
702
  &[data-control-type="Bottom"] {
712
703
  transform: unset;
@@ -716,88 +707,102 @@
716
707
  gap: 12px;
717
708
  margin-top: 10px;
718
709
  }
719
- .left-button {
720
- padding: 10px;
721
- border-radius: 50%;
722
- border: none;
723
- width: var(
724
- --_ctm-mob-dn-pn-as-aw-se,
725
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
726
- );
727
- height: var(
728
- --_ctm-mob-dn-pn-as-aw-se,
729
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
730
- );
731
-
732
- display: flex;
733
- align-items: center;
734
- justify-content: center;
735
- cursor: pointer;
736
- outline: none;
737
- margin-left: 12px;
738
- &:disabled {
739
- & svg {
740
- path {
741
- stroke: rgb(192, 192, 192);
742
- }
743
- }
744
- }
710
+ }
711
+ &[data-control-type="Side"] {
712
+ .left-button,
713
+ .right-button {
714
+ background-color: transparent;
745
715
  }
716
+ }
717
+ &[data-background-shape="Round"] {
718
+ .left-button,
746
719
  .right-button {
747
- border-radius: 50%;
748
- border: none;
749
- width: var(
750
- --_ctm-mob-dn-pn-as-aw-se,
751
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
752
- );
753
- height: var(
754
- --_ctm-mob-dn-pn-as-aw-se,
755
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
756
- );
720
+ background-color: #f2f5f5;
721
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
722
+ }
723
+ }
757
724
 
758
- display: flex;
759
- align-items: center;
760
- justify-content: center;
761
- cursor: pointer;
762
- outline: none;
763
- margin-right: 12px;
764
- padding: 10px;
765
-
766
- &:disabled {
767
- & svg {
768
- path {
769
- stroke: rgb(192, 192, 192);
770
- }
725
+ .left-button {
726
+ padding: 10px;
727
+ border-radius: 50%;
728
+ border: none;
729
+ width: var(
730
+ --_ctm-mob-dn-pn-as-aw-se,
731
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
732
+ );
733
+ height: var(
734
+ --_ctm-mob-dn-pn-as-aw-se,
735
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
736
+ );
737
+
738
+ display: flex;
739
+ align-items: center;
740
+ justify-content: center;
741
+ cursor: pointer;
742
+ outline: none;
743
+ margin-left: 12px;
744
+ &:disabled {
745
+ & svg {
746
+ path {
747
+ stroke: rgb(192, 192, 192);
771
748
  }
772
749
  }
773
750
  }
774
- .icon {
775
- display: flex;
776
- svg {
777
- width: calc(
778
- var(
779
- --_ctm-mob-dn-pn-as-aw-se,
780
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
781
- ) *
782
- 0.5
783
- );
784
- height: calc(
785
- var(
786
- --_ctm-mob-dn-pn-as-aw-se,
787
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
788
- ) *
789
- 0.5
790
- );
751
+ }
752
+ .right-button {
753
+ border-radius: 50%;
754
+ border: none;
755
+ width: var(
756
+ --_ctm-mob-dn-pn-as-aw-se,
757
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
758
+ );
759
+ height: var(
760
+ --_ctm-mob-dn-pn-as-aw-se,
761
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
762
+ );
763
+
764
+ display: flex;
765
+ align-items: center;
766
+ justify-content: center;
767
+ cursor: pointer;
768
+ outline: none;
769
+ margin-right: 12px;
770
+ padding: 10px;
791
771
 
772
+ &:disabled {
773
+ & svg {
792
774
  path {
793
- stroke: var(
794
- --_ctm-mob-dn-pn-as-aw-cr,
795
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
796
- );
775
+ stroke: rgb(192, 192, 192);
797
776
  }
798
777
  }
799
778
  }
800
779
  }
780
+ .icon {
781
+ display: flex;
782
+ svg {
783
+ width: calc(
784
+ var(
785
+ --_ctm-mob-dn-pn-as-aw-se,
786
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
787
+ ) *
788
+ 0.5
789
+ );
790
+ height: calc(
791
+ var(
792
+ --_ctm-mob-dn-pn-as-aw-se,
793
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
794
+ ) *
795
+ 0.5
796
+ );
797
+
798
+ path {
799
+ stroke: var(
800
+ --_ctm-mob-dn-pn-as-aw-cr,
801
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
802
+ );
803
+ }
804
+ }
805
+ }
801
806
 
802
807
  &[data-control-type="Side"] {
803
808
  .embla__viewport {
@@ -839,6 +844,10 @@
839
844
  }
840
845
  }
841
846
  }
847
+ &[data-control-type="Side"] {
848
+ flex-direction: row;
849
+ align-items: center;
850
+ }
842
851
  .embla__dots {
843
852
  display: flex;
844
853
  flex-wrap: wrap;