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

package/dist/buyForHeaders.scss

@@ -478,6 +478,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 display: flex;
                 gap: 8px;
                 color: var(--_gray-700);
+                cursor: pointer;
                 button {
                   display: flex;
                 }
@@ -521,17 +522,17 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
             //  button styles for primary
             .primary__btn {
-              // color: var(--_thm-py-bs-dt-se-tt-cr);
-              // background-color: var(--_thm-py-bs-dt-se-bd-cr);
-              // color: var(--_thm-py-bs-dt-se-tt-cr);
-              // text-align: center;
-              // border-radius: var(--_thm-py-bs-hr-se-br-rs);
+              color: var(--_thm-py-bs-dt-se-tt-cr);
+              background-color: var(--_thm-py-bs-dt-se-bd-cr);
+              color: var(--_thm-py-bs-dt-se-tt-cr);
+              text-align: center;
+              border-radius: var(--_thm-py-bs-hr-se-br-rs);
               padding: 10px 16px;
-              // height: 40px;
-              // &:hover {
-              //   background-color: var(--_thm-py-bs-hr-se-bd-cr);
-              //   color: var(--_thm-py-bs-hr-se-tt-cr);
-              // }
+              height: 40px;
+              &:hover {
+                background-color: var(--_thm-py-bs-hr-se-bd-cr);
+                color: var(--_thm-py-bs-hr-se-tt-cr);
+              }
             }
           }
 
@@ -1069,6 +1070,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     font-size: 1rem;
                     text-decoration: none;
                   }
