@sc-360-v2/storefront-cms-library 0.3.37 → 0.3.39

package/dist/bulk-order-pad.scss

@@ -15,7 +15,7 @@
     border-bottom: 1px solid var(--_gray-200);
 
     .dropdown-with-input-section {
-      border: 0.5px solid var(--_gray-300);
+      // border: 0.5px solid var(--_gray-300);
       border-radius: 4px;
     }
   }
@@ -56,7 +56,7 @@
 
   .bulkOrderPad-grid {
     height: 100%;
-    
+
     .bulkOrderPad-content {
       height: calc(100% - 92px);
       .bulkOrderPad-section {
@@ -263,8 +263,8 @@
         border-radius: 4px;
         overflow: hidden;
         img {
-         width: 100%;
-         height: 100%;
+          width: 100%;
+          height: 100%;
         }
       }
 
@@ -358,7 +358,7 @@
       }
 
       .discard {
-        padding: 10px 18px;
+        padding: 12px 16px;
         border-radius: 4px;
         color: var(--_gray-600);
         font-weight: 600;
@@ -367,14 +367,14 @@
         line-height: 24px;
 
         &:hover {
-          border: 1px solid var(--_gray-600);
+          background-color: var(--_gray-50);
+          color: var(--_gray-900);
         }
       }
 
       .add-tocart {
         padding: 10px 18px;
         border-radius: 4px;
-        border: 1px solid var(--_primary-500);
         color: #fff;
         font-weight: 600;
         font-size: 16px;
@@ -382,7 +382,7 @@
         display: flex;
         align-items: center;
         gap: 8px;
-        background: var(--_primary-500);
+        background: var(--_primary-400);
 
         svg {
           width: 20px;
@@ -418,28 +418,28 @@
         overflow-x: auto;
       }
 
-      .dropdown-with-input-section {
-        gap: 6px;
+      // .dropdown-with-input-section {
+      //   gap: 6px;
 
-        label {
-          font-size: 14px;
-          line-height: 20px;
-          color: var(--_gray-700);
-          font-family: "Lato";
-        }
+      //   label {
+      //     font-size: 14px;
+      //     line-height: 20px;
+      //     color: var(--_gray-700);
+      //     font-family: "Lato";
+      //   }
 
-        .dropdown-input-section {
-          border: 1px solid var(--_gray-300);
-          border-radius: 4px;
-          max-width: 320px;
-          background: #fff;
-        }
-      }
+      //   .dropdown-input-section {
+      //     border: 1px solid var(--_gray-300);
+      //     border-radius: 4px;
+      //     max-width: 320px;
+      //     background: #fff;
+      //   }
+      // }
 
       .dropdown-options {
         display: flex;
-        flex-direction: column;
-        gap: 6px;
+        width: 600px;
+        gap: 12px;
 
         .dropdown-with-input-section {
           gap: 6px;
@@ -454,13 +454,11 @@
           .dropdown-input-section {
             border: 1px solid var(--_gray-300);
             border-radius: 4px;
-            max-width: 320px;
-            background: #fff;
+            max-width: 280px;
+            background: var(--_base-white);
           }
         }
       }
-
-      
     }
 
     .bulkOrderPad-content-container {
@@ -514,11 +512,10 @@
           width: 100%;
           height: 1px;
           background: #f0f0f0;
-          
         }
         .title {
-            padding: 6px;
-          }
+          padding-inline: 10px;
+        }
       }
 
       table {

package/dist/cart-details.scss

@@ -201,7 +201,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
   display: flex;
   flex-direction: column;
   // gap: 1rem; //cart template modal issue
-  padding: 10px 16px;
+  // padding: 10px 16px;
   width: 100%;
   overflow-y: auto;
 
@@ -221,7 +221,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       font-weight: 700;
     }
 
