@sc-360-v2/storefront-cms-library 0.3.52 → 0.3.54

package/dist/bulk-order-pad.scss

@@ -409,7 +409,7 @@
       gap: 12px;
       display: flex;
       justify-content: center;
-      padding: 12px;
+      padding: 0px 12px 12px 12px;
       min-height: 94px;
 
       @media (max-width: 500px) {

package/dist/buy-for-tab.scss

@@ -560,20 +560,20 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
       }
     }
 
-    &[data-view-state="full"] {
-      width: auto;
-      margin: 0;
-      justify-self: stretch !important;
-      align-self: stretch !important;
-      cursor: auto;
-      &:is(#{$activeElementSelector}) {
-        & > div {
-          &[data-div-type="wrapper__layer"] {
-            --_sf-vt-zz: visible;
-            --_sf-op-zz: 1;
-          }
-        }
-      }
-    }
+    // &[data-view-state="full"] {
+    //   width: auto;
+    //   margin: 0;
+    //   justify-self: stretch !important;
+    //   align-self: stretch !important;
+    //   cursor: auto;
+    //   &:is(#{$activeElementSelector}) {
+    //     & > div {
+    //       &[data-div-type="wrapper__layer"] {
+    //         --_sf-vt-zz: visible;
+    //         --_sf-op-zz: 1;
+    //       }
+    //     }
+    //   }
+    // }
   }
 }

package/dist/buyForHeaders.scss

@@ -334,10 +334,10 @@
           --_ctm-mob-buy-dn-by-fr-hr-me-ee-tt-an,
           var(--_ctm-tab-buy-dn-by-fr-hr-me-ee-tt-an, var(--_ctm-buy-dn-by-fr-hr-me-ee-tt-an))
         );
