@sc-360-v2/storefront-cms-library 0.3.71 → 0.3.73

package/dist/cart-details.scss

@@ -159,9 +159,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               //   --_ctm-mob-dn-ct-an-ss-cr,
               //   var(--_ctm-tab-dn-ct-an-ss-cr, var(--_ctm-dn-ct-an-ss-cr))
               // );
-
               color: var(--_thm-cs-tt-ls-as);
-
               font-size: var(
                 --_ctm-mob-dn-ct-an-ss-ft-se,
                 var(--_ctm-tab-dn-ct-an-ss-ft-se, var(--_ctm-dn-ct-an-ss-ft-se))

package/dist/cart-products-sidebar.scss

@@ -28,7 +28,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
   width: 125px;
   max-width: 100%;
   height: 100vh;
-  background: $background-color;
+  background: var(--_base-white);
   box-shadow: $shadow;
   z-index: 1001;
   display: flex;
@@ -162,7 +162,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     }
     .item_action_btn {
       padding: 8px;
-      color: var(--_primary-400);
+      color: #243dc6;
       // margin-top: 4px;
       border-radius: 4px;
       font-size: 14px;
@@ -171,7 +171,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
 
       &:hover {
         background-color: var(--_primary-50);
-        color: var(--_primary-500);
+        color: #243dc6;
       }
     }
   }
@@ -207,7 +207,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
 
     &:hover {
       // background: darken($primary-color, 5%);
-      background: color-mix(in srgb, #{$primary-color} 95%, transparent 5%);
+      background: color-mix(in srgb, #243dc6 95%, transparent 5%);
     }
   }
 }
@@ -233,7 +233,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
 
   .view_cart_btn {
     padding: 10px 15px;
-    background-color: var(--_primary-400);
+    background-color: #243dc6;
     color: var(--_base-white);
     border: none;
     border-radius: 4px;
@@ -241,7 +241,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     margin-bottom: 12px;
 
     &:hover {
-      background-color: var(--_primary-500);
+      background-color: #2237ac;
     }
   }
 }

package/dist/cartAttributes.scss

@@ -502,10 +502,11 @@
                     --_ctm-mob-dn-as-cr-us-ft-fy,
                     var(--_ctm-tab-dn-as-cr-us-ft-fy, var(--_ctm-dn-as-cr-us-ft-fy))
                   );