+                  .auto_saved {
+                    background-color: var(--_success-50);
+                    border-radius: 4px;
+                    padding-inline: 12px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    display: inline-block;
+                    margin-left: 12px;
+                    color: var(--_success-600);
+                  }
                 }
 
                 .autosave-info {
@@ -1826,10 +1837,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         .review_cart-main {
           border: 1px solid var(--_gray-200);
           border-radius: 6px;
-          margin: 24px;
+          // margin: 24px;
           padding: 24px 24px 8px 24px;
           max-height: 550px;
           overflow-y: auto;
+          &:not(:last-child) {
+            margin-bottom: 16px;
+          }
           .review_header {
             padding-bottom: 24px;
             border-bottom: 1px solid var(--_gray-200);
@@ -1848,6 +1862,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             ul {
               display: flex;
               align-items: center;
+              list-style: none;
               li {
                 line-height: 20px;
                 font-size: 14px;
@@ -1875,12 +1890,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
           .shipping_address {
             display: flex;
+            grid-template-columns: auto auto auto;
             padding: 24px 0;
             border-bottom: 1px solid var(--_gray-200);
             .shipping {
-              min-width: 45%;
+              min-width: 40%;
               margin-right: 16px;
               border-right: 1px solid var(--_gray-200);
+              padding-right: 12px;
               &:last-of-type {
                 border-right: 0;
               }
@@ -1899,7 +1916,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               }
             }
             .cart_main {
-              width: 10%;
+              width: 150px;
               display: flex;
               gap: 16px;
               align-items: center;
@@ -1911,7 +1928,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   background: #ffd700;
                   border-radius: 4px;
                   left: 15px;
-                  padding: 2px;
+                  padding: 2px 6px;
                   line-height: normal;
                   color: #1f1930;
                   font-weight: 400;
@@ -1932,7 +1949,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
 
         .cart-items {
-          h6 {
+          h6,
+          .cart-items-title {
             font-size: 14px;
             font-weight: 600;
             color: var(--_gray-900);
@@ -1956,6 +1974,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               border-radius: 4px;
             }
             .product_item-details {
+              list-style: none;
               .product_item-name {
                 font-size: 14px;
                 font-weight: 700;
@@ -1969,6 +1988,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               }
               .product_item-specs {
                 display: flex;
+                list-style: none;
                 li {
                   color: var(--_gray-600);
                   font-size: 14px;

package/dist/buyForPopup.scss

@@ -22,7 +22,7 @@
       justify-content: space-between;
       align-items: center;
       border-bottom: 1px solid var(--_gray-200);
-      padding: 16px 24px;
+      padding: 16px 12px 16px 16px;
       gap: 4px;
 
       .close-icon {
@@ -63,9 +63,10 @@
     }
 
     .popup_body {
-      padding: 8px 24px 24px 24px;
+      // padding: 8px 24px 24px 24px;
       flex-grow: 1;
       .est__dropdown__main {
+        padding-inline: 16px;
         .est__dropdown {
           .list .list__option {
             font-size: 14px;
@@ -75,6 +76,9 @@
             justify-content: space-between;
             align-items: center;
             width: 100%;
+            &.placeholder__text {
+              color: var(--_gray-500);
+            }
             .value__selected {
               justify-content: start;
             }
@@ -132,6 +136,9 @@
           //     }
           //   }
           // }
+          & > span {
+            display: flex;
+          }
 
           &:disabled {
             background: var(--_sf-hr-bd-cr, var(--_thm-py-bs-dt-se-bd-cr));
@@ -199,14 +206,17 @@
   flex-direction: column;
   gap: 16px;
   overflow-y: auto;
-  max-height: 210px;
+  max-height: 240px;
+  overflow-y: auto;
+
   .empty__data {
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    height: 210px;
+    margin-top: 36px;
+
     p {
       color: var(--_thm-ty-p1-tt-cr);
       font-size: 18px;
@@ -218,6 +228,10 @@
 }
 
 .group_section {
+  padding-inline: 16px 6px;
+  height: 100%;
+  overflow-y: auto;
+
   .group_header {
     display: flex;
     align-items: center;
@@ -277,7 +291,7 @@
       }
 
       .user_id {
-        font-size: 12px;
+        font-size: 14px;
         color: var(--_thm-ty-p3-tt-cr);
         display: flex;
         gap: 4px;

package/dist/default-dropdown.scss

@@ -0,0 +1,226 @@
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+.default__dropdown {
+  position: relative;
+  width: 100%;
+
+  .bo-dropdown__container {
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid var(--_gray-300);
+    border-radius: 4px;
+    background-color: var(--_base-white);
+    min-height: 40px;
+    cursor: pointer;
+    transition: 0.2s ease;
+    padding-inline: 12px !important;
+    // .bod-trigger-left {
+    //   padding-left: 12px;
+    // }
+    .bo-dropdown__actions {
+      //   padding-right: 12px;
+      .bo-dropdown__clear-btn {
+        span {
+          display: flex;
+        }
+      }
+    }
+    .bod-trigger-left {
+      width: -webkit-fill-available;
+    }
+  }
+
+  .bo-dropdown__container--search {
+    padding: 0;
+    cursor: text;
+  }
+
+  .bo-dropdown__container--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .bo-dropdown__value-wrapper {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .bo-dropdown__placeholder {
+    color: #9ca3af;
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .bo-dropdown__selected {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .bo-dropdown__selected-info {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .bo-dropdown__selected-name {
+    font-weight: normal;
+    color: #111827;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .bo-dropdown__selected-code {
+    font-size: 12px;
+    color: #6b7280;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .bo-dropdown__actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
+  .bo-dropdown__clear-btn,
+  .bo-dropdown__toggle-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: 4px;
+  }
+
+  .bo-dropdown__chevron {
+    transition: transform 0.2s ease;
+  }
+
+  .bo-dropdown__chevron--open {
+    transform: rotate(180deg);
+  }
+
+  .bo-dropdown__panel {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    margin-top: 4px;
+    background-color: #ffffff;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    box-shadow:
+      0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    max-height: 320px;
+    overflow: hidden;
+  }
+
+  .bo-dropdown__list {
+    max-height: 240px;
+    overflow-y: auto;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    padding: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .bo-dropdown__option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    cursor: pointer;
+  }
+
+  .bo-dropdown__option:last-child {
+    border-bottom: none;
+  }
+
+  .bo-dropdown__option--highlighted {
+    @include BgColorLighter(var(--_thm-cs-at-py), 10%);
+    color: var(--_thm-cs-at-py);
+    border-radius: 4px;
+  }
+
+  .bo-dropdown__option--selected {
+    background-color: var(--_base-white);
+    border-radius: 4px;
+  }
+
+  .bo-dropdown__check {
+    svg path {
+      stroke: var(--_thm-cs-at-py);
+    }
+  }
+
+  .bo-dropdown__option-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .bo-dropdown__option-name {
+    font-weight: 500;
+    color: #111827;
+    font-size: 13px;
+    line-height: 1.2;
+    margin-bottom: 1px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .bo-dropdown__option-code {
+    font-size: 11px;
+    color: #6b7280;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .bo-dropdown__empty,
+  .bo-dropdown__loading {
+    padding: 24px 12px;
+    text-align: center;
+    color: #6b7280;
+  }
+
+  .bo-dropdown__empty-title {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 4px;
+  }
+
+  .bo-dropdown__empty-sub {
+    font-size: 12px;
+    color: #9ca3af;
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 0.4;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+}

package/dist/filters.scss

@@ -114,6 +114,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           .filter__Header {
             display: flex;
             justify-content: space-between;
+            align-items: center;
             gap: 12px;
 
             h2 {
@@ -316,7 +317,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               // }
               .selected_item {
                 display: flex;
-                gap: 8px;
+                gap: 6px;
                 border: 1px solid var(--_thm-cs-be-se-3);
                 border-radius: 30px;
                 padding: 6px 12px;
@@ -1280,8 +1281,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
       .clear__btn {
         svg {
-          width: 18px;
-          height: 18px;
+          width: 16px;
+          height: 16px;
           &:hover {
             path {
               stroke: var(--_gray-900);
@@ -2094,40 +2095,89 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         height: 5px;
         margin: 16px 0 30px 0px;
         // background-color: var(--_primary-400);
+        // background: linear-gradient(
+        //   to right,
+        //   var(
+        //       --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
+        //       var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+        //     )
+        //     0%,
+        //   var(
+        //       --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
+        //       var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+        //     )
+        //     var(--left),
+        //   var(
+        //       --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
+        //       var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
+        //     )
+        //     var(--left),
+        //   var(
+        //       --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
+        //       var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
+        //     )
+        //     var(--right),
+        //   var(
+        //       --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
+        //       var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+        //     )
+        //     var(--right),
+        //   var(
+        //       --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
+        //       var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr, #ccc))
+        //     )
+        //     100%
+        // );
+
         background: linear-gradient(
           to right,
           var(
-              --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
-              var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+              --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
+              var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
             )
             0%,
           var(
-              --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
-              var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+              --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
+              var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
             )
             var(--left),
           var(
-              --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
-              var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
+              --_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr,
+              var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr))
             )
             var(--left),
           var(
-              --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
-              var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
+              --_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr,
+              var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr))
             )
             var(--right),
           var(
-              --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
-              var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+              --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
+              var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
             )
             var(--right),
           var(
-              --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
-              var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr, #ccc))
+              --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
+              var(
+                --_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr,
+                var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr, #ccc)
+              )
             )
             100%
         );
-        border-radius: 5px;
+        // background-color: var(
+        //   --_sf-hr-bd-cr,
+        //   #{prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr)}
+        // );
+        // border-radius: 5px;
+        border-radius: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-rs));
+        border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-cr));
+        border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-wh));
+        border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-se));
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-cr));
       }
 
       .slider-track {
@@ -2153,13 +2203,21 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       input[type="range"]::-webkit-slider-thumb {
         height: 20px;
         width: 20px;
-        border-radius: 50%;
-        border: 3px solid #fff;
-        background: var(--_base-white);
+        // border-radius: 50%;
+        // border: 3px solid #fff;
+        border-radius: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-rs));
+        border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-cr));
+        border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-wh));
+        border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-se));
+        background: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-bd-cr));
         pointer-events: auto;
         appearance: none;
         cursor: pointer;
-        box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5);
+        // box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5);
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-cr));
         position: relative;
         z-index: 2; /* Ensure thumbs appear above the track */
       }

package/dist/language-selector.scss

@@ -423,6 +423,7 @@
 
           &.open .list {
             display: flex;
+            animation: slideDown 0.8s ease-in-out;
           }
           .dropdown__button__wrapper {
             width: 100%;
@@ -442,7 +443,7 @@
           .est__dropdown__icon {
             position: absolute;
             right: 5px;
-            // transition: all 200ms ease-in;
+            transition: transform 0.4s ease-in-out;
             &.open {
               transform: rotate(180deg);
             }
@@ -466,6 +467,7 @@
           }
 
           .list {
+            animation: slideDown 0.8s ease-in-out;
             display: none;
             flex-direction: column;
             border: 1px solid var(--_gray-200);
@@ -502,3 +504,25 @@
     }
   }
 }
+
+@keyframes slideUp {
+  0% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+}

package/dist/modal.scss

@@ -1587,6 +1587,14 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
           display: flex;
           align-items: center;
           gap: 12px;
+          .bulk-order-pad-header-body {
+            .checkout_btn {
+              padding: 8px 16px;
+              border-radius: 4px;
+              background-color: var(--_thm-cs-at-py);
+              color: var(--_base-white);
+            }
+          }
           .employee_bulk_order_header {
             display: flex;
             justify-self: end;