@sc-360-v2/storefront-cms-library 0.4.26 → 0.4.27

package/dist/buyForPopup.scss

@@ -7,60 +7,142 @@
   align-items: center;
   justify-content: center;
   z-index: 1000;
-}
+  .popup_container {
+    width: 90%;
+    max-width: 600px;
+    background: var(--_base-white);
+    border-radius: 12px;
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    min-height: 480px;
 
-.popup_container {
-  width: 90%;
-  max-width: 600px;
-  background: var(--_base-white);
-  border-radius: 12px;
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-  max-height: 83vh;
-}
+    .popup_header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid var(--_gray-200);
+      padding: 16px 24px;
+      gap: 4px;
+
+      .close-icon {
+        width: 32px;
+        height: 32px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 4px;
+        svg {
+          width: 18px;
+          height: 18px;
+          path {
+            stroke: var(--_gray-600);
+          }
+        }
+        &:hover {
+          background-color: var(--_gray-100);
+          svg path {
+            stroke: var(--_gray-900);
+          }
+        }
+      }
 
-.popup_header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--_gray-200);
-  padding: 16px 24px;
-  gap: 4px;
+      h2 {
+        font-size: 18px;
+        font-weight: normal;
+        margin: 0;
+        line-height: 28px;
+      }
 
-  .close-icon {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-    svg {
-      width: 18px;
-      height: 18px;
-      path {
-        stroke: var(--_gray-600);
+      p {
+        font-size: 14px;
+        color: #666;
+        margin: 4px 0 0;
       }
     }
-    &:hover {
-      background-color: var(--_gray-100);
-      svg path {
-        stroke: var(--_gray-900);
+
+    .popup_body {
+      padding: 8px 24px 24px 24px;
+      flex-grow: 1;
+      .est__dropdown__main {
+        .est__dropdown {
+          .list .list__option {
+            font-size: 14px;
+          }
+          .est__dropdown__button {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            .value__selected {
+              justify-content: start;
+            }
+          }
+        }
       }
     }
-  }
 
-  h2 {
-    font-size: 18px;
-    font-weight: normal;
-    margin: 0;
-    line-height: 28px;
-  }
+    .popup_footer {
+      display: flex;
+      padding: 16px 24px;
+      border-top: 1px solid var(--_gray-200);
+      justify-content: end;
+      gap: 12px;
+
+      button {
+        padding: 10px 16px;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        border: none;
+        transition: background 0.2s ease;
+        display: flex;
+        align-items: center;
+        &[aria-label="Discard"] {
+          &:hover {
+            background-color: var(--_gray-100);
+            color: var(--_gray-900);
+          }
+        }
 
-  p {
-    font-size: 14px;
-    color: #666;
-    margin: 4px 0 0;
+        &:first-child {
+          // background: #f3f3f3;
+          color: #333;
+
+          &:hover {
+            // background: #e0e0e0;
+          }
+        }
+
+        &.proceed_button {
+          background: var(--_primary-400);
+          color: #fff;
+          display: flex;
+          gap: 10px;
+
+          span {
+            svg {
+              width: 18px;
+              height: 18px;
+
+              path {
+                stroke: #ffffff;
+              }
+            }
+          }
+
+          &:disabled {
+            background: var(--_primary-100);
+            cursor: not-allowed;
+          }
+
+          &:not(:disabled):hover {
+            background: #0069d9;
+          }
+        }
+      }
+    }
   }
 }
 
@@ -93,11 +175,6 @@
   }
 }
 
