@sc-360-v2/storefront-cms-library 0.3.28 → 0.3.30

package/dist/light-box-v2.scss

@@ -10,7 +10,7 @@ $activeElementSelector: "[data-has-clicked='true']";
 #{$lbMain} {
   position: var(--_p-fixed);
   inset: 0 0 0 0;
-  z-index: calc(var(--_higher-zIndex) + var(--_lt-bx-zi));
+  z-index: calc(var(--_higher-zIndex) + var(--_lt-bx-zi, 1));
   --_cms-section-add-button-zIndex: var(--_higher-zIndex);
   --_cms-sl-df-zIndex: 1;
   --_cms-element-active-zIndex: calc(

package/dist/modal.scss

@@ -11,10 +11,12 @@ $header_font_weight: 600;
 $close_btn_font_size: 24px;
 $close_btn_size: 35px;
 $footer_btn_background_color: #ffffff;
+$component_bg_color: #ffffff;
 $footer_btn_padding: 10px 15px;
 $footer_btn_font_size: 14px;
 $primary_100: var(--Primary-100, #ced4f6);
 $primary_500: var(--Primary-500, #162578);
+$gray_500: var(--Gray-500, #667085);
 $gray_900: var(--Gray-900, #101828);
 $gap_between_elements: 24px;
 $padding_horizontal: 24px;
@@ -60,7 +62,7 @@ $active_btn_text_color: #fff;
     border-radius: $border_radius;
     display: flex;
     flex-direction: column;
-    gap: $gap_between_elements;
+    // gap: $gap_between_elements;
     z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
     cursor: auto;
 
@@ -83,6 +85,7 @@ $active_btn_text_color: #fff;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding-bottom: 6px;
 
     h2 {
       font-size: $header_font_size;
@@ -118,6 +121,7 @@ $active_btn_text_color: #fff;
   .modal-body {
     font-size: 14px;
     color: $gray_900;
+    padding-bottom: 30px;
   }
 
   .modal-footer {
@@ -129,28 +133,38 @@ $active_btn_text_color: #fff;
     .modal-footer-wrapper {
       display: flex;
       width: 100%;
-      gap: 8px;
+      gap: 12px;
 
       .modal-footer-white-btn {
         padding: 12px 24px;
         border-radius: 4px;
-        background-color: #fff;
+        background-color: $component_bg_color;
         color: #243dc6;
-        font-weight: 600;
+        font-weight: 500;
         width: 100%;
+        border: 1px solid $component_bg_color;
         display: flex;
         justify-content: center;
+        font-size: 14px;
+        &:hover {
+          border: 1px solid #243dc6;
+        }
       }
 
       .modal-footer-danger-btn {
         padding: 12px 24px;
         border-radius: 4px;
         background-color: #d92d20;
-        color: #fff;
+        color: $component_bg_color;
         font-weight: 600;
         width: 100%;
         display: flex;
+        border: 1px solid #d92d20;
         justify-content: center;
+
+        &:hover {
+          background-color: darken(#d92d20, 5%);
+        }
       }
     }
   }
@@ -250,8 +264,8 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
         transform 0.5s ease-in-out;
       top: 50%;
       left: 50%;
-      width: 99vw;
-      height: 98vh;
+      width: 98.5%;
+      height: 98%;
       border-radius: $radius-lg;
       transform: translate(-50%, -50%);
       box-shadow: none;
@@ -259,6 +273,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       display: flex;
       flex-direction: column;
       max-height: 100vh;
+      max-width: none;
 
       .product-list {
         flex: 1;
@@ -291,15 +306,14 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       top: 0;
       background: $white;
       z-index: 1;
-      padding: 0 16px;
-      border-bottom: 1px solid #d0d5dd;
+      padding: 10px 16px;
+      border-bottom: 0.5px solid #d0d5dd;
       .title-bar {
         display: flex;
         justify-content: space-between;
         align-items: center;
         // padding: 15px 0px;
-        height: 60px;
-
+        // height: 56px;
         .left-col {
           display: flex;
           gap: 10px;
@@ -307,14 +321,16 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
         }
 
         .title {
-          font-size: $font-size-lg;
-          font-weight: 600;
           display: flex;
           align-items: center;
-          gap: 6px;
-          color: var(--_gray-900);
-          line-height: 24px;
-
+          // gap: 6px;
+          .quickOrderTitle {
+            color: $gray_900;
+            font-size: $font-size-base;
+            font-weight: 700;
+            line-height: 24px; /* 171.429% */
+            text-transform: capitalize;
+          }
           .modal_heading_icon {
             width: 36px;
             height: 36px;
@@ -329,16 +345,31 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
           }
 
           .count {
-            font-weight: 700;
-            color: $gray-600;
-            background-color: #f2f4f7;
-            border-radius: 50%;
-            font-size: $font-size-sm;
-            width: 25px;
-            height: 25px;
             display: flex;
+            padding: 2px 8px;
             align-items: center;
-            justify-content: center;
+            border-radius: 100px;
+            background: var(--Gray-100, #f2f4f7);
+            mix-blend-mode: multiply;
+            color: var(--Gray-700, #344054);
+            text-align: center;
+            margin-left: 6px;
+            font-family: Lato;
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 18px; /* 150% */
+            // font-weight: 700;
+            // color: $gray-600;
+            // background-color: #f2f4f7;
+            // border-radius: 6px;
+            // font-size: $font-size-sm;
+            // // width: 25px;
+            // height: 25px;
+            // padding: 0 8px;
+            // display: flex;
+            // // align-items: center;
+            // justify-content: center;
           }
         }
 
@@ -360,6 +391,10 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
               color: $black;
             }
           }
+          .sc_modal-close svg {
+            width: 14px !important;
+            height: 14px !important;
+          }
         }
       }
 
@@ -410,7 +445,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       bottom: 0;
       display: flex;
       justify-content: space-between;
-      padding: 10px 16px;
+      padding: 16px 22px;
       border-top: 1px solid $gray-300;
       font-size: $font-size-base;
       background: $footer_btn_background_color;
@@ -419,13 +454,16 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
         display: flex;
         gap: 24px;
         span {
+          color: $gray_900;
+          font-size: 14px;
           font-weight: 700;
           line-height: 20px;
-          font-size: 14px;
-          color: #101828;
           .footer_label {
+            color: $gray_500;
+            font-size: 14px;
             font-weight: 400;
-            color: #667085;
+            line-height: 20px;
+            margin-right: 6px;
           }
         }
       }
@@ -439,7 +477,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
           padding: 10px 14px;
           font-weight: 500;
           font-size: $font-size-base;
-          color: #333;
+          color: var(--_gray-900);
           cursor: pointer;
           transition: background 0.2s;
 
@@ -452,7 +490,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
           background: $primary;
           color: $white;
           border-radius: $radius;
-          padding: 10px 20px;
+          padding: 10px 16px;
           font-weight: 600;
           font-size: $font-size-base;
           display: flex;

package/dist/order-status.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:list";
+@use "./functions.scss" as *;
 
 [data-div-type="element"] {
   &[data-element-type="orderStatus"] {

package/dist/position-module.scss

@@ -0,0 +1,74 @@
+@use "sass:map";
+@use "sass:list";
+
+@use "./functions.scss" as *;
+@use "./prefix-list.scss" as *;
+
+$elementDragging: "[data-cms-new-element-dragging-v2='true']";
+$dataResizerTrue: '[data-cms-element-resizer="true"]';
+$var: "--_sf-width-rsp-psn";
+
+@function convertListToCommaSeparateString($list) {
+  $items: ();
+  @each $key, $value in $list {
+    $sl: ".#{$value}";
+    $items: list.append($items, $sl, comma);
+  }
+
+  @return $items;
+}
+
+$position: (
+  class: (
+    absolute: "flx-abs",
+    fixed: "flx-fxd",
+    sticky: "flx-stk",
+  ),
+  zIndex: "--_ctm-flex-z-index",
+  attributes: (
+    horizontal: "data-position-horizonal",
+    vertical: "data-position-vertical",
+  ),
+  data: (
+    horizontal: (
+      right: prepareMediaVariable(--_ctm-flex-psn-hoft, 0px),
+      left: prepareMediaVariable(--_ctm-flex-psn-hoft, 0px),
+    ),
+    vertical: (
+      top: prepareMediaVariable(--_ctm-flex-psn-voft, 0px),
+      bottom: prepareMediaVariable(--_ctm-flex-psn-voft, 0px),
+    ),
+  ),
+);
+
+@mixin FlexPositionModuleStyles() {
+  $cls: map.get($position, class);
+  $zIndex: map.get($position, zIndex);
+  $attributes: map.get($position, attributes);
+  $data: map.get($position, data);
+
+  :is(#{convertListToCommaSeparateString($cls)}) {
+    @each $key, $value in $data {
+      @each $key1, $value1 in $value {
+        &[#{map.get($attributes, $key)}="#{$key1}"] {
+          #{$key1}: #{$value1};
+        }
+      }
+    }
+    z-index: var(#{$zIndex});
+    @each $key, $value in $cls {
+      &.#{$value} {
+        &:is(:not(#{$elementDragging}, #{$dataResizerTrue})) {
+          position: var(--_p-#{$key}) !important;
+          @if ($key == fixed) {
+            @include FlexUpdatedPrefixCSSVariable($var);
+            width: var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}) !important;
+          }
+          @if ($key != sticky) {
+            margin: 0px !important;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/prefix-list.scss

@@ -0,0 +1,55 @@
+@use "sass:map";
+@use "sass:list";
+
+@use "./functions.scss" as *;
+
+$dataElementType: "data-element-type";
+$dataLayerElementType: "data-layer-element-type";
+
+$prefixList: (
+  section: sec,
+  grid: gri,
+  stack: sta,
+  repeater: rep,
+  repeater-item: repe,
+  product: pro,
+  category: cat,
+  categoryWidget: cate,
+  brand: bran,
+  subCategory: subc,
+  productDetails: prod,
+  categoryDetails: categ,
+  lightboxv2: lig,
+  layouter: lay,
+  layouter-item: layo,
+  layouter-pro: layou,
+  layouter-pro-item: layout,
+  tbs-v2: tbs,
+  tbsContainer: tbsco,
+  marchandiserSets: march,
+  buyForWithTabs: buy,
+  buyForTabsContainer: buyFo,
+  spotlight: spo,
+);
+
+@function convertIntoActualVariable($prefix, $type) {
+  $types: (
+    width: "lt-wh",
+  );
+  $suffix: map.get($types, $type);
+  @return --_ctm-#{$prefix}-#{$suffix};
+}
+
+@mixin FlexUpdatedPrefixCSSVariable($var, $isLayer: false) {
+  $selector: "";
+  @if ($isLayer == false) {
+    $selector: $dataElementType;
+  } @else {
+    $selector: $dataLayerElementType;
+  }
+  @each $key, $value in $prefixList {
+    &[#{$selector}="#{$key}"] {
+      #{$var}: #{prepareMediaVariable(convertIntoActualVariable($value, width))};
+    }
+  }
+}

package/dist/quick-order-pad.scss

@@ -5,6 +5,7 @@ $gray-800: #444;
 $primary: var(--_primary-400);
 $primary-hover: var(--_primary-500);
 $white: var(--_white);
+$text-color: #667085;
 
 // Typography
 $font-size-base: 14px;
@@ -16,7 +17,7 @@ $input-padding: 10px 12px;
 // .quick-order-main Styles
 .quick-order-main {
   display: flex;
-  padding: 12px;
+  // padding: 12px;
   flex-direction: column;
   gap: 16px;
   width: 100%;
@@ -26,13 +27,29 @@ $input-padding: 10px 12px;
     gap: 12px;
     height: fit-content;
     align-items: center;
+    padding: 12px;
+    border-bottom: 0.5px solid var(--Gray-200, #eaecf0);
 
     .quick-order-product-dropdown-section {
       width: 320px;
       height: 40px;
-      border: 0.5px solid #d0d5dd;
+      // border: 0.5px solid #d0d5dd;
       border-radius: 4px;
-
+      .dropdown-input-section {
+        border-radius: 4px;
+        border: 0.5px solid var(--Gray-300, #d0d5dd);
+        display: flex;
+        width: 320px;
+        padding: 8px 12px;
+        justify-content: space-between;
+        align-items: center;
+        input {
+          color: $text-color;
+          font-size: 16px;
+          font-weight: 400;
+          line-height: 24px; /* 150% */
+        }
+      }
       .dropdown-input-section {
         padding: 0px 12px;
 
@@ -77,17 +94,19 @@ $input-padding: 10px 12px;
     }
 
     .or-text {
-      align-self: center;
-      font-weight: 600;
-      color: $gray-800;
-      font-size: $font-size-base;
+      color: var(--Gray-600, #475467);
+      font-family: Lato;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
     }
 
     .add-btn {
       background-color: $primary;
       color: $white;
       padding: 10px 16px;
-      border-radius: $radius;
+      border-radius: 4px;
       font-weight: 600;
       font-size: 14px;
       cursor: pointer;
@@ -117,3 +136,12 @@ $input-padding: 10px 12px;
     }
   }
 }
+.cart_products_wrapper {
+  padding: 12px;
+  .emptyData {
+    color: $text-color;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+  }
+}

package/dist/responsive-behaviour.scss

@@ -0,0 +1,21 @@
+@use "sass:map";
+@use "sass:list";
+
+@use "./prefix-list.scss" as *;
+@use "./functions.scss" as *;
+
+$rb_cls: ".flx__rb__fxd";
+$elementSelector: '[data-div-type="element"]';
+$fullView: '[data-view-state="full"]';
+$var: "--_sf-width-rb-vl";
+
+@mixin FlexElementResponsiveBehaviourStyles() {
+  #{$elementSelector} {
+    &#{$rb_cls} {
+      &:not(#{$fullView}) {
+        @include FlexUpdatedPrefixCSSVariable(#{$var});
+        width: var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}) !important;
+      }
+    }
+  }
+}

package/dist/section.scss

@@ -1,6 +1,9 @@
 @use "sass:map";
 @use "sass:list";
 @use "./functions.scss" as *;
+@use "./position-module.scss" as *;
+@use "./animation-control.scss" as *;
+@use "./responsive-behaviour.scss" as *;
 
 $activeElementSelector: "[data-has-clicked='true']";
 $repeterLElement: '[data-element-type="repeater"]';
@@ -11,7 +14,7 @@ $mb: "mb_d_none";
 $rp: (
   class: (
     #{$tb}: (
-        tablet: (
+        laptop: (
           display: "none !important",
         ),
       ),
@@ -29,13 +32,17 @@ $rp: (
 );
 
 body {
+  // Responsive
   @include prepareCustomClassCSSProps($rp);
 
-  [data-anim-id="flex-animation-element"] {
-    &:not(.animate__animated) {
-      opacity: 0;
-    }
-  }
+  // Animation
+  @include FlexAnimationModuleStyles();
+
+  // Position
+  @include FlexPositionModuleStyles();
+
+  // Responsive
+  @include FlexElementResponsiveBehaviourStyles();
 }
 
 section {

package/dist/shareCartSideBar.scss

@@ -5,7 +5,7 @@
 $primary-color: #243dc6;
 $text-color: #2d2d2d;
 $background-color: #ffffff;
-$border-radius: 8px;
+$border-radius: 6px;
 $input-border: #e0e0e0;
 $error-color: #e53935;
 $hint-color: #7d7d7d;
@@ -46,10 +46,10 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     flex-direction: column;
     animation: slide-in 0.3s ease-out;
     .container {
-      padding: 0px 24px;
       overflow-y: auto;
       width: 100%;
       height: calc(100vh - 40px);
+      padding: 0px;
     }
 
     @keyframes slide-in {
@@ -67,11 +67,11 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 16px 0px;
+    padding: 16px 24px;
     position: sticky;
     top: 0px;
-    background: #fff;
-    margin: 0 -14px;
+    background: var(--_base-white);
+    border-bottom: 1px solid var(--_gray-200);
 
     h2 {
       font-size: 18px;
@@ -88,6 +88,10 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     }
   }
 
+  .share_cart_body {
+    padding: 16px 24px;
+  }
+
   // Form fields
   .form-group {
     display: flex;
@@ -109,6 +113,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
 
       &:focus {
         border-color: $primary-color;
+        outline: 2px solid var(--_primary-200);
       }
     }
 
@@ -130,11 +135,11 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 6px;
-    padding: 8px 0px;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    min-height: 44px;
+    // gap: 6px;
+    // padding: 8px 0px;
+    // border: 1px solid #ccc;
+    // border-radius: 8px;
+    // min-height: 44px;
     cursor: text;
   }
 
@@ -172,7 +177,9 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
   .sidebar-footer {
     margin-top: auto;
     display: flex;
-    justify-content: space-between;
+    justify-content: end;
+    align-items: center;
+    gap: 24px;
     padding: 12px;
     border-top: 1px solid #eee;
 
@@ -181,7 +188,13 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
       border: none;
       color: $text-color;
       cursor: pointer;
-      font-weight: 500;
+      font-weight: 600;
+
+      padding: 12px 14px;
+      border-radius: 6px;
+      &:hover {
+        background: var(--_gray-100);
+      }
     }
 
     .share-btn {
@@ -209,16 +222,18 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     }
   }
 
-  .form-group.checkbox-group {
+  .form-group.get_promotons {
     display: flex;
-    align-items: center;
+    // align-items: center;
     gap: 8px; // spacing between checkbox and label
     margin-top: 12px;
+    flex-direction: row;
 
     input[type="checkbox"] {
       width: 16px;
       height: 16px;
       cursor: pointer;
+      accent-color: var(--_primary-400);
     }
 
     label {