-        // cursor: pointer;
-        // &:hover {
-        //   background-color: var(--_primary-25);
-        // }
+        cursor: pointer;
+        &:hover {
+          text-decoration: underline;
+        }
       }
 
       .employee-switch {
@@ -694,7 +694,7 @@
   display: flex;
   gap: 24px;
   // border-block: 1px solid var(--_gray-200);
-  padding-block: 24px;
+  padding-block: 24px !important;
 
   .cart__section {
     display: flex;

package/dist/cart-details.scss

@@ -570,51 +570,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               flex-wrap: wrap;
 
               span {
-                color: var(
-                  --_ctm-mob-dn-pt-in-ss-cr,
-                  var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr))
-                );
-                font-family: var(
-                  --_sf-hr-ff,
-                  var(
-                    --_ctm-mob-dn-pt-in-ss-ft-fy,
-                    var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy))
-                  )
-                );
-                font-size: var(
-                  --_ctm-mob-dn-pt-in-ss-ft-se,
-                  var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se))
-                );
-                font-weight: var(
-                  --_ctm-mob-dn-pt-in-ss-ft-wt,
-                  var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt))
-                );
-                font-style: var(
-                  --_ctm-mob-dn-pt-in-ss-ft-se-ic,
-                  var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic))
-                );
-                text-align: var(
-                  --_ctm-mob-dn-pt-in-ss-tt-an,
-                  var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an))
-                );
-                letter-spacing: var(
-                  --_ctm-mob-dn-pt-in-ss-lr-sg,
-                  var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg))
-                );
-                line-height: var(
-                  --_ctm-mob-dn-pt-in-ss-le-ht,
-                  var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht))
-                );
-                text-decoration: var(
-                  --_ctm-mob-dn-pt-in-ss-ue,
-                  var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
-                );
-                &::after {
+                color: var(--_gray-600);
+                &:not(:last-child)::after {
                   content: "";
                   display: inline-block;
                   height: 10px;
-                  border-right: 1px solid var(--_gray-600);
-                  padding-right: 8px;
+                  margin-inline: 8px;
+                  width: 1px;
+                  background-color: var(--_gray-400);
                 }
 
                 &:last-of-type::after {
@@ -942,7 +905,32 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           display: flex;
           align-items: center;
           gap: 16px;
+          & > * {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          button {
+            display: flex;
+          }
+          & > a,
+          & > span {
+            width: 24px;
+            height: 24px;
+            border-radius: 4px;
+
+            &:hover {
+              background-color: var(--_gray-100);
+            }
+          }
+          span:hover {
+            background-color: var(--_gray-100);
+          }
+          .delete_cart_icon:hover {
+            background-color: var(--_error-50);
+          }
           .edit_icon {
+            cursor: pointer;
             svg {
               width: var(
                 --_ctm-mob-dn-pt-an-pt-an-et-in-se,
@@ -979,6 +967,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
           .wishlist_icon {
+            cursor: pointer;
             svg {
               width: var(
                 --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
@@ -1016,6 +1005,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
 
           .delete_cart_icon {
+            cursor: pointer;
             svg {
               width: var(
                 --_ctm-mob-dn-pt-an-pt-an-de-in-se,

package/dist/cart-products-sidebar.scss

@@ -103,6 +103,9 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     color: var(--_gray-600);
     width: 100%;
     text-align: center;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 18px;
   }
 }
 
@@ -112,17 +115,21 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
   // Cart Popup
   .cart_popup {
     background-color: #fff;
-    border-radius: 8px;
+    // border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
   }
 
   .cart_item {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-bottom: 8px;
+    // margin-bottom: 8px;
     text-align: center;
-    padding: 12px;
-    border-bottom: 1px solid var(--_base-white);
+    // padding: 16px;
+    // border-bottom: 1px solid var(--_base-white);
     &:hover {
       background-color: var(--_gray-50);
     }
@@ -136,25 +143,31 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
       font-size: 12px;
       font-weight: 500;
       color: var(--_gray-600);
-      margin-bottom: 5px;
+      margin-bottom: 4px;
+      line-height: 18px;
     }
 
     .item_price {
       font-size: 12px;
       font-weight: 700;
       color: var(--_gray-900);
+      line-height: 18px;
     }
 
     .item_image {
-      max-width: 100%;
-      height: auto;
-      border-radius: 4px;
+      max-width: 64px;
+      height: 64px;
+      border-radius: 1px;
+      object-fit: contain;
     }
     .item_action_btn {
-      padding: 12px 16px;
+      padding: 8px;
       color: var(--_primary-400);
-      margin-top: 8px;
-      border-radius: 6px;
+      // margin-top: 4px;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 18px;
 
       &:hover {
         background-color: var(--_primary-50);
@@ -203,16 +216,19 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 4px;
   .total_label {
-    font-size: 16px;
-    font-weight: normal;
+    font-size: 12px;
+    font-weight: 500;
     color: var(--_gray-600);
+    line-height: 18px;
   }
 
   .total_price {
-    font-size: 20px;
-    font-weight: 600;
+    font-size: 12px;
+    font-weight: 700;
     color: var(--_gray-900);
+    line-height: 18px;
   }
 
   .view_cart_btn {
@@ -222,7 +238,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     border: none;
     border-radius: 4px;
     cursor: pointer;
-    margin-block: 16px;
+    margin-bottom: 12px;
 
     &:hover {
       background-color: var(--_primary-500);

package/dist/cart-summary.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:list";
+@use "./functions.scss" as *;
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
@@ -132,10 +133,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             --_ctm-mob-dn-hr-cr-ft-wt,
             var(--_ctm-tab-dn-hr-cr-ft-wt, var(--_ctm-dn-hr-cr-ft-wt))
           );
-          font-size: var(
-            --_ctm-mob-dn-hr-cr-ft-se,
-            var(--_ctm-tab-dn-hr-cr-ft-se, var(--_ctm-dn-hr-cr-ft-se))
-          );
+          font-size: prepareMediaVariable(--_ctm-dn-hr-cr-ft-se);
           text-decoration: var(
             --_ctm-mob-dn-hr-cr-ue,
             var(--_ctm-tab-dn-hr-cr-ue, var(--_ctm-dn-hr-cr-ue))

package/dist/cartDropdownOverlay.scss

@@ -16,7 +16,9 @@ $button-padding: 6px 12px;
 .cart-dropdown-container {
   position: relative;
   display: inline-block;
-
+  .overlay-panel {
+    margin-top: 10px;
+  }
   .trigger {
     // background: none;
     // border: none;