@sc-360-v2/storefront-cms-library 0.3.5 → 0.3.8

package/dist/layouter-pro-item.scss

@@ -12,6 +12,7 @@
 
     // width: 100%;
     // background: var(--_ctm-repe-dn-bd-cr);
+    width: prepareMediaVariable(--_ctm-layout-lt-wh);
 
     & > div {
       &.wrapper {
@@ -32,6 +33,11 @@
           border-style: prepareMediaVariable(--_ctm-layout-dn-br-se);
           border-width: prepareMediaVariable(--_ctm-layout-dn-br-wh);
         }
+
+        display: var(--_d-flex) !important;
+        flex-direction: column;
+        gap: prepareMediaVariable(--_ctm-layout-lt-im-gp);
+        align-items: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
       }
     }
   }

package/dist/layouter-pro.scss

@@ -4,6 +4,10 @@
 $childItemSelector: '[data-element-type="layouter-pro-item"]';
 $flex: "flx";
 $grid: "grd";
+$flexRow: "rw";
+$flexRowReverse: "rw-rv";
+$flexColumn: "cln";
+$flexColumnReverse: "cln-rv";
 [data-div-type="element"] {
   &[data-element-type="layouter-pro"] {
     // width: var(--_sf-con-nw-wh);
@@ -31,15 +35,39 @@ $grid: "grd";
       &.wrapper {
         width: 100%;
         min-height: prepareMediaVariable(--_ctm-layou-lt-mn-ht);
-        gap: prepareMediaVariable(--_ctm-layou-lt-im-gp);
+        column-gap: prepareMediaVariable(--_ctm-layou-lt-cn-gp);
+        row-gap: prepareMediaVariable(--_ctm-layou-lt-rw-gp);
 
         &:is(.#{$flex} > *) {
           display: var(--_d-flex) !important;
+          flex-wrap: prepareMediaVariable(--_ctm-layou-lt-fx-wp);
+          overflow: prepareMediaVariable(--_ctm-layou-lt-fx-ow);
+
+          &.#{$flexRow} {
+            flex-direction: row;
+            align-items: prepareMediaVariable(--_ctm-layou-lt-an-is);
+            justify-content: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
+          }
+          &.#{$flexRowReverse} {
+            flex-direction: row-reverse;
+            align-items: prepareMediaVariable(--_ctm-layou-lt-an-is);
+            justify-content: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
+          }
+          &.#{$flexColumn} {
+            flex-direction: column;
+            justify-content: prepareMediaVariable(--_ctm-layou-lt-an-is);
+            align-items: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
+          }
+          &.#{$flexColumnReverse} {
+            flex-direction: column-reverse;
+            justify-content: prepareMediaVariable(--_ctm-layou-lt-an-is);
+            align-items: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
+          }
         }
 
         & > div {
           &#{$childItemSelector} {
-            width: 100%;
+            // width: 100%;
           }
         }
         // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;

package/dist/menu-v2.scss

@@ -248,7 +248,8 @@ $defaultValues: (
                   gap: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-gp);
                   & > span {
                     display: var(--_d-flex);
-                    font-family: var(
+                    font-family:
+                      var(
                         --_sf-it-at-ff,
                         var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-fy)})
                       ),
@@ -322,6 +323,7 @@ $defaultValues: (
                       width: calc(100% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-wh)});
                       top: calc(100% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-y)});
                       transform: translateX(-50%);
+                      z-index: 2;
                     }
                     &:is(#{$vtl} *) {
                       width: 100%;
@@ -555,7 +557,8 @@ $defaultValues: (
                             display: var(--_d-flex);
 
                             &#{$subMenuItemText} {
-                              font-family: var(
+                              font-family:
+                                var(
                                   --_sf-it-at-ff,
                                   var(
                                     --_sf-it-hr-ff,

package/dist/modal.scss

@@ -191,6 +191,8 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
 
 .modalV2-main {
   .modalV2-wrapper {
+    min-height: 50%;
+    overflow: hidden !important;
     position: fixed;
     left: 50%;
     transition:
@@ -198,7 +200,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       transform 0.4s ease-in-out;
     background: $white;
     border-radius: $radius-lg;
-    padding: 0px 20px;
+    // padding: 0px 20px;
     width: 850px;
     font-family: $font-base;
     box-shadow: $shadow-md;
@@ -207,15 +209,17 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
     overflow: scroll;
     display: flex;
     flex-direction: column;
-
+    .modal-body {
+      height: calc(100% - 61px);
+    }
     &.fullscreen {
       transition:
         all 0.5s ease-in-out,
         transform 0.5s ease-in-out;
       top: 50%;
       left: 50%;
-      width: 95vw;
-      height: 95vh;
+      width: 99vw;
+      height: 98vh;
       border-radius: $radius-lg;
       transform: translate(-50%, -50%);
       box-shadow: none;
@@ -245,6 +249,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
     &.bottom {
       bottom: 5%;
       transform: translate(-50%, 0%);
+      height: 100%;
     }
 
     .top-bar {
@@ -252,12 +257,14 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       top: 0;
       background: $white;
       z-index: 1;
-      padding-bottom: 12px;
+      padding: 0 16px;
+      border-bottom: 1px solid #d0d5dd;
       .title-bar {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 15px 0px;
+        // padding: 15px 0px;
+        height: 60px;
 
         .left-col {
           display: flex;