@sc-360-v2/storefront-cms-library 0.3.53 → 0.3.55

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;
@@ -1152,11 +1152,10 @@
         background: #ffd700;
         border-radius: 4px;
         left: 12px;
-        padding: 2px 6px;
+        padding: 2px 4px;
         line-height: normal;
         color: var(--_gray-900);
         font-weight: 400;
-        font-size: 12px;
       }
     }
 

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;

package/dist/checkout.scss

@@ -697,6 +697,10 @@ $dark-color: #343a40;
               display: flex;
               flex-direction: column;
               gap: var(--_ctm-lt-pt-os-gp-bn-cs);
+              .gift_crd_chk_payment_option {
+                border: 1px solid var(--_gray-300);
+                border-radius: 4px;
+              }
               .payment_program {
                 // padding: 0 12px;
                 .payment_program_header {

package/dist/confirmationModal.scss

@@ -42,6 +42,54 @@
         text-align: left;
       }
     }
+    .shp-type {
+      display: flex;
+      gap: 24px;
+      padding: 24px;
+      border: 1px solid var(--_gray-200);
+      border-radius: 6px;
+      margin-block-end: 24px;
+      label {
+        display: flex;
+        gap: 8px;
+        cursor: pointer;
+        align-items: center;
+        position: relative;
+
+        input[type="radio"] {
+          appearance: none;
+          width: 16px;
+          height: 16px;
+          border: 2px solid var(--_gray-300);
+          border-radius: 50%;
+          position: relative;
+          transition: all 0.2s ease-in-out;
+          cursor: pointer;
+          background-color: transparent;
+
+          &:checked {
+            border-color: var(--_primary-400);
+            background-color: var(--_primary-400); // Changed from white for visibility
+
+            &::after {
+              content: "";
+              position: absolute;
+              top: 1px;
+              left: 1px;
+              width: 10px;
+              height: 10px;
+              background: var(--_base-white);
+              border-radius: 50%;
+            }
+          }
+        }
+
+        span {
+          font-size: 14px;
+          color: #333;
+        }
+      }
+    }
 
     .actions {
       display: flex;

package/dist/container.scss

@@ -108,20 +108,20 @@ $activeElementSelector: "[data-has-clicked='true']";
       }
     }
 
-    &[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/customization-tree.scss

@@ -88,10 +88,14 @@ $link-color: #243dc6;
   }
   .itemValue {
     display: flex;
-    color: $Gray-900;
+    color: var(--_gray-900);
     font-size: 14px;
     font-weight: 500;
     line-height: 20px;
+    & > span {
+      font-weight: 500;
+      color: var(--_gray-900);
+    }
     .link {
       color: $link-color;
       font-size: 14px;

package/dist/dropdownTemplate.scss

@@ -99,7 +99,7 @@
       border: 1px solid #ddd;
       border-radius: 6px;
       max-height: 200px;
-      overflow-y: auto;
+      // overflow-y: auto;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       z-index: 10;
       min-width: 240px;
@@ -195,7 +195,7 @@
         // bottom: 0;
         width: 100%;
         background: #fff;
-        border-top: 1px solid #d1d1d1;
+        border-top: 1px solid var(--_gray-200);
         .opts_selection_action {
           width: 50%;
           height: 100%;
@@ -204,6 +204,9 @@
           align-items: center;
           justify-content: center;
           cursor: pointer;
+          &:not(:last-child) {
+            border-right: 1px solid var(--_gray-200);
+          }
           &.discard_selection {
             &:hover {
               background-color: var(--_gray-50);