-    input,
+    input[type="radio"],
     textarea {
       width: 100%;
       padding: 0.5rem 0.75rem;
@@ -277,32 +277,28 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         gap: 8px;
         max-width: 400px;
 
-        .quick-order-product-dropdown-section {
-          padding: 0rem;
-          border: 1px solid #d1d5db;
-          border-radius: 0.375px;
-
-          &:focus {
-            &:focus {
-              border-color: #2563eb;
-              box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
-            }
-          }
-
-          .dropdown-input-section {
-            padding: 0.5rem;
-
-            .input-field {
-              border: none;
-              box-shadow: none;
-              padding: 0px;
-            }
-
-            .dropdown-menu {
-              top: 40px;
-            }
-          }
-        }
+        // .quick-order-product-dropdown-section {
+        //   &:focus {
+        //     &:focus {
+        //       border-color: #2563eb;
+        //       box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
+        //     }
+        //   }
+
+        //   .dropdown-input-section {
+        //     // padding: 0.5rem;
+
+        //     .input-field {
+        //       border: none;
+        //       box-shadow: none;
+        //       padding: 0px;
+        //     }
+
+        //     .dropdown-menu {
+        //       top: 40px;
+        //     }
+        //   }
+        // }
       }
 
       .checkbox-wrapper {
@@ -364,9 +360,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
           .delete-icon {
             cursor: pointer;
+            display: flex;
             svg {
-              width: 20px;
-              height: 20px;
+              width: 24px;
+              height: 24px;
               path {
                 stroke: #6b7280; // gray-500
               }
@@ -408,14 +405,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     .discard-btn {
       background: none;
       border: none;
-      padding: 12px 24px;
-      color: #374151;
-      font-size: 0.875rem;
+      padding: 8px 16px;
+      color: var(--_gray-600);
+      font-size: 16px;
       cursor: pointer;
       line-height: 24px;
+      border-radius: 6px;
 
       &:hover {
-        text-decoration: underline;
+        background-color: var(--_gray-50);
+        color: var(--_gray-900);
       }
     }
   }
@@ -428,8 +427,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 .cart_products_wrapper,
 .infinite-list-container {
   flex: 1 1 auto;
-    overflow-y: auto;
-    // padding: 1rem;
+  overflow-y: auto;
+  // padding: 1rem;
 
   .cart_item_wrapper {
     border-radius: 4px;
@@ -498,10 +497,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               font-size: 18px;
               font-weight: 700;
               line-height: 28px;
-width: 380px;
+              width: 380px;
               white-space: nowrap;
               overflow: hidden;
-              text-overflow: ellipsis;            }
+              text-overflow: ellipsis;
+            }
 
             .product_code {
               display: flex;
@@ -575,8 +575,8 @@ width: 380px;
               font-size: 14px;
               font-weight: 400;
               line-height: 20px;
-              .attr_val_info_detail{
-                b{
+              .attr_val_info_detail {
+                b {
                   margin-right: 4px;
                 }
               }
@@ -590,18 +590,18 @@ width: 380px;
                   width: 18px;
                   height: 18px;
                   margin-top: 2px;
-                   transition: transform 400ms linear;
+                  transition: transform 400ms linear;
                 }
               }
             }
-            .svg_icon svg{
+            .svg_icon svg {
               vertical-align: middle;
             }
             .svg_icon.down svg {
               transform: rotate(180deg);
-               transition: transform 400ms linear;
+              transition: transform 400ms linear;
               //  width: 20px;
-                  // height: 20px;
+              // height: 20px;
             }
             .customizationInfo_button {
               display: flex;
@@ -709,7 +709,6 @@ width: 380px;
                 border-left: 1px solid #d0d5dd;
                 max-width: 80px;
                 text-align: center;
-                
               }
             }
           }
@@ -737,30 +736,28 @@ width: 380px;
             }
             &:hover {
               svg {
-              path {
-                stroke: var(--_error-700);
+                path {
+                  stroke: var(--_error-700);
+                }
               }
             }
-            }
           }
           .svg_icon {
             display: flex;
             justify-content: center;
             align-items: center;
-            
+
             &:hover {
               svg {
-              path {
-                stroke: var(--_gray-900);
+                path {
+                  stroke: var(--_gray-900);
+                }
               }
             }
-
-            }
             svg {
               path {
                 stroke: var(--_gray-600);
               }
-             
             }
           }
           .product_action_button {
@@ -1400,10 +1397,10 @@ width: 380px;
 //   }
 // }
 
- .cart-item-attr-grid {
+.cart-item-attr-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
-  gap: 1rem; 
+  gap: 1rem;
   margin-top: 24px;
 
   .attr-grid-item {
@@ -1412,4 +1409,4 @@ width: 380px;
     border-radius: 6px;
     background-color: var(--_base-white);
   }
-}
+}

package/dist/cart-products-sidebar.scss

@@ -12,7 +12,7 @@ $hint-color: #7d7d7d;
 $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
 
 // Sidebar Overlay
