@sc-360-v2/storefront-cms-library 0.3.0 → 0.3.2

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

@@ -71,6 +71,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         flex-direction: column;
         align-items: flex-start;
         align-self: stretch;
+        width: 349px;
 
         .heading_wrapper {
           display: flex;
@@ -245,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/repeater-item.scss

@@ -17,6 +17,7 @@
         width: 100%;
         height: 100%;
         padding: var(--_ctm-mob-repe-lt-pg, var(--_ctm-tab-repe-lt-pg, var(--_ctm-repe-lt-pg)));
+        //margin: var(--_ctm-mob-repe-lt-mn, var(--_ctm-tab-repe-lt-mn, var(--_ctm-repe-lt-mn)));
 
         background-color: var(
           --_ctm-mob-repe-dn-bd-cr,

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;
+            }
           }
         }
       }

package/dist/section.scss

@@ -50,43 +50,17 @@ section {
     );
     box-shadow: var(
       --_hide-section-shadow,
-      var(--_ctm-mob-sec-dn-sw-ae, var(--_ctm-tab-sec-dn-sw-ae, var(--_ctm-sec-dn-sw-ae)))
-        var(--_ctm-mob-sec-dn-sw-br, var(--_ctm-tab-sec-dn-sw-br, var(--_ctm-sec-dn-sw-br)))
-        var(--_ctm-mob-sec-dn-sw-sd, var(--_ctm-tab-sec-dn-sw-sd, var(--_ctm-sec-dn-sw-sd)))
-        var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-sec-dn-sw-cr)))
+      prepareMediaVariable(--_ctm-sec-dn-sw-ae) prepareMediaVariable(--_ctm-sec-dn-sw-b)
+        prepareMediaVariable(--_ctm-sec-dn-sw-sd) prepareMediaVariable(--_ctm-sec-dn-sw-cr)
     );
-    background-color: var(
-      --_ctm-mob-sec-dn-bd-cr,
-      var(--_ctm-tab-sec-dn-bd-cr, var(--_ctm-sec-dn-bd-cr))
-    );
-    background-image: var(
-      --_ctm-mob-sec-dn-bd-ie,
-      var(--_ctm-tab-sec-dn-bd-ie, var(--_ctm-sec-dn-bd-ie))
-    );
-    background-attachment: var(
-      --_ctm-mob-sec-dn-bd-at,
-      var(--_ctm-tab-sec-dn-bd-at, var(--_ctm-sec-dn-bd-at))
-    );
-    background-position: var(
-      --_ctm-mob-sec-dn-bd-pn,
-      var(--_ctm-tab-sec-dn-bd-pn, var(--_ctm-sec-dn-bd-pn))
-    );
-    background-position-y: var(
-      --_ctm-mob-sec-dn-bd-pn-y,
-      var(--_ctm-tab-sec-dn-bd-pn-y, var(--_ctm-sec-dn-bd-pn-y))
-    );
-    background-repeat: var(
-      --_ctm-mob-sec-dn-bd-rt,
-      var(--_ctm-tab-sec-dn-bd-rt, var(--_ctm-sec-dn-bd-rt))
-    );
-    background-size: var(
-      --_ctm-mob-sec-dn-bd-se,
-      var(--_ctm-tab-sec-dn-bd-se, var(--_ctm-sec-dn-bd-se))
-    );
-    border-radius: var(
-      --_ctm-mob-sec-dn-br-rs,
-      var(--_ctm-tab-sec-dn-br-rs, var(--_ctm-sec-dn-br-rs))
-    ) !important;
+    background-color: prepareMediaVariable(--_ctm-sec-dn-bd-cr);
+    background-image: prepareMediaVariable(--_ctm-sec-dn-bd-ie);
+    background-attachment: prepareMediaVariable(--_ctm-sec-dn-bd-at);
+    background-position: prepareMediaVariable(--_ctm-sec-dn-bd-pn);
+    background-position-y: prepareMediaVariable(--_ctm-sec-dn-bd-pn-y);
+    background-repeat: prepareMediaVariable(--_ctm-sec-dn-bd-rt);
+    background-size: prepareMediaVariable(--_ctm-sec-dn-bd-se);
+    border-radius: prepareMediaVariable(--_ctm-sec-dn-br-rs) !important;
     &[data-show-shadow="false"] {
       --_hide-section-shadow: none;
     }
