@sc-360-v2/storefront-cms-library 0.5.69 → 0.5.71

package/dist/stack.scss

@@ -1,171 +1,171 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-$es: '[data-div-type="element"]';
-$ss: '[data-element-type="stack"]';
-$dp: "dp_d_none";
-$tb: "tb_d_none";
-$mb: "mb_d_none";
-
-$rp: (
-  "#{$es}#{$ss}:not(.#{$mb})": (
-    mobile: (
-      display: var(--_d-grid),
-    ),
-  ),
-  "#{$es}#{$ss}:not(.#{$tb})": (
-    tablet: (
-      display: var(--_d-grid),
-    ),
-  ),
-  "#{$es}#{$ss}:not(.#{$dp})": (
-    desktop: (
-      display: var(--_d-grid),
-    ),
-  ),
-);
-
-body {
-  @include prepareCustomClassCSSProps($rp);
-}
-
-#{$es} {
-  &#{$ss} {
-    // min-width: var(--_sf-sta-nw-wh) !important;
-    // min-height: var(--_ctm-sta-lt-ht, 100px) !important;
-    min-width: 30px;
-    // min-height: 100px;
-    margin: prepareMediaVariable(--_ctm-sta-lt-mn);
-    // display: var(--_d-grid);
-    // background-color: prepareMediaVariable(--_ctm-sta-dn-bd-cr);
-    // background-image: prepareMediaVariable(--_ctm-sta-dn-bd-ie);
-    // background-attachment: prepareMediaVariable(--_ctm-sta-dn-bd-at);
-    // background-position: prepareMediaVariable(--_ctm-sta-dn-bd-pn);
-    // background-repeat: prepareMediaVariable(--_ctm-sta-dn-bd-rt);
-    // background-size: prepareMediaVariable(--_ctm-sta-dn-bd-se);
-
-    &[data-background-type="color"] {
-      background-color: prepareMediaVariable(--_ctm-sta-dn-bd-cr);
-    }
-
-    &[data-background-type="gradient"] {
-      --_sf-sta-gradient-angle: calc(#{prepareMediaVariable(--_ctm-sta-dn-gt-ae, 90)} * 1deg);
-      --_sf-sta-gradient-start-color: #{prepareMediaVariable(--_ctm-sta-dn-gt-st-cr, transparent)};
-      --_sf-sta-gradient-start-position: calc(
-        #{prepareMediaVariable(--_ctm-sta-dn-gt-st-pn, 0)} * 1%
-      );
-      --_sf-sta-gradient-end-color: #{prepareMediaVariable(--_ctm-sta-dn-gt-ed-cr, transparent)};
-      --_sf-sta-gradient-end-position: calc(
-        #{prepareMediaVariable(--_ctm-sta-dn-gt-ed-pn, 100)} * 1%
-      );
-      --_sf-sta-gradient-position: #{prepareMediaVariable(--_ctm-sta-dn-gt-pn, center)};
-
-      &[data-gradient-type="Linear Gradient"] {
-        background-image: linear-gradient(
-          var(--_sf-sta-gradient-angle),
-          var(--_sf-sta-gradient-start-color) var(--_sf-sta-gradient-start-position),
-          var(--_sf-sta-gradient-end-color) var(--_sf-sta-gradient-end-position)
-        );
-      }
-
-      &[data-gradient-type="Radial Gradient"] {
-        background-image: radial-gradient(
-          circle at var(--_sf-sta-gradient-position),
-          var(--_sf-sta-gradient-start-color) var(--_sf-sta-gradient-start-position),
-          var(--_sf-sta-gradient-end-color) var(--_sf-sta-gradient-end-position)
-        );
-      }
-    }
-
-    &[data-background-type="image"] {
-      background-image: prepareMediaVariable(--_ctm-sta-dn-bd-ie);
-      background-attachment: prepareMediaVariable(--_ctm-sta-dn-bd-at);
-      background-position: prepareMediaVariable(--_ctm-sta-dn-bd-pn);
-      background-position-y: prepareMediaVariable(--_ctm-sta-dn-bd-pn-y);
-      background-repeat: prepareMediaVariable(--_ctm-sta-dn-bd-rt);
-      background-size: prepareMediaVariable(--_ctm-sta-dn-bd-se);
-    }
-
-    &[data-show-border="true"] {
-      border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-cr));
-      border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-se));
-      border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-wh));
-    }
-
-    &[data-show-boxshadow="true"] {
-      box-shadow: var(
-        --_hide-grid-shadow,
-        prepareMediaVariable(--_ctm-sta-dn-sw-ae) prepareMediaVariable(--_ctm-sta-dn-sw-br)
-          prepareMediaVariable(--_ctm-sta-dn-sw-sd) prepareMediaVariable(--_ctm-sta-dn-sw-cr)
-      );
-    }
-    border-radius: prepareMediaVariable(--_ctm-sta-dn-br-rs);
-    grid-template-columns: 100%;
-
-    // &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
-    //   display: var(--_d-grid);
-    // }
-
-    &.vtl {
-      // width: var(--_sf-sta-nw-wh, auto);
-      min-height: 30px;
-      width: calc(1% * #{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)});
-      min-width: 30px;
-      & > .wrapper {
-        flex-direction: column;
-        width: 100%;
-        // height: 100%;
-        // justify-content: var(--_ctm-sta-lt-jy-ct);
-        // align-items: var(--_ctm-sta-lt-an-is);
-        align-items: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
-      }
-    }
-    &.hrz {
-      width: calc(1% * #{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)});
-      // width: max-content;
-      // min-width: var(--_sf-sta-nw-wh) !important;
-      // min-width: 100px !important;
-      // width: max-content;
-      &.hsc {
-        min-height: 10px;
-      }
-      &.dnhsc {
-        min-height: 25px;
-      }
-      // height: var(--_ctm-sta-lt-ht, 100px);
-      // width: var(--_sf-sta-nw-wh, auto);
-      & > .wrapper {
-        width: 100%;
-        // width: 100%;
-        height: 100%;
-        flex-direction: row;
-        // justify-content: var(--_ctm-sta-lt-an-is);
-        align-items: prepareMediaVariable(--_ctm-sta-lt-an-is);
-        justify-content: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
-      }
-    }
-
-    & > div {
-      &.wrapper {
-        // width: 100%;
-        padding: prepareMediaVariable(--_ctm-sta-lt-pg);
-        display: var(--_d-flex);
-        gap: prepareMediaVariable(--_ctm-sta-lt-im-gp);
-
-        // border-color: var(
-        //   --_hide-grid-border,
-        //   var(--_ctm-sta-dn-br-cr, var(--_tst-dn-dt-se-br-cr))
-        // );
-        // border-style: var(
-        //   --_hide-grid-border,
-        //   var(--_ctm-sta-dn-br-se, var(--_tst-dn-dt-se-br-se))
-        // );
-        // border-width: var(
-        //   --_hide-grid-border,
-        //   var(--_ctm-sta-dn-br-wh, var(--_tst-dn-dt-se-br-wh))
-        // );
-        // border-radius: var(--_ctm-sta-dn-br-rs, var(--_tst-dn-dt-se-br-rs));
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+$es: '[data-div-type="element"]';
+$ss: '[data-element-type="stack"]';
+$dp: "dp_d_none";
+$tb: "tb_d_none";
+$mb: "mb_d_none";
+
+$rp: (
+  "#{$es}#{$ss}:not(.#{$mb})": (
+    mobile: (
+      display: var(--_d-grid),
+    ),
+  ),
+  "#{$es}#{$ss}:not(.#{$tb})": (
+    tablet: (
+      display: var(--_d-grid),
+    ),
+  ),
+  "#{$es}#{$ss}:not(.#{$dp})": (
+    desktop: (
+      display: var(--_d-grid),
+    ),
+  ),
+);
+
+body {
+  @include prepareCustomClassCSSProps($rp);
+}
+
+#{$es} {
+  &#{$ss} {
+    // min-width: var(--_sf-sta-nw-wh) !important;
+    // min-height: var(--_ctm-sta-lt-ht, 100px) !important;
+    min-width: 30px;
+    // min-height: 100px;
+    margin: prepareMediaVariable(--_ctm-sta-lt-mn);
+    // display: var(--_d-grid);
+    // background-color: prepareMediaVariable(--_ctm-sta-dn-bd-cr);
+    // background-image: prepareMediaVariable(--_ctm-sta-dn-bd-ie);
+    // background-attachment: prepareMediaVariable(--_ctm-sta-dn-bd-at);
+    // background-position: prepareMediaVariable(--_ctm-sta-dn-bd-pn);
+    // background-repeat: prepareMediaVariable(--_ctm-sta-dn-bd-rt);
+    // background-size: prepareMediaVariable(--_ctm-sta-dn-bd-se);
+
+    &[data-background-type="color"] {
+      background-color: prepareMediaVariable(--_ctm-sta-dn-bd-cr);
+    }
+
+    &[data-background-type="gradient"] {
+      --_sf-sta-gradient-angle: calc(#{prepareMediaVariable(--_ctm-sta-dn-gt-ae, 90)} * 1deg);
+      --_sf-sta-gradient-start-color: #{prepareMediaVariable(--_ctm-sta-dn-gt-st-cr, transparent)};
+      --_sf-sta-gradient-start-position: calc(
+        #{prepareMediaVariable(--_ctm-sta-dn-gt-st-pn, 0)} * 1%
+      );
+      --_sf-sta-gradient-end-color: #{prepareMediaVariable(--_ctm-sta-dn-gt-ed-cr, transparent)};
+      --_sf-sta-gradient-end-position: calc(
+        #{prepareMediaVariable(--_ctm-sta-dn-gt-ed-pn, 100)} * 1%
+      );
+      --_sf-sta-gradient-position: #{prepareMediaVariable(--_ctm-sta-dn-gt-pn, center)};
+
+      &[data-gradient-type="Linear Gradient"] {
+        background-image: linear-gradient(
+          var(--_sf-sta-gradient-angle),
+          var(--_sf-sta-gradient-start-color) var(--_sf-sta-gradient-start-position),
+          var(--_sf-sta-gradient-end-color) var(--_sf-sta-gradient-end-position)
+        );
+      }
+
+      &[data-gradient-type="Radial Gradient"] {
+        background-image: radial-gradient(
+          circle at var(--_sf-sta-gradient-position),
+          var(--_sf-sta-gradient-start-color) var(--_sf-sta-gradient-start-position),
+          var(--_sf-sta-gradient-end-color) var(--_sf-sta-gradient-end-position)
+        );
+      }
+    }
+
+    &[data-background-type="image"] {
+      background-image: prepareMediaVariable(--_ctm-sta-dn-bd-ie);
+      background-attachment: prepareMediaVariable(--_ctm-sta-dn-bd-at);
+      background-position: prepareMediaVariable(--_ctm-sta-dn-bd-pn);
+      background-position-y: prepareMediaVariable(--_ctm-sta-dn-bd-pn-y);
+      background-repeat: prepareMediaVariable(--_ctm-sta-dn-bd-rt);
+      background-size: prepareMediaVariable(--_ctm-sta-dn-bd-se);
+    }
+
+    &[data-show-border="true"] {
+      border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-cr));
+      border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-se));
+      border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-wh));
+    }
+
+    &[data-show-boxshadow="true"] {
+      box-shadow: var(
+        --_hide-grid-shadow,
+        prepareMediaVariable(--_ctm-sta-dn-sw-ae) prepareMediaVariable(--_ctm-sta-dn-sw-br)
+          prepareMediaVariable(--_ctm-sta-dn-sw-sd) prepareMediaVariable(--_ctm-sta-dn-sw-cr)
+      );
+    }
+    border-radius: prepareMediaVariable(--_ctm-sta-dn-br-rs);
+    grid-template-columns: 100%;
+
+    // &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
+    //   display: var(--_d-grid);
+    // }
+
+    &.vtl {
+      // width: var(--_sf-sta-nw-wh, auto);
+      min-height: 30px;
+      width: calc(1% * #{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)});
+      min-width: 30px;
+      & > .wrapper {
+        flex-direction: column;
+        width: 100%;
+        // height: 100%;
+        // justify-content: var(--_ctm-sta-lt-jy-ct);
+        // align-items: var(--_ctm-sta-lt-an-is);
+        align-items: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
+      }
+    }
+    &.hrz {
+      width: calc(1% * #{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)});
+      // width: max-content;
+      // min-width: var(--_sf-sta-nw-wh) !important;
+      // min-width: 100px !important;
+      // width: max-content;
+      &.hsc {
+        min-height: 10px;
+      }
+      &.dnhsc {
+        min-height: 25px;
+      }
+      // height: var(--_ctm-sta-lt-ht, 100px);
+      // width: var(--_sf-sta-nw-wh, auto);
+      & > .wrapper {
+        width: 100%;
+        // width: 100%;
+        height: 100%;
+        flex-direction: row;
+        // justify-content: var(--_ctm-sta-lt-an-is);
+        align-items: prepareMediaVariable(--_ctm-sta-lt-an-is);
+        justify-content: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
+      }
+    }
+
+    & > div {
+      &.wrapper {
+        // width: 100%;
+        padding: prepareMediaVariable(--_ctm-sta-lt-pg);
+        display: var(--_d-flex);
+        gap: prepareMediaVariable(--_ctm-sta-lt-im-gp);
+
+        // border-color: var(
+        //   --_hide-grid-border,
+        //   var(--_ctm-sta-dn-br-cr, var(--_tst-dn-dt-se-br-cr))
+        // );
+        // border-style: var(
+        //   --_hide-grid-border,
+        //   var(--_ctm-sta-dn-br-se, var(--_tst-dn-dt-se-br-se))
+        // );
+        // border-width: var(
+        //   --_hide-grid-border,
+        //   var(--_ctm-sta-dn-br-wh, var(--_tst-dn-dt-se-br-wh))
+        // );
+        // border-radius: var(--_ctm-sta-dn-br-rs, var(--_tst-dn-dt-se-br-rs));
+      }
+    }
+  }
+}