-.sidebar__overlay {
+.minicart__overlay {
   position: fixed;
   width: 100%;
   height: 100%;
@@ -21,11 +21,11 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
   z-index: 9999;
 }
 
-.sidebar__container {
+.minicart_container {
   position: fixed;
   top: 0;
   right: 0;
-  width: 220px;
+  width: 125px;
   max-width: 100%;
   height: 100vh;
   background: $background-color;
@@ -36,6 +36,9 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
   animation: slide-in 0.3s ease-out;
   overflow-y: auto;
 
+  display: flex;
+  flex-direction: column;
+
   @keyframes slide-in {
     from {
       transform: translateX(100%);
@@ -47,15 +50,33 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
 }
 
 // Sidebar Header
-.sidebar__header {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: 8px 16px;
+.minicart_header {
+  // display: flex;
+  // justify-content: flex-end;
+  // align-items: center;
+  padding-top: 6px;
   position: sticky;
   top: 0;
   background: #fff;
   z-index: 1;
+  .mincart_close_btn {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    svg {
+      margin-right: 8px;
+      width: 18px;
+      height: 18px;
+      path {
+        stroke: var(--_gray-600);
+      }
+    }
+    &:hover {
+      svg path {
+        stroke: var(--_gray-900);
+      }
+    }
+  }
 
   h2 {
     font-size: 18px;
@@ -76,6 +97,71 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
       height: 24px;
     }
   }
+  .text_label {
+    padding: 6px 16px;
+    background-color: var(--_gray-100);
+    color: var(--_gray-600);
+    width: 100%;
+    text-align: center;
+  }
+}
+
+.mincart_items {
+  flex-grow: 1;
+  overflow-y: auto;
+  // Cart Popup
+  .cart_popup {
+    background-color: #fff;
+    border-radius: 8px;
+  }
+
+  .cart_item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 8px;
+    text-align: center;
+    padding: 12px;
+    border-bottom: 1px solid var(--_base-white);
+    &:hover {
+      background-color: var(--_gray-50);
+    }
+
+    .item_info {
+      margin-top: 10px;
+      text-align: center;
+    }
+
+    .item_title {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--_gray-600);
+      margin-bottom: 5px;
+    }
+
+    .item_price {
+      font-size: 12px;
+      font-weight: 700;
+      color: var(--_gray-900);
+    }
+
+    .item_image {
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+    }
+    .item_action_btn {
+      padding: 12px 16px;
+      color: var(--_primary-400);
+      margin-top: 8px;
+      border-radius: 6px;
+
+      &:hover {
+        background-color: var(--_primary-50);
+        color: var(--_primary-500);
+      }
+    }
+  }
 }
 
 // Sidebar Footer
@@ -113,89 +199,33 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
   }
 }
 
-// Cart Popup
-.cart__popup {
-  padding: 12px;
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.cart__header {
+.minicart_info {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 20px;
-}
-
-.total__label {
-  font-size: 16px;
-  font-weight: normal;
-  color: #333;
-}
-
-.total__price {
-  font-size: 20px;
-  font-weight: bold;
-  color: black;
-}
-
-.view-cart__btn {
-  padding: 10px 15px;
-  background-color: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-top: 15px;
-
-  &:hover {
-    background-color: #0056b3;
+  .total_label {
+    font-size: 16px;
+    font-weight: normal;
+    color: var(--_gray-600);
   }
-}
 
-// Cart Content
-.cart__content {
-  .cart__list-title {
-    font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    text-align: center;
+  .total_price {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--_gray-900);
   }
 
-  .cart__items {
-    .cart__item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: 20px;
-      text-align: center;
-      padding: 10px;
-      border-bottom: 1px solid #eee;
-
-      .item__info {
-        margin-top: 10px;
-        text-align: center;
-      }
-
-      .item__title {
-        font-size: 16px;
-        font-weight: normal;
-        color: #333;
-        margin-bottom: 5px;
-      }
-
-      .item__price {
-        font-size: 18px;
-        font-weight: bold;
-        color: black;
-      }
+  .view_cart_btn {
+    padding: 10px 15px;
+    background-color: var(--_primary-400);
+    color: var(--_base-white);
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-block: 16px;
 
-      .item__image {
-        max-width: 150px;
-        height: auto;
-        border-radius: 4px;
-      }
+    &:hover {
+      background-color: var(--_primary-500);
     }
   }
 }

package/dist/cart-summary.scss

@@ -314,8 +314,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         font-weight: var(--_ctm-dn-sy-bn-dn-dt-se-ft-wt);
         line-height: var(--_ctm-dn-sy-bn-dn-dt-se-le-ht);
         letter-spacing: var(--_ctm-dn-sy-bn-dn-dt-se-lr-sg);
-        box-shadow: var(--_ctm-dn-sy-bn-dn-dt-se-sw-ae) var(--_ctm-dn-sy-bn-dn-dt-se-sw-br)
-          var(--_ctm-dn-sy-bn-dn-dt-se-sw-sd) var(--_ctm-dn-sy-bn-dn-dt-se-sw-cr);
+        box-shadow: var(--_ctm-dn-sy-bn-dn-dt-se-sw-ae) var(--_ctm-dn-sy-bn-dn-dt-se-sw-br);
+          // var(--_ctm-dn-sy-bn-dn-dt-se-sw-sd) var(--_ctm-dn-sy-bn-dn-dt-se-sw-cr);
         text-align: var(--_ctm-dn-sy-bn-dn-dt-se-tt-an);
         text-decoration: var(--_ctm-dn-sy-bn-dn-dt-se-ue);
         color: var(--_primary-400);