@sc-360-v2/storefront-cms-library 0.4.47 → 0.4.50

package/dist/layouter.scss

@@ -1,294 +1,294 @@
-@use "sass:map";
-@use "sass:list";
-@use "./repeater-embla-controls.scss" as *;
-$childItemSelector: '[data-element-type="layouter-item"]';
-$sliderControlDragging: "[flex-slider-control-moving='true']";
-[data-div-type="element"] {
-  &[data-element-type="layouter"] {
-    // width: var(--_sf-con-nw-wh);
-    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    width: calc(
-      1% *
-        var(
-          --_ctm-mob-lay-ele-nw-wh-vl,
-          var(--_ctm-tab-lay-ele-nw-wh-vl, var(--_ctm-lay-ele-nw-wh-vl, auto))
-        )
-    );
-    // width: 100%;
-    // height: var(--_ctm-con-lt-ht);
-    margin: var(
-      --_ctm-mob-lay-lt-mn,
-      var(--_ctm-tab-lay-lt-mn, var(--_ctm-lay-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
-    );
-    background-color: var(
-      --_ctm-mob-lay-dn-bd-cr,
-      var(--_ctm-tab-lay-dn-bd-cr, var(--_ctm-lay-dn-bd-cr))
-    );
-    background-image: var(
-      --_ctm-mob-lay-dn-bd-ie,
-      var(--_ctm-tab-lay-dn-bd-ie, var(--_ctm-lay-dn-bd-ie))
-    );
-    background-attachment: var(
-      --_ctm-mob-lay-dn-bd-at,
-      var(--_ctm-tab-lay-dn-bd-at, var(--_ctm-lay-dn-bd-at))
-    );
-    background-position: var(
-      --_ctm-mob-lay-dn-bd-pn,
-      var(--_ctm-tab-lay-dn-bd-pn, var(--_ctm-lay-dn-bd-pn))
-    );
-    background-repeat: var(
-      --_ctm-mob-lay-dn-bd-rt,
-      var(--_ctm-tab-lay-dn-bd-rt, var(--_ctm-lay-dn-bd-rt))
-    );
-    background-size: var(
-      --_ctm-mob-lay-dn-bd-se,
-      var(--_ctm-tab-lay-dn-bd-se, var(--_ctm-lay-dn-bd-se))
-    );
-    border-radius: var(
-      --_ctm-mob-lay-dn-br-rs,
-      var(--_ctm-tab-lay-dn-br-rs, var(--_ctm-lay-dn-br-rs))
-    );
-    border-color: var(
-      --_ctm-mob-lay-dn-br-cr,
-      var(--_ctm-tab-lay-dn-br-cr, var(--_ctm-lay-dn-br-cr))
-    );
-    border-style: var(
-      --_ctm-mob-lay-dn-br-se,
-      var(--_ctm-tab-lay-dn-br-se, var(--_ctm-lay-dn-br-se))
-    );
-    border-width: var(
-      --_ctm-mob-lay-dn-br-wh,
-      var(--_ctm-tab-lay-dn-br-wh, var(--_ctm-lay-dn-br-wh))
-    );
-    box-shadow: var(
-      --_hover-show-shadow,
-      var(
-        --_sf-hr-bx-sw,
-        var(
-          --_show-shadow,
-          var(--_ctm-mob-dn-dt-se-sw-ae, var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae)))
-            var(
-              --_ctm-mob-dn-dt-se-sw-br,
-              var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
-            )
-            var(
-              --_ctm-mob-dn-dt-se-sw-sd,
-              var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
-            )
-            var(
-              --_ctm-mob-dn-dt-se-sw-cr,
-              var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
-            )
-        )
-      )
-    );
-    padding: var(--_ctm-mob-lay-lt-pg, var(--_ctm-tab-lay-lt-pg, var(--_ctm-lay-lt-pg)));
-
-    &.grd {
-      & > div {
-        &.wrapper {
-          width: 100%;
-          display: grid;
-          grid-template-columns: repeat(
-            auto-fit,
-            minmax(
-              var(
-                --_ctm-mob-lay-lt-mn-cn-wh,
-                var(--_ctm-tab-lay-lt-mn-cn-wh, var(--_ctm-lay-lt-mn-cn-wh))
-              ),
-              1fr
-            )
-          );
-          grid-template-rows: repeat(
-            auto-fit,
-            minmax(
-              var(
-                --_ctm-mob-lay-lt-mn-rw-ht,
-                var(--_ctm-tab-lay-lt-mn-rw-ht, var(--_ctm-lay-lt-mn-rw-ht))
-              ),
-              1fr
-            )
-          );
-
-          div {
-            &#{$childItemSelector} {
-              width: 100%;
-            }
-          }
-
-          @media only screen and (max-width: 767px) {
-            grid-template-rows: auto;
-          }
-        }
-      }
-    }
-
-    &.sld {
-      &:is(:not(#{$sliderControlDragging} *)) {
-        overflow: clip;
-      }
-      // overflow: clip;
-      height: auto;
-      min-height: 50px !important;
-      --_sf-sl-ct-ic-dt-at-cl: var(
-        --_ctm-mob-lay-lt-cl-ae-cr,
-        var(--_ctm-tab-lay-lt-cl-ae-cr, var(--_ctm-lay-lt-cl-ae-cr))
-      );
-      // &:is([data-control-type="1"]) {
-      //   @include CMSRepeaterEmblaControlStyles(1);
-      // }
-      @for $i from 1 through 3 {
-        &:is([data-control-type="#{$i}"]) {
-          @if ($i == 3) {
-            overflow-y: visible;
-          }
-          @include CMSRepeaterEmblaControlStyles($i);
-        }
-      }
-
-      & > div {
-        &.wrapper {
-          &.embla__container {
-            display: flex !important;
-            --_embla-slide-space: var(
-              --_ctm-mob-lay-lt-im-gp,
-              var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp))
-            );
-            --_embla-col-count: var(
-              --_ctm-mob-lay-lt-st-is-pr-se,
-              var(--_ctm-tab-lay-lt-st-is-pr-se, var(--_ctm-lay-lt-st-is-pr-se, 3))
-            );
-            // gap: 0px !important;
-            // margin-left: calc(var(--_embla-slide-space, 10px) * -1);
-            width: 100%;
-            height: 100%;
-            & > .embla__slide {
-              --_sf-cl-vl: calc(
-                (100% / var(--_embla-col-count, 3)) -
-                  (
-                    ((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) /
-                      (var(--_embla-col-count, 3))
-                  )
-              );
-              // flex: 0 0 calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
-              // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
-              flex: 0 0 var(--_sf-cl-vl);
-              width: var(--_sf-cl-vl);
-              // grid-template-rows: minmax(
-              //   max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
-              //   auto
-              // );
-
-              grid-template-rows: minmax(50px, auto);
-              grid-template-columns: minmax(0px, 1fr);
-              // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
-              // padding-left: 0px !important;
-
-              img {
-                width: 100%;
-              }
-            }
-          }
-        }
-      }
-    }
-    & > div {
-      &.wrapper {
-        width: 100%;
-        gap: var(
-          --_ctm-mob-lay-lt-im-gp,
-          var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
-        );
-        // width: 100%;
-        // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
-        // grid-auto-rows: minmax(100px, 1fr);
-      }
-    }
-
-    &.rws {
-      & > .wrapper {
-        // grid-template-columns: 100%;
-        // grid-template-rows:
-        //   minmax(
-        //     clamp(
-        //       0.5px,
-        //       calc(
-        //         (18.918014128728416 * var(--_cms-playground-unit)) -
-        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
-        //       ),
-        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
-        //     ),
-        //     auto
-        //   )
-        //   minmax(
-        //     clamp(
-        //       0.5px,
-        //       calc(
-        //         (18.918014128728416 * var(--_cms-playground-unit)) -
-        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
-        //       ),
-        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
-        //     ),
-        //     auto
-        //   )
-        //   minmax(
-        //     clamp(
-        //       0.5px,
-        //       calc(
-        //         (18.918014128728416 * var(--_cms-playground-unit)) -
-        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
-        //       ),
-        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
-        //     ),
-        //     auto
-        //   )
-        //   minmax(
-        //     clamp(
-        //       0.5px,
-        //       calc(
-        //         (18.918014128728416 * var(--_cms-playground-unit)) -
-        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
-        //       ),
-        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
-        //     ),
-        //     auto
-        //   );
-        & > div {
-          &#{$childItemSelector} {
-            width: 100%;
-          }
-        }
-      }
-    }
-
-    &.cln {
-      &[data-view-state="auto"] {
-        height: var(--_ctm-mob-lay-lt-ht, var(--_ctm-tab-lay-lt-ht, var(--_ctm-lay-lt-ht)));
-      }
-      & > .wrapper {
-        height: 100%;
-        & > div {
-          &#{$childItemSelector} {
-            width: 100%;
-            // align-self: flex-start;
-          }
-        }
-      }
-    }
-
-    // &[data-view-state="full"] {
-    //   width: auto;
-    //   margin: 0;
-    //   justify-self: stretch !important;
-    //   align-self: stretch !important;
-    //   cursor: auto;
-
-    //   & > div {
-    //     &[data-div-type="wrapper__layer"] {
-    //       --_sf-vt-zz: visible;
-    //       --_sf-op-zz: 1;
-    //     }
-    //   }
-    // }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./repeater-embla-controls.scss" as *;
+$childItemSelector: '[data-element-type="layouter-item"]';
+$sliderControlDragging: "[flex-slider-control-moving='true']";
+[data-div-type="element"] {
+  &[data-element-type="layouter"] {
+    // width: var(--_sf-con-nw-wh);
+    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    width: calc(
+      1% *
+        var(
+          --_ctm-mob-lay-ele-nw-wh-vl,
+          var(--_ctm-tab-lay-ele-nw-wh-vl, var(--_ctm-lay-ele-nw-wh-vl, auto))
+        )
+    );
+    // width: 100%;
+    // height: var(--_ctm-con-lt-ht);
+    margin: var(
+      --_ctm-mob-lay-lt-mn,
+      var(--_ctm-tab-lay-lt-mn, var(--_ctm-lay-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
+    );
+    background-color: var(
+      --_ctm-mob-lay-dn-bd-cr,
+      var(--_ctm-tab-lay-dn-bd-cr, var(--_ctm-lay-dn-bd-cr))
+    );
+    background-image: var(
+      --_ctm-mob-lay-dn-bd-ie,
+      var(--_ctm-tab-lay-dn-bd-ie, var(--_ctm-lay-dn-bd-ie))
+    );
+    background-attachment: var(
+      --_ctm-mob-lay-dn-bd-at,
+      var(--_ctm-tab-lay-dn-bd-at, var(--_ctm-lay-dn-bd-at))
+    );
+    background-position: var(
+      --_ctm-mob-lay-dn-bd-pn,
+      var(--_ctm-tab-lay-dn-bd-pn, var(--_ctm-lay-dn-bd-pn))
+    );
+    background-repeat: var(
+      --_ctm-mob-lay-dn-bd-rt,
+      var(--_ctm-tab-lay-dn-bd-rt, var(--_ctm-lay-dn-bd-rt))
+    );
+    background-size: var(
+      --_ctm-mob-lay-dn-bd-se,
+      var(--_ctm-tab-lay-dn-bd-se, var(--_ctm-lay-dn-bd-se))
+    );
+    border-radius: var(
+      --_ctm-mob-lay-dn-br-rs,
+      var(--_ctm-tab-lay-dn-br-rs, var(--_ctm-lay-dn-br-rs))
+    );
+    border-color: var(
+      --_ctm-mob-lay-dn-br-cr,
+      var(--_ctm-tab-lay-dn-br-cr, var(--_ctm-lay-dn-br-cr))
+    );
+    border-style: var(
+      --_ctm-mob-lay-dn-br-se,
+      var(--_ctm-tab-lay-dn-br-se, var(--_ctm-lay-dn-br-se))
+    );
+    border-width: var(
+      --_ctm-mob-lay-dn-br-wh,
+      var(--_ctm-tab-lay-dn-br-wh, var(--_ctm-lay-dn-br-wh))
+    );
+    box-shadow: var(
+      --_hover-show-shadow,
+      var(
+        --_sf-hr-bx-sw,
+        var(
+          --_show-shadow,
+          var(--_ctm-mob-dn-dt-se-sw-ae, var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae)))
+            var(
+              --_ctm-mob-dn-dt-se-sw-br,
+              var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
+            )
+            var(
+              --_ctm-mob-dn-dt-se-sw-sd,
+              var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
+            )
+            var(
+              --_ctm-mob-dn-dt-se-sw-cr,
+              var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
+            )
+        )
+      )
+    );
+    padding: var(--_ctm-mob-lay-lt-pg, var(--_ctm-tab-lay-lt-pg, var(--_ctm-lay-lt-pg)));
+
+    &.grd {
+      & > div {
+        &.wrapper {
+          width: 100%;
+          display: grid;
+          grid-template-columns: repeat(
+            auto-fit,
+            minmax(
+              var(
+                --_ctm-mob-lay-lt-mn-cn-wh,
+                var(--_ctm-tab-lay-lt-mn-cn-wh, var(--_ctm-lay-lt-mn-cn-wh))
+              ),
+              1fr
+            )
+          );
+          grid-template-rows: repeat(
+            auto-fit,
+            minmax(
+              var(
+                --_ctm-mob-lay-lt-mn-rw-ht,
+                var(--_ctm-tab-lay-lt-mn-rw-ht, var(--_ctm-lay-lt-mn-rw-ht))
+              ),
+              1fr
+            )
+          );
+
+          div {
+            &#{$childItemSelector} {
+              width: 100%;
+            }
+          }
+
+          @media only screen and (max-width: 767px) {
+            grid-template-rows: auto;
+          }
+        }
+      }
+    }
+
+    &.sld {
+      &:is(:not(#{$sliderControlDragging} *)) {
+        overflow: clip;
+      }
+      // overflow: clip;
+      height: auto;
+      min-height: 50px !important;
+      --_sf-sl-ct-ic-dt-at-cl: var(
+        --_ctm-mob-lay-lt-cl-ae-cr,
+        var(--_ctm-tab-lay-lt-cl-ae-cr, var(--_ctm-lay-lt-cl-ae-cr))
+      );
+      // &:is([data-control-type="1"]) {
+      //   @include CMSRepeaterEmblaControlStyles(1);
+      // }
+      @for $i from 1 through 3 {
+        &:is([data-control-type="#{$i}"]) {
+          @if ($i == 3) {
+            overflow-y: visible;
+          }
+          @include CMSRepeaterEmblaControlStyles($i);
+        }
+      }
+
+      & > div {
+        &.wrapper {
+          &.embla__container {
+            display: flex !important;
+            --_embla-slide-space: var(
+              --_ctm-mob-lay-lt-im-gp,
+              var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp))
+            );
+            --_embla-col-count: var(
+              --_ctm-mob-lay-lt-st-is-pr-se,
+              var(--_ctm-tab-lay-lt-st-is-pr-se, var(--_ctm-lay-lt-st-is-pr-se, 3))
+            );
+            // gap: 0px !important;
+            // margin-left: calc(var(--_embla-slide-space, 10px) * -1);
+            width: 100%;
+            height: 100%;
+            & > .embla__slide {
+              --_sf-cl-vl: calc(
+                (100% / var(--_embla-col-count, 3)) -
+                  (
+                    ((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) /
+                      (var(--_embla-col-count, 3))
+                  )
+              );
+              // flex: 0 0 calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
+              // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
+              flex: 0 0 var(--_sf-cl-vl);
+              width: var(--_sf-cl-vl);
+              // grid-template-rows: minmax(
+              //   max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
+              //   auto
+              // );
+
+              grid-template-rows: minmax(50px, auto);
+              grid-template-columns: minmax(0px, 1fr);
+              // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
+              // padding-left: 0px !important;
+
+              img {
+                width: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+    & > div {
+      &.wrapper {
+        width: 100%;
+        gap: var(
+          --_ctm-mob-lay-lt-im-gp,
+          var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
+        );
+        // width: 100%;
+        // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
+        // grid-auto-rows: minmax(100px, 1fr);
+      }
+    }
+
+    &.rws {
+      & > .wrapper {
+        // grid-template-columns: 100%;
+        // grid-template-rows:
+        //   minmax(
+        //     clamp(
+        //       0.5px,
+        //       calc(
+        //         (18.918014128728416 * var(--_cms-playground-unit)) -
+        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
+        //       ),
+        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
+        //     ),
+        //     auto
+        //   )
+        //   minmax(
+        //     clamp(
+        //       0.5px,
+        //       calc(
+        //         (18.918014128728416 * var(--_cms-playground-unit)) -
+        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
+        //       ),
+        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
+        //     ),
+        //     auto
+        //   )
+        //   minmax(
+        //     clamp(
+        //       0.5px,
+        //       calc(
+        //         (18.918014128728416 * var(--_cms-playground-unit)) -
+        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
+        //       ),
+        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
+        //     ),
+        //     auto
+        //   )
+        //   minmax(
+        //     clamp(
+        //       0.5px,
+        //       calc(
+        //         (18.918014128728416 * var(--_cms-playground-unit)) -
+        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
+        //       ),
+        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
+        //     ),
+        //     auto
+        //   );
+        & > div {
+          &#{$childItemSelector} {
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    &.cln {
+      &[data-view-state="auto"] {
+        height: var(--_ctm-mob-lay-lt-ht, var(--_ctm-tab-lay-lt-ht, var(--_ctm-lay-lt-ht)));
+      }
+      & > .wrapper {
+        height: 100%;
+        & > div {
+          &#{$childItemSelector} {
+            width: 100%;
+            // align-self: flex-start;
+          }
+        }
+      }
+    }
+
+    // &[data-view-state="full"] {
+    //   width: auto;
+    //   margin: 0;
+    //   justify-self: stretch !important;
+    //   align-self: stretch !important;
+    //   cursor: auto;
+
+    //   & > div {
+    //     &[data-div-type="wrapper__layer"] {
+    //       --_sf-vt-zz: visible;
+    //       --_sf-op-zz: 1;
+    //     }
+    //   }
+    // }
+  }
+}