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

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

@@ -122,6 +122,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   }
 }
 .msd__clear {
+  margin-right: 15px;
   svg {
     width: 16px;
     height: 16px;
@@ -191,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%);

package/dist/my-templates.scss

@@ -1,5 +1,11 @@
 @use "sass:map";
 @use "sass:list";
+@import "./functions.scss";
+$defaultValues: (
+  --_flex-box: getListOfResponsive(flex, block),
+  --_width: getListOfResponsive(calc(100% - 400px), 100%),
+  --_width-400: getListOfResponsive(400px, 100%),
+);
 
 [data-div-type="element"] {
   &[data-element-type="myTemplates"] {
@@ -65,18 +71,21 @@
         font-size: 24px;
       }
       .back_to_cart {
-        color: var(--_primary-400);
+        color: var(--_thm-cs-tt-ls-as);
         &:hover {
           text-decoration: underline;
         }
       }
     }
     .template_body {
-      display: flex;
+      @include prepareMediaQueries($defaultValues);
+      display: var(--_flex-box, flex);
+      // display: flex;
       gap: 60px;
       justify-content: space-between;
       .template_col_left {
-        width: calc(100% - 400px);
+        // width: calc(100% - 400px);
+        width: var(--_width, 100%);
         height: 400px;
         background-color: var(--_base-white);
         .wishlist-modal {
@@ -243,7 +252,8 @@
         }
       }
       .template_col_right {
-        width: 400px;
+        // width: 400px;
+        width: var(--_width-400, 100%);
         height: fit-content;
         background-color: var(--_base-white);
         overflow: hidden;

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/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/quantity-selector.scss

@@ -491,7 +491,7 @@
 
         &:hover {
           --_sf-hr-bd-cr: var(
-            --_ctm-mob-dn-me-hr-se-bd-cr,
+            --_ctm-mob-dn-ie-bn-hr-se-bd-cr,
             var(--_ctm-tab-dn-ie-bn-hr-se-bd-cr, var(--_ctm-dn-ie-bn-hr-se-bd-cr))
           );
           --_sf-hr-br-cr: var(
@@ -709,7 +709,7 @@
         }
         &:hover {
           --_sf-hr-bd-cr: var(
-            --_ctm-mob-dn-me-hr-se-bd-cr,
+            --_ctm-mob-dn-de-bn-hr-se-bd-cr,
             var(--_ctm-tab-dn-de-bn-hr-se-bd-cr, var(--_ctm-dn-de-bn-hr-se-bd-cr))
           );
           --_sf-hr-br-cr: var(

package/dist/quick-order-pad.scss

@@ -25,7 +25,7 @@ $input-padding: 10px 12px;
   .input-group {
     // display: flex;
     display: grid;
-    grid-template-columns: 1fr 1fr 90px;
+    grid-template-columns: 44vw 44vw 100px;
     gap: 12px;
     height: fit-content;
     align-items: center;
@@ -112,7 +112,7 @@ $input-padding: 10px 12px;
     .input-group-right-col {
       display: flex;
       gap: 16px;
-      max-width: 1200px;
+      width: 100%;
     }
     .add-btn {
       // background-color: $primary;
@@ -217,6 +217,11 @@ $input-padding: 10px 12px;
     }
     .remove-btn {
       color: var(--_error-500);
+      padding: 8px 16px;
+      border-radius: 4px;
+      &:hover {
+        background: var(--_error-50);
+      }
     }
   }
 }

package/dist/repeater.scss

@@ -698,7 +698,7 @@ $rai: "repeater-advertise-item";
 
       &:hover {
         --_sf-hr-bd-cr: var(
-          --_ctm-rep-mob-dn-me-hr-se-bd-cr,
+          --_ctm-rep-mob-dn-bn-se-hr-se-bd-cr,
           var(--_ctm-rep-tab-dn-bn-se-hr-se-bd-cr, var(--_ctm-rep-dn-bn-se-hr-se-bd-cr))
         );
         --_sf-hr-br-cr: var(