@sc-360-v2/storefront-cms-library 0.3.29 → 0.3.31

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 {
@@ -134,14 +138,14 @@ $active_btn_text_color: #fff;
       .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 #fff;
+        border: 1px solid $component_bg_color;
         display: flex;
         justify-content: center;
-
+        font-size: 14px;
         &:hover {
           border: 1px solid #243dc6;
         }
@@ -151,7 +155,7 @@ $active_btn_text_color: #fff;
         padding: 12px 24px;
         border-radius: 4px;
         background-color: #d92d20;
-        color: #fff;
+        color: $component_bg_color;
         font-weight: 600;
         width: 100%;
         display: flex;
@@ -260,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;
@@ -302,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;
@@ -318,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;
@@ -340,25 +345,45 @@ $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;
           }
         }
 
         .actions {
           display: flex;
-          gap: 8px;
+          align-items: center;
+          gap: 12px;
+          svg {
+            width: 16px;
+            height: 16px;
+          }
           span {
-            width: 36px;
-            height: 36px;
+            width: 32px;
+            height: 32px;
             cursor: pointer;
             font-size: 16px;
             color: $text-light;
@@ -368,9 +393,15 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
             justify-content: center;
 
             &:hover {
-              color: $black;
+              color: var(--_gray-900);
+              background-color: var(--_gray-100);
+              border-radius: 4px;
             }
           }
+          .sc_modal-close svg {
+            width: 20px !important;
+            height: 20px !important;
+          }
         }
       }
 
@@ -420,8 +451,9 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       position: sticky;
       bottom: 0;
       display: flex;
+      align-items: center;
       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;
@@ -430,13 +462,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;
           }
         }
       }
@@ -450,7 +485,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;
 
@@ -463,7 +498,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;
@@ -509,7 +544,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       background-color: $white;
       display: flex;
       align-items: center; /* Align items vertically in the toolbar */
-      padding: 12px 16px; /* Add padding to the toolbar */
+      padding-inline-start: 16px; /* Add padding to the toolbar */
       border-radius: $radius 0 0 $radius; /* Rounded left corners */
       gap: 16px;
     }
@@ -535,6 +570,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
 
       &:hover {
         background: $primary-hover;
+        
       }
     }
 
@@ -547,6 +583,29 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
         font-size: 16px;
         color: $text-light;
         transition: color 0.2s;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &:hover {
+          background-color: var(--_gray-50);
+          border-radius: 4px;
+          svg path {
+          stroke: var(--_gray-900)
+        }
+        }
+        [title="maximize"] {
+          svg {
+            width: 14px;
+          height: 14px;
+          }
+        }
+
+        svg {
+          width: 20px;
+          height: 20px;
+        }
 
         &:hover {
           color: $black;

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,6 @@ $input-padding: 10px 12px;
 // .quick-order-main Styles
 .quick-order-main {
   display: flex;
-  padding: 12px;
   flex-direction: column;
   gap: 16px;
   width: 100%;
@@ -26,13 +26,30 @@ $input-padding: 10px 12px;
     gap: 12px;
     height: fit-content;
     align-items: center;
+    padding: 12px;
+    border-bottom: 0.5px solid var(--Gray-200, #eaecf0);
+    flex-shrink: 0;
 
     .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;
@@ -103,9 +122,11 @@ $input-padding: 10px 12px;
         align-items: center;
         justify-content: center;
 
+        
+
         svg {
-          width: 20px;
-          height: 20px;
+          width: 16px;
+          height: 16px;
           path {
             stroke: #fff;
           }
@@ -117,3 +138,21 @@ $input-padding: 10px 12px;
     }
   }
 }
+.cart_products_wrapper {
+  padding: 12px;
+  .emptyData {
+    color: $text-color;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+  }
+}
+
+@keyframes rotate360 {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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,16 +32,17 @@ $rp: (
 );
 
 body {
+  // Responsive
   @include prepareCustomClassCSSProps($rp);
 
-  [data-anim-id="flex-animation-element"] {
-    &:not(.animate__animated) {
-      opacity: 0;
-    }
-    &.animate__animated {
-      animation-delay: calc(1ms * var(--_ctm-flex-anim-delay, 1));
-    }
-  }
+  // Animation
+  @include FlexAnimationModuleStyles();
+
+  // Position
+  @include FlexPositionModuleStyles();
+
+  // Responsive
+  @include FlexElementResponsiveBehaviourStyles();
 }
 
 section {

package/dist/shareCartSideBar.scss

@@ -16,7 +16,6 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
   width: 100%;
   height: 100%;
   top: 0;
-  background: rgba(112, 112, 112, 0.13);
   z-index: 9999;
 
   // Container overlay
@@ -67,7 +66,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 16px 24px;
+    padding: 16px 16px 16px 24px;
     position: sticky;
     top: 0px;
     background: var(--_base-white);
@@ -80,11 +79,19 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     }
 
     .close-btn {
-      font-size: 24px;
-      background: none;
-      border: none;
       cursor: pointer;
-      color: $text-color;
+      width: 32px;
+      height: 32px;
+      display: flex;
+    justify-content: center;
+    align-items: center;
+    &:hover {
+      background-color: var(--_gray-50);
+      border-radius: 6px;
+      svg path {
+        stroke: var(--_gray-900);
+      }
+    }
     }
   }
 
@@ -177,7 +184,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;
 
@@ -188,7 +197,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
       cursor: pointer;
       font-weight: 600;
 
-      padding: 12px 16px;
+      padding: 12px 14px;
       border-radius: 6px;
       &:hover {
         background: var(--_gray-100);