@sc-360-v2/storefront-cms-library 0.4.28 → 0.4.30

package/dist/multi-select-dropdown.scss

@@ -23,6 +23,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   &--disabled {
     opacity: 0.6;
     pointer-events: none;
+    background-color: var(--_gray-100);
   }
 }
 
@@ -33,7 +34,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   gap: 14px;
   min-height: 40px;
   border: 1px solid $msd-border;
-  background: $msd-bg;
+  background: var(--_base-white);
   border-radius: 4px;
   padding: 6px 8px;
   cursor: text;
@@ -67,7 +68,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    padding: 2px 8px 5px 8px;
+    padding: 5px 8px 5px 8px;
     background: $msd-chip-bg;
     border-radius: 999px;
     line-height: 1;
@@ -96,6 +97,10 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   line-height: 1;
   padding: 0;
   margin: 0;
+  svg {
+    width: 10px;
+    height: 10px;
+  }
   &:hover {
     color: $msd-chip-remove-hover;
   }
@@ -110,6 +115,8 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   font-size: 14px;
   background: transparent;
   color: $msd-text;
+  line-height: 19px;
+
   &::placeholder {
     color: $msd-muted;
   }
@@ -122,39 +129,41 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 }
 .msd__clear,
 .msd__arrow {
+  width: 26px;
+  // height: 26px;
   border: 0;
   background: transparent;
   cursor: pointer;
   font-size: 12px;
   color: $msd-muted;
-  padding: 4px 6px;
+  // padding: 4px 6px;
   border-radius: 4px;
-  &:hover {
-    background: #f8fafc;
-    color: #374151;
-  }
+  display: flex;
+  // &:hover {
+  //   color: #374151;
+  // }
 }
 
 .msd__ellipsis {
   position: absolute;
-  right: 33px; // leave room for the arrow
-  top: 3px;
+  right: 30px; // leave room for the arrow
+  top: 5px;
   // transform: translateY(-50%);
   pointer-events: none;
   background: $msd-bg;
   padding-left: 6px;
-  width: 30px;
+  width: 24px;
 }
 
 .msd__menu {
   position: absolute;
   z-index: 20;
-  top: 100%;
+  top: 99%;
   left: 0;
   right: 0;
   background: $msd-bg;
   border: 1px solid $msd-border;
-  border-radius: 10px;
+  border-radius: 4px;
   box-shadow: $msd-shadow;
   overflow: auto;
   padding: 6px;
@@ -194,7 +203,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   //   background: #f1f5f9;
   // }
   &.is-selected {
-    font-weight: 600;
+    font-weight: normal;
     @include BgColorLighter(var(--_thm-cs-at-py), 8%);
     color: var(--_thm-cs-at-py);
     // background: var(--_thm-cs-at-py);
@@ -229,6 +238,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     &::after {
       content: "";
       position: absolute;
+      top: 2px;
       inset: 0;
       background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 13.296L3.7 9.367l1.414-1.414 2.515 2.515L14.886 3.21l1.414 1.415z"/></svg>')
         center/12px 12px no-repeat;

package/dist/order-status.scss

@@ -38,7 +38,6 @@ $defaultValues: (
     }
 
     .order-confirmation {
-      @include prepareMediaQueries($defaultValues);
       display: flex;
       flex-direction: column;
       padding: prepareMediaVariable(--_ctm-dn-or-wt-pg);
@@ -60,6 +59,7 @@ $defaultValues: (
         --_ctm-mob-dn-or-wt-im-gp,
         var(--_ctm-tab-dn-or-wt-im-gp, var(--_ctm-dn-or-wt-im-gp))
       );
+      @include prepareMediaQueries($defaultValues);
 
       .each-order {
         border: 1px solid var(--_gray-200);

package/dist/product-image.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss";
+@use "./functions.scss" as *;
 
 [data-div-type="element"] {
   &[data-element-type="productImage"] {
@@ -166,6 +166,7 @@
       --text-high-contrast-rgb-value: 49, 49, 49;
       --detail-medium-contrast: rgb(234, 234, 234);
       --text-body: rgb(54, 49, 61);
+      overflow: hidden;
 
       position: relative;
       background-color: var(
@@ -731,8 +732,14 @@
       &[data-background-shape="Round"] {
         .left-button,
         .right-button {
-          background-color: #f2f5f5;
-          box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
+          // background-color: var(
+          //   --_ctm-mob-dn-pn-as-bd-cr,
+          //   var(--_ctm-tab-dn-pn-as-bd-cr, var(--_ctm-dn-pn-as-bd-cr))
+          // );
+          &:not(:disabled):hover {
+            @include BgColorLighter(var(--_thm-py-bs-hr-se-bd-cr), 5%);
+          }
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
       }
 
@@ -755,6 +762,32 @@
         cursor: pointer;
         outline: none;
         margin-left: 12px;
+        span {
+          display: flex;
+          svg {
+            width: calc(
+              var(
+                  --_ctm-mob-dn-pn-as-aw-se,
+                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                ) *
+                0.5
+            );
+            height: calc(
+              var(
+                  --_ctm-mob-dn-pn-as-aw-se,
+                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                ) *
+                0.5
+            );
+
+            path {
+              stroke: var(
+                --_ctm-mob-dn-pn-as-aw-cr,
+                var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
+              );
+            }
+          }
+        }
         &:disabled {
           & svg {
             path {
@@ -782,7 +815,32 @@
         outline: none;
         margin-right: 12px;
         padding: 10px;
+        span {
+          display: flex;
+          svg {
+            width: calc(
+              var(
+                  --_ctm-mob-dn-pn-as-aw-se,
+                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                ) *
+                0.5
+            );
+            height: calc(
+              var(
+                  --_ctm-mob-dn-pn-as-aw-se,
+                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                ) *
+                0.5
+            );
 
+            path {
+              stroke: var(
+                --_ctm-mob-dn-pn-as-aw-cr,
+                var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
+              );
+            }
+          }
+        }
         &:disabled {
           & svg {
             path {

package/dist/quick-order-pad.scss

@@ -25,7 +25,7 @@ $input-padding: 10px 12px;
   .input-group {
     // display: flex;
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr 90px;
     gap: 12px;
     height: fit-content;
     align-items: center;
@@ -105,57 +105,60 @@ $input-padding: 10px 12px;
       font-weight: 400;
       line-height: 20px;
     }
+    .msd {
+      width: 100%;
+    }
 
     .input-group-right-col {
       display: flex;
       gap: 16px;
-      .msd {
-        width: 100%;
+      max-width: 1200px;
+    }
+    .add-btn {
+      // background-color: $primary;
+      // color: $white;
+      padding: 10px 16px;
+      height: 40px;
+      gap: 6px;
+      // border-radius: 4px;
+      // font-weight: 600;
+      // font-size: 14px;
+      // cursor: pointer;
+      // transition: background-color 0.2s;
+      // display: flex;
+      // gap: 4px;
+      // line-height: 20px;
+      // justify-content: center;
+      svg path {
+        stroke: var(--_base-white);
       }
-      .add-btn {
-        // background-color: $primary;
-        // color: $white;
-        padding: 10px 16px;
-        // border-radius: 4px;
-        // font-weight: 600;
-        // font-size: 14px;
-        // cursor: pointer;
-        // transition: background-color 0.2s;
-        // display: flex;
-        // gap: 4px;
-        // line-height: 20px;
-        // justify-content: center;
-        svg path {
-          stroke: var(--_base-white);
-        }
-        &.disabled {
-          opacity: 0.4;
-          pointer-events: none;
-        }
-        .spinner {
-          margin-top: -3px;
-          display: inline-block;
-        }
-
-        // .add-icon {
-        //   width: 20px;
-        //   height: 20px;
-        //   display: flex;
-        //   align-items: center;
-        //   justify-content: center;
-
-        //   svg {
-        //     width: 16px;
-        //     height: 16px;
-        //     path {
-        //       stroke: #fff;
-        //     }
-        //   }
-        // }
-        // &:hover {
-        //   background-color: $primary-hover;
-        // }
+      &.disabled {
+        opacity: 0.4;
+        pointer-events: none;
       }
+      .spinner {
+        // margin-top: -3px;
+        display: inline-block;
+      }
+
+      // .add-icon {
+      //   width: 20px;
+      //   height: 20px;
+      //   display: flex;
+      //   align-items: center;
+      //   justify-content: center;
+
+      //   svg {
+      //     width: 16px;
+      //     height: 16px;
+      //     path {
+      //       stroke: #fff;
+      //     }
+      //   }
+      // }
+      // &:hover {
+      //   background-color: $primary-hover;
+      // }
     }
   }
   .cart_products_wrapper {

package/dist/repeater.scss

@@ -104,10 +104,15 @@ $rai: "repeater-advertise-item";
           display: var(--_d-grid);
           row-gap: prepareMediaVariable(--_ctm-rep-lt-im-gp-lt);
           grid-template-columns: 100%;
-          grid-template-rows: repeat(
-            auto-fit,
-            minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
-          );
+          // grid-template-rows: repeat(
+          //   auto-fit,
+          //   minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
+          // );
+          // grid-template-rows: repeat(
+          //   1,
+          //   minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
+          // );
+          grid-auto-rows: minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, auto);
           width: 100%;
 
           & > div {

package/dist/review-cart.scss

@@ -51,11 +51,13 @@
     }
   }
   .shipping_address {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto auto auto;
     padding: 24px 0;
     border-bottom: 1px solid var(--_gray-200);
+
     .shipping {
-      min-width: 45%;
+      // min-width: 45%;
       margin-right: 16px;
       border-right: 1px solid var(--_gray-200);
       &:last-of-type {
@@ -76,7 +78,7 @@
       }
     }
     .cart_main {
-      width: 10%;
+      // width: 10%;
       display: flex;
       gap: 16px;
       align-items: center;