@sc-360-v2/storefront-cms-library 0.5.1 → 0.5.3

package/dist/product-image.scss

@@ -2,6 +2,11 @@
 @use "sass:list";
 @use "./functions.scss" as *;
 
+$defaultValues: (
+  --_sf-mgn-wdth-vl: getListOfResponsive(1117px, 340px, 747px),
+  --_sf-mgn-height-vl: getListOfResponsive(1400px, 700px, 1040px),
+);
+
 [data-div-type="element"] {
   &[data-element-type="productImage"] {
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
@@ -1302,6 +1307,10 @@
                 var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
             }
 
+            & > div {
+              height: 100%;
+            }
+
             & img {
               width: 100%;
               height: 100%;
@@ -1316,6 +1325,9 @@
       img[data-has-link="true"] {
         cursor: pointer;
       }
+      img[data-zoom="true"] {
+        cursor: zoom-in;
+      }
       width: 100%;
       max-width: 100%;
       height: 100%;
@@ -1636,3 +1648,64 @@
     }
   }
 }
+
+// Product Magnifier
+.pim__main {
+  position: var(--_p-fixed);
+  inset: 0 0 0 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: calc(var(--_higher-zIndex, 9999) + 24);
+
+  display: var(--_d-flex);
+  align-items: center;
+  justify-content: center;
+  @include prepareMediaQueries($defaultValues);
+
+  & > .pim__wrapper {
+    display: var(--_d-flex);
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+    max-width: var(--_sf-mgn-wdth-vl, 1140px);
+    height: 100dvh;
+    overflow: clip;
+    border: 1px solid #98a2b3;
+    position: relative;
+
+    & > button {
+      position: absolute;
+      right: 20px;
+      top: 20px;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: #fff;
+      z-index: 2;
+
+      display: var(--_d-flex);
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        width: 18px;
+        height: 18px;
+        path {
+          color: #000;
+        }
+      }
+    }
+
+    .pim__img__main {
+      width: 100%;
+      height: 100%;
+
+      & > .pim__img__wrapper {
+        height: 100%;
+      }
+
+      img {
+        max-width: 100%;
+      }
+    }
+  }
+}