@sc-360-v2/storefront-cms-library 0.3.38 → 0.3.40

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/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);
       }
@@ -227,6 +226,8 @@ $z-index-min-cart: calc(
 $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
 
 .modalV2-main {
+  position: fixed;
+  z-index: 30;
   .modalV2-wrapper {
     overflow: hidden !important;
     position: fixed;
@@ -249,6 +250,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 +258,63 @@ $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);
+          &.disabled {
+            opacity: 0.5;
+            pointer-events: none;
+          }
+          .loader {
+            animation: rotate-icon 1s linear infinite;
+            display: inline-block;
+            transform-origin: center;
+
+            svg path {
+              stroke: var(--_primary-200);
+            }
+          }
+
+          &:hover {
+            background-color: var(--_primary-500);
+          }
+        }
+        .discard-btn {
+          &:hover {
+            background-color: var(--_gray-50);
+            color: var(--_gray-900);
           }
         }
       }
@@ -302,7 +336,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 +380,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 +447,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 +471,6 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
             height: 20px !important;
           }
         }
-
-       
       }
 
       .input-group {
@@ -597,9 +642,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 +657,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;
           }
         }
 
@@ -642,3 +686,12 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
     }
   }
 }
+
+@keyframes rotate-icon {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}