@sc-360-v2/storefront-cms-library 0.3.37 → 0.3.39

package/dist/item-stock.scss

@@ -1,8 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@function ctm-var($base) {
-  @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
-}
+@use "./functions.scss" as *;
 
 [data-div-type="element"] {
   &[data-element-type="itemStock"] {
@@ -37,15 +35,15 @@
       .item__stock__heading {
         position: relative;
         .item__stock__text {
-          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);
+          font-family: prepareMediaVariable(dn-im-sk-tt-ft-fy);
+          font-size: prepareMediaVariable(dn-im-sk-tt-ft-se);
+          color: prepareMediaVariable(dn-im-sk-tt-cr);
+          font-weight: prepareMediaVariable(dn-im-sk-tt-ft-wt);
+          font-style: prepareMediaVariable(dn-im-sk-tt-ft-se-ic);
+          text-decoration: prepareMediaVariable(dn-im-sk-tt-ue);
+          text-align: prepareMediaVariable(dn-im-sk-tt-tt-an);
+          letter-spacing: prepareMediaVariable(dn-im-sk-tt-lr-sg);
+          line-height: prepareMediaVariable(dn-im-sk-tt-le-ht);
         }
         .stock_message_conatainer {
           display: flex;
@@ -53,24 +51,25 @@
           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);
+          background-color: prepareMediaVariable(dn-im-sk-tt-bd-cr);
+          border-width: prepareMediaVariable(dn-im-sk-tt-br-wh);
+          border-color: prepareMediaVariable(dn-im-sk-tt-br-cr);
+          border-style: prepareMediaVariable(dn-im-sk-tt-br-se);
+          border-radius: prepareMediaVariable(dn-im-sk-tt-br-rs);
+          box-shadow: prepareMediaVariable(dn-im-sk-tt-sw-ae)
+            prepareMediaVariable(dn-im-sk-tt-sw-br) prepareMediaVariable(dn-im-sk-tt-sw-sd)
+            prepareMediaVariable(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);
+            font-family: prepareMediaVariable(dn-im-sk-tt-ft-fy);
+            font-size: prepareMediaVariable(dn-im-sk-tt-ft-se);
+            color: prepareMediaVariable(dn-im-sk-tt-cr);
+            font-weight: prepareMediaVariable(dn-im-sk-tt-ft-wt);
+            font-style: prepareMediaVariable(dn-im-sk-tt-ft-se-ic);
+            text-decoration: prepareMediaVariable(dn-im-sk-tt-ue);
+            text-align: prepareMediaVariable(dn-im-sk-tt-tt-an);
+            letter-spacing: prepareMediaVariable(dn-im-sk-tt-lr-sg);
+            line-height: prepareMediaVariable(dn-im-sk-tt-le-ht);
           }
         }
       }

package/dist/loader.scss

@@ -35,58 +35,3 @@
     }
   }
 }
-
-
-// fetch data loader
-.fetch-data-loader {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  background-color: var(--_base-white);
-  border-radius: 50%;
-  padding: 16px;
-  width: 60px;
-  height: 60px;
-      border: 1px solid var(--_gray-200);
-      margin: 0 auto;
-}
-
-.line {
-  width: 0%;
-  height: 8px;
-  background-color: var(--_primary-400);
-  border-radius: 4px;
-  animation: expand-line 1.2s ease-in-out infinite;
-}
-
-.line:nth-child(1) {
-  animation-delay: 0s;
-}
-
-.line:nth-child(2) {
-  animation-delay: 0.3s;
-}
-
-.line:nth-child(3) {
-  animation-delay: 0.6s;
-}
-
-.line:nth-child(4) {
-  animation-delay: 0.9s;
-}
-
-@keyframes expand-line {
-  0% {
-    width: 0%;
-    opacity: 0.2;
-  }
-  50% {
-    width: 100%;
-    opacity: 1;
-  }
-  100% {
-    width: 0%;
-    opacity: 0.2;
-  }
-}
-

package/dist/menu-v2.scss