-.popup_body {
-  padding: 24px;
-  flex-grow: 1;
-}
-
 .search_input {
   padding: 10px 12px;
   border: 1px solid #ddd;
@@ -120,7 +197,15 @@
   flex-direction: column;
   gap: 16px;
   overflow-y: auto;
-  max-height: 30vh;
+  max-height: 210px;
+  .empty__data {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 210px;
+  }
 }
 
 .group_section {
@@ -130,12 +215,12 @@
     gap: 8px;
     font-weight: 500;
     font-size: 14px;
-    margin-bottom: 8px;
-    padding: 8px;
+    padding-block: 16px 0px;
     border-bottom: 1px solid var(--_gray-200);
+    margin-bottom: 16px;
 
     input {
-      width: auto;
+      width: 100%;
     }
 
     label {
@@ -155,6 +240,7 @@
     margin-bottom: 8px;
     cursor: pointer;
     transition: all 0.2s ease;
+    margin-top: 16px;
 
     &:last-child {
       margin-bottom: 0;
@@ -197,65 +283,3 @@
     }
   }
 }
-
-.popup_footer {
-  display: flex;
-  padding: 16px 24px;
-  border-top: 1px solid var(--_gray-200);
-  justify-content: end;
-  gap: 12px;
-
-  button {
-    padding: 10px 16px;
-    border-radius: 6px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    border: none;
-    transition: background 0.2s ease;
-    display: flex;
-    align-items: center;
-    &[aria-label="Discard"] {
-      &:hover {
-        background-color: var(--_gray-100);
-        color: var(--_gray-900);
-      }
-    }
-
-    &:first-child {
-      // background: #f3f3f3;
-      color: #333;
-
-      &:hover {
-        // background: #e0e0e0;
-      }
-    }
-
-    &.proceed_button {
-      background: var(--_primary-400);
-      color: #fff;
-      display: flex;
-      gap: 10px;
-
-      span {
-        svg {
-          width: 18px;
-          height: 18px;
-
-          path {
-            stroke: #ffffff;
-          }
-        }
-      }
-
-      &:disabled {
-        background: var(--_primary-100);
-        cursor: not-allowed;
-      }
-
-      &:not(:disabled):hover {
-        background: #0069d9;
-      }
-    }
-  }
-}

package/dist/cart-details.scss

@@ -1386,7 +1386,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 height: 40px;
                 display: flex;
                 position: relative;
-                max-width: 55px;
+                width: 55px;
                 border-radius: 0px 4px 4px 0px;
                 background: #fff;
                 border-left: 1px solid #d0d5dd;

package/dist/cart-products-sidebar.scss

@@ -17,7 +17,6 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
   width: 100%;
   height: 100%;
   top: 0;
-  // background: rgba(112, 112, 112, 0.13);
   background: transparent;
   z-index: 9999;
 }
