@sc-360-v2/storefront-cms-library 0.3.0 → 0.3.2

package/dist/buyForHeaders.scss

@@ -10,10 +10,16 @@
     margin-bottom: 1rem;
 
     h1 {
-      font-size: 1.5rem;
-      font-weight: bold;
+      font-size: var(--_ctm-buy-dn-pe-te-ss-ft-se);
+      font-weight: var(--_ctm-buy-dn-pe-te-ss-ft-wt);
       display: flex;
-      align-items: center;
+      align-items: var(--_ctm-buy-dn-pe-te-ss-tt-an);
+      color: var(--_ctm-buy-dn-pe-te-ss-cr);
+      font-family: var(--_ctm-buy-dn-pe-te-ss-ft-fy);
+      font-style: var(--_ctm-buy-dn-pe-te-ss-ft-se-ic);
+      letter-spacing: var(--_ctm-buy-dn-pe-te-ss-lr-sg);
+      line-height: var(--_ctm-buy-dn-pe-te-ss-le-ht);
+      text-decoration: var(--_ctm-buy-dn-pe-te-ss-ue);
 
       .separator {
         margin: 0 0.5rem;
@@ -44,12 +50,15 @@
       }
 
       .manage-link {
-        color: #0056d2;
-        text-decoration: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
+        font-size: var(--_ctm-buy-dn-me-es-ll-ss-ft-se);
+        font-weight: var(--_ctm-buy-dn-pe-te-ss-ft-wt);
+        text-align: var(--_ctm-buy-dn-me-es-ll-ss-tt-an);
+        color: var(--_ctm-buy-dn-me-es-ll-ss-cr);
+        font-family: var(--_ctm-buy-dn-me-es-ll-ss-ft-wt);
+        font-style: var(--_ctm-buy-dn-me-es-ll-ss-ft-se-ic);
+        text-decoration: var(--_ctm-buy-dn-me-es-ll-ss-ue);
+        letter-spacing: var(--_ctm-buy-dn-me-es-ll-ss-lr-sg);
+        line-height: var(--_ctm-buy-dn-me-es-ll-ss-le-ht);
       }
 
       .employee-switch {
@@ -90,10 +99,15 @@
         flex-wrap: wrap;
 
         .employee-name {
-          font-size: 1.3rem;
-          font-weight: bold;
-          display: flex;
-          align-items: center;
+          font-size: var(--_ctm-buy-dn-ee-ne-ss-ft-se);
+          color: var(--_ctm-buy-dn-ee-ne-ss-cr);
+          font-family: var(--_ctm-buy-dn-ee-ne-ss-ft-fy);
+          font-weight: var(--_ctm-buy-dn-ee-ne-ss-ft-wt);
+          font-style: var(--_ctm-buy-dn-ee-ne-ss-ft-se-ic);
+          text-decoration: var(--_ctm-buy-dn-ee-ne-ss-ue);
+          text-align: var(---_ctm-buy-dn-ee-ne-ss-tt-an);
+          letter-spacing: var(--_ctm-buy-dn-ee-sn-ss-lr-sg);
+          line-height: var(--_ctm-buy-dn-ee-sn-ss-le-ht);
 
           .external-link-icon {
             margin-left: 0.5rem;
@@ -117,10 +131,20 @@
       align-items: center;
       margin: 0.8rem 0;
       flex-wrap: wrap;
+      gap: 8px;
 
       .meta-item {
-        font-size: 0.9rem;
-        color: #555;
+        // font-size: 0.9rem;
+        // color: #555;
+        font-family: var(--_ctm-buy-dn-ee-io-ss-ft-fy);
+        font-size: var(--_ctm-buy-dn-ee-io-ss-ft-se);
+        color: var(--_ctm-buy-dn-ee-io-ss-cr);
+        font-weight: var(--_ctm-buy-dn-ee-io-ss-ft-wt);
+        font-style: var(--_ctm-buy-dn-ee-io-ss-ft-se-ic);
+        text-decoration: var(--_ctm-buy-dn-ee-io-ss-ue);
+        text-align: var(--_ctm-buy-dn-ee-io-ss-tt-an);
+        letter-spacing: var(--_ctm-buy-dn-ee-io-ss-lr-sg);
+        line-height: var(--_ctm-buy-dn-ee-io-ss-le-ht);
       }
 
       .meta-separator {
@@ -134,20 +158,43 @@
       flex-wrap: wrap;
       gap: 1.5rem;
       margin-top: 1rem;
+      position: relative;
 
       .info-block {
-        min-width: 160px;
-
-        h4 {
-          font-size: 0.95rem;
-          color: #6c757d;
+        min-width: 170px;
+        max-width: 226px;
+        .title,
+        .sub_title {
+          width: 100%;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        .title {
+          // font-size: 0.95rem;
+          // color: #6c757d;
+          font-family: var(--_ctm-buy-dn-ee-dl-te-ss-ft-fy);
+          font-size: var(--_ctm-buy-dn-ee-dl-te-ss-ft-se);
+          color: var(--_ctm-buy-dn-ee-dl-te-ss-cr);
+          font-weight: var(--_ctm-buy-dn-ee-dl-te-ss-ft-wt);
+          font-style: var(--_ctm-buy-dn-ee-dl-te-ss-ft-se-ic);
+          text-decoration: var(--_ctm-buy-dn-ee-dl-te-ss-ue);
+          text-align: var(--_ctm-buy-dn-ee-io-ss-tt-an);
+          letter-spacing: var(--_ctm-buy-dn-ee-dl-te-ss-lr-sg);
+          line-height: var(--_ctm-buy-dn-ee-dl-te-ss-le-ht);
           margin-bottom: 0.2rem;
         }
 
-        p {
-          font-weight: bold;
-          font-size: 0.95rem;
-          color: #222;
+        .sub_title {
+          font-family: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-fy);
+          font-size: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-se);
+          color: var(--_ctm-buy-dn-ee-dl-sb-te-ss-cr);
+          font-weight: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-wt);
+          font-style: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-se-ic);
+          text-decoration: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ue);
+          text-align: var(--_ctm-buy-dn-ee-dl-sb-te-ss-tt-an);
+          letter-spacing: var(--_ctm-buy-dn-ee-dl-sb-te-ss-lr-sg);
+          line-height: var(--_ctm-buy-dn-ee-dl-sb-te-ss-le-ht);
         }
       }
 
@@ -155,6 +202,9 @@
         display: flex;
         align-items: center;
         gap: 0.5rem;
+        position: absolute;
+        right: 0;
+        justify-content: right;
 
         .cart-icon {
           position: relative;
@@ -173,14 +223,29 @@
         }
 
         .cart-price {
-          h4 {
-            font-size: 0.95rem;
-            margin-bottom: 0;
+          .title {
+            font-family: var(--_ctm-buy-dn-ee-dl-te-ss-ft-fy);
+            font-size: var(--_ctm-buy-dn-ee-dl-te-ss-ft-se);
+            color: var(--_ctm-buy-dn-ee-dl-te-ss-cr);
+            font-weight: var(--_ctm-buy-dn-ee-dl-te-ss-ft-wt);
+            font-style: var(--_ctm-buy-dn-ee-dl-te-ss-ft-se-ic);
+            text-decoration: var(--_ctm-buy-dn-ee-dl-te-ss-ue);
+            text-align: var(--_ctm-buy-dn-ee-io-ss-tt-an);
+            letter-spacing: var(--_ctm-buy-dn-ee-dl-te-ss-lr-sg);
+            line-height: var(--_ctm-buy-dn-ee-dl-te-ss-le-ht);
           }
 
-          p {
+          .sub_title {
             font-weight: bold;
-            font-size: 1rem;
+            font-family: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-fy);
+            font-size: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-se);
+            color: var(--_ctm-buy-dn-ee-dl-sb-te-ss-cr);
+            // font-weight: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-wt);
+            font-style: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-se-ic);
+            text-decoration: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ue);
+            text-align: var(--_ctm-buy-dn-ee-dl-sb-te-ss-tt-an);
+            letter-spacing: var(--_ctm-buy-dn-ee-dl-sb-te-ss-lr-sg);
+            line-height: var(--_ctm-buy-dn-ee-dl-sb-te-ss-le-ht);
           }
         }
       }

