@sc-360-v2/storefront-cms-library 0.2.98 → 0.2.99

package/dist/cartDropdownOverlay.scss

@@ -125,16 +125,3 @@ $button-padding: 6px 12px;
     margin-bottom: 8px;
   }
 }
-
-// .overlay-panel {
-//   background: white;
-//   border: 1px solid #ccc;
-//   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
-//   border-radius: 6px;
-//   padding: 10px;
-//   max-height: 300px;
-//   overflow-y: auto;
-//   transition:
-//     opacity 0.2s ease,
-//     transform 0.2s ease;
-// }

package/dist/faq.scss

@@ -97,14 +97,14 @@
         --_sf-show-icon-ff: none;
       }
       &[data-divider-show="true"] {
-        .accordion-item:not(:last-child) {
-          border-bottom: var(
-              --_ctm-mob-dn-dr-dr-wh,
-              var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
-            )
-            var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
-            var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
-        }
+        // .accordion-item:not(:last-child) {
+        //   border-bottom: var(
+        //       --_ctm-mob-dn-dr-dr-wh,
+        //       var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
+        //     )
+        //     var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
+        //     var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
+        // }
       }
     }
 
@@ -113,12 +113,12 @@
       display: grid;
       overflow: clip;
       // height: 30px;
-      gap: var(
-        --_ctm-mob-lt-te-ad-dn-sg,
-        var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
-      );
 
-      padding-block: var(--_ctm-lt-im-vl-pg, var(--_tst-lt-im-vl-pg));
+      // padding-block: var(--_ctm-lt-im-vl-pg, var(--_tst-lt-im-vl-pg));
+      // padding-inline: var(
+      //   --_ctm-mob-lt-im-hl-pg,
+      //   var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
+      // );
 
       grid-template-rows: var(
         --_self-active-gtr,
@@ -189,15 +189,11 @@
         align-items: center;
         justify-content: var(--_sf-jc, space-between);
         cursor: pointer;
-        padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
+        // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
         background-color: var(
           --_ctm-mob-dn-cd-an-im-bd-cr,
           var(--_ctm-tab-dn-cd-an-im-bd-cr, var(--_ctm-dn-cd-an-im-bd-cr))
         );
-        padding-inline: var(
-          --_ctm-mob-lt-im-hl-pg,
-          var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
-        );
 
         p {
           // padding-inline: var(--_sf-cd-gp);
@@ -281,6 +277,10 @@
       &[data-state="open"] {
         // overflow: inherit;
         // height: auto;
+        gap: var(
+          --_ctm-mob-lt-te-ad-dn-sg,
+          var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
+        );
 
         --_self-active-gtr: minmax(
             var(
@@ -339,7 +339,7 @@
           align-items: center;
           justify-content: var(--_sf-jc, space-between);
           cursor: pointer;
-          padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
+          // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
           background-color: var(
             --_ctm-mob-dn-ed-an-im-bd-cr,
             var(--_ctm-tab-dn-ed-an-im-bd-cr, var(--_ctm-dn-ed-an-im-bd-cr))
@@ -412,15 +412,11 @@
         }
         .accordion-description {
           display: block;
-          padding-block-end: var(--_sf-dc-pd-bt);
+          // padding-block-end: var(--_sf-dc-pd-bt);
           background-color: var(
             --_ctm-mob-dn-ed-an-im-bd-cr-dc,
             var(--_ctm-tab-dn-ed-an-im-bd-cr-dc, var(--_ctm-dn-ed-an-im-bd-cr-dc))
           );
-          padding-inline: var(
-            --_ctm-mob-lt-im-hl-pg,
-            var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
-          );
 
           p {
             color: var(

package/dist/icon-list.scss

@@ -81,9 +81,9 @@ $pos: (
             --_txt-ht-fw: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-wt)};
             --_txt-ht-td: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ue)};
             --_txt-ht-fst: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se-ic)};
-            --_txt-ht-tl: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-tt-an)};
-            --_txt-ht-ls: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-lr-sg)};
-            --_txt-ht-lt: #{prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht)};
+            --_txt-ht-tl: #{prepareMediaQueries(--_ctm-dn-tt-hr-se-tt-an)};
+            --_txt-ht-ls: #{prepareMediaQueries(--_ctm-dn-tt-hr-se-lr-sg)};
+            --_txt-ht-lt: #{prepareMediaQueries(--_ctm-dn-tt-dt-se-le-ht)};
           }
 
           & > span {
@@ -105,7 +105,6 @@ $pos: (
           & > div {
             &.#{$textContaner} {
               display: var(--_d-flex);
-              flex-grow: 1;
               flex-direction: column;
               padding: prepareMediaVariable(--_ctm-dn-tt-cr-pg);
               row-gap: prepareMediaVariable(--_ctm-dn-tt-cr-im-gp);
@@ -146,21 +145,21 @@ $pos: (
                 font-weight: var(--_txt-ht-fw, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt));
                 text-decoration: var(--_txt-ht-td, prepareMediaVariable(--_ctm-dn-tt-dt-se-ue));
                 font-style: var(--_txt-ht-fst, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic));
-                text-align: var(--_txt-ht-tl, prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-an));
-                letter-spacing: var(--_txt-ht-ls, prepareMediaVariable(--_ctm-dn-tt-dt-se-lr-sg));
-                line-height: var(--_txt-ht-lt, prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht));
+                text-align: var(--_txt-ht-tl, prepareMediaQueries(--_ctm-dn-tt-dt-se-tt-an));
+                letter-spacing: var(--_txt-ht-ls, prepareMediaQueries(--_ctm-dn-tt-dt-se-lr-sg));
+                line-height: var(--_txt-ht-lt, prepareMediaQueries(--_ctm-dn-tt-dt-se-le-ht));
               }
 
               & > .#{$desc} {
-                font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy), sans-serif;
-                font-size: prepareMediaVariable(--_ctm-dn-dn-ft-se);
-                color: prepareMediaVariable(--_ctm-dn-dn-cr);
-                font-weight: prepareMediaVariable(--_ctm-dn-dn-ft-wt);
-                text-decoration: prepareMediaVariable(--_ctm-dn-dn-ue);
-                font-style: prepareMediaVariable(--_ctm-dn-dn-ft-se-ic);
-                text-align: #{prepareMediaVariable(--_ctm-dn-dn-tt-an)};
-                letter-spacing: #{prepareMediaVariable(--_ctm-dn-dn-lr-sg)};
-                line-height: #{prepareMediaVariable(--_ctm-dn-dn-le-ht)};
+                font-family: prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy), sans-serif;
+                font-size: prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se);
+                color: prepareMediaVariable(--_ctm-dn-tt-dt-se-cr);
+                font-weight: prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt);
+                text-decoration: prepareMediaVariable(--_ctm-dn-tt-dt-se-ue);
+                font-style: prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic);
+                text-align: prepareMediaQueries(--_ctm-dn-tt-dt-se-tt-an);
+                letter-spacing: prepareMediaQueries(--_ctm-dn-tt-dt-se-lr-sg);
+                line-height: prepareMediaQueries(--_ctm-dn-tt-dt-se-le-ht);
               }
               a {
                 color: inherit;

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);
+      }
+    }
+  }
+}