@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.72

package/dist/section.scss

@@ -1,276 +1,276 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-@use "./position-module.scss" as *;
-@use "./animation-control.scss" as *;
-@use "./responsive-behaviour.scss" as *;
-@use "./overflow-module.scss" as *;
-@use "./transform-properties-module.scss" as *;
-
-$activeElementSelector: "[data-has-clicked='true']";
-$isFlexboxElementChild: ".flx > .wrapper > *";
-$repeterLElement: '[data-element-type="repeater"]';
-$dp: "dp_d_none";
-$tb: "tb_d_none";
-$mb: "mb_d_none";
-
-$rp: (
-  class: (
-    #{$tb}: (
-        laptop: (
-          display: "none !important",
-        ),
-      ),
-    #{$dp}: (
-        desktop: (
-          display: "none !important",
-        ),
-      ),
-    #{$mb}: (
-        mobile: (
-          display: "none !important",
-        ),
-      ),
-  ),
-);
-
-body {
-  // color: var(--_thm-ty-p1-tt-cr);
-  // font-family: var(--_thm-ty-p1-ft-fy);
-  // font-size: var(--_thm-ty-p1-ft-se);
-  // font-weight: var(--_thm-ty-p1-bd);
-  // font-style: var(--_thm-ty-p1-ic);
-  // text-align: var(--_thm-ty-p1-tt-an);
-  // letter-spacing: var(--_thm-ty-p1-cr-sg);
-  // line-height: var(--_thm-ty-p1-le-ht);
-  // text-decoration: var(--_thm-ty-p1-ue);
-
-  // Responsive
-  // @include prepareCustomClassCSSProps($rp);
-  @include prepareCustomClassCSSPropsV2($rp);
-
-  // Animation
-  @include FlexAnimationModuleStyles();
-
-  // Position
-  @include FlexPositionModuleStyles();
-
-  // Responsive
-  @include FlexElementResponsiveBehaviourStyles();
-
-  // Overflow
-  // @include FlexOverflowModuleStyles();
-
-  // Additional Tranform Properties
-  @include FlexElementTransformProps();
-
-  // Page Styles
-  &[data-iframe-body="true"],
-  &[data-iframe-preview-body="true"],
-  &:has(> #__next) {
-    border-color: prepareMediaVariable(--_ctm-pag-dn-br-cr);
-    border-style: prepareMediaVariable(--_ctm-pag-dn-br-se);
-    border-width: prepareMediaVariable(--_ctm-pag-dn-br-wh);
-    border-radius: prepareMediaVariable(--_ctm-pag-dn-br-rs);
-
-    background-color: prepareMediaVariable(--_ctm-pag-dn-bd-cr);
-    background-image: prepareMediaVariable(--_ctm-pag-dn-bd-ie);
-    background-attachment: prepareMediaVariable(--_ctm-pag-dn-bd-at);
-    background-position: prepareMediaVariable(--_ctm-pag-dn-bd-pn);
-    background-position-y: prepareMediaVariable(--_ctm-pag-dn-bd-pn-y);
-    background-repeat: prepareMediaVariable(--_ctm-pag-dn-bd-rt);
-    background-size: prepareMediaVariable(--_ctm-pag-dn-bd-se);
-
-    padding: prepareMediaVariable(--_ctm-pag-lt-pg, 0px);
-  }
-}
-
-section {
-  &[data-div-type="section"] {
-    position: var(--_p-relative);
-    width: 100%;
-    margin: prepareMediaVariable(--_ctm-sec-lt-mn);
-    flex-direction: column;
-    justify-self: stretch;
-    align-self: stretch;
-    justify-content: center;
-    --_sf-element-vt-pd: max(
-      0.5px,
-      0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-    );
-    --_sf-element-hr-pd: max(
-      0.5px,
-      0.0117188 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-    );
-    box-shadow: var(
-      --_hide-section-shadow,
-      prepareMediaVariable(--_ctm-sec-dn-sw-ae) prepareMediaVariable(--_ctm-sec-dn-sw-br)
-        prepareMediaVariable(--_ctm-sec-dn-sw-sd) prepareMediaVariable(--_ctm-sec-dn-sw-cr)
-    );
-    border-radius: prepareMediaVariable(--_ctm-sec-dn-br-rs) !important;
-
-    &[data-background-type="color"] {
-      background-color: prepareMediaVariable(--_ctm-sec-dn-bd-cr);
-    }
-
-    &[data-background-type="gradient"] {
-      --_sf-sec-gradient-angle: calc(#{prepareMediaVariable(--_ctm-sec-dn-gt-ae, 90)} * 1deg);
-      --_sf-sec-gradient-start-color: #{prepareMediaVariable(--_ctm-sec-dn-gt-st-cr, transparent)};
-      --_sf-sec-gradient-start-position: calc(
-        #{prepareMediaVariable(--_ctm-sec-dn-gt-st-pn, 0)} * 1%
-      );
-      --_sf-sec-gradient-end-color: #{prepareMediaVariable(--_ctm-sec-dn-gt-ed-cr, transparent)};
-      --_sf-sec-gradient-end-position: calc(
-        #{prepareMediaVariable(--_ctm-sec-dn-gt-ed-pn, 100)} * 1%
-      );
-      --_sf-sec-gradient-position: #{prepareMediaVariable(--_ctm-sec-dn-gt-pn, center)};
-
-      &[data-gradient-type="Linear Gradient"] {
-        background-image: linear-gradient(
-          var(--_sf-sec-gradient-angle),
-          var(--_sf-sec-gradient-start-color) var(--_sf-sec-gradient-start-position),
-          var(--_sf-sec-gradient-end-color) var(--_sf-sec-gradient-end-position)
-        );
-      }
-
-      &[data-gradient-type="Radial Gradient"] {
-        background-image: radial-gradient(
-          circle at var(--_sf-sec-gradient-position),
-          var(--_sf-sec-gradient-start-color) var(--_sf-sec-gradient-start-position),
-          var(--_sf-sec-gradient-end-color) var(--_sf-sec-gradient-end-position)
-        );
-      }
-    }
-
-    &[data-background-type="image"] {
-      background-image: prepareMediaVariable(--_ctm-sec-dn-bd-ie);
-      background-attachment: prepareMediaVariable(--_ctm-sec-dn-bd-at);
-      background-position: prepareMediaVariable(--_ctm-sec-dn-bd-pn);
-      background-position-y: prepareMediaVariable(--_ctm-sec-dn-bd-pn-y);
-      background-repeat: prepareMediaVariable(--_ctm-sec-dn-bd-rt);
-      background-size: prepareMediaVariable(--_ctm-sec-dn-bd-se);
-    }
-
-    &[data-show-shadow="false"] {
-      --_hide-section-shadow: none;
-    }
-
-    &[data-show-border="false"] {
-      --_hide-section-border: none;
-    }
-
-    &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
-      display: var(--_d-flex) !important;
-    }
-
-    & > div {
-      &[data-type="wrapper-layer"] {
-        display: var(--_d-flex) !important;
-        pointer-events: none;
-        position: var(--_p-absolute);
-        visibility: visible !important;
-        inset: 0 0 0 0;
-        // border-color: var(
-        //   --_hide-section-border,
-        //   var(--_ctm-mob-sec-dn-br-cr, var(--_ctm-tab-sec-dn-br-cr, var(--_ctm-sec-dn-br-cr)))
-        // );
-        border-color: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-cr));
-        border-style: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-se));
-        border-width: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-wh));
-        border-radius: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-rs));
-      }
-
-      &[data-div-type="cms-section-wrapper"] {
-        // max-width: var(--_sf-wp-mx-wt);
-        max-width: var(
-          --_sf-dt-sec-mw,
-          min(100%, prepareMediaVariable(--_ctm-sec-lt-wh))
-        ) !important;
-        // min-height: prepareMediaVariable(--_ctm-sec-lt-mn-ht);
-        margin-inline: auto;
-        position: var(--_p-relative);
-        width: 100%;
-        // padding-inline: 10px;
-        // padding-block: 10px;
-        padding: prepareMediaVariable(--_ctm-sec-lt-pg);
-        column-gap: prepareMediaVariable(--_ctm-sec-lt-cn-gp);
-        row-gap: prepareMediaVariable(--_ctm-sec-lt-rw-gp);
-
-        &[data-vf="true"] {
-          --_sf-dt-sec-mw: 100%;
-        }
-      }
-    }
-  }
-}
-
-div[data-div-type="element"] {
-  position: var(--_p-relative);
-
-  & > .wrapper {
-    grid-area: 1/1/2/2 !important;
-
-    a {
-      color: inherit;
-      text-decoration: none;
-
-      &.disabled {
-        opacity: 0.5;
-        pointer-events: none;
-      }
-    }
-  }
-
-  &[data-view-state="full"] {
-    width: auto;
-    margin: 0;
-    cursor: auto;
-    justify-self: stretch !important;
-    align-self: stretch !important;
-
-    // &:not(#{$repeterLElement}) {
-    // }
-    &:is(#{$isFlexboxElementChild}) {
-      width: 100%;
-    }
-
-    &:is(#{$activeElementSelector}) {
-      & > div {
-        &[data-div-type="wrapper__layer"] {
-          --_sf-vt-zz: visible;
-          --_sf-op-zz: 1;
-        }
-      }
-    }
-
-    & > .wrapper {
-      height: 100%;
-      width: 100%;
-    }
-  }
-
-  // &:is([data-element-type="stack"].hrz > .wrapper > [data-div-type="element"]) {
-  //   &:is([data-element-type="stack"]) {
-  //     width: max(
-  //       0.5px,
-  //       calc(#{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)} / 100) *
-  //         (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-  //     );
-  //   }
-  //   &:is([data-element-type="container"]) {
-  //     width: max(
-  //       0.5px,
-  //       calc(#{prepareMediaVariable(--_ctm-con-ele-nw-wh-vl)} / 100) *
-  //         (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-  //     );
-  //   }
-
-  //   &:not([data-element-type="container"], [data-element-type="stack"]) {
-  //     width: max(
-  //       0.5px,
-  //       calc(#{prepareMediaVariable(--_ctm-ele-nw-wh-vl)} / 100) *
-  //         (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-  //     );
-  //   }
-  // }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+@use "./position-module.scss" as *;
+@use "./animation-control.scss" as *;
+@use "./responsive-behaviour.scss" as *;
+@use "./overflow-module.scss" as *;
+@use "./transform-properties-module.scss" as *;
+
+$activeElementSelector: "[data-has-clicked='true']";
+$isFlexboxElementChild: ".flx > .wrapper > *";
+$repeterLElement: '[data-element-type="repeater"]';
+$dp: "dp_d_none";
+$tb: "tb_d_none";
+$mb: "mb_d_none";
+
+$rp: (
+  class: (
+    #{$tb}: (
+        laptop: (
+          display: "none !important",
+        ),
+      ),
+    #{$dp}: (
+        desktop: (
+          display: "none !important",
+        ),
+      ),
+    #{$mb}: (
+        mobile: (
+          display: "none !important",
+        ),
+      ),
+  ),
+);
+
+body {
+  // color: var(--_thm-ty-p1-tt-cr);
+  // font-family: var(--_thm-ty-p1-ft-fy);
+  // font-size: var(--_thm-ty-p1-ft-se);
+  // font-weight: var(--_thm-ty-p1-bd);
+  // font-style: var(--_thm-ty-p1-ic);
+  // text-align: var(--_thm-ty-p1-tt-an);
+  // letter-spacing: var(--_thm-ty-p1-cr-sg);
+  // line-height: var(--_thm-ty-p1-le-ht);
+  // text-decoration: var(--_thm-ty-p1-ue);
+
+  // Responsive
+  // @include prepareCustomClassCSSProps($rp);
+  @include prepareCustomClassCSSPropsV2($rp);
+
+  // Animation
+  @include FlexAnimationModuleStyles();
+
+  // Position
+  @include FlexPositionModuleStyles();
+
+  // Responsive
+  @include FlexElementResponsiveBehaviourStyles();
+
+  // Overflow
+  // @include FlexOverflowModuleStyles();
+
+  // Additional Tranform Properties
+  @include FlexElementTransformProps();
+
+  // Page Styles
+  &[data-iframe-body="true"],
+  &[data-iframe-preview-body="true"],
+  &:has(> #__next) {
+    border-color: prepareMediaVariable(--_ctm-pag-dn-br-cr);
+    border-style: prepareMediaVariable(--_ctm-pag-dn-br-se);
+    border-width: prepareMediaVariable(--_ctm-pag-dn-br-wh);
+    border-radius: prepareMediaVariable(--_ctm-pag-dn-br-rs);
+
+    background-color: prepareMediaVariable(--_ctm-pag-dn-bd-cr);
+    background-image: prepareMediaVariable(--_ctm-pag-dn-bd-ie);
+    background-attachment: prepareMediaVariable(--_ctm-pag-dn-bd-at);
+    background-position: prepareMediaVariable(--_ctm-pag-dn-bd-pn);
+    background-position-y: prepareMediaVariable(--_ctm-pag-dn-bd-pn-y);
+    background-repeat: prepareMediaVariable(--_ctm-pag-dn-bd-rt);
+    background-size: prepareMediaVariable(--_ctm-pag-dn-bd-se);
+
+    padding: prepareMediaVariable(--_ctm-pag-lt-pg, 0px);
+  }
+}
+
+section {
+  &[data-div-type="section"] {
+    position: var(--_p-relative);
+    width: 100%;
+    margin: prepareMediaVariable(--_ctm-sec-lt-mn);
+    flex-direction: column;
+    justify-self: stretch;
+    align-self: stretch;
+    justify-content: center;
+    --_sf-element-vt-pd: max(
+      0.5px,
+      0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+    );
+    --_sf-element-hr-pd: max(
+      0.5px,
+      0.0117188 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+    );
+    box-shadow: var(
+      --_hide-section-shadow,
+      prepareMediaVariable(--_ctm-sec-dn-sw-ae) prepareMediaVariable(--_ctm-sec-dn-sw-br)
+        prepareMediaVariable(--_ctm-sec-dn-sw-sd) prepareMediaVariable(--_ctm-sec-dn-sw-cr)
+    );
+    border-radius: prepareMediaVariable(--_ctm-sec-dn-br-rs) !important;
+
+    &[data-background-type="color"] {
+      background-color: prepareMediaVariable(--_ctm-sec-dn-bd-cr);
+    }
+
+    &[data-background-type="gradient"] {
+      --_sf-sec-gradient-angle: calc(#{prepareMediaVariable(--_ctm-sec-dn-gt-ae, 90)} * 1deg);
+      --_sf-sec-gradient-start-color: #{prepareMediaVariable(--_ctm-sec-dn-gt-st-cr, transparent)};
+      --_sf-sec-gradient-start-position: calc(
+        #{prepareMediaVariable(--_ctm-sec-dn-gt-st-pn, 0)} * 1%
+      );
+      --_sf-sec-gradient-end-color: #{prepareMediaVariable(--_ctm-sec-dn-gt-ed-cr, transparent)};
+      --_sf-sec-gradient-end-position: calc(
+        #{prepareMediaVariable(--_ctm-sec-dn-gt-ed-pn, 100)} * 1%
+      );
+      --_sf-sec-gradient-position: #{prepareMediaVariable(--_ctm-sec-dn-gt-pn, center)};
+
+      &[data-gradient-type="Linear Gradient"] {
+        background-image: linear-gradient(
+          var(--_sf-sec-gradient-angle),
+          var(--_sf-sec-gradient-start-color) var(--_sf-sec-gradient-start-position),
+          var(--_sf-sec-gradient-end-color) var(--_sf-sec-gradient-end-position)
+        );
+      }
+
+      &[data-gradient-type="Radial Gradient"] {
+        background-image: radial-gradient(
+          circle at var(--_sf-sec-gradient-position),
+          var(--_sf-sec-gradient-start-color) var(--_sf-sec-gradient-start-position),
+          var(--_sf-sec-gradient-end-color) var(--_sf-sec-gradient-end-position)
+        );
+      }
+    }
+
+    &[data-background-type="image"] {
+      background-image: prepareMediaVariable(--_ctm-sec-dn-bd-ie);
+      background-attachment: prepareMediaVariable(--_ctm-sec-dn-bd-at);
+      background-position: prepareMediaVariable(--_ctm-sec-dn-bd-pn);
+      background-position-y: prepareMediaVariable(--_ctm-sec-dn-bd-pn-y);
+      background-repeat: prepareMediaVariable(--_ctm-sec-dn-bd-rt);
+      background-size: prepareMediaVariable(--_ctm-sec-dn-bd-se);
+    }
+
+    &[data-show-shadow="false"] {
+      --_hide-section-shadow: none;
+    }
+
+    &[data-show-border="false"] {
+      --_hide-section-border: none;
+    }
+
+    &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
+      display: var(--_d-flex) !important;
+    }
+
+    & > div {
+      &[data-type="wrapper-layer"] {
+        display: var(--_d-flex) !important;
+        pointer-events: none;
+        position: var(--_p-absolute);
+        visibility: visible !important;
+        inset: 0 0 0 0;
+        // border-color: var(
+        //   --_hide-section-border,
+        //   var(--_ctm-mob-sec-dn-br-cr, var(--_ctm-tab-sec-dn-br-cr, var(--_ctm-sec-dn-br-cr)))
+        // );
+        border-color: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-cr));
+        border-style: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-se));
+        border-width: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-wh));
+        border-radius: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-rs));
+      }
+
+      &[data-div-type="cms-section-wrapper"] {
+        // max-width: var(--_sf-wp-mx-wt);
+        max-width: var(
+          --_sf-dt-sec-mw,
+          min(100%, prepareMediaVariable(--_ctm-sec-lt-wh))
+        ) !important;
+        // min-height: prepareMediaVariable(--_ctm-sec-lt-mn-ht);
+        margin-inline: auto;
+        position: var(--_p-relative);
+        width: 100%;
+        // padding-inline: 10px;
+        // padding-block: 10px;
+        padding: prepareMediaVariable(--_ctm-sec-lt-pg);
+        column-gap: prepareMediaVariable(--_ctm-sec-lt-cn-gp);
+        row-gap: prepareMediaVariable(--_ctm-sec-lt-rw-gp);
+
+        &[data-vf="true"] {
+          --_sf-dt-sec-mw: 100%;
+        }
+      }
+    }
+  }
+}
+
+div[data-div-type="element"] {
+  position: var(--_p-relative);
+
+  & > .wrapper {
+    grid-area: 1/1/2/2 !important;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+
+      &.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+    }
+  }
+
+  &[data-view-state="full"] {
+    width: auto;
+    margin: 0;
+    cursor: auto;
+    justify-self: stretch !important;
+    align-self: stretch !important;
+
+    // &:not(#{$repeterLElement}) {
+    // }
+    &:is(#{$isFlexboxElementChild}) {
+      width: 100%;
+    }
+
+    &:is(#{$activeElementSelector}) {
+      & > div {
+        &[data-div-type="wrapper__layer"] {
+          --_sf-vt-zz: visible;
+          --_sf-op-zz: 1;
+        }
+      }
+    }
+
+    & > .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  // &:is([data-element-type="stack"].hrz > .wrapper > [data-div-type="element"]) {
+  //   &:is([data-element-type="stack"]) {
+  //     width: max(
+  //       0.5px,
+  //       calc(#{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)} / 100) *
+  //         (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+  //     );
+  //   }
+  //   &:is([data-element-type="container"]) {
+  //     width: max(
+  //       0.5px,
+  //       calc(#{prepareMediaVariable(--_ctm-con-ele-nw-wh-vl)} / 100) *
+  //         (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+  //     );
+  //   }
+
+  //   &:not([data-element-type="container"], [data-element-type="stack"]) {
+  //     width: max(
+  //       0.5px,
+  //       calc(#{prepareMediaVariable(--_ctm-ele-nw-wh-vl)} / 100) *
+  //         (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+  //     );
+  //   }
+  // }
+}