@sc-360-v2/storefront-cms-library 0.4.51 → 0.4.52

package/dist/dropdownTemplate.scss

@@ -27,7 +27,7 @@
         font-size: 14px;
         font-weight: 500;
         line-height: 20px;
-        color: #344054;
+        color: var(--_thm-cs-be-se-1);
         .svg_icon {
           vertical-align: middle;
           display: flex;
@@ -54,6 +54,9 @@
             }
           }
         }
+        &:hover {
+          color: var(--_thm-ty-p1-tt-cr);
+        }
       }
       .multi-selected-display {
         display: flex;

package/dist/filters.scss

@@ -106,7 +106,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           padding-block: 12px;
           // padding-right: 10px;
           &.divider_filter {
-            border-bottom: 1px solid var(--_gray-300);
+            border-bottom: 1px solid var(--_thm-cs-be-se-3);
           }
           &:last-child {
             border-bottom: none !important;
@@ -295,7 +295,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             flex-wrap: wrap;
             gap: 10px;
             align-items: center;
-            margin-top: 10px;
+            // margin-top: 10px;
             .selected__category {
               display: flex;
               align-items: center;
@@ -322,7 +322,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 border-radius: 30px;
                 padding: 6px 12px;
                 align-items: center;
-
+                transition:
+                  background-color 400ms,
+                  border-color 400ms ease-in-out;
                 background-color: var(
                   --_sf-hr-bd-cr,
                   var(
@@ -587,6 +589,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
           .option__group__header {
             @include flex($justifyItems: space-between);
+            gap: 8px;
             h2 {
               font-size: var(--_fs-14);
               font-weight: var(--_fw-600);
@@ -634,6 +637,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_ctm-mob-dn-on-ls-ue,
                 var(--_ctm-tab-dn-on-ls-ue, var(--_ctm-dn-on-ls-ue))
               );
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
             }
             .reset__btn {
               font-size: 12px;
@@ -714,6 +721,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
           ul {
             margin-top: 10px;
+            transition: all 400ms ease-in-out;
+            &.show__panel {
+              animation: slideUp 0.4s ease-in-out;
+            }
+
+            &.hide__panel {
+              animation: slideDown 0.4s ease-in-out;
+              pointer-events: none;
+            }
             &:not(:last-child) {
               border-bottom: 1px solid var(--_gray-300);
             }
@@ -1396,6 +1412,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           --_ctm-mob-dn-cx-ud-se-dt-se-br-rs,
           var(--_ctm-tab-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-dn-cx-ud-se-dt-se-br-rs))
         );
+        transition: background-color 400ms ease-in-out;
         &[data-show-default-unchecked-shadow="true"] {
           box-shadow: var(
             --_show-shadow-clear-all,
@@ -1528,6 +1545,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           --_ctm-mob-dn-cx-cd-se-dt-se-br-rs,
           var(--_ctm-tab-dn-cx-cd-se-dt-se-br-rs, var(--_ctm-dn-cx-cd-se-dt-se-br-rs))
         );
+        transition: background-color 400ms ease-in-out;
         &[data-show-default-checked-shadow="true"] {
           box-shadow: var(
             --_show-shadow-clear-all,
@@ -2231,6 +2249,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-cr));
         position: relative;
         z-index: 2; /* Ensure thumbs appear above the track */
+        transition:
+          background-color 400ms,
+          border-color 400ms ease-in-out;
+        &:hover {
+          border: 1px solid var(--_thm-cs-be-se-1);
+        }
       }
 
       input[type="range"]::-moz-range-thumb {
@@ -2276,12 +2300,20 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         position: absolute;
         top: -35px;
         font-size: 12px;
-        color: #555;
+        color: var(--_thm-cs-be-se-1);
         // background-color: #fff;
         border: 1px solid var(--_thm-cs-be-se-3);
         border-radius: 5px;
         white-space: nowrap;
         padding-inline: 15px;
+        span {
+          margin-right: 4px;
+          svg {
+            path {
+              stroke: var(--_thm-cs-be-se-1);
+            }
+          }
+        }
       }
 
       .min-tooltip {

package/dist/functions.scss

@@ -25,6 +25,22 @@
 $breakPointsV2: (
   desktop: (
     min: 768px,
+    // ---> 1024px
+    max: 99999px,
+  ),
+  mobile: (
+    min: 10px,
+    max: 767px,
+  ),
+  laptop: (
+    min: 768px,
+    max: 1023px,
+  ),
+);
+$breakPointsV3: (
+  desktop: (
+    min: 1024px,
+    // ---> 1024px
     max: 99999px,
   ),
   mobile: (
@@ -48,7 +64,6 @@ $breakPointsV2: (
   @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 {
@@ -197,6 +212,66 @@ $breakPointsV2: (
   }
 }
 
+@mixin prepareCustomClassCSSPropsV2($props) {
+  @each $key, $value in $props {
+    @if ($key == class) {
+      @each $classKey, $classValue in $value {
+        .#{$classKey} {
+          @each $key1, $value1 in $classValue {
+            @if ($key1 == common) {
+              @each $key2, $value2 in $value1 {
+                #{$key2}: #{$value2};
+              }
+            } @else {
+              $mediaValue: safe-map-get($breakPointsV3, $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};
+                  }
+                }
+              }
+            }
+          }
+          // @include getcssprops($classValue, $breakPoints);
+        }
+      }
+    } @else {
+      #{$key} {
+        @each $key1, $value1 in $value {
+          @if ($key1 == common) {
+            @each $key2, $value2 in $value1 {
+              #{$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($breakPointsV3, $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};
+              }
+            }
+          }
+          // @include getcssprops($value, $breakPoints);
+        }
+      }
+    }
+  }
+}
+
 @function prepareMediaVariable($full-var, $common: inherit) {
   $prefix: "--_ctm-";
   $core-name: string.slice($full-var, string.length($prefix) + 1); // removes --_ctm-
@@ -277,6 +352,21 @@ $breakPointsV2: (
   }
 }
 
+@mixin scrollbarHoverMixin() {
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--_sf-hr-bg, transparent);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--_sf-hr-tr, transparent); /* Background color of the track */
+  }
+
+  &:hover {
+    --_sf-hr-bg: var(--_primary-200);
+    --_sf-hr-tr: var(--_white-v1);
+  }
+}
+
 @mixin BgColorLighter($value, $percent: 10%) {
   background-color: color-mix(in srgb, #{$value} #{$percent}, transparent);
 }