@sc-360-v2/storefront-cms-library 0.4.29 → 0.4.31

package/dist/button.scss

@@ -221,3 +221,72 @@
     }
   }
 }
+
+.action__button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  gap: 8px;
+  & > span {
+    display: flex;
+  }
+
+  &.btn__sm {
+    padding-inline: 16px;
+    font-size: 14px;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  &.btn__md {
+    padding-inline: 24px;
+    font-size: 18px;
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  &.btn__lg {
+    padding-inline: 32px;
+    font-size: 24px;
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &.primary {
+    background-color: var(--_primary-400);
+    color: var(--_base-white);
+
+    &:hover {
+      background-color: var(--_primary-500);
+      color: var(--_base-white);
+    }
+  }
+  &.secondary {
+    background-color: var(--_gray-100);
+    color: var(--_gray-700);
+    &:hover {
+      background-color: var(--_gray-200);
+      color: var(--_gray-900);
+    }
+  }
+  &.tertiary {
+    background-color: transparent;
+    &.primary__txt {
+      color: var(--_primary-400);
+      &:hover {
+        color: var(--_primary-500);
+      }
+    }
+    &.secondary__txt {
+      color: var(--_gray-700);
+      &:hover {
+        color: var(--_gray-900);
+      }
+    }
+  }
+}

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 {
@@ -1830,6 +1841,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           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);

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

@@ -10,6 +10,7 @@
     padding: 8px 12px;
     display: flex;
     align-items: center;
+    align-self: stretch;
     justify-content: space-between;
     border: 1px solid var(--_gray-300);
     border-radius: 4px;
@@ -148,6 +149,18 @@
     gap: 8px;
     padding: 8px 12px;
     cursor: pointer;
+    .variant__img {
+      border: 1px solid var(--_gray-200);
+      border-radius: 4px;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        max-height: 100%;
+        max-width: 100%;
+      }
+    }
   }
 
   .bo-dropdown__option:last-child {
@@ -161,8 +174,9 @@
   }
 
   .bo-dropdown__option--selected {
-    background-color: var(--_base-white);
+    // background-color: var(--_base-white);
     border-radius: 4px;
+    @include BgColorLighter(var(--_thm-cs-at-py), 10%);
   }
 
   .bo-dropdown__check {

package/dist/dropdownTemplate.scss

@@ -18,6 +18,11 @@
     line-height: 40px;
     outline: 2px solid var(--_base-white);
     border: 1px solid var(--_gray-300);
+    &:focus-within {
+      outline: 2px solid var(--_primary-400);
+      outline-offset: 0;
+    }
+    cursor: pointer;
     .selected-display {
       .selected-item {
         display: flex;
@@ -162,11 +167,17 @@
     max-height: 200px;
     box-shadow: 0 1px 20px rgba(0, 0, 0, 0.1);
     z-index: 10;
-    min-width: 240px;
+    // min-width: 240px;
     max-height: 300px;
     display: flex;
     flex-direction: column;
     // margin-left: -6px;
+    &.open_dropdown {
+      animation: open_dropdown 300ms ease-in-out;
+    }
+    &.close_dropdown {
+      animation: close_dropdown 300ms ease-in-out;
+    }
     &.w-full {
       width: 100%;
     }
@@ -199,7 +210,8 @@
     }
 
     .dropdown_menu_ul {
-      height: 200px;
+      min-height: 100px;
+      max-height: 200px;
       overflow-y: auto;
       display: flex;
       flex-direction: column;
@@ -552,3 +564,25 @@
     clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
   }
 }
+
+@keyframes open_dropdown {
+  0% {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(-2px);
+    opacity: 1;
+  }
+}
+
+@keyframes close_dropdown {
+  0% {
+    transform: translateY(-2px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+}

package/dist/emtpy-templates.scss

@@ -119,6 +119,35 @@
   animation: split_loader 0.5s ease-out infinite alternate;
 }
 
+// loding data with icon using in bulk order pad and quick order pad
+.data__loading__wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .loading__container {
+    max-width: 500px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    .loading__spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid var(--_gray-200);
+      border-top: 4px solid var(--_primary-400);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    .text {
+      color: var(--_gray-600);
+      font-size: 14px;
+    }
+  }
+}
+
 @keyframes split_loader {
   0% {
     box-shadow:

package/dist/image-for-product.scss

@@ -1,5 +1,5 @@
 .product_img {
-  background-color: var(--_gray-100);
+  background-color: var(--_base-white);
   border-radius: 6px;
   display: flex;
   justify-content: center;

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/multi-select-dropdown.scss

@@ -23,6 +23,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   &--disabled {
     opacity: 0.6;
     pointer-events: none;
+    background-color: var(--_gray-100);
   }
 }
 
@@ -33,7 +34,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   gap: 14px;
   min-height: 40px;
   border: 1px solid $msd-border;
-  background: $msd-bg;
+  background: var(--_base-white);
   border-radius: 4px;
   padding: 6px 8px;
   cursor: text;
@@ -67,7 +68,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    padding: 2px 8px 5px 8px;
+    padding: 5px 8px 5px 8px;
     background: $msd-chip-bg;
     border-radius: 999px;
     line-height: 1;
@@ -96,6 +97,10 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   line-height: 1;
   padding: 0;
   margin: 0;
+  svg {
+    width: 10px;
+    height: 10px;
+  }
   &:hover {
     color: $msd-chip-remove-hover;
   }
@@ -110,11 +115,14 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   font-size: 14px;
   background: transparent;
   color: $msd-text;
+  line-height: 19px;
+
   &::placeholder {
     color: $msd-muted;
   }
 }
 .msd__clear {
+  margin-right: 15px;
   svg {
     width: 16px;
     height: 16px;
@@ -122,39 +130,41 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 }
 .msd__clear,
 .msd__arrow {
+  width: 26px;
+  // height: 26px;
   border: 0;
   background: transparent;
   cursor: pointer;
   font-size: 12px;
   color: $msd-muted;
-  padding: 4px 6px;
+  // padding: 4px 6px;
   border-radius: 4px;
-  &:hover {
-    background: #f8fafc;
-    color: #374151;
-  }
+  display: flex;
+  // &:hover {
+  //   color: #374151;
+  // }
 }
 
 .msd__ellipsis {
   position: absolute;
-  right: 33px; // leave room for the arrow
-  top: 3px;
+  right: 30px; // leave room for the arrow
+  top: 5px;
   // transform: translateY(-50%);
   pointer-events: none;
   background: $msd-bg;
   padding-left: 6px;
-  width: 30px;
+  width: 24px;
 }
 
 .msd__menu {
   position: absolute;
   z-index: 20;
-  top: 100%;
+  top: 99%;
   left: 0;
   right: 0;
   background: $msd-bg;
   border: 1px solid $msd-border;
-  border-radius: 10px;
+  border-radius: 4px;
   box-shadow: $msd-shadow;
   overflow: auto;
   padding: 6px;
@@ -182,10 +192,28 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   cursor: pointer;
   font-size: 14px;
   display: flex;
-  justify-content: space-between;
+  justify-content: start;
+  align-items: center;
   svg path {
     stroke: var(--_primary-50);
   }
+  &__img {
+    border-radius: 4px;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--_gray-200);
+    overflow: hidden;
+    img {
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
+  .is__selected {
+    margin-left: auto;
+  }
 
   &:not(.is-disabled):hover {
     @include BgColorLighter(var(--_thm-cs-at-py), 8%);
@@ -194,7 +222,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   //   background: #f1f5f9;
   // }
   &.is-selected {
-    font-weight: 600;
+    font-weight: normal;
     @include BgColorLighter(var(--_thm-cs-at-py), 8%);
     color: var(--_thm-cs-at-py);
     // background: var(--_thm-cs-at-py);
@@ -229,6 +257,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     &::after {
       content: "";
       position: absolute;
+      top: 2px;
       inset: 0;
       background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 13.296L3.7 9.367l1.414-1.414 2.515 2.515L14.886 3.21l1.414 1.415z"/></svg>')
         center/12px 12px no-repeat;

package/dist/option-bar.scss

@@ -100,7 +100,7 @@
 
         &:hover {
           --_sf-hr-bd-cr: var(
-            --_ctm-mob-dn-me-hr-se-bd-cr,
+            --_ctm-mob-dn-tb-hr-se-bd-cr,
             var(--_ctm-tab-dn-tb-hr-se-bd-cr, var(--_ctm-dn-tb-hr-se-bd-cr))
           );
           --_sf-hr-br-cr: var(

package/dist/order-status.scss

@@ -38,7 +38,6 @@ $defaultValues: (
     }
 
     .order-confirmation {
-      @include prepareMediaQueries($defaultValues);
       display: flex;
       flex-direction: column;
       padding: prepareMediaVariable(--_ctm-dn-or-wt-pg);
@@ -60,6 +59,7 @@ $defaultValues: (
         --_ctm-mob-dn-or-wt-im-gp,
         var(--_ctm-tab-dn-or-wt-im-gp, var(--_ctm-dn-or-wt-im-gp))
       );
+      @include prepareMediaQueries($defaultValues);
 
       .each-order {
         border: 1px solid var(--_gray-200);

package/dist/product-actions.scss

@@ -95,7 +95,7 @@
 
         &:hover {
           --_sf-hr-bd-cr: var(
-            --_ctm-mob-dn-me-hr-se-bd-cr,
+            --_ctm-mob-dn-ad-to-ct-hr-se-bd-cr,
             var(--_ctm-tab-dn-ad-to-ct-hr-se-bd-cr, var(--_ctm-dn-ad-to-ct-hr-se-bd-cr))
           );
           --_sf-hr-br-cr: var(

package/dist/product-image.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss";
+@use "./functions.scss" as *;
 
 [data-div-type="element"] {
   &[data-element-type="productImage"] {
@@ -166,6 +166,7 @@
       --text-high-contrast-rgb-value: 49, 49, 49;
       --detail-medium-contrast: rgb(234, 234, 234);
       --text-body: rgb(54, 49, 61);
+      overflow: hidden;
 
       position: relative;
       background-color: var(
@@ -731,8 +732,14 @@
       &[data-background-shape="Round"] {
         .left-button,
         .right-button {
-          background-color: #f2f5f5;
-          box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
+          // background-color: var(
+          //   --_ctm-mob-dn-pn-as-bd-cr,
+          //   var(--_ctm-tab-dn-pn-as-bd-cr, var(--_ctm-dn-pn-as-bd-cr))
+          // );
+          &:not(:disabled):hover {
+            @include BgColorLighter(var(--_thm-py-bs-hr-se-bd-cr), 5%);
+          }
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
       }
 
@@ -755,6 +762,32 @@
         cursor: pointer;
         outline: none;
         margin-left: 12px;
+        span {
+          display: flex;
+          svg {
+            width: calc(
+              var(
+                  --_ctm-mob-dn-pn-as-aw-se,
+                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                ) *
+                0.5
+            );
+            height: calc(
+              var(
+                  --_ctm-mob-dn-pn-as-aw-se,
+                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                ) *
+                0.5
+            );
+
+            path {
+              stroke: var(
+                --_ctm-mob-dn-pn-as-aw-cr,
+                var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
+              );
+            }
+          }
+        }
         &:disabled {
           & svg {
             path {
@@ -782,7 +815,32 @@
         outline: none;
         margin-right: 12px;
         padding: 10px;
+        span {
+          display: flex;
+          svg {
+            width: calc(
+              var(
+                  --_ctm-mob-dn-pn-as-aw-se,
+                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                ) *
+                0.5
+            );
+            height: calc(
+              var(
+                  --_ctm-mob-dn-pn-as-aw-se,
+                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                ) *
+                0.5
+            );
 
+            path {
+              stroke: var(
+                --_ctm-mob-dn-pn-as-aw-cr,
+                var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
+              );
+            }
+          }
+        }
         &:disabled {
           & svg {
             path {