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

package/dist/repeater-item.scss

@@ -1,152 +1,152 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-[data-div-type="element"] {
-  &[data-element-type="repeater-item"] {
-    // 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-repe-ele-nw-wh-vl, auto));
-    // width: 100%;
-    // height: var(--_ctm-con-lt-ht);
-    // margin: var(--_ctm-repe-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
-
-    // width: 100%;
-    // background: var(--_ctm-repe-dn-bd-cr);
-
-    height: 100%;
-    // inline `min-height: 0px` on the element needs !important to be overridden
-    min-height: prepareMediaVariable(--_ctm-repe-lt-mn-ht, 100px) !important;
-
-    // The item's own Show Shadow switch, which reaches the stylesheet as
-    // `data-show-shadow` (RepeaterItem surfaces it — it is a control, so it is not
-    // part of the BUILDER attributes that get spread onto the element).
-    &[data-show-shadow="false"] {
-      --_sf-repe-show-shadow: none;
-    }
-
-    & > div {
-      &.wrapper {
-        width: 100%;
-        height: 100%;
-        min-height: prepareMediaVariable(--_ctm-repe-lt-mn-ht, 100px) !important;
-        padding: var(--_ctm-mob-repe-lt-pg, var(--_ctm-tab-repe-lt-pg, var(--_ctm-repe-lt-pg)));
-        //margin: var(--_ctm-mob-repe-lt-mn, var(--_ctm-tab-repe-lt-mn, var(--_ctm-repe-lt-mn)));
-
-        // background-color: var(
-        //   --_ctm-mob-repe-dn-bd-cr,
-        //   var(--_ctm-tab-repe-dn-bd-cr, var(--_ctm-repe-dn-bd-cr))
-        // );
-        // background-image: var(
-        //   --_ctm-mob-repe-dn-bd-ie,
-        //   var(--_ctm-tab-repe-dn-bd-ie, var(--_ctm-repe-dn-bd-ie))
-        // );
-        // background-attachment: var(
-        //   --_ctm-mob-repe-dn-bd-at,
-        //   var(--_ctm-tab-repe-dn-bd-at, var(--_ctm-repe-dn-bd-at))
-        // );
-        // background-position: var(
-        //   --_ctm-mob-repe-dn-bd-pn,
-        //   var(--_ctm-tab-repe-dn-bd-pn, var(--_ctm-repe-dn-bd-pn))
-        // );
-        // background-repeat: var(
-        //   --_ctm-mob-repe-dn-bd-rt,
-        //   var(--_ctm-tab-repe-dn-bd-rt, var(--_ctm-repe-dn-bd-rt))
-        // );
-        // background-size: var(
-        //   --_ctm-mob-repe-dn-bd-se,
-        //   var(--_ctm-tab-repe-dn-bd-se, var(--_ctm-repe-dn-bd-se))
-        // );
-        border-radius: var(
-          --_ctm-mob-repe-dn-br-rs,
-          var(--_ctm-tab-repe-dn-br-rs, var(--_ctm-repe-dn-br-rs))
-        );
-        border-color: var(
-          --_ctm-mob-repe-dn-br-cr,
-          var(--_ctm-tab-repe-dn-br-cr, var(--_ctm-repe-dn-br-cr))
-        );
-        border-style: var(
-          --_ctm-mob-repe-dn-br-se,
-          var(--_ctm-tab-repe-dn-br-se, var(--_ctm-repe-dn-br-se))
-        );
-        border-width: var(
-          --_ctm-mob-repe-dn-br-wh,
-          var(--_ctm-tab-repe-dn-br-wh, var(--_ctm-repe-dn-br-wh))
-        );
-        // The four shadow variables read `repe-se-*`, but the design section is
-        // `design`, so the builder writes `repe-dn-*` (see default-templates.ts). No
-        // `repe-se-*` variable is ever defined, which made the whole var() chain
-        // invalid at computed-value time and resolved box-shadow to its initial `none`.
-        //
-        // The gate is `--_sf-repe-show-shadow`, not the shared `--_show-shadow`: the
-        // parent Repeater sets that on its own root when its shadow is switched off, and
-        // custom properties inherit, so items lost their shadow whenever the repeater's
-        // was off. A name of its own keeps the two switches independent. The hover
-        // variables that used to head this chain are gone with it — this element has no
-        // hover state, so nothing set them and they carried the same leak risk.
-        //
-        // Per-part fallbacks match repeater.scss: without them a single unset part would
-        // invalidate the whole declaration again.
-        box-shadow: var(
-          --_sf-repe-show-shadow,
-          var(--_ctm-mob-repe-dn-sw-ae, var(--_ctm-tab-repe-dn-sw-ae, var(--_ctm-repe-dn-sw-ae, 0)))
-            var(
-              --_ctm-mob-repe-dn-sw-br,
-              var(--_ctm-tab-repe-dn-sw-br, var(--_ctm-repe-dn-sw-br, 0))
-            )
-            var(
-              --_ctm-mob-repe-dn-sw-sd,
-              var(--_ctm-tab-repe-dn-sw-sd, var(--_ctm-repe-dn-sw-sd, 0))
-            )
-            var(
-              --_ctm-mob-repe-dn-sw-cr,
-              var(--_ctm-tab-repe-dn-sw-cr, var(--_ctm-repe-dn-sw-cr, transparent))
-            )
-        );
-      }
-      &:is([data-background-type="color"] > *).wrapper {
-        background-color: #{prepareMediaVariable(--_ctm-repe-dn-bd-cr)};
-      }
-
-      &:is([data-background-type="gradient"] > *).wrapper {
-        --_sf-repe-gradient-angle: calc(#{prepareMediaVariable(--_ctm-repe-dn-gt-ae, 90)} * 1deg);
-        --_sf-repe-gradient-start-color: #{prepareMediaVariable(
-            --_ctm-repe-dn-gt-st-cr,
-            transparent
-          )};
-        --_sf-repe-gradient-start-position: calc(
-          #{prepareMediaVariable(--_ctm-repe-dn-gt-st-pn, 0)} * 1%
-        );
-        --_sf-repe-gradient-end-color: #{prepareMediaVariable(--_ctm-repe-dn-gt-ed-cr, transparent)};
-        --_sf-repe-gradient-end-position: calc(
-          #{prepareMediaVariable(--_ctm-repe-dn-gt-ed-pn, 100)} * 1%
-        );
-        --_sf-repe-gradient-position: #{prepareMediaVariable(--_ctm-repe-dn-gt-pn, center)};
-      }
-
-      &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
-        background-image: linear-gradient(
-          var(--_sf-repe-gradient-angle),
-          var(--_sf-repe-gradient-start-color) var(--_sf-repe-gradient-start-position),
-          var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position)
-        );
-      }
-
-      &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
-        background-image: radial-gradient(
-          circle at var(--_sf-repe-gradient-position),
-          var(--_sf-repe-gradient-start-color) var(--_sf-repe-gradient-start-position),
-          var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position)
-        );
-      }
-      &:is([data-background-type="image"] > *).wrapper {
-        background-image: prepareMediaVariable(--_ctm-repe-dn-bd-ie);
-        background-attachment: prepareMediaVariable(--_ctm-repe-dn-bd-at);
-        background-position: prepareMediaVariable(--_ctm-repe-dn-bd-pn);
-        background-position-y: prepareMediaVariable(--_ctm-repe-dn-bd-pn-y);
-        background-repeat: prepareMediaVariable(--_ctm-repe-dn-bd-rt);
-        background-size: prepareMediaVariable(--_ctm-repe-dn-bd-se);
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+[data-div-type="element"] {
+  &[data-element-type="repeater-item"] {
+    // 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-repe-ele-nw-wh-vl, auto));
+    // width: 100%;
+    // height: var(--_ctm-con-lt-ht);
+    // margin: var(--_ctm-repe-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
+
+    // width: 100%;
+    // background: var(--_ctm-repe-dn-bd-cr);
+
+    height: 100%;
+    // inline `min-height: 0px` on the element needs !important to be overridden
+    min-height: prepareMediaVariable(--_ctm-repe-lt-mn-ht, 100px) !important;
+
+    // The item's own Show Shadow switch, which reaches the stylesheet as
+    // `data-show-shadow` (RepeaterItem surfaces it — it is a control, so it is not
+    // part of the BUILDER attributes that get spread onto the element).
+    &[data-show-shadow="false"] {
+      --_sf-repe-show-shadow: none;
+    }
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+        height: 100%;
+        min-height: prepareMediaVariable(--_ctm-repe-lt-mn-ht, 100px) !important;
+        padding: var(--_ctm-mob-repe-lt-pg, var(--_ctm-tab-repe-lt-pg, var(--_ctm-repe-lt-pg)));
+        //margin: var(--_ctm-mob-repe-lt-mn, var(--_ctm-tab-repe-lt-mn, var(--_ctm-repe-lt-mn)));
+
+        // background-color: var(
+        //   --_ctm-mob-repe-dn-bd-cr,
+        //   var(--_ctm-tab-repe-dn-bd-cr, var(--_ctm-repe-dn-bd-cr))
+        // );
+        // background-image: var(
+        //   --_ctm-mob-repe-dn-bd-ie,
+        //   var(--_ctm-tab-repe-dn-bd-ie, var(--_ctm-repe-dn-bd-ie))
+        // );
+        // background-attachment: var(
+        //   --_ctm-mob-repe-dn-bd-at,
+        //   var(--_ctm-tab-repe-dn-bd-at, var(--_ctm-repe-dn-bd-at))
+        // );
+        // background-position: var(
+        //   --_ctm-mob-repe-dn-bd-pn,
+        //   var(--_ctm-tab-repe-dn-bd-pn, var(--_ctm-repe-dn-bd-pn))
+        // );
+        // background-repeat: var(
+        //   --_ctm-mob-repe-dn-bd-rt,
+        //   var(--_ctm-tab-repe-dn-bd-rt, var(--_ctm-repe-dn-bd-rt))
+        // );
+        // background-size: var(
+        //   --_ctm-mob-repe-dn-bd-se,
+        //   var(--_ctm-tab-repe-dn-bd-se, var(--_ctm-repe-dn-bd-se))
+        // );
+        border-radius: var(
+          --_ctm-mob-repe-dn-br-rs,
+          var(--_ctm-tab-repe-dn-br-rs, var(--_ctm-repe-dn-br-rs))
+        );
+        border-color: var(
+          --_ctm-mob-repe-dn-br-cr,
+          var(--_ctm-tab-repe-dn-br-cr, var(--_ctm-repe-dn-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-repe-dn-br-se,
+          var(--_ctm-tab-repe-dn-br-se, var(--_ctm-repe-dn-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-repe-dn-br-wh,
+          var(--_ctm-tab-repe-dn-br-wh, var(--_ctm-repe-dn-br-wh))
+        );
+        // The four shadow variables read `repe-se-*`, but the design section is
+        // `design`, so the builder writes `repe-dn-*` (see default-templates.ts). No
+        // `repe-se-*` variable is ever defined, which made the whole var() chain
+        // invalid at computed-value time and resolved box-shadow to its initial `none`.
+        //
+        // The gate is `--_sf-repe-show-shadow`, not the shared `--_show-shadow`: the
+        // parent Repeater sets that on its own root when its shadow is switched off, and
+        // custom properties inherit, so items lost their shadow whenever the repeater's
+        // was off. A name of its own keeps the two switches independent. The hover
+        // variables that used to head this chain are gone with it — this element has no
+        // hover state, so nothing set them and they carried the same leak risk.
+        //
+        // Per-part fallbacks match repeater.scss: without them a single unset part would
+        // invalidate the whole declaration again.
+        box-shadow: var(
+          --_sf-repe-show-shadow,
+          var(--_ctm-mob-repe-dn-sw-ae, var(--_ctm-tab-repe-dn-sw-ae, var(--_ctm-repe-dn-sw-ae, 0)))
+            var(
+              --_ctm-mob-repe-dn-sw-br,
+              var(--_ctm-tab-repe-dn-sw-br, var(--_ctm-repe-dn-sw-br, 0))
+            )
+            var(
+              --_ctm-mob-repe-dn-sw-sd,
+              var(--_ctm-tab-repe-dn-sw-sd, var(--_ctm-repe-dn-sw-sd, 0))
+            )
+            var(
+              --_ctm-mob-repe-dn-sw-cr,
+              var(--_ctm-tab-repe-dn-sw-cr, var(--_ctm-repe-dn-sw-cr, transparent))
+            )
+        );
+      }
+      &:is([data-background-type="color"] > *).wrapper {
+        background-color: #{prepareMediaVariable(--_ctm-repe-dn-bd-cr)};
+      }
+
+      &:is([data-background-type="gradient"] > *).wrapper {
+        --_sf-repe-gradient-angle: calc(#{prepareMediaVariable(--_ctm-repe-dn-gt-ae, 90)} * 1deg);
+        --_sf-repe-gradient-start-color: #{prepareMediaVariable(
+            --_ctm-repe-dn-gt-st-cr,
+            transparent
+          )};
+        --_sf-repe-gradient-start-position: calc(
+          #{prepareMediaVariable(--_ctm-repe-dn-gt-st-pn, 0)} * 1%
+        );
+        --_sf-repe-gradient-end-color: #{prepareMediaVariable(--_ctm-repe-dn-gt-ed-cr, transparent)};
+        --_sf-repe-gradient-end-position: calc(
+          #{prepareMediaVariable(--_ctm-repe-dn-gt-ed-pn, 100)} * 1%
+        );
+        --_sf-repe-gradient-position: #{prepareMediaVariable(--_ctm-repe-dn-gt-pn, center)};
+      }
+
+      &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
+        background-image: linear-gradient(
+          var(--_sf-repe-gradient-angle),
+          var(--_sf-repe-gradient-start-color) var(--_sf-repe-gradient-start-position),
+          var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position)
+        );
+      }
+
+      &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
+        background-image: radial-gradient(
+          circle at var(--_sf-repe-gradient-position),
+          var(--_sf-repe-gradient-start-color) var(--_sf-repe-gradient-start-position),
+          var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position)
+        );
+      }
+      &:is([data-background-type="image"] > *).wrapper {
+        background-image: prepareMediaVariable(--_ctm-repe-dn-bd-ie);
+        background-attachment: prepareMediaVariable(--_ctm-repe-dn-bd-at);
+        background-position: prepareMediaVariable(--_ctm-repe-dn-bd-pn);
+        background-position-y: prepareMediaVariable(--_ctm-repe-dn-bd-pn-y);
+        background-repeat: prepareMediaVariable(--_ctm-repe-dn-bd-rt);
+        background-size: prepareMediaVariable(--_ctm-repe-dn-bd-se);
+      }
+    }
+  }
+}