@@ -52,9 +51,6 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
 
 // Sidebar Header
 .minicart_header {
-  // display: flex;
-  // justify-content: flex-end;
-  // align-items: center;
   padding-top: 6px;
   position: sticky;
   top: 0;
@@ -64,6 +60,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     display: flex;
     justify-content: flex-end;
     width: 100%;
+    cursor: pointer;
     svg {
       margin-right: 8px;
       width: 18px;
@@ -101,78 +98,58 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
   .text_label {
     padding: 6px 16px;
     background-color: var(--_gray-100);
-    color: var(--_gray-600);
     width: 100%;
     text-align: center;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 18px;
   }
 }
 
 .mincart_items {
-  flex-grow: 1;
-  overflow-y: auto;
-  // Cart Popup
   .cart_popup {
     background-color: #fff;
-    // 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;
+    gap: 4px;
     text-align: center;
-    // padding: 16px;
-    // border-bottom: 1px solid var(--_base-white);
+    padding: 16px;
     &:hover {
-      background-color: var(--_gray-50);
     }
-
+    .product_img {
+      width: 64px !important;
+      height: 64px !important;
+    }
     .item_info {
-      margin-top: 10px;
       text-align: center;
     }
 
     .item_title {
-      font-size: 12px;
       font-weight: 500;
-      color: var(--_gray-600);
       margin-bottom: 4px;
-      line-height: 18px;
+      text-align: center;
     }
 
     .item_price {
-      font-size: 12px;
       font-weight: 700;
-      color: var(--_gray-900);
-      line-height: 18px;
+      text-align: center;
     }
 
     .item_image {
-      max-width: 64px;
-      height: 64px;
-      border-radius: 1px;
-      object-fit: contain;
     }
     .item_action_btn {
       padding: 8px;
-      color: #243dc6;
-      // margin-top: 4px;
+      color: var(--_thm-cs-tt-ls-as);
       border-radius: 4px;
       font-size: 14px;
       font-weight: 400;
       line-height: 18px;
+      cursor: pointer;
 
       &:hover {
         background-color: var(--_primary-50);
-        color: #243dc6;
+        color: var(--_thm-cs-tt-ls-as);
       }
     }
   }
@@ -184,7 +161,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 12px;
+  padding: 16px;
   border-top: 1px solid #eee;
 
   .discard__btn {
@@ -207,7 +184,6 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     transition: background 0.2s;
 
     &:hover {
-      // background: darken($primary-color, 5%);
       background: color-mix(in srgb, #243dc6 95%, transparent 5%);
     }
   }
@@ -217,33 +193,19 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   .total_label {
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--_gray-600);
-    line-height: 18px;
   }
 
   .total_price {
-    font-size: 12px;
     font-weight: 700;
-    color: var(--_gray-900);
-    line-height: 18px;
   }
 
   .view_cart_btn {
-    padding: 10px 15px;
-    background-color: var(--_thm-py-bs-dt-se-bd-cr);
-    color: var(--_thm-py-bs-dt-se-tt-cr);
-    border: none;
-    border-radius: 4px;
+    padding: 8px 12px;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 500;
     cursor: pointer;
-    margin-bottom: 12px;
-
-    &:hover {
-      background-color: var(--_thm-py-bs-hr-se-bd-cr);
-      color: var(--_thm-py-bs-dt-se-tt-cr --_thm-py-bs-hr-se-tt-cr);
-    }
   }
 }

package/dist/cart-summary.scss

@@ -1080,6 +1080,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           --_ctm-mob-dn-pt-wt-pt-ce-pg,
           var(--_ctm-tab-dn-pt-wt-pt-ce-pg, var(--_ctm-dn-pt-wt-pt-ce-pg))
         );
+        word-break: break-word;
       }
       .cart_summary_secondary_text {
         color: var(--_ctm-dn-sy-tt-dn-cr);
@@ -1310,7 +1311,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-se)};
           --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-se)};
           --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-c1)};
-          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-ue)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-ue)};
 
           // for pading and width
           --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-pg)};
@@ -1402,7 +1403,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -1560,7 +1561,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -1611,7 +1612,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-se)};
           --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-se)};
           --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-c1)};
-          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-ue)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-ue)};
 
           // for pading and width
           --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-pg)};
@@ -1717,7 +1718,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -1768,7 +1769,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-se)};
           --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-se)};
           --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-c1)};
-          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-ue)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-ue)};
 
           // for pading and width
           --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-pg)};
@@ -1874,7 +1875,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -1925,7 +1926,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-se)};
           --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-se)};
           --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-c1)};
-          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-ue)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-ue)};
 
           // for pading and width
           --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-pg)};
@@ -2050,7 +2051,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -2101,7 +2102,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-se)};
           --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-se)};
           --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-c1)};
-          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-ue)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-ue)};
 
           // for pading and width
           --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-pg)};
@@ -2208,7 +2209,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {

package/dist/dropdownTemplate.scss

@@ -1,6 +1,10 @@
 .dropdown-with-input-section {
   width: 100%;
   background-color: var(--_base-white);
+  .dropdown-label {
+    display: block;
+    margin-bottom: 6px;
+  }
 
   .dropdown-input-section {
     position: relative;
@@ -11,6 +15,7 @@
     width: 100%;
     align-items: center;
     height: 40px;
+    line-height: 40px;
     outline: 2px solid var(--_base-white);
     border: 1px solid var(--_gray-300);
     .selected-display {