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

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