package/dist/cart-details.scss

@@ -449,11 +449,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
   textarea {
     width: 100% !important;
     padding: 8px 12px !important;
-    border-radius: 0.5rem;
-    border: 1px solid #d1d5db !important;
-    background-color: #f9fafb !important;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    /* background-color: #f9fafb !important; */
     outline: none;
     transition: border-color 0.2s ease-in-out;
+    font-size: 14px;
+    height: 40px;
 
     &:focus {
       border-color: #3b82f6;

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/dropdownTemplate.scss

@@ -0,0 +1,141 @@
+.dropdown-with-input-section {
+  display: grid;
+  gap: 2px;
+  width: max-content;
+
+  .dropdow-input-section {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 240px;
+    align-items: center;
+    .dropdown-chips {
+      display: flex;
+      //   flex-wrap: wrap;
+      gap: 4px;
+      //   margin-bottom: 4px;
+      max-width: 88%;
+      min-width: 88%;
+      overflow: hidden;
+      .dropdown-chip {
+        background: #e2e2e2;
+        padding: 4px 8px;
+        border-radius: 12px;
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        min-width: 48px;
+        max-width: 60px;
+        .chip-lable {
+          max-width: 80%;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        }
+
+        .remove-chip {
+          margin-left: 6px;
+          cursor: pointer;
+          font-weight: bold;
+        }
+      }
+
+      .dropdown-chip-overflow {
+        background-color: #d1d1d1;
+        color: #555;
+        cursor: default;
+      }
+    }
+
+    .input-field {
+      flex: 1;
+      font-size: 14px;
+    }
+    .readonly-input,
+    .dropdown__clear__icon,
+    .dropdown__icon {
+      cursor: pointer;
+    }
+    .dropdown__clear__icon {
+      position: absolute;
+      right: 32px;
+    }
+    .dropdown-menu {
+      position: absolute;
+      width: 100%;
+      top: 35px;
+      left: 0px;
+      right: 24px;
+      background: white;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      max-height: 200px;
+      overflow-y: auto;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      z-index: 10;
+
+      li {
+        font-size: 14px;
+        cursor: pointer;
+        height: 40px;
+
+        &:hover {
+          background-color: #f4f4f4;
+        }
+
+        &.no-result {
+          color: #aaa;
+          cursor: default;
+        }
+
+        .dropdown-item {
+          width: 100%;
+          height: 100%;
+          padding: 8px 12px;
+          text-align: left;
+          display: flex;
+          align-items: center;
+          .item-image {
+            background-image: url("");
+            width: 30px;
+            height: 30px;
+          }
+          .item-image-svg {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #dfdfdf;
+            margin-right: 8px;
+          }
+        }
+        .selected {
+          background-color: #e6f0ff;
+          font-weight: bold;
+        }
+      }
+    }
+    .dropdown_template_panel_search {
+      background: none;
+      padding: 12px;
+      border-bottom: 1px solid #dddddd;
+      height: max-content !important;
+      &:hover {
+        background: none !important;
+      }
+      input {
+        padding: 10px 8px;
+        border-radius: 4px;
+        border: 1px solid #dddddd;
+      }
+    }
+  }
+}
+.dropdown-with-input-section.full-width {
+  width: auto;
+  .dropdow-input-section {
+    width: 100% !important;
+  }
+}

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/functions.scss

@@ -20,30 +20,40 @@
 //   ),
 // );
 
-$breakPoints: (
+$breakPointsV2: (
   desktop: (
-    min: 1024px,
+    min: 768px,
     max: 99999px,
   ),
   mobile: (
     min: 10px,
     max: 767px,
   ),
-  tablet: (
+  laptop: (
     min: 768px,
     max: 1023px,
   ),
 );
 
+@function safe-map-get($map, $key) {
+  @if $map != null and type-of($map) == "map" and map-has-key($map, $key) {
+    @return map.get($map, $key);
+  }
+  @return null;
+}
+
 @mixin prepareMediaQueries($list) {
-  @each $mediaKey, $mediaValue in $breakPoints {
-    $maxWidth: map.get($mediaValue, max);
-    $minWidth: map.get($mediaValue, min);
-    @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
-      @each $key, $value in $list {
-        $value1: map.get($value, $mediaKey);
-        @if ($value1 != null) {
-          #{$key}: $value1;
+  @each $mediaKey, $mediaValue in $breakPointsV2 {
+    $maxWidth: safe-map-get($mediaValue, max);
+    $minWidth: safe-map-get($mediaValue, min);
+
+    @if $maxWidth != null and $minWidth != null {
+      @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
+        @each $key, $value in $list {
+          $value1: safe-map-get($value, $mediaKey);
+          @if $value1 != null {
+            #{$key}: $value1;
+          }
         }
       }
     }
@@ -75,16 +85,23 @@ $breakPoints: (
   }
 }
 
-@function getListOfResponsive($desktop, $mobile, $latop: "optional") {
+@function getListOfResponsive($desktop, $mobile, $laptop: "optional") {
   $list: (
     desktop: $desktop,
     mobile: $mobile,
   );
-  @if ($latop != "optional") {
+  @if ($laptop != "optional") {
+    $list: map-merge(
+      $list,
+      (
+        laptop: $laptop,
+      )
+    );
+  } @else {
     $list: map-merge(
       $list,
       (
-        laptop: $latop,
+        laptop: $desktop,
       )
     );
   }
@@ -129,9 +146,19 @@ $breakPoints: (
                 #{$key2}: #{$value2};
               }
             } @else {
-              @media only screen and (max-width: #{map.get(map.get($breakPoints, $key1), max)}) and (min-width: #{map.get(map.get($breakPoints, $key1), min)}) {
-                @each $key2, $value2 in $value1 {
-                  #{$key2}: #{$value2};
+              $mediaValue: safe-map-get($breakPointsV2, $key1);
+              $maxWidth: safe-map-get($mediaValue, max);
+              $minWidth: safe-map-get($mediaValue, min);
+              // @media only screen and (max-width: #{map.get(map.get($breakPointsV2, $key1), max)}) and (min-width: #{map.get(map.get($breakPointsV2, $key1), min)}) {
+              //   @each $key2, $value2 in $value1 {
+              //     #{$key2}: #{$value2};
+              //   }
+              // }
+              @if $maxWidth != null and $minWidth != null {
+                @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
+                  @each $key2, $value2 in $value1 {
+                    #{$key2}: #{$value2};
+                  }
                 }
               }
             }
@@ -147,7 +174,15 @@ $breakPoints: (
               #{$key2}: #{$value2};
             }
           } @else {
-            @media only screen and (max-width: #{map.get(map.get($breakPoints, $key1), max)}) and (min-width: #{map.get(map.get($breakPoints, $key1), min)}) {
+            // @media only screen and (max-width: #{map.get(map.get($breakPoints, $key1), max)}) and (min-width: #{map.get(map.get($breakPoints, $key1), min)}) {
+            //   @each $key2, $value2 in $value1 {
+            //     #{$key2}: #{$value2};
+            //   }
+            // }
+            $mediaValue: safe-map-get($breakPointsV2, $key1);
+            $maxWidth: safe-map-get($mediaValue, max);
+            $minWidth: safe-map-get($mediaValue, min);
+            @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
               @each $key2, $value2 in $value1 {
                 #{$key2}: #{$value2};
               }