@@ -74,10 +74,10 @@ $defaultValues: (
 
 [data-div-type="element"] {
   &[data-element-type="menu-v2"] {
-    @include prepareMediaQueries($defaultValues);
     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);
+    @include prepareMediaQueries($defaultValues);
+    //   var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
 
     & > div {
       &.wrapper {

package/dist/modal.scss

@@ -109,14 +109,13 @@ $active_btn_text_color: #fff;
       justify-content: center;
       border-radius: 4px;
       span {
-display: flex;
-svg {
-        width: 20px;
-        height: 20px;
-      }
+        display: flex;
+        svg {
+          width: 20px;
+          height: 20px;
+        }
       }
 
-      
       &:hover {
         background-color: var(--_gray-100);
       }
@@ -249,6 +248,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
     .modal-body {
       height: auto;
       display: flex;
+      flex-direction: column;
       width: 100%;
       flex: 1 1 auto;
       overflow-y: auto;
@@ -256,31 +256,50 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       .wishlist-modal {
         display: flex;
         flex-direction: column;
-        padding: 16px;
         width: 100%;
         .wishlist-modal-section {
+          padding: 16px 24px 24px 24px;
           gap: 16px !important;
-          overflow: scroll;
-          padding: 12px !important;
           overflow-x: hidden;
           display: flex;
           flex-direction: column;
+          input[type="text"] {
+            height: 40px;
+            border: 1px solid var(--_gray-300);
+            border-radius: 6px;
+            padding-inline: 16px;
+          }
+        }
+      }
+      .action-buttons {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        justify-content: flex-end;
+        flex: 1 1 auto;
+        padding: 16px 24px;
+        border-top: 1px solid var(--_gray-200);
+        gap: 12px;
+        button {
+          padding: 12px 16px;
+          border-radius: 6px;
         }
-        .action-buttons {
+        .create-btn {
           display: flex;
-          gap: 1rem;
-          align-items: flex-end;
-          justify-content: flex-end;
-          flex: 1 1 auto;
-          padding: 10px 16px;
-          gap: 0px;
-          .create-btn {
-            display: flex;
-            height: 44px;
-            padding: 8px 14px;
-            justify-content: center;
-            align-items: center;
-            gap: 8px;
+          justify-content: center;
+          align-items: center;
+          gap: 8px;
+          background-color: var(--_primary-400);
+          color: var(--_base-white);
+
+          &:hover {
+            background-color: var(--_primary-500);
+          }
+        }
+        .discard-btn {
+          &:hover {
+            background-color: var(--_gray-50);
+            color: var(--_gray-900);
           }
         }
       }
@@ -302,7 +321,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       // max-height: 100vh;
       // max-width: 1200px;
       max-height: calc(100vw - 24px);
-    max-width: calc(100vw - 24px);
+      max-width: calc(100vw - 24px);
 
       .product-list {
         flex: 1;
@@ -346,61 +365,62 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
         padding: 16px;
 
         .left-col {
-          
-           .title {
-          color: var(--_gray-900, #101828);
-          font-size: 16px;
-          font-weight: 700;
-          line-height: 24px;
-          text-transform: capitalize;
-          display: flex;
-          gap: 10px;
-          align-items: center;
-          // font-size: $font-size-lg;
-          // font-weight: 600;
-          // display: flex;
-          // align-items: center;
-          // gap: 6px;
-          // color: var(--_gray-900);
-          // line-height: 24px;
-
-          .modal_heading_icon {
-            width: 36px;
-            height: 36px;
+          .title {
+            color: var(--_gray-900, #101828);
+            font-size: 16px;
+            font-weight: 700;
+            line-height: 24px;
+            text-transform: capitalize;
             display: flex;
+            gap: 10px;
             align-items: center;
-            justify-content: center;
-
-            svg {
-              width: 20px;
-              height: 20px;
+            // font-size: $font-size-lg;
+            // font-weight: 600;
+            // display: flex;
+            // align-items: center;
+            // gap: 6px;
+            // color: var(--_gray-900);
+            // line-height: 24px;
+
+            .modal_heading_icon {
+              width: 36px;
+              height: 36px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              svg {
+                width: 20px;
+                height: 20px;
+              }
             }
-          }
 
-          .count {
-            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;
+            .count {
+              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 {
+        .actions {
           display: flex;
           align-items: center;
           gap: 12px;
+          margin-left: 12px;
           svg {
             width: 16px;
             height: 16px;
+            path {
+              stroke: var(--_gray-600);
+            }
           }
           span {
             width: 32px;
@@ -412,11 +432,23 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
             display: flex;
             align-items: center;
             justify-content: center;
+            &[title="Enter Fullscreen"] {
+              svg {
+                width: 14px;
+                height: 14px;
+                path {
+                  stroke: var(--_gray-500);
+                }
+              }
+            }
 
             &:hover {
               color: var(--_gray-900);
               background-color: var(--_gray-100);
               border-radius: 4px;
+              svg path {
+                stroke: var(--_gray-900);
+              }
             }
           }
           .sc_modal-close svg {
@@ -424,8 +456,6 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
             height: 20px !important;
           }
         }
-
-       
       }
 
       .input-group {
@@ -597,9 +627,8 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
     .actions {
       display: flex;
       gap: 8px;
-      
 
-       span {
+      span {
         cursor: pointer;
         font-size: 16px;
         color: $text-light;
@@ -613,20 +642,20 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
           background-color: var(--_gray-50);
           border-radius: 4px;
           svg path {
-          stroke: var(--_gray-900)
-        }
+            stroke: var(--_gray-900);
+          }
         }
         &[title="Maximize"] {
           svg {
             width: 14px;
-          height: 14px;
+            height: 14px;
           }
         }
 
         &[title="close"] {
           svg {
             width: 20px;
-          height: 20px;
+            height: 20px;
           }
         }
 

package/dist/overflow-module.scss

@@ -12,43 +12,42 @@ $overflow: (
     maxHeight: "data-max-height",
     displayScrollbar: "data-scrollbar",
   ),
-  directions: (
-    vertical: (
-      property: "overflow-y",
-      value: "scroll",
-    ),
-    horizontal: (
-      property: "overflow-x",
-      value: "scroll",
-    ),
-  ),
+);
+
+$overflowValues: (
+  scroll: scroll,
+  hidden: hidden,
+  visible: visible,
+  // auto: auto,
+   // clip: clip,
 );
 
 @mixin FlexOverflowModuleStyles() {
   $cls: map.get($overflow, class);
   $attrs: map.get($overflow, attributes);
-  $dirs: map.get($overflow, directions);
 
   :is(.#{map.get($cls, scrollable)}) {
-    // overflow-x / overflow-y per direction
-    @each $key, $config in $dirs {
-      $prop: map.get($config, property);
-      $val: map.get($config, value);
-      $attr: map.get($attrs, $key);
-
-      &[#{$attr}="#{$val}"] {
-        #{$prop}: #{$val};
+    // Loop through both directions
+    @each $dir in (vertical, horizontal) {
+      $prop: if($dir == vertical, overflow-y, overflow-x);
+      $attr: map.get($attrs, $dir);
+
+      // For each possible overflow value (scroll, auto, hidden, etc.)
+      @each $dataVal, $cssVal in $overflowValues {
+        &[#{$attr}="#{$dataVal}"] {
+          #{$prop}: #{$cssVal};
+        }
       }
     }
 
-    // max-height only when vertical scroll is active
+    // Apply max-height if vertical is scroll and max-height is set
     &[#{map.get($attrs, vertical)}="scroll"] {
       &[#{map.get($attrs, maxHeight)}] {
-        max-height: var(--cms-max-height);
+        max-height: var(--cms-max-height) !important;
       }
     }
 
-    // scrollbar styling only when data-scrollbar=true
+    // Scrollbar styles only if enabled
     &[#{map.get($attrs, displayScrollbar)}="true"] {
       &::-webkit-scrollbar {
         width: var(--cms-scrollbar-width, 8px);