@sc-360-v2/storefront-cms-library 0.5.60 → 0.5.61

package/dist/image-temp.scss

@@ -8,7 +8,6 @@ $fullViewOn: '[data-view-state="full"]';
 $isFlexboxElementChild: ".flx > .wrapper > *";
 
 [data-div-type="element"] {
-
   &[data-element-type="image"],
   &[data-element-type="brandImage"],
   &[data-element-type="categoryImage"],
@@ -16,7 +15,6 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
     &:has(a) {
       cursor: pointer;
     }
-
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
     // margin: var(--_lt-mn);
@@ -33,37 +31,38 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
       // overflow: clip;
       overflow: visible;
 
-      &>.wrapper {
+      & > .wrapper {
         visibility: hidden;
         opacity: 0;
       }
     }
-
     // width: prepareMediaVariable(--_ctm-lt-wh);
     &:not(#{$resizerOn}, #{$dndOn}, #{$fullViewOn}) {
       height: prepareMediaVariable(--_ctm-lt-ht) !important;
     }
-
     // &:not([data-element-type="image"]) {
     // }
 
-    --_aspect-ratio: calc(1 * (var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) / var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))));
+    --_aspect-ratio: calc(
+      1 *
+        (
+          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
+            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
+        )
+    );
 
     &#{$fullViewOn} {
       &:not(#{$isFlexboxElementChild}) {
         aspect-ratio: 1/0.01;
       }
-
-      &>.wrapper {
+      & > .wrapper {
         // The element trades its fixed height for an aspect-ratio here, so the
         // wrapper cannot keep tracking --_ctm-lt-ht.
         height: 100%;
-
-        &>div {
+        & > div {
           height: 100%;
         }
       }
-
       img {
         height: 100%;
         object-fit: cover;
@@ -73,7 +72,6 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
     &[data-cms-element-resizer="true"] {
       // height: var(--_ctm-lt-ht);
       width: auto;
-
       img {
         // width: 100%;
         height: 100%;
@@ -81,25 +79,40 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
     }
 
     :is(:not([data-iframe-body="true"] *)) {
-      &>.wrapper {
+      & > .wrapper {
         overflow: clip;
       }
     }
 
-    &>.wrapper {
+    & > .wrapper {
       width: 100%;
       // Padding, border and shadow below are painted on this box, so it has to
       // match the element instead of sizing to the image. Without a definite
       // border-box height the border lands outside the element's fixed height
       // and the top/bottom edges get clipped; without border-box the width grows
       // past the element and the outline sits wider than the image.
-      // Tracks the var rather than 100% because the element drops its own height
-      // while resizing, dragging or in full view.
-      height: prepareMediaVariable(--_ctm-lt-ht);
+      // 100% rather than --_ctm-lt-ht: while resizing, dragging or in full view the
+      // element drops its own height, and a wrapper still pinned to the layout
+      // height kept a short box around a taller picture, so the image spilled over
+      // whatever sat below it on the canvas. Following the element keeps this box
+      // definite whenever the element has a height, and lets the two grow together
+      // when it does not.
+      height: 100%;
       box-sizing: border-box;
       // overflow: clip;
       rotate: calc(var(--_ctm-dn-re) * 1deg);
 
+      // FlexAnchorTag renders an <a> and CategoryImage adds a click <div> between
+      // this wrapper and the image, both height:auto by default. That left the
+      // image's own `height: 100%` with nothing definite to resolve against, so it
+      // fell back to the picture's natural size and escaped the box — 167px of logo
+      // in a 30px brand image. `:has` keeps this off the builder resizer, which
+      // carries no image.
+      :is(a, div):has(.image-element) {
+        display: block;
+        height: 100%;
+      }
+
       &:is(:not(:has([class*="crop__main"]) *)) {
         padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
         background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
@@ -107,8 +120,13 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
         border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
         border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
         border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-        box-shadow: var(--_show-shadow,
-            var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae))) var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br))) var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd))) var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr))));
+        box-shadow: var(
+          --_show-shadow,
+          var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+            var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
+            var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+            var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
+        );
         // &[data-show-shadow] {
         // }
 
@@ -118,11 +136,9 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
         overflow: hidden;
       }
     }
-
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
-
     // .text-element {
     //   // background: #6d96e4;
     //   // padding: 10px;
@@ -171,7 +187,6 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
         &[data-on-hover="Zoom Out"] {
           transform: scale(0.9998);
         }
-
         &[data-on-hover="Zoom In"] {
           transform: scale(1.08);
         }
@@ -181,9 +196,8 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
     .image__fallback__contain {
       object-fit: contain !important;
     }
-
     // .image-element:hover {
     //   padding: 30px;
     // }
   }
-}
+}

package/dist/item-stock.scss

@@ -4,15 +4,22 @@
 
 [data-div-type="element"] {
   &[data-element-type="itemStock"] {
-    width: var(--_sf-el-wh-st-mx,
-        calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
-            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
     height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
     position: relative;
 
-    &>.wrapper {
+    & > .wrapper {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -25,10 +32,8 @@
       align-items: center;
       cursor: pointer;
       gap: 8px;
-
       .item__stock__heading {
         position: relative;
-
         .item__stock__text {
           font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
           text-transform: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-tm);
@@ -43,7 +48,6 @@
           letter-spacing: prepareMediaVariable(--_ctm-dn-im-sk-tt-lr-sg);
           line-height: prepareMediaVariable(--_ctm-dn-im-sk-tt-le-ht);
         }
-
         .stock_message_conatainer {
           display: flex;
           padding: 2px 8px 2px 6px;
@@ -55,7 +59,10 @@
           border-color: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-cr);
           border-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-se);
           border-radius: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-ae) prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-br) prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-sd) prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-cr);
+          box-shadow: prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-ae)
+            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-br)
+            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-sd)
+            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-cr);
 
           .stock_messages {
             font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
@@ -83,4 +90,4 @@
       --_show-shadow: none;
     }
   }
-}
+}