-                  color: var(
-                    --_ctm-mob-dn-as-cr-us-cr,
-                    var(--_ctm-tab-dn-as-cr-us-cr, var(--_ctm-dn-as-cr-us-cr))
-                  );
+                  // color: var(
+                  //   --_ctm-mob-dn-as-cr-us-cr,
+                  //   var(--_ctm-tab-dn-as-cr-us-cr, var(--_ctm-dn-as-cr-us-cr))
+                  // );
+                  color: var(--_thm-cs-tt-ls-as);
                   font-weight: var(
                     --_ctm-mob-dn-as-cr-us-ft-wt,
                     var(--_ctm-tab-dn-as-cr-us-ft-wt, var(--_ctm-dn-as-cr-us-ft-wt))
@@ -681,7 +682,9 @@
     }
   }
   .input_toggle_switch_text {
-    gap: 2px;
+    gap: 4px;
+    display: flex;
+    flex-direction: column;
     .checkbox_title {
       font-family: var(
         --_ctm-mob-dn-as-cr-as-bs-ft-fy,

package/dist/category-groups-element.scss

@@ -2,6 +2,8 @@
 @use "sass:list";
 @use "./functions.scss" as *;
 $activeElementSelector: "[data-has-clicked='true']";
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
 [data-div-type="element"] {
   &[data-element-type="categoryGroups"] {
     // width: var(--_sf-catego-nw-wh);
@@ -111,6 +113,12 @@ $activeElementSelector: "[data-has-clicked='true']";
       }
     }
 
+    .loading_view {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
     // &[data-view-state="full"] {
     //   width: auto;
     //   margin: 0;

package/dist/flex-text-editor.scss

@@ -0,0 +1,267 @@
+@use "sass:map";
+@use "sass:list";
+
+$editorMain: ".flex__text__editor__main";
+$editorWrapper: ".flx__txt__edt__wrapper";
+$editor: '[contenteditable="true"]';
+$suggestionsMain: ".flex__suggestions__box";
+$textElement: '[data-element-type="text"]';
+$dataBodyShowFalse: '[data-body-show="false"]';
+$titleDiv: ".ttl__dv";
+$bodyDiv: ".bd__dv";
+$macroDiv: ".mcr__dv";
+$macroChip: ".macro__chip__v2";
+$previewMode: '[data-text-type="preview-mode"]';
+$dataDecoded: '[data-decoded="true"]';
+$editorIframe: '[data-iframe-body="true"]';
+$width: 225px;
+$height: 300px;
+
+#{$textElement} {
+  #{$editorMain} {
+    position: var(--_p-relative);
+
+    #{$editor} {
+      word-wrap: break-word;
+    }
+    #{$suggestionsMain} {
+      position: var(--_p-fixed);
+      left: var(--_sf-lt-vl-sg);
+      top: var(--_sf-tp-vl-sg);
+      z-index: calc(var(--_higher-zIndex) + var(--_it-gl-zIndex) + 1);
+      border: 1px solid var(--_gray-200);
+      background: var(--_base-white);
+      box-shadow: 0px 1px 6px -2px var(--_gray-300);
+      border-radius: 6px;
+      width: $width;
+      max-height: var(--_sf-ht-vl-sg, $height);
+      overflow-y: auto;
+      transform: translateY(8px);
+
+      & > ul {
+        display: var(--_d-flex);
+        flex-direction: column;
+        width: 100%;
+
+        & > li {
+          display: var(--_d-flex);
+          flex-direction: column;
+          width: 100%;
+
+          &#{$dataBodyShowFalse} {
+            --_sf-db-bd-dp: var(--_d-none);
+            --_sf-sv-ic-rt: -90deg;
+          }
+
+          & > div {
+            &#{$titleDiv} {
+              padding: 8px 12px 8px 12px;
+              display: var(--_d-flex);
+              justify-content: space-between;
+              background-color: var(--_gray-50);
+              cursor: pointer;
+              border-bottom: 1px solid var(--_gray-200);
+              gap: 10px;
+
+              & > .left {
+                display: var(--_d-flex);
+                align-items: center;
+                gap: 4px;
+
+                & > span {
+                  display: var(--_d-flex);
+                  align-content: center;
+
+                  &:nth-of-type(2) {
+                    font-weight: 600;
+                    font-size: 12px;
+                    color: var(--_gray-600);
+                  }
+                  &:nth-of-type(1) {
+                    svg {
+                      width: 10px;
+                      height: 10px;
+                    }
+                  }
+                }
+              }
+
+              & > span {
+                display: var(--_d-flex);
+                align-items: center;
+                transition: transform 0.45s ease;
+                transform: rotate(var(--_sf-sv-ic-rt, 0deg));
+
+                svg {
+                  width: 10px;
+                  height: 10px;
+                }
+              }
+            }
+
+            &#{$bodyDiv} {
+              display: var(--_sf-db-bd-dp, var(--_d-flex));
+              transition: display 0.45s ease;
+              flex-wrap: wrap;
+              gap: 8px;
+              padding: 12px;
+
+              & > div {
+                &#{$macroDiv} {
+                  margin: 1px;
+                  background-color: var(--_sf-hr-cr, var(--_gray-100));
+                  border-radius: 6px;
+                  padding: 6px 10px;
+                  color: var(--_gray-600);
+                  font-size: 14px;
+                  font-weight: 500;
+                  max-width: 150px;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  transition: all 0.2s ease-in-out;
+                  cursor: pointer;
+
+                  &:hover {
+                    --_sf-hr-cr: var(--_primary-50);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+#{$macroChip}:is(#{$editorIframe} *) {
+  @extend .macro_styles;
+}
+
+#{$macroChip}:not(#{$dataDecoded}) {
+  &:is(#{$previewMode} *) {
+    @extend .macro_styles;
+    position: var(--_p-relative);
+    width: 62px;
+    display: var(--_d-inline-flex);
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    overflow: clip;
+
+    & > span {
+      display: var(--_d-none);
+    }
+    &::before {
+      font-size: 12px !important;
+      color: var(--_primary-400) !important;
+      content: "Loading";
+    }
+
+    &::after {
+      content: "";
+      // width: 6px;
+      // height: 6px;
+      // border: 1px solid var(--_primary-400);
+      // border-top-color: var(--_primary-100);
+      // border-radius: 50%;
+      // animation: spin 2s linear infinite;
+
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.6) 50%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      position: var(--_p-absolute);
+      animation: skeleton-shimmer 1.5s infinite cubic-bezier(0.02, 0.02, 1, 1.01);
+    }
+
+    @keyframes skeleton-shimmer {
+      0% {
+        transform: translateX(-100%);
+      }
+      100% {
+        transform: translateX(100%);
+      }
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}
+.macro_styles {
+  background: var(--_primary-50);
+  border-radius: 4px;
+  display: inline-flex;
+  padding-inline: 2px;
+  & > span {
+    color: var(--_primary-400) !important;
+    font-weight: 600 !important;
+    font-size: 12px !important;
+    line-height: 1.4 !important;
+  }
+}
+
+// Popup
+.custom__attribute__popup__v2 {
+  background: var(--_base-white);
+  padding: 8px;
+  border-radius: 4px;
+  width: 200px;
+  box-shadow: var(--_shadow-x3);
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+  // transform: translate(50%, 50px);
+
+  & > div {
+    &.body__div {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+
+      & > p {
+        font-size: 12px;
+        font-weight: 600;
+        word-break: break-all;
+        color: var(--_gray-900);
+      }
+
+      & > input {
+        border: 1px solid var(--_gray-200);
+        padding: 2px 4px;
+        border-radius: 4px;
+        font-size: 12px;
+        max-width: 100%;
+        width: 100%;
+      }
+    }
+
+    &.footer__div {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      & > button {
+        display: flex;
+        padding: 4px 8px;
+        font-size: 14px;
+        line-height: 1.4;
+        font-weight: 400;
+        border-radius: 4px;
+
+        &[data-type="submit"] {
+          background: var(--_primary-500);
+          color: #fff;
+        }
+      }
+    }
+  }
+}

package/dist/mega-menu.scss

@@ -7,6 +7,7 @@ $mgc: '[data-element-type="mgContainer"]';
 $smp: '[data-element-type="simple-list"]';
 $wrapper: ".flex__menu__list__wrapper";
 $menuItem: ".flex__menu__item";
+$activeMg: '[data-show-mg="true"]';
 // $subMenuContainer: ".flex__submenu__container";
 // $subMenuItem: ".flex__sub__menu__item";
 // $subMenuItemText: ".flex__sub__menu__item__text";
@@ -407,6 +408,12 @@ $defaultValues: (
                       top: var(--_sf-mg-dm-ps-vl, 0px);
                     }
                   }
+
+                  display: var(--_sf-bm-es-at-dp-vl, var(--_d-none)) !important;
+
+                  &:is(#{$activeMg} > *) {
+                    --_sf-bm-es-at-dp-vl: var(--_d-grid) !important;
+                  }
                 }
 
                 // Sub Item Container

package/dist/my-wishlist.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="myWishlist"] {
+    width: 100% !important;
+
+    & > .wrapper {
+      .template_wrapper {
+        width: 100%;
+      }
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+  }
+}