@@ -108,40 +82,22 @@ section {
         //   --_hide-section-border,
         //   var(--_ctm-mob-sec-dn-br-cr, var(--_ctm-tab-sec-dn-br-cr, var(--_ctm-sec-dn-br-cr)))
         // );
-        border-color: var(
-          --_hide-section-border,
-          var(--_ctm-mob-sec-dn-br-cr, var(--_ctm-tab-sec-dn-br-cr, var(--_ctm-sec-dn-br-cr)))
-        );
-        border-style: var(
-          --_hide-section-border,
-          var(--_ctm-mob-sec-dn-br-se, var(--_ctm-tab-sec-dn-br-se, var(--_ctm-sec-dn-br-se)))
-        );
-        border-width: var(
-          --_hide-section-border,
-          var(--_ctm-mob-sec-dn-br-wh, var(--_ctm-tab-sec-dn-br-wh, var(--_ctm-sec-dn-br-wh)))
-        );
-        border-radius: var(
-          --_ctm-mob-sec-dn-br-rs,
-          var(--_ctm-tab-sec-dn-br-rs, var(--_ctm-sec-dn-br-rs))
-        );
+        border-color: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-cr));
+        border-style: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-se));
+        border-width: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-wh));
+        border-radius: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-rs));
       }
       &[data-div-type="cms-section-wrapper"] {
         // max-width: var(--_sf-wp-mx-wt);
-        max-width: var(--_ctm-mob-sec-lt-wh, var(--_ctm-tab-sec-lt-wh, var(--_ctm-sec-lt-wh)));
+        max-width: prepareMediaVariable(--_ctm-sec-lt-wh);
         margin-inline: auto;
         position: var(--_p-relative);
         width: 100%;
         // padding-inline: 10px;
         // padding-block: 10px;
-        padding: var(--_ctm-mob-sec-lt-pg, var(--_ctm-tab-sec-lt-pg, var(--_ctm-sec-lt-pg)));
-        column-gap: var(
-          --_ctm-mob-sec-lt-cn-gp,
-          var(--_ctm-tab-sec-lt-cn-gp, var(--_ctm-sec-lt-cn-gp))
-        );
-        row-gap: var(
-          --_ctm-mob-sec-lt-rw-gp,
-          var(--_ctm-tab-sec-lt-rw-gp, var(--_ctm-sec-lt-rw-gp))
-        );
+        padding: prepareMediaVariable(--_ctm-sec-lt-pg);
+        column-gap: prepareMediaVariable(--_ctm-sec-lt-cn-gp);
+        row-gap: prepareMediaVariable(--_ctm-sec-lt-rw-gp);
       }
     }
   }
