@sc-360-v2/storefront-cms-library 0.2.100 → 0.3.1

package/dist/functions.scss

@@ -20,30 +20,40 @@
 //   ),
 // );
 
-$breakPoints: (
+$breakPointsV2: (
   desktop: (
-    min: 1024px,
+    min: 768px,
     max: 99999px,
   ),
   mobile: (
     min: 10px,
     max: 767px,
   ),
-  tablet: (
+  laptop: (
     min: 768px,
     max: 1023px,
   ),
 );
 
+@function safe-map-get($map, $key) {
+  @if $map != null and type-of($map) == "map" and map-has-key($map, $key) {
+    @return map.get($map, $key);
+  }
+  @return null;
+}
+
 @mixin prepareMediaQueries($list) {
-  @each $mediaKey, $mediaValue in $breakPoints {
-    $maxWidth: map.get($mediaValue, max);
-    $minWidth: map.get($mediaValue, min);
-    @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
-      @each $key, $value in $list {
-        $value1: map.get($value, $mediaKey);
-        @if ($value1 != null) {
-          #{$key}: $value1;
+  @each $mediaKey, $mediaValue in $breakPointsV2 {
+    $maxWidth: safe-map-get($mediaValue, max);
+    $minWidth: safe-map-get($mediaValue, min);
+
+    @if $maxWidth != null and $minWidth != null {
+      @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
+        @each $key, $value in $list {
+          $value1: safe-map-get($value, $mediaKey);
+          @if $value1 != null {
+            #{$key}: $value1;
+          }
         }
       }
     }
@@ -75,16 +85,23 @@ $breakPoints: (
   }
 }
 
-@function getListOfResponsive($desktop, $mobile, $latop: "optional") {
+@function getListOfResponsive($desktop, $mobile, $laptop: "optional") {
   $list: (
     desktop: $desktop,
     mobile: $mobile,
   );
-  @if ($latop != "optional") {
+  @if ($laptop != "optional") {
+    $list: map-merge(
+      $list,
+      (
+        laptop: $laptop,
+      )
+    );
+  } @else {
     $list: map-merge(
       $list,
       (
-        laptop: $latop,
+        laptop: $desktop,
       )
     );
   }
@@ -129,9 +146,19 @@ $breakPoints: (
                 #{$key2}: #{$value2};
               }
             } @else {
-              @media only screen and (max-width: #{map.get(map.get($breakPoints, $key1), max)}) and (min-width: #{map.get(map.get($breakPoints, $key1), min)}) {
-                @each $key2, $value2 in $value1 {
-                  #{$key2}: #{$value2};
+              $mediaValue: safe-map-get($breakPointsV2, $key1);
+              $maxWidth: safe-map-get($mediaValue, max);
+              $minWidth: safe-map-get($mediaValue, min);
+              // @media only screen and (max-width: #{map.get(map.get($breakPointsV2, $key1), max)}) and (min-width: #{map.get(map.get($breakPointsV2, $key1), min)}) {
+              //   @each $key2, $value2 in $value1 {
+              //     #{$key2}: #{$value2};
+              //   }
+              // }
+              @if $maxWidth != null and $minWidth != null {
+                @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
+                  @each $key2, $value2 in $value1 {
+                    #{$key2}: #{$value2};
+                  }
                 }
               }
             }
@@ -147,7 +174,15 @@ $breakPoints: (
               #{$key2}: #{$value2};
             }
           } @else {
-            @media only screen and (max-width: #{map.get(map.get($breakPoints, $key1), max)}) and (min-width: #{map.get(map.get($breakPoints, $key1), min)}) {
+            // @media only screen and (max-width: #{map.get(map.get($breakPoints, $key1), max)}) and (min-width: #{map.get(map.get($breakPoints, $key1), min)}) {
+            //   @each $key2, $value2 in $value1 {
+            //     #{$key2}: #{$value2};
+            //   }
+            // }
+            $mediaValue: safe-map-get($breakPointsV2, $key1);
+            $maxWidth: safe-map-get($mediaValue, max);
+            $minWidth: safe-map-get($mediaValue, min);
+            @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
               @each $key2, $value2 in $value1 {
                 #{$key2}: #{$value2};
               }

package/dist/modal.scss

@@ -192,15 +192,13 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
 .modalV2-main {
   .modalV2-wrapper {
     position: fixed;
-    bottom: 5%;
     left: 50%;
-    transform: translate(-50%, 0%);
     transition:
       all 0.4s ease-in-out,
       transform 0.4s ease-in-out;
     background: $white;
     border-radius: $radius-lg;
-    padding: 20px;
+    padding: 0px 20px;
     width: 850px;
     font-family: $font-base;
     box-shadow: $shadow-md;
@@ -220,7 +218,6 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       height: 95vh;
       border-radius: $radius-lg;
       transform: translate(-50%, -50%);
-      padding: 24px 32px;
       box-shadow: none;
       z-index: $z-index-modal;
       display: flex;
@@ -236,10 +233,20 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       .footer-bar {
         border-top: 1px solid $gray-300;
         padding-top: 16px;
-        margin-top: 24px;
+        margin: 15px 0;
       }
     }
 
+    &.center {
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &.bottom {
+      bottom: 5%;
+      transform: translate(-50%, 0%);
+    }
+
     .top-bar {
       position: sticky;
       top: 0;
@@ -250,7 +257,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 16px;
+        padding: 15px 0px;
 
         .left-col {
           display: flex;
@@ -339,10 +346,11 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       bottom: 0;
       display: flex;
       justify-content: space-between;
-      padding-top: 16px;
+      padding: 15px 0;
       border-top: 1px solid $gray-300;
       margin-top: 24px;
       font-size: $font-size-base;
+      background: $footer_btn_background_color;
 
       .summary span {
         margin-right: 18px;

package/dist/quick-order-pad.scss

@@ -1,316 +1,57 @@
 // Colors
-$white: var(--_white);
-$black: var(--base-black);
-$gray-100: #f9fafb;
-$gray-300: #e5e7eb;
 $gray-400: #ccc;
-$gray-600: #737373;
-$gray-700: #6b7280;
 $gray-800: #444;
-$gray-900: #111827;
 
 $primary: var(--_primary-400);
 $primary-hover: var(--_primary-500);
-$text-dark: #222;
-$text-medium: #374151;
-$text-light: #666;
+$white: var(--_white);
 
 // Typography
-$font-base: "Segoe UI", sans-serif;
 $font-size-base: 14px;
-$font-size-sm: 12px;
-$font-size-md: 15px;
-$font-size-lg: 18px;
 
 // Spacing & Sizes
 $radius: 6px;
-$radius-lg: 8px;
-$input-height: 32px;
 $input-padding: 10px 12px;
 
-// Z-Index
-$z-index-modal: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
-$z-index-backdrop: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 11);
-$z-index-wrapper: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
-$z-index-minimized: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 12);
-$z-index-min-cart: calc(
-  var(--_higher-zIndex) + var(--_cs-et-zIndex) + 13
-); // Higher z-index for min cart
-
-// Shadows
-$shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
-
+// .quick-order-main Styles
 .quick-order-main {
-  .quick-order-wrapper {
-    position: fixed;
-    bottom: 5%;
-    left: 50%;
-    transform: translate(-50%, 0%);
-    transition:
-      all 0.4s ease-in-out,
-      transform 0.4s ease-in-out;
-    background: $white;
-    border-radius: $radius-lg;
-    padding: 20px;
-    width: 850px;
-    font-family: $font-base;
-    box-shadow: $shadow-md;
-    z-index: $z-index-wrapper;
-    max-height: 70vh;
-    overflow: scroll;
+  .input-group {
     display: flex;
-    flex-direction: column;
-
-    &.fullscreen {
-      transition:
-        all 0.5s ease-in-out,
-        transform 0.5s ease-in-out;
-      top: 50%;
-      left: 50%;
-      width: 95vw;
-      height: 95vh;
-      border-radius: $radius-lg;
-      transform: translate(-50%, -50%);
-      padding: 24px 32px;
-      box-shadow: none;
-      z-index: $z-index-modal;
-      display: flex;
-      flex-direction: column;
-      max-height: 100vh;
-
-      .product-list {
-        flex: 1;
-        overflow-y: auto;
-        margin-top: 24px;
-      }
-
-      .footer-bar {
-        border-top: 1px solid $gray-300;
-        padding-top: 16px;
-        margin-top: 24px;
-      }
-    }
-
-    .top-bar {
-      position: sticky;
-      top: 0;
-      background: $white;
-      z-index: 1;
-      padding-bottom: 12px;
-      .title-bar {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 16px;
-
-        .left-col {
-          display: flex;
-          gap: 10px;
-          align-items: center;
-        }
-
-        .title {
-          font-size: $font-size-lg;
-          font-weight: 600;
-          display: flex;
-          align-items: center;
-          gap: 8px;
-
-          .count {
-            font-weight: 700;
-            color: $gray-600;
-            background-color: #f2f4f7;
-            border-radius: 50%;
-            font-size: $font-size-sm;
-            width: 25px;
-            height: 25px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-        }
-
-        .actions span {
-          margin-left: 14px;
-          cursor: pointer;
-          font-size: 16px;
-          color: $text-light;
-          transition: color 0.2s;
-
-          &:hover {
-            color: $black;
-          }
-        }
-      }
-
-      .input-group {
-        display: flex;
-        gap: 12px;
-
-        .qty-input {
-          padding: $input-padding;
-          border: 1px solid $gray-400;
-          border-radius: $radius;
-          font-size: $font-size-base;
-          transition: border 0.2s;
-          width: 120px;
-
-          &:focus {
-            border-color: $primary;
-            outline: none;
-          }
-        }
-
-        .or-text {
-          align-self: center;
-          font-weight: 600;
-          color: $gray-800;
-          font-size: $font-size-base;
-        }
-
-        .add-btn {
-          background-color: $primary;
-          color: $white;
-          padding: 10px 16px;
-          border-radius: $radius;
-          font-weight: 600;
-          font-size: $font-size-base;
-          cursor: pointer;
-          transition: background-color 0.2s;
-
-          &:hover {
-            background-color: $primary-hover;
-          }
-        }
-      }
-    }
+    gap: 12px;
+    margin-bottom: 10px;
 
-    .footer-bar {
-      position: sticky;
-      bottom: 0;
-      display: flex;
-      justify-content: space-between;
-      padding-top: 16px;
-      border-top: 1px solid $gray-300;
-      margin-top: 24px;
+    .qty-input {
+      padding: $input-padding;
+      border: 1px solid $gray-400;
+      border-radius: $radius;
       font-size: $font-size-base;
+      transition: border 0.2s;
+      width: 120px;
 
-      .summary span {
-        margin-right: 18px;
-        font-weight: 500;
-        color: $text-medium;
-      }
-
-      .footer-actions {
-        display: flex;
-        gap: 10px;
-
-        .cancel-btn {
-          border-radius: $radius;
-          padding: 10px 14px;
-          font-weight: 500;
-          font-size: $font-size-base;
-          color: #333;
-          cursor: pointer;
-          transition: background 0.2s;
-
-          &:hover {
-            background: $gray-300;
-          }
-        }
-
-        .cart-btn {
-          background: $primary;
-          color: $white;
-          border-radius: $radius;
-          padding: 10px 20px;
-          font-weight: 600;
-          font-size: $font-size-base;
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          cursor: pointer;
-          transition: background 0.2s;
-
-          &:hover {
-            background: $primary-hover;
-          }
-        }
+      &:focus {
+        border-color: $primary;
+        outline: none;
       }
     }
-  }
-
-  .quick-order-backdrop {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.4);
-    z-index: $z-index-backdrop;
-  }
-
-  .quick-order-min {
-    position: fixed;
-    transition:
-      all 0.4s ease-in-out,
-      transform 0.4s ease-in-out;
-    right: 20px;
-    bottom: 20px;
-    padding: 0; /* Remove padding from the main min container */
-    border-radius: $radius;
-    box-shadow: $shadow-md;
-    z-index: $z-index-minimized;
-    display: none;
-    flex-direction: row; /* Align items in a row */
-    align-items: center;
-    gap: 10px; /* Adjust gap between elements */
-    font-size: $font-size-base;
-    background-color: transparent; /* Make the main container transparent */
 
-    .min-toolbar {
-      background-color: $white;
-      display: flex;
-      align-items: center; /* Align items vertically in the toolbar */
-      padding: 12px 16px; /* Add padding to the toolbar */
-      border-radius: $radius 0 0 $radius; /* Rounded left corners */
-      gap: 16px;
-    }
-
-    &.active {
-      display: flex;
+    .or-text {
+      align-self: center;
+      font-weight: 600;
+      color: $gray-800;
+      font-size: $font-size-base;
     }
 
-    .cart-btn {
-      background: $primary;
+    .add-btn {
+      background-color: $primary;
       color: $white;
-      border: none; /* Remove border */
-      border-radius: 0 $radius $radius 0; /* Rounded right corners */
-      padding: 12px 16px;
+      padding: 10px 16px;
+      border-radius: $radius;
       font-weight: 600;
-      font-size: $font-size-sm;
-      display: flex;
-      align-items: center;
-      gap: 4px;
+      font-size: $font-size-base;
       cursor: pointer;
-      transition: background 0.2s;
-      z-index: $z-index-min-cart;
-
+      transition: background-color 0.2s;
       &:hover {
-        background: $primary-hover;
-      }
-    }
-
-    .actions {
-      display: flex;
-      gap: 8px;
-
-      span {
-        cursor: pointer;
-        font-size: 16px;
-        color: $text-light;
-        transition: color 0.2s;
-
-        &:hover {
-          color: $black;
-        }
+        background-color: $primary-hover;
       }
     }
   }

package/dist/quotes.scss

@@ -246,6 +246,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   ctm-var(dn-qe-id-sw-cr);
               }
             }
+            .quotes_action {
+              display: flex;
+              align-items: center;
+              gap: 16px;
+              flex: 1 0 0;
+              align-self: stretch;
+              font-size: 14px;
+            }
           }
         }
       }

package/dist/rfqs.scss

@@ -246,6 +246,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   ctm-var(dn-rq-id-sw-cr);
               }
             }
+            .rfq_action {
+              display: flex;
+              align-items: center;
+              gap: 16px;
+              flex: 1 0 0;
+              align-self: stretch;
+              font-size: 14px;
+            }
           }
         }
       }