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

package/dist/item-stock.scss

@@ -1,5 +1,8 @@
 @use "sass:map";
 @use "sass:list";
+@function ctm-var($base) {
+  @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
+}
 
 [data-div-type="element"] {
   &[data-element-type="itemStock"] {
@@ -34,82 +37,41 @@
       .item__stock__heading {
         position: relative;
         .item__stock__text {
-          color: var(
-            --_ctm-mob-dn-im-sk-tt-cr,
-            var(--_ctm-tab-dn-im-sk-tt-cr, var(--_ctm-dn-im-sk-tt-cr))
-          );
-          font-family: var(
-              --_ctm-mob-dn-im-sk-tt-ft-fy,
-              var(--_ctm-tab-dn-im-sk-tt-ft-fy, var(--_ctm-dn-im-sk-tt-ft-fy))
-            ),
-            sans-serif;
-          font-size: var(
-            --_ctm-mob-dn-im-sk-tt-ft-se,
-            var(--_ctm-tab-dn-im-sk-tt-ft-se, var(--_ctm-dn-im-sk-tt-ft-se))
-          );
-          font-weight: var(
-            --_ctm-mob-dn-im-sk-tt-ft-wt,
-            var(--_ctm-tab-dn-im-sk-tt-ft-wt, var(--_ctm-dn-im-sk-tt-ft-wt))
-          );
-          font-style: var(
-            --_ctm-mob-dn-im-sk-tt-ft-se-ic,
-            var(--_ctm-tab-dn-im-sk-tt-ft-se-ic, var(--_ctm-dn-im-sk-tt-ft-se-ic))
-          );
-          text-align: var(
-            --_ctm-mob-dn-im-sk-tt-tt-an,
-            var(--_ctm-tab-dn-im-sk-tt-tt-an, var(--_ctm-dn-im-sk-tt-tt-an))
-          );
-          letter-spacing: var(
-            --_ctm-mob-dn-im-sk-tt-lr-sg,
-            var(--_ctm-tab-dn-im-sk-tt-lr-sg, var(--_ctm-dn-im-sk-tt-lr-sg))
-          );
-          line-height: var(
-            --_ctm-mob-dn-im-sk-tt-le-ht,
-            var(--_ctm-tab-dn-im-sk-tt-le-ht, var(--_ctm-dn-im-sk-tt-le-ht))
-          );
-          text-decoration: var(
-            --_ctm-mob-dn-im-sk-tt-ue,
-            var(--_ctm-tab-dn-im-sk-tt-ue, var(--_ctm-dn-im-sk-tt-ue))
-          );
-          background-color: var(
-            --_ctm-mob-dn-im-sk-tt-bd-cr,
-            var(--_ctm-tab-dn-im-sk-tt-bd-cr, var(--_ctm-dn-im-sk-tt-bd-cr))
-          );
-          border-color: var(
-            --_ctm-mob-dn-im-sk-tt-br-cr,
-            var(--_ctm-tab-dn-im-sk-tt-br-cr, var(--_ctm-dn-im-sk-tt-br-cr))
-          );
-          border-style: var(
-            --_ctm-mob-dn-im-sk-tt-br-se,
-            var(--_ctm-tab-dn-im-sk-tt-br-se, var(--_ctm-dn-im-sk-tt-br-se))
-          );
-          border-width: var(
-            --_ctm-mob-dn-im-sk-tt-br-wh,
-            var(--_ctm-tab-dn-im-sk-tt-br-wh, var(--_ctm-dn-im-sk-tt-br-wh))
-          );
-          border-radius: var(
-            --_ctm-mob-dn-im-sk-tt-br-rs,
-            var(--_ctm-tab-dn-im-sk-tt-br-rs, var(--_ctm-dn-im-sk-tt-br-rs))
-          );
-          box-shadow: var(
-            --_show-text-content-shadow,
-            var(
-                --_ctm-mob-dn-im-sk-tt-sw-ae,
-                var(--_ctm-tab-dn-im-sk-tt-sw-ae, var(--_ctm-dn-im-sk-tt-sw-ae))
-              )
-              var(
-                --_ctm-mob-dn-im-sk-tt-sw-br,
-                var(--_ctm-tab-dn-im-sk-tt-sw-br, var(--_ctm-dn-im-sk-tt-sw-br))
-              )
-              var(
-                --_ctm-mob-dn-im-sk-tt-sw-sd,
-                var(--_ctm-tab-dn-im-sk-tt-sw-sd, var(--_ctm-dn-im-sk-tt-sw-sd))
-              )
-              var(
-                --_ctm-mob-dn-im-sk-tt-sw-cr,
-                var(--_ctm-tab-dn-im-sk-tt-sw-cr, var(--_ctm-dn-im-sk-tt-sw-cr))
-              )
-          );
+          font-family: ctm-var(dn-im-sk-tt-ft-fy);
+          font-size: ctm-var(dn-im-sk-tt-ft-se);
+          color: ctm-var(dn-im-sk-tt-cr);
+          font-weight: ctm-var(dn-im-sk-tt-ft-wt);
+          font-style: ctm-var(dn-im-sk-tt-ft-se-ic);
+          text-decoration: ctm-var(dn-im-sk-tt-ue);
+          text-align: ctm-var(dn-im-sk-tt-tt-an);
+          letter-spacing: ctm-var(dn-im-sk-tt-lr-sg);
+          line-height: ctm-var(dn-im-sk-tt-le-ht);
+        }
+        .stock_message_conatainer {
+          display: flex;
+          padding: 2px 8px 2px 6px;
+          align-items: center;
+          gap: 4px;
+          mix-blend-mode: multiply;
+          background-color: ctm-var(dn-im-sk-tt-bd-cr);
+          border-width: ctm-var(dn-im-sk-tt-br-wh);
+          border-color: ctm-var(dn-im-sk-tt-br-cr);
+          border-style: ctm-var(dn-im-sk-tt-br-se);
+          border-radius: ctm-var(dn-im-sk-tt-br-rs);
+          box-shadow: ctm-var(dn-im-sk-tt-sw-ae) ctm-var(dn-im-sk-tt-sw-br)
+            ctm-var(dn-im-sk-tt-sw-sd) ctm-var(dn-im-sk-tt-sw-cr);
+
+          .stock_messages {
+            font-family: ctm-var(dn-im-sk-tt-ft-fy);
+            font-size: ctm-var(dn-im-sk-tt-ft-se);
+            color: ctm-var(dn-im-sk-tt-cr);
+            font-weight: ctm-var(dn-im-sk-tt-ft-wt);
+            font-style: ctm-var(dn-im-sk-tt-ft-se-ic);
+            text-decoration: ctm-var(dn-im-sk-tt-ue);
+            text-align: ctm-var(dn-im-sk-tt-tt-an);
+            letter-spacing: ctm-var(dn-im-sk-tt-lr-sg);
+            line-height: ctm-var(dn-im-sk-tt-le-ht);
+          }
         }
       }
     }

package/dist/map.scss

@@ -3,7 +3,7 @@
 
 $tpgp: 20px;
 $bm: 30px;
-$ics: 2px;
+$ics: -1px;
 
 $data: (
   leftTop: (
@@ -90,7 +90,7 @@ $data: (
     ),
   ),
   bottomLeft: (
-    transform: translate(calc(-100% + #{$bm}), calc(-50% + (#{$bm} * 2.70))),
+    transform: translate(calc(-100% + #{$bm}), calc(-50% + (#{$bm} * 2.7))),
     border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     icon: (
       right: #{$bm},
@@ -100,7 +100,7 @@ $data: (
     ),
   ),
   bottomCenter: (
-    transform: translate(calc(-50% - #{$ics}), calc(-50% + (#{$bm} * 2.70))),
+    transform: translate(calc(-50% - #{$ics}), calc(-50% + (#{$bm} * 2.7))),
     border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     icon: (
       right: 50%,
@@ -110,7 +110,7 @@ $data: (
     ),
   ),
   bottomRight: (
-    transform: translate(calc(0% - #{$bm}), calc(-50% + (#{$bm} * 2.70))),
+    transform: translate(calc(0% - #{$bm}), calc(-50% + (#{$bm} * 2.7))),
     border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     icon: (
       left: 30px,
@@ -174,7 +174,7 @@ $data: (
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
-&[data-hotspot-position="topLeft"] {
+    &[data-hotspot-position="topLeft"] {
       --_show-shadow: none;
       .hotspot__tooltip {
         border-style: var(--_ctm-dn-tp-dn-br-se);
@@ -491,37 +491,37 @@ $data: (
       }
       .hotspot__container {
         position: absolute;
-        top:43%;
-        left:12%;
-      .hotspot__main {
-        position: relative;
-        .hotspot {
-          background: var(--_ctm-dn-ht-se-bd-cr);
-          // height: var(--_ctm-dn-tp-tt-dn-ft-se);
-          // width: var(--_ctm-dn-tp-tt-dn-ft-se);
-          position: absolute;
-          cursor: pointer;
-          width: var(--_ctm-dn-ht-se-ht-se);
-          height: var(--_ctm-dn-ht-se-ht-se);
-          background-color: var(--_ctm-dn-ht-se-bd-cr);
-          display: flex;
-          align-items: center;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          box-sizing: border-box;
-          justify-content: center;
-          animation: scaleInOut var(--_ctm-dn-ht-se-an-fy) infinite;
-          &[data-hotspot-shape="circle"] {
-            border-radius: 50%;
-          }
-          &[data-hotspot-shape="any"] {
-            border-radius: var(--_ctm-dn-ht-se-br-rs);
+        top: 43%;
+        left: 12%;
+        .hotspot__main {
+          position: relative;
+          .hotspot {
+            background: var(--_ctm-dn-ht-se-bd-cr);
+            // height: var(--_ctm-dn-tp-tt-dn-ft-se);
+            // width: var(--_ctm-dn-tp-tt-dn-ft-se);
+            position: absolute;
+            cursor: pointer;
+            width: var(--_ctm-dn-ht-se-ht-se);
+            height: var(--_ctm-dn-ht-se-ht-se);
+            background-color: var(--_ctm-dn-ht-se-bd-cr);
+            display: flex;
+            align-items: center;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            box-sizing: border-box;
+            justify-content: center;
+            animation: scaleInOut var(--_ctm-dn-ht-se-an-fy) infinite;
+            &[data-hotspot-shape="circle"] {
+              border-radius: 50%;
+            }
+            &[data-hotspot-shape="any"] {
+              border-radius: var(--_ctm-dn-ht-se-br-rs);
+            }
           }
         }
       }
-    }
-    .hotspot__tooltip {
+      .hotspot__tooltip {
         --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
         position: absolute;
         background: var(--_ctm-dn-tp-dn-bd-cr);
@@ -530,8 +530,8 @@ $data: (
         width: var(--_ctm-dn-tp-dn-tp-wh);
         min-height: 100px;
         height: var(--_ctm-dn-tp-dn-tp-ht);
-        top:43%;
-        left:12%;
+        top: 43%;
+        left: 12%;
         // top: var(--_sf-im-psn-tp, 0);
         // left: var(--_sf-im-psn-lt, 0);
 

package/dist/menu-item.scss

@@ -0,0 +1,19 @@
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+$activeElementSelector: "[data-has-clicked='true']";
+
+[data-div-type="element"] {
+  &[data-element-type="menu-item"] {
+    width: calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl)});
+    //   var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
+    margin: prepareMediaVariable(--_ctm-lt-mn);
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+        padding: prepareMediaVariablevar(--_ctm-lt-pg);
+      }
+    }
+  }
+}

package/dist/modal.scss

@@ -1,3 +1,4 @@
+//modalv1
 // Variables
 $modal_background_color: white;
 $backdrop_color: rgba(0, 0, 0, 0.2);
@@ -144,3 +145,330 @@ $active_btn_text_color: #fff;
     }
   }
 }
+
+//modalv2 css
+// 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;
+
+// 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);
+
+.modalV2-main {
+  .modalV2-wrapper {
+    position: fixed;
+    left: 50%;
+    transition:
+      all 0.4s ease-in-out,
+      transform 0.4s ease-in-out;
+    background: $white;
+    border-radius: $radius-lg;
+    padding: 0px 20px;
+    width: 850px;
+    font-family: $font-base;
+    box-shadow: $shadow-md;
+    z-index: $z-index-wrapper;
+    max-height: 70vh;
+    overflow: scroll;
+    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%);
+      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: 15px 0;
+      }
+    }
+
+    &.center {
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &.bottom {
+      bottom: 5%;
+      transform: translate(-50%, 0%);
+    }
+
+    .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;
+        padding: 15px 0px;
+
+        .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;
+          }
+        }
+      }
+    }
+
+    .footer-bar {
+      position: sticky;
+      bottom: 0;
+      display: flex;
+      justify-content: space-between;
+      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;
+        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;
+          }
+        }
+      }
+    }
+  }
+
+  .modalV2-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: $z-index-backdrop;
+  }
+
+  .modalV2-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;
+    }
+
+    .cart-btn {
+      background: $primary;
+      color: $white;
+      border: none; /* Remove border */
+      border-radius: 0 $radius $radius 0; /* Rounded right corners */
+      padding: 12px 16px;
+      font-weight: 600;
+      font-size: $font-size-sm;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      cursor: pointer;
+      transition: background 0.2s;
+      z-index: $z-index-min-cart;
+
+      &: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;
+        }
+      }
+    }
+  }
+}