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

package/dist/product-sizechart.scss

@@ -161,7 +161,10 @@
             --_ctm-mob-dn-se-ct-hr-se-in-c1,
             var(--_ctm-tab-dn-se-ct-hr-se-in-c1, var(--_ctm-dn-se-ct-hr-se-in-c1))
           );
-          --_sf-hr-ue: var(--_ctm-mob-dn-hr-ue, var(--_ctm-tab-dn-hr-ue, var(--_ctm-dn-hr-ue)));
+          --_sf-hr-ue: var(
+            --_ctm-mob-dn-hr-se-ue,
+            var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue))
+          );
 
           &[data-hover-show-shadow="false"] {
             --_hover-show-shadow: none;
@@ -247,7 +250,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {

package/dist/profile.scss

@@ -86,7 +86,7 @@
       .collapse__icon {
         width: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
         height: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
-
+        transition: rotate 0.4s ease-in-out;
         svg {
           width: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
           height: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
@@ -103,7 +103,7 @@
       .expand__icon {
         width: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
         height: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
-
+        transition: rotate 0.4s ease-in-out;
         svg {
           width: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
           height: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
@@ -304,7 +304,7 @@
       border-radius: prepareMediaVariable(--_ctm-dn-dn-is-cr-br-rs);
       // padding: 8px 0;
       padding: prepareMediaVariable(--_ctm-dn-dn-is-cr-pg);
-      z-index: 1001;
+      z-index: 100000;
       overflow: hidden;
       &[data-show-items-container-border="true"] {
         border-color: prepareMediaVariable(--_ctm-dn-dn-is-cr-br-cr);

package/dist/quantity-selector.scss

@@ -585,8 +585,8 @@
             var(--_ctm-tab-dn-ie-bn-hr-se-in-c1, var(--_ctm-dn-ie-bn-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-ie-bn-hr-ue,
-            var(--_ctm-tab-dn-ie-bn-hr-ue, var(--_ctm-dn-ie-bn-hr-ue))
+            --_ctm-mob-dn-ie-bn-hr-se-ue,
+            var(--_ctm-tab-dn-ie-bn-hr-se-ue, var(--_ctm-dn-ie-bn-hr-se-ue))
           );
 
           // for pading and width
@@ -681,7 +681,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -803,8 +803,8 @@
             var(--_ctm-tab-dn-de-bn-hr-se-in-c1, var(--_ctm-dn-de-bn-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-de-bn-hr-ue,
-            var(--_ctm-tab-dn-de-bn-hr-ue, var(--_ctm-dn-de-bn-hr-ue))
+            --_ctm-mob-dn-de-bn-hr-se-ue,
+            var(--_ctm-tab-dn-de-bn-hr-se-ue, var(--_ctm-dn-de-bn-hr-se-ue))
           );
 
           // for pading and width
@@ -899,7 +899,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {

package/dist/quick-order-pad.scss

@@ -18,12 +18,14 @@ $input-padding: 10px 12px;
 .quick-order-main {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 24px;
   width: 100%;
   height: 100%;
 
   .input-group {
-    display: flex;
+    // display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     gap: 12px;
     height: fit-content;
     align-items: center;
@@ -104,53 +106,115 @@ $input-padding: 10px 12px;
       line-height: 20px;
     }
 
-    .add-btn {
-      background-color: $primary;
-      color: $white;
-      padding: 10px 16px;
-      border-radius: 4px;
-      font-weight: 600;
-      font-size: 14px;
-      cursor: pointer;
-      transition: background-color 0.2s;
+    .input-group-right-col {
       display: flex;
-      gap: 4px;
-      line-height: 20px;
-      &.disabled {
-        background-color: var(--_primary-100);
+      gap: 16px;
+      .msd {
+        width: 100%;
       }
+      .add-btn {
+        // background-color: $primary;
+        // color: $white;
+        padding: 10px 16px;
+        // border-radius: 4px;
+        // font-weight: 600;
+        // font-size: 14px;
+        // cursor: pointer;
+        // transition: background-color 0.2s;
+        // display: flex;
+        // gap: 4px;
+        // line-height: 20px;
+        // justify-content: center;
+        svg path {
+          stroke: var(--_base-white);
+        }
+        &.disabled {
+          opacity: 0.4;
+          pointer-events: none;
+        }
+        .spinner {
+          margin-top: -3px;
+          display: inline-block;
+        }
 
-      .add-icon {
-        width: 20px;
-        height: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        svg {
-          width: 16px;
-          height: 16px;
-          path {
-            stroke: #fff;
-          }
+        // .add-icon {
+        //   width: 20px;
+        //   height: 20px;
+        //   display: flex;
+        //   align-items: center;
+        //   justify-content: center;
+
+        //   svg {
+        //     width: 16px;
+        //     height: 16px;
+        //     path {
+        //       stroke: #fff;
+        //     }
+        //   }
+        // }
+        // &:hover {
+        //   background-color: $primary-hover;
+        // }
+      }
+    }
+  }
+  .cart_products_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding-inline: 24px;
+    .cart_item_wrapper {
+      padding-bottom: 24px;
+      &:not(:last-child) {
+        border-bottom: 0.5px solid var(--_gray-300);
+      }
+      &:not(:first-child) {
+        margin-top: 12px !important;
+      }
+      .product_price {
+        margin-top: 10px;
+      }
+      .product_info_container {
+        .product_title {
+          font-weight: 600;
+        }
+        .product_code,
+        .product_options {
+          color: var(--_thm-cs-at-sy);
         }
       }
-      &:hover {
-        background-color: $primary-hover;
+
+      .currency_span {
+        font-weight: 600;
       }
     }
-  }
-}
-.cart_products_wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: 12px;
-  .emptyData {
-    color: $text-color;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 24px;
+    .product_qty_price_wrapper {
+      // gap: 12px !important;
+      gap: 16px;
+      .product_qty_wrapper {
+        width: 120px;
+      }
+      .dropdown-input-section {
+        height: 42px;
+        .product_title {
+          color: var(--_gray-900);
+          font-weight: 600;
+        }
+        .text_ellipsis {
+          color: var(--_gray-600);
+        }
+      }
+    }
+
+    .emptyData {
+      color: $text-color;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+    }
+    .remove-btn {
+      color: var(--_error-500);
+    }
   }
 }
 

package/dist/repeater-embla-controls.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:list";
+@use "./functions.scss" as *;
 
 @mixin CMSRepeaterEmblaControlStyles($type: 1) {
   @if ($type == 1) {
@@ -84,11 +85,12 @@
       background: var(--_sf-nv-ic-bg, var(--_sf-dd-vl-bg-t3, #fff));
 
       &:hover:not(:disabled) {
-        --_sf-nv-ic-bg: var(--_sf-sl-ct-ic-dt-at-cl);
+        // --_sf-nv-ic-bg: color-mix(in srgb, var(--_sf-sl-ct-ic-dt-at-cl) 10%, transparent);
+        @include BgColorLighter(var(--_sf-sl-ct-ic-dt-at-cl), 10%);
 
         svg {
           path {
-            stroke: #fff;
+            stroke: var(--_sf-sl-ct-ic-dt-at-cl);
           }
         }
       }

package/dist/repeater.scss

@@ -787,8 +787,8 @@ $rai: "repeater-advertise-item";
           var(--_ctm-rep-tab-dn-bn-se-hr-se-in-c1, var(--_ctm-rep-dn-bn-se-hr-se-in-c1))
         );
         --_sf-hr-ue: var(
-          --_ctm-rep-mob-dn-bn-se-hr-ue,
-          var(--_ctm-rep-tab-dn-bn-se-hr-ue, var(--_ctm-rep-dn-bn-se-hr-ue))
+          --_ctm-rep-mob-dn-bn-se-hr-se-ue,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-ue, var(--_ctm-rep-dn-bn-se-hr-se-ue))
         );
 
         // for pading and width
@@ -886,7 +886,7 @@ $rai: "repeater-advertise-item";
 
       &:hover .icon--hover {
         // opacity: 1;
-        display: inline;
+        display: flex;
       }
 
       &:hover .icon--default {

package/dist/search.scss

@@ -51,8 +51,18 @@
     .search-container {
       width: 100%;
       height: 100%;
+      transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s;
       &:focus-within {
-        outline: 2px solid var(--_gray-200);
+        outline: 2px solid rgb(97 150 234 / 10%);
+        // border: 1px solid #192d90;
+        border-radius: var(
+          --_ctm-mob-dn-sh-br-br-rs,
+          var(--_ctm-tab-dn-sh-br-br-rs, var(--_ctm-dn-sh-br-br-rs))
+        );
       }
       &.dropdown {
         &:focus-within {

package/dist/section.scss

@@ -35,15 +35,15 @@ $rp: (
 );
 
 body {
-  color: var(--_thm-ty-p1-tt-cr);
-  font-family: var(--_thm-ty-p1-ft-fy), sans-serif;
-  font-size: var(--_thm-ty-p1-ft-se);
-  font-weight: var(--_thm-ty-p1-bd);
-  font-style: var(--_thm-ty-p1-ic);
-  text-align: var(--_thm-ty-p1-tt-an);
-  letter-spacing: var(--_thm-ty-p1-cr-sg);
-  line-height: var(--_thm-ty-p1-le-ht);
-  text-decoration: var(--_thm-ty-p1-ue);
+  // color: var(--_thm-ty-p1-tt-cr);
+  // font-family: var(--_thm-ty-p1-ft-fy), sans-serif;
+  // font-size: var(--_thm-ty-p1-ft-se);
+  // font-weight: var(--_thm-ty-p1-bd);
+  // font-style: var(--_thm-ty-p1-ic);
+  // text-align: var(--_thm-ty-p1-tt-an);
+  // letter-spacing: var(--_thm-ty-p1-cr-sg);
+  // line-height: var(--_thm-ty-p1-le-ht);
+  // text-decoration: var(--_thm-ty-p1-ue);
 
   // Responsive
   @include prepareCustomClassCSSProps($rp);

package/dist/shipping-payments.scss

@@ -1858,6 +1858,11 @@ $activeElementSelector: "[data-has-clicked='true']";
                       color: var(--_gray-700);
                       font-size: 12px;
                     }
+                    .address_skeletons {
+                      display: flex;
+                      gap: 8px;
+                      margin-bottom: 4px;
+                    }
                   }
 
                   .contact {

package/dist/stack.scss

@@ -44,9 +44,19 @@ body {
     background-repeat: prepareMediaVariable(--_ctm-sta-dn-bd-rt);
     background-size: prepareMediaVariable(--_ctm-sta-dn-bd-se);
 
-    border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-cr));
-    border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-se));
-    border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-wh));
+    &[data-show-border="true"] {
+      border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-cr));
+      border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-se));
+      border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-wh));
+    }
+
+    &[data-show-boxshadow="true"] {
+      box-shadow: var(
+        --_hide-grid-shadow,
+        prepareMediaVariable(--_ctm-sta-dn-sw-ae) prepareMediaVariable(--_ctm-sta-dn-sw-br)
+          prepareMediaVariable(--_ctm-sta-dn-sw-sd) prepareMediaVariable(--_ctm-sta-dn-sw-cr)
+      );
+    }
     border-radius: prepareMediaVariable(--_ctm-sta-dn-br-rs);
     grid-template-columns: 100%;
 

package/dist/types/builder/elements/common.d.ts

@@ -29,4 +29,5 @@ export interface CMSElementInterface {
     deviceVisibility?: CMSDeviceVisibilityOptionInterface;
     parentKey?: any;
     childIdsV2?: any[];
+    customCSS?: any;
 }

package/dist/types/builder/elements/light-box-v2/index.d.ts

@@ -44,4 +44,5 @@ export interface LightBoxV2ElementInterface {
     deviceVisibility?: CMSDeviceVisibilityOptionInterface;
     parentKey?: any;
     childIdsV2?: any[];
+    customCSS?: any;
 }

package/dist/types/builder/elements/section/index.d.ts

@@ -55,6 +55,7 @@ export interface SectionVariationInterface {
     editedStyles?: Record<string, any>;
     controls?: Record<string, any>;
     sectionVariantID?: string;
+    customCSS?: any;
 }
 export interface CMSSectionInterface {
     id?: string | number;