@sc-360-v2/storefront-cms-library 0.5.50 → 0.5.52

package/dist/product-image.scss

@@ -29,10 +29,27 @@ $defaultValues: (
         )
     );
 
-    &:not(:has([data-display-style="Grid"][data-scroll-direction="Vertical"])) {
+    // Display styles whose items stack vertically, with scroll control left at "Non".
+    // These size to their content, so the element grows as more images arrive — 6
+    // products make it taller than 1. The same three modes are what EmblaCarousel's
+    // own height effect treats as content-sized, and "Non" is the branch there that
+    // takes the container's full scrollHeight instead of clamping to the viewport.
+    // Every other combination (Slider, Column, Grid + Horizontal, or any mode set to
+    // Scroll / Load More Button) keeps a fixed box and pages or scrolls inside it.
+    $contentSizedGallery: '.embla[data-scroll-control="Non"]:is([data-display-style="Grid"][data-scroll-direction="Vertical"], [data-display-style="Rows"], [data-display-style="Masonry"])';
+
+    &:not(:has(#{$contentSizedGallery})) {
       height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
     }
 
+    // Content-sized modes can't take a fixed height or they would clip the extra rows,
+    // but the Height set in Layout still has to mean something — it becomes the floor
+    // the element starts from and grows past. `min-height` is not a percentage base, so
+    // the inner `height: 80%` / `--_ctm-height` chain stays content-driven as before.
+    &:has(#{$contentSizedGallery}) {
+      min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+    }
+
     // &[data-view-state="full"] {
     //   width: auto;
     //   // height: 100%;
@@ -58,6 +75,7 @@ $defaultValues: (
     & > .wrapper {
       width: 100%;
       height: 100%;
+
       &:has(.text-element) {
         display: flex;
         align-items: start;
@@ -68,22 +86,27 @@ $defaultValues: (
         user-select: none;
         // width: 100%;
       }
+
       .product__img__wrapper {
         width: 100%;
         height: 100%;
+
         &:has(.image__fallback__contain) {
           display: flex;
           justify-content: center;
           align-items: center;
         }
+
         .image__fallback__contain {
           object-fit: contain !important;
         }
       }
     }
+
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
+
     .product_image {
       height: 100%;
       object-fit: contain;
@@ -164,6 +187,7 @@ $defaultValues: (
       border: 1px solid #ccc;
       background: #fff;
       z-index: 9;
+
       img {
         position: absolute;
         will-change: transform;
@@ -183,6 +207,7 @@ $defaultValues: (
       max-height: 100%;
       // object-fit: contain;
     }
+
     .gallery-slider-element {
       --text-high-contrast-rgb-value: 49, 49, 49;
       --detail-medium-contrast: rgb(234, 234, 234);
@@ -211,19 +236,40 @@ $defaultValues: (
 
       width: 100%;
       height: 100%;
+
+      // Gallery Widget Style > Border / Shadow toggles. Distinct names from the item
+      // ones below, because .gallery__slide is a descendant and would otherwise
+      // inherit whatever is set here.
+      &[data-show-border="false"] {
+        --_show-gy-border: none;
+      }
+
+      &[data-show-shadow="false"] {
+        --_show-gy-shadow: none;
+      }
+
       border-color: var(
-        --_ctm-mob-dn-gy-wt-se-br-cr,
-        var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr))
+        --_show-gy-border,
+        var(
+          --_ctm-mob-dn-gy-wt-se-br-cr,
+          var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr))
+        )
       );
 
       border-style: var(
-        --_ctm-mob-dn-gy-wt-se-br-se,
-        var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se))
+        --_show-gy-border,
+        var(
+          --_ctm-mob-dn-gy-wt-se-br-se,
+          var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se))
+        )
       );
 
       border-width: var(
-        --_ctm-mob-dn-gy-wt-se-br-wh,
-        var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh))
+        --_show-gy-border,
+        var(
+          --_ctm-mob-dn-gy-wt-se-br-wh,
+          var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh))
+        )
       );
 
       border-radius: var(
@@ -232,7 +278,7 @@ $defaultValues: (
       );
 
       box-shadow: var(
-        --_show-shadow,
+        --_show-gy-shadow,
         var(
             --_ctm-mob-dn-gy-wt-se-sw-ae,
             var(--_ctm-tab-dn-gy-wt-se-sw-ae, var(--_ctm-dn-gy-wt-se-sw-ae))
@@ -424,49 +470,60 @@ $defaultValues: (
         flex-direction: column;
       }
     }
+
     &[data-text-position="bottom"] {
       .gallery-slider-element {
         flex-direction: column-reverse;
       }
     }
+
     &[data-text-position="left"] {
       .gallery-slider-element {
         flex-direction: row;
       }
+
       .gallery-header {
         width: fit-content;
         height: 100%;
       }
+
       &[data-widget-alignment="top"] {
         .gallery-slider-element {
           align-items: flex-start;
         }
+
         .gallery-header {
           justify-content: flex-start;
         }
       }
+
       &[data-widget-alignment="center"] {
         .gallery-slider-element {
           align-items: center;
         }
+
         .gallery-header {
           justify-content: center;
         }
       }
+
       &[data-widget-alignment="bottom"] {
         .gallery-slider-element {
           align-items: flex-end;
         }
+
         .gallery-header {
           justify-content: flex-end;
         }
       }
     }
+
     &[data-text-position="right"] {
       .gallery-header {
         width: fit-content;
         height: 100%;
       }
+
       .gallery-slider-element {
         flex-direction: row-reverse;
       }
@@ -475,22 +532,27 @@ $defaultValues: (
         .gallery-slider-element {
           align-items: flex-start;
         }
+
         .gallery-header {
           justify-content: flex-start;
         }
       }
+
       &[data-widget-alignment="center"] {
         .gallery-slider-element {
           align-items: center;
         }
+
         .gallery-header {
           justify-content: center;
         }
       }
+
       &[data-widget-alignment="bottom"] {
         .gallery-slider-element {
           align-items: flex-end;
         }
+
         .gallery-header {
           justify-content: flex-end;
         }
@@ -576,6 +638,7 @@ $defaultValues: (
           }
         }
       }
+
       &:not([data-display-style="Column"]) {
         .embla__container {
           grid-auto-columns: calc(
@@ -591,6 +654,7 @@ $defaultValues: (
           overflow: unset;
           height: 80%;
           flex-grow: 1;
+
           &:not([data-is-builder-type="true"]) {
             height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
           }
@@ -609,9 +673,11 @@ $defaultValues: (
             grid-template-rows: unset;
 
             grid-auto-flow: row;
+
             &[data-overflow-hidden="true"] {
               overflow: hidden;
             }
+
             .embla__slide {
               aspect-ratio: 1/1.1;
             }
@@ -640,6 +706,7 @@ $defaultValues: (
           overflow: unset;
           height: 80%;
           flex-grow: 1;
+
           &:not([data-is-builder-type="true"]) {
             height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
           }
@@ -654,6 +721,7 @@ $defaultValues: (
             grid-template-rows: unset;
 
             grid-auto-flow: row;
+
             .embla__slide {
               aspect-ratio: 7 / 2;
             }
@@ -667,6 +735,7 @@ $defaultValues: (
         .embla__viewport {
           .embla__container {
             display: flex;
+
             .embla__slide {
               width: unset;
               height: 100%;
@@ -675,6 +744,7 @@ $defaultValues: (
           }
         }
       }
+
       &[data-display-style="Masonry"] {
         // overflow: unset;
 
@@ -682,9 +752,11 @@ $defaultValues: (
           overflow: hidden;
           height: 80%;
           flex-grow: 1;
+
           &:not([data-is-builder-type="true"]) {
             height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
           }
+
           .embla__container {
             overflow: unset;
 
@@ -708,6 +780,7 @@ $defaultValues: (
               );
 
               height: unset;
+
               .gallery__slide {
                 height: unset;
               }
@@ -736,6 +809,7 @@ $defaultValues: (
           bottom: 10px;
           top: unset;
         }
+
         &[data-control-type="Bottom"] {
           transform: unset;
           position: static;
@@ -745,16 +819,19 @@ $defaultValues: (
           margin-top: 10px;
         }
       }
+
       &[data-control-type="Side"] {
         .left-button,
         .right-button {
           background-color: transparent;
         }
       }
+
       &[data-background-shape="Round"] {
         .left-button,
         .right-button {
           @include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 10%);
+
           &:not(:disabled):hover {
             @include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 20%);
           }
@@ -780,8 +857,10 @@ $defaultValues: (
         cursor: pointer;
         outline: none;
         margin-left: 12px;
+
         span {
           display: flex;
+
           svg {
             width: calc(
               var(
@@ -806,6 +885,7 @@ $defaultValues: (
             }
           }
         }
+
         &:disabled {
           & svg {
             path {
@@ -814,6 +894,7 @@ $defaultValues: (
           }
         }
       }
+
       .right-button {
         border-radius: 50%;
         border: none;
@@ -833,8 +914,10 @@ $defaultValues: (
         outline: none;
         margin-right: 12px;
         padding: 10px;
+
         span {
           display: flex;
+
           svg {
             width: calc(
               var(
@@ -859,6 +942,7 @@ $defaultValues: (
             }
           }
         }
+
         &:disabled {
           & svg {
             path {
@@ -867,8 +951,10 @@ $defaultValues: (
           }
         }
       }
+
       .icon {
         display: flex;
+
         svg {
           width: calc(
             var(
@@ -904,9 +990,11 @@ $defaultValues: (
       &[data-thumbnail-placement="top"] {
         flex-direction: column-reverse;
       }
+
       &[data-thumbnail-placement="bottom"] {
         flex-direction: column;
       }
+
       &[data-thumbnail-placement="left"] {
         flex-direction: row-reverse;
 
@@ -938,8 +1026,10 @@ $defaultValues: (
           }
         }
       }
+
       &[data-thumbnail-placement="right"] {
         flex-direction: row;
+
         .embla__thumbs {
           width: var(--_ctm-mob-lt-tl-wh, var(--_ctm-tab-lt-tl-wh, var(--_ctm-lt-tl-wh)));
           height: 100%;
@@ -968,10 +1058,12 @@ $defaultValues: (
           }
         }
       }
+
       &[data-control-type="Side"] {
         flex-direction: row;
         align-items: center;
       }
+
       .embla__dots {
         display: flex;
         flex-wrap: wrap;
@@ -988,6 +1080,7 @@ $defaultValues: (
           transform: translateX(-50%);
           width: 75%;
         }
+
         .embla__dot {
           -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
           -webkit-appearance: none;
@@ -1020,6 +1113,7 @@ $defaultValues: (
           justify-content: center;
           border-radius: 50%;
         }
+
         .embla__dot:after {
           // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
           width: var(
@@ -1036,6 +1130,7 @@ $defaultValues: (
           align-items: center;
           content: "";
         }
+
         .embla__dot--selected:after {
           box-shadow: inset 0 0 0 1px var(--text-body);
           background-color: var(
@@ -1043,6 +1138,7 @@ $defaultValues: (
             var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
           );
         }
+
         &[data-slider-control="Pagination Line"] {
           .embla__dot {
             width: var(
@@ -1062,6 +1158,7 @@ $defaultValues: (
 
             border-radius: 6px;
           }
+
           .embla__dot--selected:after {
             box-shadow: inset 0 0 0 1px var(--text-body);
             border-radius: 6px;
@@ -1124,6 +1221,7 @@ $defaultValues: (
 
           span {
             display: flex;
+
             svg {
               width: calc(
                 var(
@@ -1139,6 +1237,7 @@ $defaultValues: (
                   ) *
                   0.5
               );
+
               path {
                 stroke: var(
                   --_ctm-mob-dn-tl-as-aw-cr,
@@ -1158,11 +1257,13 @@ $defaultValues: (
           .thumb-prev-button,
           .thumb-next-button {
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
             &:not(:disabled):hover {
               @include BgColorLighter(var(--_ctm-dn-tl-as-bd-cr), 5%);
             }
           }
         }
+
         // margin: 10px;
         // padding: 10px;
 
@@ -1177,6 +1278,7 @@ $defaultValues: (
 
           overflow: hidden;
         }
+
         .embla__thumbs__container {
           display: flex;
           flex-direction: row;
@@ -1317,17 +1419,22 @@ $defaultValues: (
     }
 
     .gallery__slide {
+      position: relative;
+
       img[data-has-link="true"] {
         cursor: pointer;
       }
+
       img[data-zoom="true"]:is([data-element-type="productDetails"] *) {
         cursor: zoom-in;
       }
+
       width: 100%;
       max-width: 100%;
       height: 100%;
       display: flex;
       flex: 0 0 auto;
+
       div {
         position: relative;
         overflow: hidden;
@@ -1341,17 +1448,27 @@ $defaultValues: (
         --_ctm-mob-dn-im-se-bd-cr,
         var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
       );
+
+      // Item Style > Border / Shadow toggles.
+      &[data-show-border="false"] {
+        --_show-im-border: none;
+      }
+
+      &[data-show-shadow="false"] {
+        --_show-im-shadow: none;
+      }
+
       border-color: var(
-        --_ctm-mob-dn-im-se-br-cr,
-        var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
+        --_show-im-border,
+        var(--_ctm-mob-dn-im-se-br-cr, var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr)))
       );
       border-style: var(
-        --_ctm-mob-dn-im-se-br-se,
-        var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
+        --_show-im-border,
+        var(--_ctm-mob-dn-im-se-br-se, var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se)))
       );
       border-width: var(
-        --_ctm-mob-dn-im-se-br-wh,
-        var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
+        --_show-im-border,
+        var(--_ctm-mob-dn-im-se-br-wh, var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh)))
       );
       border-radius: var(
         --_ctm-mob-dn-im-se-br-rs,
@@ -1359,7 +1476,7 @@ $defaultValues: (
       );
 
       box-shadow: var(
-        --_show-shadow,
+        --_show-im-shadow,
         var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae)))
           var(--_ctm-mob-dn-im-se-sw-br, var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br)))
           var(--_ctm-mob-dn-im-se-sw-sd, var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd)))
@@ -1370,6 +1487,7 @@ $defaultValues: (
         --_ctm-mob-dn-im-lt-gy-tt-ad-im-sg,
         var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg))
       );
+      overflow: hidden;
 
       .gallery-header {
         display: flex;
@@ -1507,12 +1625,14 @@ $defaultValues: (
       img {
         // object-fit: contain;
       }
+
       &[data-text-position="On Image"] {
         .gallery-header {
           width: 100%;
           // height: 100%;
           position: absolute;
         }
+
         a:has(img) {
           width: 100%;
         }
@@ -1526,6 +1646,7 @@ $defaultValues: (
             justify-content: flex-start;
           }
         }
+
         &[data-widget-alignment="center"] {
           // align-items: center;
 
@@ -1535,6 +1656,7 @@ $defaultValues: (
             justify-content: center;
           }
         }
+
         &[data-widget-alignment="bottom"] {
           // align-items: flex-end;
           .gallery-header {
@@ -1552,6 +1674,7 @@ $defaultValues: (
       &[data-text-position="bottom"] {
         flex-direction: column-reverse;
       }
+
       &[data-text-position="left"] {
         flex-direction: row;
 
@@ -1559,6 +1682,7 @@ $defaultValues: (
           width: fit-content;
           height: 100%;
         }
+
         &[data-widget-alignment="top"] {
           align-items: flex-start;
 
@@ -1566,6 +1690,7 @@ $defaultValues: (
             justify-content: flex-start;
           }
         }
+
         &[data-widget-alignment="center"] {
           align-items: center;
 
@@ -1573,6 +1698,7 @@ $defaultValues: (
             justify-content: center;
           }
         }
+
         &[data-widget-alignment="bottom"] {
           align-items: flex-end;
 
@@ -1581,8 +1707,10 @@ $defaultValues: (
           }
         }
       }
+
       &[data-text-position="right"] {
         flex-direction: row-reverse;
+
         .gallery-header {
           width: fit-content;
           height: 100%;
@@ -1595,6 +1723,7 @@ $defaultValues: (
             justify-content: flex-start;
           }
         }
+
         &[data-widget-alignment="center"] {
           align-items: center;
 
@@ -1602,6 +1731,7 @@ $defaultValues: (
             justify-content: center;
           }
         }
+
         &[data-widget-alignment="bottom"] {
           align-items: flex-end;
 
@@ -1610,13 +1740,15 @@ $defaultValues: (
           }
         }
       }
+
       img {
         width: 100%;
         height: 100%;
-        border-radius: var(
-          --_ctm-mob-dn-im-se-br-rs,
-          var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
-        );
+        overflow: hidden;
+        // border-radius: var(
+        //   --_ctm-mob-dn-im-se-br-rs,
+        //   var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
+        // );
         //   object-fit: cover;
 
         // object-fit: var(--_ctm-dn-im-se-ot-ft, var(--_tst-dn-im-se-ot-ft));
@@ -1628,12 +1760,35 @@ $defaultValues: (
 
         /* display: block; */
       }
+
+      .zoom-icon-overlay {
+        position: absolute !important;
+        top: 12px;
+        left: 12px;
+        z-index: 20;
+
+        width: 40px;
+        height: 40px;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.9);
+
+        font-size: 20px;
+        pointer-events: none;
+
+        transition: opacity 0.2s ease;
+      }
     }
 
     .load__more__div {
       display: flex;
       justify-content: center;
       margin-block: 12px;
+
       & > button {
         padding-inline: 24px;
         border: 1px solid gray;
@@ -1647,6 +1802,7 @@ $defaultValues: (
 html:has(.pim__main) {
   scrollbar-gutter: stable;
 }
+
 body:has(.pim__main) {
   overflow-y: clip;
 }
@@ -1692,6 +1848,7 @@ body:has(.pim__main) {
       svg {
         width: 18px;
         height: 18px;
+
         path {
           color: #000;
         }
@@ -1710,6 +1867,7 @@ body:has(.pim__main) {
       img {
         max-width: 100%;
       }
+
       .pim__nav {
         position: absolute;
         top: 50%;
@@ -1729,6 +1887,7 @@ body:has(.pim__main) {
         svg {
           width: 16px;
           height: 16px;
+
           path {
             color: #000;
           }