@sc-360-v2/storefront-cms-library 0.4.81 → 0.4.82

package/dist/order-status.scss

@@ -835,7 +835,7 @@ $defaultValues: (
                   width: 6px;
                   height: 6px;
                   border-radius: 50%;
-                  background-color: var(--_thm-cs-at-py);
+                  background-color: currentColor;
                 }
                 // &.success {
                 //   background-color: var(--_success-200);

package/dist/phone-input.scss

@@ -4,17 +4,40 @@
   border: none !important;
   padding: 0 !important;
 
+  // phone input styles
+  // .sc-phone-dial-code {
+  //   padding: 8px !important;
+  // }
+  .sc-phone-input-wrapper {
+    .sc-phone-chevron {
+      display: none;
+      font-size: 0;
+      margin-top: -4px;
+      &::after {
+        content: "";
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-right: 2px solid var(--_gray-400);
+        border-bottom: 2px solid var(--_gray-400);
+        transform: rotate(45deg);
+        margin-left: 4px;
+        vertical-align: middle;
+      }
+    }
+  }
+
   .sc-phone-input-wrapper {
     display: flex;
     align-items: center;
-    border: 1px solid var(--_primary-300);
+    border: 1px solid var(--_gray-300);
     border-radius: 6px;
     height: 38px;
     background-color: var(--_base-white);
     overflow: hidden;
 
     &:focus-within {
-      outline: 2px solid var(--_primary-100);
+      outline: 2px solid var(--_gray-100);
     }
   }
 
@@ -27,7 +50,7 @@
     background: transparent;
     cursor: pointer;
     height: 100%;
-    border-right: 1px solid var(--_primary-300);
+    // border-right: 1px solid var(--_primary-300);
     flex-shrink: 0;
 
     &:disabled {
@@ -53,7 +76,7 @@
   }
 
   .sc-phone-dial-code {
-    padding: 0 4px 0 8px;
+    padding: 0 4px 0 0px;
     font-size: 14px;
     color: var(--_gray-700, #344054);
     white-space: nowrap;
@@ -68,7 +91,7 @@
     border-radius: 0 !important;
     height: 100%;
     font-size: 14px;
-    padding: 0 12px 0 0 !important;
+    padding: 16px !important;
     background: transparent !important;
     min-width: 0;
 

package/dist/product-image-bundles.scss

@@ -1,3 +1,5 @@
+@use "./functions.scss" as *;
+
 .product__image_element {
   // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
   // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
@@ -715,7 +717,7 @@
         margin-inline: auto;
       }
     }
-
+    gap: var(--_ctm-dn-pt-pl-dn-pt-ie-lt-sr-ad-tl-gp);
     &[data-thumbnail-placement="top"] {
       flex-direction: column-reverse;
     }
@@ -726,32 +728,36 @@
       flex-direction: row-reverse;
 
       .embla__thumbs {
-        width: var(
-          --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-tl-se,
-          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-tl-se, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-se))
-        );
-
+        // width: var(
+        //   --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-tl-se,
+        //   var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-tl-se, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-se))
+        // );
+        width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-wh);
+        min-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-wh);
+        gap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-sg);
         height: 100%;
 
         & .embla__thumbs__container {
           flex-direction: column;
           height: 100%;
+          justify-content: prepareMediaVariable(--_ctm-lt-an-is);
         }
       }
     }
     &[data-thumbnail-placement="right"] {
       flex-direction: row;
       .embla__thumbs {
-        width: var(
-          --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-tl-se,
-          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-tl-se, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-se))
-        );
+        // width: var(
+        //   --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-tl-se,
+        //   var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-tl-se, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-se))
+        // );
 
         height: 100%;
 
         & .embla__thumbs__container {
           flex-direction: column;
           height: 100%;
+          justify-content: prepareMediaVariable(--_ctm-lt-an-is);
         }
       }
     }
@@ -884,18 +890,18 @@
     }
 
     .embla__thumbs {
-      width: 100%;
-      height: var(
-        --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-tl-se,
-        var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-tl-se, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-se))
-      );
+      // width: 100%;
+      // height: var(
+      //   --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-tl-se,
+      //   var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-tl-se, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-se))
+      // );
 
       position: relative;
       display: grid;
       grid-template-columns: 1fr;
       overflow: hidden;
       // margin: 10px;
-      padding: 10px;
+      padding: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-pg);
 
       .embla__thumbs__viewport {
         width: 100%;
@@ -909,6 +915,7 @@
       .embla__thumbs__container {
         display: flex;
         flex-direction: row;
+        justify-content: prepareMediaVariable(--_ctm-lt-jy-ct);
         margin-left: calc(var(--thumbs-slide-spacing) * -1);
         gap: var(
           --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-tl-sg,
@@ -916,7 +923,7 @@
         );
 
         width: 100%;
-        justify-content: center;
+        // justify-content: center;
         // height: 200px;
 
         .embla__thumbs__slide {
@@ -933,9 +940,9 @@
           );
 
           & img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
+            // width: 100%;
+            // height: 100%;
+            // object-fit: cover;
           }
         }
       }