@sc-360-v2/storefront-cms-library 0.3.62 → 0.3.64

package/dist/menu-v2.scss

@@ -13,6 +13,19 @@ $vtl: "[data-element-type='menu-v2'] > .vtl";
 $hamburger: ".flex__menu__hamburger";
 $hamburgerActive: "[data-hamburger-active='true']";
 
+$wrapperData: (
+  start: (
+    left: prepareMediaVariable(--_ctm-meg-dn-hr-os-cr-ot-x, 0px),
+  ),
+  end: (
+    right: prepareMediaVariable(--_ctm-meg-dn-hr-os-cr-ot-x, 0px),
+  ),
+  center: (
+    left: calc(50% + #{prepareMediaVariable(--_ctm-meg-dn-hr-os-cr-ot-x, 0px)}),
+    transform: translateX(-50%),
+  ),
+);
+
 $defaultValues: (
   --_min-submenu-height: getListOfResponsive(650px, 400px, 550px),
 );
@@ -24,9 +37,10 @@ $defaultValues: (
   & > div {
     &#{$wrapper} {
       position: absolute;
-      left: 0;
-      width: 100%;
-      top: calc(100% + var(--_ctm-dn-hr-os-cr-ot-y, 0px));
+      // left: var(--_sf-hm-mc-lt-vl-v2, 0px);
+      // width: 100%;
+      // width: 100vw;
+      top: calc(100% + prepareMediaVariable(--_ctm-dn-hr-os-cr-ot-y, 0px));
       z-index: 2;
       visibility: hidden;
       opacity: 0;
@@ -36,17 +50,27 @@ $defaultValues: (
       flex-direction: column;
       gap: prepareMediaVariable(--_ctm-lt-im-gp);
 
+      @each $key, $val in $wrapperData {
+        &[data-position="#{$key}"] {
+          @each $k, $v in $val {
+            #{$k}: #{$v};
+          }
+        }
+      }
+
       &:is([data-hamburger-active="true"] > *) {
         // animation: animThree var(--_transition-duration) var(--_transition-timing-function) 1
         //   forwards alternate;
         visibility: visible;
         opacity: 1;
+        width: prepareMediaVariable(--_ctm-dn-hr-os-cr-wh, 100%);
         max-height: var(--_min-submenu-height, 650px);
         overflow-y: auto;
       }
 
       & > #{$menuItem} {
         align-items: flex-start;
+        width: 100%;
         flex-direction: column;
         gap: #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-y)};
         & > #{$subMenuContainer} {
@@ -104,6 +128,7 @@ $defaultValues: (
               flex-direction: row;
               gap: prepareMediaVariable(--_ctm-lt-im-gp);
               justify-content: prepareMediaVariable(--_ctm-lt-jy-ct);
+              align-items: center;
 
               & > p {
                 &#{$nodatap} {
@@ -131,12 +156,12 @@ $defaultValues: (
             background: prepareMediaVariable(--_ctm-dn-mu-cr-bd-cr);
             border-radius: prepareMediaVariable(--_ctm-dn-mu-cr-br-rs);
 
-            &[data-show-border="true"] {
+            &:is([data-show-border="true"] > *) {
               border-color: prepareMediaVariable(--_ctm-dn-mu-cr-br-cr);
               border-width: prepareMediaVariable(--_ctm-dn-mu-cr-br-wh);
               border-style: prepareMediaVariable(--_ctm-dn-mu-cr-br-se);
             }
-            &[data-show-boxshadow="true"] {
+            &:is([data-show-boxshadow="true"] > *) {
               box-shadow: prepareMediaVariable(--_ctm-dn-mu-cr-sw-ae)
                 prepareMediaVariable(--_ctm-dn-mu-cr-sw-br)
                 prepareMediaVariable(--_ctm-dn-mu-cr-sw-sd)

package/dist/modal.scss

@@ -60,7 +60,6 @@ $active_btn_text_color: #fff;
     border-radius: $border_radius;
     display: flex;
     flex-direction: column;
-    gap: $gap_between_elements;
     z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
     cursor: auto;
 
@@ -83,6 +82,7 @@ $active_btn_text_color: #fff;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding-bottom: 6px;
 
     h2 {
       font-size: $header_font_size;
@@ -132,25 +132,228 @@ $active_btn_text_color: #fff;
     flex-wrap: wrap;
     bottom: 0;
     width: 100%;
+    margin-top: 24px;
 
     .modal-footer-wrapper {
       display: flex;
       width: 100%;
       gap: 12px;
 
+      .wishlist_btn_wrapper {
+        position: relative;
+        width: 100%;
+        .wishlist_btn {
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: var(--_primary-400);
+          height: 100%;
+          &:hover {
+            text-decoration: underline;
+            color: var(--_primary-500);
+          }
+        }
+        .wishlist_overlay {
+          position: absolute;
+          z-index: 10;
+          top: 44px;
+          left: 41px;
+          min-height: 80px;
+          max-height: 190px;
+          width: 250px;
+          overflow-y: auto;
+          border-radius: 4px;
+          background-color: var(--_base-white);
+          box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.1);
+          border: 1px solid var(--_gray-200);
+
+          .empty_message {
+            height: 200px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 24px;
+            font-size: 16px;
+            font-weight: 500;
+            text-align: center;
+            .dots {
+              display: inline-flex;
+              width: 20px; /* fixed space so text doesn’t shift */
+              justify-content: space-between;
+              align-items: flex-end;
+              margin-left: 6px;
+              margin-bottom: -9px;
+            }
+
+            .dots span {
+              animation: blink 1.5s infinite;
+              opacity: 0;
+              width: 2px;
+              height: 2px;
+              border-radius: 50%;
+              background-color: var(--_gray-700);
+            }
+
+            .dots span:nth-child(1) {
+              animation-delay: 0s;
+            }
+            .dots span:nth-child(2) {
+              animation-delay: 0.3s;
+            }
+            .dots span:nth-child(3) {
+              animation-delay: 0.6s;
+            }
+
+            @keyframes blink {
+              0% {
+                opacity: 0;
+              }
+              50% {
+                opacity: 1;
+              }
+              100% {
+                opacity: 0;
+              }
+            }
+          }
+          .wishlist_overlay_header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px;
+            font-size: 14px;
+            font-weight: 600;
+          }
+          .wishlist_items {
+            display: flex;
+            flex-direction: column;
+
+            .wishlist_item {
+              display: flex;
+              align-items: center;
+              gap: 8px;
+              color: var(--_gray-700);
+              padding: 12px;
+              border-radius: 4px;
+              cursor: pointer;
+              position: relative;
+              margin: 4px;
+              &.active {
+                color: var(--_primary-400);
+              }
+
+              &:not(:last-child) {
+                margin-bottom: 2px;
+              }
+
+              &:hover {
+                background-color: var(--_primary-25);
+                color: var(--_primary-400);
+              }
+
+              input {
+                display: none; // hide default checkbox
+              }
+
+              .custom_checkbox {
+                width: 18px;
+                height: 18px;
+                border: 2px solid var(--_gray-400);
+                border-radius: 4px;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.2s ease-in-out;
+                background-color: #fff;
+
+                &::after {
+                  content: "";
+                  width: 8px;
+                  height: 4px;
+                  border-left: 2px solid #fff;
+                  border-bottom: 2px solid #fff;
+                  transform: rotate(-45deg);
+                  opacity: 0;
+                  transition: opacity 0.2s ease-in-out;
+                  margin-bottom: 4px;
+                }
+              }
+
+              input:checked + .custom_checkbox {
+                background-color: var(--_primary-400);
+                border-color: var(--_primary-400);
+
+                &::after {
+                  opacity: 1; // show tick mark
+                }
+              }
+
+              .label_text {
+                font-size: 14px;
+                font-weight: 500;
+              }
+            }
+          }
+
+          .wishlist_overlay_footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            border-top: 1px solid var(--_gray-200);
+            padding: 8px;
+
+            .btn {
+              padding: 8px 12px;
+              width: 100%;
+              border-radius: 4px;
+              text-align: center;
+              width: 100%;
+              font-weight: 500;
+              text-decoration: none !important;
+              &.primary {
+                background-color: var(--_primary-400);
+                color: var(--_base-white);
+                font-size: 14px;
+              }
+              &.secondary {
+                color: var(--_gray-700);
+                &:hover {
+                  color: var(--_gray-900);
+
+                  background-color: var(--_gray-100);
+                }
+              }
+            }
+          }
+
+          .no_wishlist,
+          .loading_state {
+            min-height: 80px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 14px;
+            font-weight: 700;
+            color: var(--_gray-700);
+          }
+        }
+      }
+
       .modal-footer-white-btn {
         padding: 12px 24px;
         border-radius: 4px;
-        background-color: #fff;
-        color: #243dc6;
-        font-weight: 600;
+        background-color: var(--_base-white);
+        color: var(--_primary-400);
+        font-weight: 500;
         width: 100%;
-        border: 1px solid #fff;
         display: flex;
         justify-content: center;
-
         &:hover {
-          border: 1px solid #243dc6;
+          text-decoration: underline;
         }
       }
 
@@ -231,6 +434,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
   z-index: 9999;
   inset: 0;
   background: rgba(0, 0, 0, 0.4);
+
   .modalV2-wrapper {
     overflow: hidden !important;
     position: fixed;
@@ -899,7 +1103,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
           transition: background 0.2s;
 
           &:hover {
-            background: $gray-300;
+            background: var(--_gray-100);
           }
         }
 
@@ -915,6 +1119,12 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
           gap: 8px;
           cursor: pointer;
           transition: background 0.2s;
+          span {
+            display: flex;
+          }
+          svg path {
+            stroke: var(--_base-white);
+          }
 
           &:hover {
             background: $primary-hover;