@@ -150,6 +106,11 @@ div[data-div-type="element"] {
   position: var(--_p-relative);
   & > .wrapper {
     grid-area: 1/1/2/2 !important;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
   }
   &[data-view-state="full"] {
     width: auto;
@@ -177,33 +138,23 @@ div[data-div-type="element"] {
     &:is([data-element-type="stack"]) {
       width: max(
         0.5px,
-        calc(
-            var(
-                --_ctm-mob-sta-ele-nw-wh-vl,
-                var(--_ctm-tab-sta-ele-nw-wh-vl, var(--_ctm-sta-ele-nw-wh-vl))
-              ) / 100
-          ) * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+        calc(#{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)} / 100) *
+          (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
       );
     }
     &:is([data-element-type="container"]) {
       width: max(
         0.5px,
-        calc(
-            var(
-                --_ctm-mob-con-ele-nw-wh-vl,
-                var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl))
-              ) / 100
-          ) * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+        calc(#{prepareMediaVariable(--_ctm-con-ele-nw-wh-vl)} / 100) *
+          (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
       );
     }
 
     &:not([data-element-type="container"], [data-element-type="stack"]) {
       width: max(
         0.5px,
-        calc(
-            var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl))) /
-              100
-          ) * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+        calc(#{prepareMediaVariable(--_ctm-ele-nw-wh-vl)} / 100) *
+          (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
       );
     }
   }

package/dist/stack.scss

@@ -35,52 +35,19 @@ body {
     // min-height: var(--_ctm-sta-lt-ht, 100px) !important;
     min-width: 100px;
     min-height: 100px;
-    margin: var(
-      --_ctm-mob-sta-lt-mn,
-      var(--_ctm-tab-sta-lt-mn, var(--_ctm-sta-lt-mn, var(--_ctm-lt-mn)))
-    );
+    margin: prepareMediaVariable(--_ctm-sta-lt-mn);
     // display: var(--_d-grid);
-    background-color: var(
-      --_ctm-mob-sta-dn-bd-cr,
-      var(--_ctm-tab-sta-dn-bd-cr, var(--_ctm-sta-dn-bd-cr))
-    );
-    background-image: var(
-      --_ctm-mob-sta-dn-bd-ie,
-      var(--_ctm-tab-sta-dn-bd-ie, var(--_ctm-sta-dn-bd-ie))
-    );
-    background-attachment: var(
-      --_ctm-mob-sta-dn-bd-at,
-      var(--_ctm-tab-sta-dn-bd-at, var(--_ctm-sta-dn-bd-at))
-    );
-    background-position: var(
-      --_ctm-mob-sta-dn-bd-pn,
-      var(--_ctm-tab-sta-dn-bd-pn, var(--_ctm-sta-dn-bd-pn))
-    );
-    background-repeat: var(
-      --_ctm-mob-sta-dn-bd-rt,
-      var(--_ctm-tab-sta-dn-bd-rt, var(--_ctm-sta-dn-bd-rt))
-    );
-    background-size: var(
-      --_ctm-mob-sta-dn-bd-se,
-      var(--_ctm-tab-sta-dn-bd-se, var(--_ctm-sta-dn-bd-se))
-    );
+    background-color: prepareMediaVariable(--_ctm-sta-dn-bd-cr);
+    background-image: prepareMediaVariable(--_ctm-sta-dn-bd-ie);
+    background-attachment: prepareMediaVariable(--_ctm-sta-dn-bd-at);
+    background-position: prepareMediaVariable(--_ctm-sta-dn-bd-pn);
+    background-repeat: prepareMediaVariable(--_ctm-sta-dn-bd-rt);
+    background-size: prepareMediaVariable(--_ctm-sta-dn-bd-se);
 
-    border-color: var(
-      --_hide-grid-border,
-      var(--_ctm-mob-sta-dn-br-cr, var(--_ctm-tab-sta-dn-br-cr, var(--_ctm-sta-dn-br-cr)))
-    );
-    border-style: var(
-      --_hide-grid-border,
-      var(--_ctm-mob-sta-dn-br-se, var(--_ctm-tab-sta-dn-br-se, var(--_ctm-sta-dn-br-se)))
-    );
-    border-width: var(
-      --_hide-grid-border,
-      var(--_ctm-mob-sta-dn-br-wh, var(--_ctm-tab-sta-dn-br-wh, var(--_ctm-sta-dn-br-wh)))
-    );
-    border-radius: var(
-      --_ctm-mob-sta-dn-br-rs,
-      var(--_ctm-tab-sta-dn-br-rs, var(--_ctm-sta-dn-br-rs))
-    );
+    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));
+    border-radius: prepareMediaVariable(--_ctm-sta-dn-br-rs);
     grid-template-columns: 100%;
 
     // &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
@@ -90,13 +57,7 @@ body {
     &.vtl {
       // width: var(--_sf-sta-nw-wh, auto);
       min-height: 30px;
-      width: calc(
-        1% *
-          var(
-            --_ctm-mob-sta-ele-nw-wh-vl,
-            var(--_ctm-tab-sta-ele-nw-wh-vl, var(--_ctm-sta-ele-nw-wh-vl))
-          )
-      );
+      width: calc(1% * #{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)});
       min-width: 100px;
       & > .wrapper {
         flex-direction: column;
@@ -104,10 +65,7 @@ body {
         height: 100%;
         // justify-content: var(--_ctm-sta-lt-jy-ct);
         // align-items: var(--_ctm-sta-lt-an-is);
-        align-items: var(
-          --_ctm-mob-sta-lt-jy-ct,
-          var(--_ctm-tab-sta-lt-jy-ct, var(--_ctm-sta-lt-jy-ct))
-        );
+        align-items: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
       }
     }
     &.hrz {
@@ -129,19 +87,16 @@ body {
         height: 100%;
         flex-direction: row;
         // justify-content: var(--_ctm-sta-lt-an-is);
-        align-items: var(
-          --_ctm-mob-sta-lt-an-is,
-          var(--_ctm-tab-sta-lt-an-is, var(--_ctm-sta-lt-an-is))
-        );
+        align-items: prepareMediaVariable(--_ctm-sta-lt-an-is);
       }
     }
 
     & > div {
       &.wrapper {
         // width: 100%;
-        padding: var(--_ctm-mob-sta-lt-pg, var(--_ctm-tab-sta-lt-pg, var(--_ctm-sta-lt-pg)));
+        padding: prepareMediaVariable(--_ctm-sta-lt-pg);
         display: var(--_d-flex);
-        gap: var(--_ctm-mob-sta-lt-im-gp, var(--_ctm-tab-sta-lt-im-gp, var(--_ctm-sta-lt-im-gp)));
+        gap: prepareMediaVariable(--_ctm-sta-lt-im-gp);
 
         // border-color: var(
         //   --_hide-grid-border,