@sc-360-v2/storefront-cms-library 0.2.75 → 0.2.76

package/dist/marchandiserSets.scss

@@ -5,26 +5,41 @@ $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
 [data-div-type="element"] {
   &[data-element-type="marchandiserSets"] {
-    // width: var(--_sf-con-nw-wh);
-    width: var(
-      --_sf-el-wh-st-mx,
-      calc(
-        1% *
-          var(
-            --_ctm-mob-march-ele-nw-wh-vl,
-            var(--_ctm-tab-march-ele-nw-wh-vl, var(--_ctm-march-ele-nw-wh-vl))
-          )
-      )
-    );
-    // width: calc(1% * var(--_ctm-prod-lt-wh, auto));
-    // width: ;
+    // width: 500px;
+    // height: 300px;
+    width: var(--_ctm-march-lt-wh);
+    // width: var(
+    //   --_sf-el-wh-st-mx,
+    //   calc(1% * var(--_ctm-mob-march-lt-wh, var(--_ctm-tab-march-lt-wh, var(--_ctm-march-lt-wh))))
+    // );
+    //width: 300px !important;
+    // height: var(--_ctm-march-lt-ht) !important;
 
-    // width: 100%;
-    // height: var(--_ctm-pro-lt-ht) !important;
-    // width: 100%;
-    height: auto;
     margin: var(--_ctm-march-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
-    background: var(--_ctm-march-dn-bd-cr);
+    background-color: var(
+      --_ctm-mob-march-dn-bd-cr,
+      var(--_ctm-tab-march-dn-bd-cr, var(--_ctm-march-dn-bd-cr))
+    );
+    background-image: var(
+      --_ctm-mob-march-dn-bd-ie,
+      var(--_ctm-tab-march-dn-bd-ie, var(--_ctm-march-dn-bd-ie))
+    );
+    background-attachment: var(
+      --_ctm-mob-march-dn-bd-at,
+      var(--_ctm-tab-march-dn-bd-at, var(--_ctm-march-dn-bd-at))
+    );
+    background-position: var(
+      --_ctm-mob-march-dn-bd-pn,
+      var(--_ctm-tab-march-dn-bd-pn, var(--_ctm-march-dn-bd-pn))
+    );
+    background-repeat: var(
+      --_ctm-mob-march-dn-bd-rt,
+      var(--_ctm-tab-march-dn-bd-rt, var(--_ctm-march-dn-bd-rt))
+    );
+    background-size: var(
+      --_ctm-mob-march-dn-bd-se,
+      var(--_ctm-tab-march-dn-bd-se, var(--_ctm-march-dn-bd-se))
+    );
     min-height: var(--_ctm-mob-march-lt-ht, var(--_ctm-tab-march-lt-ht, var(--_ctm-march-lt-ht)));
 
     // &:not(:has(#{$resizerId}#{$resizeActive})) {
@@ -34,6 +49,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     & > div {
       &.wrapper {
         width: 100%;
+        height: 100%;
+        height: var(--_ctm-march-lt-ht);
         // grid-template-rows: auto !important;
         grid-template-columns: 100% !important;
         // grid-template-rows: max(var(--_ctm-pro-lt-ht), auto) !important;

package/dist/menu.scss

@@ -3,11 +3,25 @@
 
 [data-div-type="element"] {
   &[data-element-type="menu"] {
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
     aspect-ratio: 1 / var(--_sf-aspect-ratio);
+
     --_aspect-ratio: calc(
-      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+      1 *
+        (
+          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
+            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
+        )
     );
 
     & > .wrapper {
@@ -19,52 +33,126 @@
     }
 
     .menu__element {
-      background-color: var(--_ctm-dn-mu-cr-bd-cr, var(--_tst-dn-bd-cr));
-      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      background-color: var(
+        --_ctm-mob-dn-mu-cr-bd-cr,
+        var(--_ctm-tab-dn-mu-cr-bd-cr, var(--_ctm-dn-mu-cr-bd-cr))
+      );
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       display: flex;
       align-items: center;
 
       width: 100%;
       height: 100%;
-      border-color: var(--_ctm-dn-mu-cr-br-cr, var(--_tst-dn-br-cr));
-      border-style: var(--_ctm-dn-mu-cr-br-se, var(--_tst-dn-br-se));
-      border-width: var(--_ctm-dn-mu-cr-br-wh, var(--_tst-dn-br-wh));
-      border-radius: var(--_ctm-dn-mu-cr-br-rs, var(--_tst-dn-br-rs));
+      border-color: var(
+        --_ctm-mob-dn-mu-cr-br-cr,
+        var(--_ctm-tab-dn-mu-cr-br-cr, var(--_ctm-dn-mu-cr-br-cr))
+      );
+      border-style: var(
+        --_ctm-mob-dn-mu-cr-br-se,
+        var(--_ctm-tab-dn-mu-cr-br-se, var(--_ctm-dn-mu-cr-br-se))
+      );
+      border-width: var(
+        --_ctm-mob-dn-mu-cr-br-wh,
+        var(--_ctm-tab-dn-mu-cr-br-wh, var(--_ctm-dn-mu-cr-br-wh))
+      );
+      border-radius: var(
+        --_ctm-mob-dn-mu-cr-br-rs,
+        var(--_ctm-tab-dn-mu-cr-br-rs, var(--_ctm-dn-mu-cr-br-rs))
+      );
       box-shadow: var(
         --_show-shadow,
-        var(--_ctm-dn-mu-cr-sw-ae, var(--_tst-dn-sw-ae))
-          var(--_ctm-dn-mu-cr-sw-br, var(--_tst-dn-sw-br))
-          var(--_ctm-dn-mu-cr-sw-sd, var(--_tst-dn-sw-sd))
-          var(--_ctm-dn-mu-cr-sw-cr, var(--_tst-dn-sw-cr))
+        var(--_ctm-mob-dn-mu-cr-sw-ae, var(--_ctm-tab-dn-mu-cr-sw-ae, var(--_ctm-dn-mu-cr-sw-ae)))
+          var(--_ctm-mob-dn-mu-cr-sw-br, var(--_ctm-tab-dn-mu-cr-sw-br, var(--_ctm-dn-mu-cr-sw-br)))
+          var(--_ctm-mob-dn-mu-cr-sw-sd, var(--_ctm-tab-dn-mu-cr-sw-sd, var(--_ctm-dn-mu-cr-sw-sd)))
+          var(--_ctm-mob-dn-mu-cr-sw-cr, var(--_ctm-tab-dn-mu-cr-sw-cr, var(--_ctm-dn-mu-cr-sw-cr)))
+      );
+
+      gap: var(
+        --_ctm-mob-lt-sg-bn-mu-lt-is,
+        var(--_ctm-tab-lt-sg-bn-mu-lt-is, var(--_ctm-lt-sg-bn-mu-lt-is))
       );
 
-      gap: var(--_ctm-lt-sg-bn-mu-lt-is);
       .menu__item {
-        background-color: var(--_ctm-dn-mu-im-se-bd-cr, var(--_tst-dn-bd-cr));
+        background-color: var(
+          --_ctm-mob-dn-mu-im-se-bd-cr,
+          var(--_ctm-tab-dn-mu-im-se-bd-cr, var(--_ctm-dn-mu-im-se-bd-cr))
+        );
 
         width: 100%;
-        // height: 100%;
-        border-color: var(--_ctm-dn-mu-im-se-br-cr, var(--_tst-dn-br-cr));
-        border-style: var(--_ctm-dn-mu-im-se-br-se, var(--_tst-dn-br-se));
-        border-width: var(--_ctm-dn-mu-im-se-br-wh, var(--_tst-dn-br-wh));
-        border-radius: var(--_ctm-dn-mu-im-se-br-rs, var(--_tst-dn-br-rs));
+        border-color: var(
+          --_ctm-mob-dn-mu-im-se-br-cr,
+          var(--_ctm-tab-dn-mu-im-se-br-cr, var(--_ctm-dn-mu-im-se-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-dn-mu-im-se-br-se,
+          var(--_ctm-tab-dn-mu-im-se-br-se, var(--_ctm-dn-mu-im-se-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-dn-mu-im-se-br-wh,
+          var(--_ctm-tab-dn-mu-im-se-br-wh, var(--_ctm-dn-mu-im-se-br-wh))
+        );
+        border-radius: var(
+          --_ctm-mob-dn-mu-im-se-br-rs,
+          var(--_ctm-tab-dn-mu-im-se-br-rs, var(--_ctm-dn-mu-im-se-br-rs))
+        );
         box-shadow: var(
           --_show-shadow,
-          var(--_ctm-dn-mu-im-se-sw-ae, var(--_tst-dn-sw-ae))
-            var(--_ctm-dn-mu-im-se-sw-br, var(--_tst-dn-sw-br))
-            var(--_ctm-dn-mu-im-se-sw-sd, var(--_tst-dn-sw-sd))
-            var(--_ctm-dn-mu-im-se-sw-cr, var(--_tst-dn-sw-cr))
+          var(
+              --_ctm-mob-dn-mu-im-se-sw-ae,
+              var(--_ctm-tab-dn-mu-im-se-sw-ae, var(--_ctm-dn-mu-im-se-sw-ae))
+            )
+            var(
+              --_ctm-mob-dn-mu-im-se-sw-br,
+              var(--_ctm-tab-dn-mu-im-se-sw-br, var(--_ctm-dn-mu-im-se-sw-br))
+            )
+            var(
+              --_ctm-mob-dn-mu-im-se-sw-sd,
+              var(--_ctm-tab-dn-mu-im-se-sw-sd, var(--_ctm-dn-mu-im-se-sw-sd))
+            )
+            var(
+              --_ctm-mob-dn-mu-im-se-sw-cr,
+              var(--_ctm-tab-dn-mu-im-se-sw-cr, var(--_ctm-dn-mu-im-se-sw-cr))
+            )
         );
+
         & button {
-          color: var(--_ctm-dn-mu-im-se-cr, var(--_tst-dn-mu-im-se-cr));
-          font-family: var(--_ctm-dn-mu-im-se-ft-fy, var(--_tst-dn-mu-im-se-ft-fy)), sans-serif;
-          font-size: var(--_ctm-dn-mu-im-se-ft-se, var(--_tst-dn-mu-im-se-ft-se));
-          font-weight: var(--_ctm-dn-mu-im-se-ft-wt, var(--_tst-dn-mu-im-se-ft-wt));
-          font-style: var(--_ctm-dn-mu-im-se-ft-se-ic, var(--_tst-dn-mu-im-se-ft-se-ic));
-          text-align: var(--_ctm-dn-mu-im-se-tt-an, var(--_tst-dn-mu-im-se-se-an));
-          letter-spacing: var(--_ctm-dn-mu-im-se-lr-sg, var(--_tst-dn-mu-im-se-lr-sg));
-          line-height: var(--_ctm-dn-mu-im-se-le-ht, var(--_tst-dn-mu-im-se-le-ht));
-          text-decoration: var(--_ctm-dn-mu-im-se-ue,);
+          color: var(
+            --_ctm-mob-dn-mu-im-se-cr,
+            var(--_ctm-tab-dn-mu-im-se-cr, var(--_ctm-dn-mu-im-se-cr))
+          );
+          font-family: var(
+              --_ctm-mob-dn-mu-im-se-ft-fy,
+              var(--_ctm-tab-dn-mu-im-se-ft-fy, var(--_ctm-dn-mu-im-se-ft-fy))
+            ),
+            sans-serif;
+          font-size: var(
+            --_ctm-mob-dn-mu-im-se-ft-se,
+            var(--_ctm-tab-dn-mu-im-se-ft-se, var(--_ctm-dn-mu-im-se-ft-se))
+          );
+          font-weight: var(
+            --_ctm-mob-dn-mu-im-se-ft-wt,
+            var(--_ctm-tab-dn-mu-im-se-ft-wt, var(--_ctm-dn-mu-im-se-ft-wt))
+          );
+          font-style: var(
+            --_ctm-mob-dn-mu-im-se-ft-se-ic,
+            var(--_ctm-tab-dn-mu-im-se-ft-se-ic, var(--_ctm-dn-mu-im-se-ft-se-ic))
+          );
+          text-align: var(
+            --_ctm-mob-dn-mu-im-se-tt-an,
+            var(--_ctm-tab-dn-mu-im-se-tt-an, var(--_ctm-dn-mu-im-se-tt-an))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-mu-im-se-lr-sg,
+            var(--_ctm-tab-dn-mu-im-se-lr-sg, var(--_ctm-dn-mu-im-se-lr-sg))
+          );
+          line-height: var(
+            --_ctm-mob-dn-mu-im-se-le-ht,
+            var(--_ctm-tab-dn-mu-im-se-le-ht, var(--_ctm-dn-mu-im-se-le-ht))
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-mu-im-se-ue,
+            var(--_ctm-tab-dn-mu-im-se-ue, var(--_ctm-dn-mu-im-se-ue))
+          );
         }
       }
     }

package/dist/modal.scss

@@ -62,6 +62,7 @@ $active_btn_text_color: #fff;
     gap: $gap_between_elements;
     z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
     max-height: calc(100vh - 40px);
+    min-height: 250px;
     overflow-y: auto;
     cursor: auto;
 
@@ -129,6 +130,9 @@ $active_btn_text_color: #fff;
     padding: 10px $padding_horizontal;
     border-top: 1px solid $divider_color;
     flex-wrap: wrap;
+    bottom: 0;
+    position: absolute;
+    width: 100%;
   }
 
   @keyframes fadeIn {

package/dist/past-orders.scss

@@ -5,8 +5,17 @@ $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
 [data-div-type="element"] {
   &[data-element-type="pastOrders"] {
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
 
     & > div {
       &.wrapper {

package/dist/payment-methods.scss

@@ -9,7 +9,7 @@
     // padding: var(--_lt-pg);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -33,7 +33,7 @@
     .container {
       display: flex;
       flex-direction: column;
-      padding: var(--_ctm-lt-pg);
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       .title-content {
         display: flex;
         flex-direction: column;
@@ -52,11 +52,15 @@
         flex-direction: column;
         gap: 20px;
         // padding: 20px 0;
-        justify-content: var(--_ctm-lt-im-ct-at);
+        justify-content: var(
+          --_ctm-mob-lt-im-ct-at,
+          var(--_ctm-tab-lt-im-ct-at, var(--_ctm-lt-im-ct-at))
+        );
+
         .horizontal {
           display: flex;
           align-items: center;
-          gap: var(--_ctm-lt-im-sg);
+          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
           flex-direction: row;
           &[data-overflow-item="Wrap"] {
             flex-wrap: wrap;
@@ -66,7 +70,7 @@
             width: 35%;
           }
           .item {
-            padding: var(--_ctm-lt-im-pg);
+            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
             img {
               width: 50px;
               height: 30px;
@@ -76,7 +80,7 @@
         .vertical {
           display: flex;
           align-items: center;
-          gap: var(--_ctm-lt-im-sg);
+          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
           flex-direction: column;
           &[data-overflow-item="Wrap"] {
             flex-wrap: wrap;
@@ -86,7 +90,7 @@
             width: 35%;
           }
           .item {
-            padding: var(--_ctm-lt-im-pg);
+            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
             img {
               width: 50px;
               height: 30px;
@@ -124,24 +128,36 @@
             }
           }
           thead {
-            height: var(--_ctm-lt-hr-ht);
+            height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
             tr {
               th {
-                padding: var(--_ctm-lt-hr-cl-pg);
-                text-align: var(--_ctm-lt-ct-at);
+                padding: var(
+                  --_ctm-mob-lt-hr-cl-pg,
+                  var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
+                );
+                text-align: var(
+                  --_ctm-mob-lt-ct-at,
+                  var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at))
+                );
                 border: 0;
               }
             }
           }
           tbody {
             tr {
-              padding: var(--_ctm-lt-rw-cl-pg);
-              height: var(--_ctm-lt-rw-ht);
+              padding: var(
+                --_ctm-mob-lt-rw-cl-pg,
+                var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
+              );
+              height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
               th,
               td {
                 border: 0;
                 padding: inherit;
-                text-align: var(--_ctm-lt-ct-at);
+                text-align: var(
+                  --_ctm-mob-lt-ct-at,
+                  var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at))
+                );
               }
             }
           }