npm - @syncfusion/blazor-themes - Versions diffs - 26.1.41 → 26.2.4 - Mend

@syncfusion/blazor-themes 26.1.41 → 26.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (348) hide show

package/SCSS-Themes/inputs/slider/fabric-dark.scss CHANGED Viewed

@@ -1080,7 +1080,13 @@ $slider-limit-bar-horizontal-height: 4px !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position: bottom;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-after-height, $tick-after-top, 'horizontal');
             }
             @else {
@@ -1090,7 +1096,10 @@ $slider-limit-bar-horizontal-height: 4px !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
             }
           }
@@ -1120,7 +1129,13 @@ $slider-limit-bar-horizontal-height: 4px !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position-x: center;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-before-height, $tick-before-top, 'horizontal');
             }
             @else {
@@ -1130,7 +1145,10 @@ $slider-limit-bar-horizontal-height: 4px !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
             }
           }
@@ -1206,7 +1224,12 @@ $slider-limit-bar-horizontal-height: 4px !default;
             }
             @if ($skin-name == 'material' or $skin-name == 'material-dark') {
               background-position: center;
-              height: 99%;
+              @if ($skin-name == 'material-dark') {
+                height: 12px;
+              }
+              @else {
+                height: 99%;
+              }
             }
           }
@@ -1232,6 +1255,10 @@ $slider-limit-bar-horizontal-height: 4px !default;
             @else if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
               @include alignment(calc(100% + 3px), -9px, 'horizontal');
             }
+            @else if ($skin-name == 'material-dark') {
+              height: 20px;
+              top: 4px;
+            }
           }
         }
@@ -1331,7 +1358,7 @@ $slider-limit-bar-horizontal-height: 4px !default;
           background-position: center center;
         }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -1421,7 +1448,7 @@ $slider-limit-bar-horizontal-height: 4px !default;
         .e-tick {
           display: inline-block;
           @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+            background-repeat: repeat-y;
           }
           @if ($skin-name != 'material' and $skin-name != 'material-dark') {

package/SCSS-Themes/inputs/slider/fabric.scss CHANGED Viewed

@@ -1074,7 +1074,13 @@ $slider-tick-font-color: $message-font !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position: bottom;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-after-height, $tick-after-top, 'horizontal');
             }
             @else {
@@ -1084,7 +1090,10 @@ $slider-tick-font-color: $message-font !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
             }
           }
@@ -1114,7 +1123,13 @@ $slider-tick-font-color: $message-font !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position-x: center;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-before-height, $tick-before-top, 'horizontal');
             }
             @else {
@@ -1124,7 +1139,10 @@ $slider-tick-font-color: $message-font !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
             }
           }
@@ -1200,7 +1218,12 @@ $slider-tick-font-color: $message-font !default;
             }
             @if ($skin-name == 'material' or $skin-name == 'material-dark') {
               background-position: center;
-              height: 99%;
+              @if ($skin-name == 'material-dark') {
+                height: 12px;
+              }
+              @else {
+                height: 99%;
+              }
             }
           }
@@ -1226,6 +1249,10 @@ $slider-tick-font-color: $message-font !default;
             @else if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
               @include alignment(calc(100% + 3px), -9px, 'horizontal');
             }
+            @else if ($skin-name == 'material-dark') {
+              height: 20px;
+              top: 4px;
+            }
           }
         }
@@ -1325,7 +1352,7 @@ $slider-tick-font-color: $message-font !default;
           background-position: center center;
         }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -1415,7 +1442,7 @@ $slider-tick-font-color: $message-font !default;
         .e-tick {
           display: inline-block;
           @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+            background-repeat: repeat-y;
           }
           @if ($skin-name != 'material' and $skin-name != 'material-dark') {

package/SCSS-Themes/inputs/slider/fluent-dark.scss CHANGED Viewed

@@ -994,7 +994,13 @@ $slider-hover-handle-border-color: $primary !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position: bottom;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-after-height, $tick-after-top, 'horizontal');
             }
             @else {
@@ -1004,7 +1010,10 @@ $slider-hover-handle-border-color: $primary !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
             }
           }
@@ -1034,7 +1043,13 @@ $slider-hover-handle-border-color: $primary !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position-x: center;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-before-height, $tick-before-top, 'horizontal');
             }
             @else {
@@ -1044,7 +1059,10 @@ $slider-hover-handle-border-color: $primary !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
             }
           }
@@ -1120,7 +1138,12 @@ $slider-hover-handle-border-color: $primary !default;
             }
             @if ($skin-name == 'material' or $skin-name == 'material-dark') {
               background-position: center;
-              height: 99%;
+              @if ($skin-name == 'material-dark') {
+                height: 12px;
+              }
+              @else {
+                height: 99%;
+              }
             }
           }
@@ -1146,6 +1169,10 @@ $slider-hover-handle-border-color: $primary !default;
             @else if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
               @include alignment(calc(100% + 3px), -9px, 'horizontal');
             }
+            @else if ($skin-name == 'material-dark') {
+              height: 20px;
+              top: 4px;
+            }
           }
         }
@@ -1245,7 +1272,7 @@ $slider-hover-handle-border-color: $primary !default;
           background-position: center center;
         }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -1335,7 +1362,7 @@ $slider-hover-handle-border-color: $primary !default;
         .e-tick {
           display: inline-block;
           @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+            background-repeat: repeat-y;
           }
           @if ($skin-name != 'material' and $skin-name != 'material-dark') {

package/SCSS-Themes/inputs/slider/fluent.scss CHANGED Viewed

@@ -994,7 +994,13 @@ $slider-hover-handle-border-color: $primary !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position: bottom;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-after-height, $tick-after-top, 'horizontal');
             }
             @else {
@@ -1004,7 +1010,10 @@ $slider-hover-handle-border-color: $primary !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
             }
           }
@@ -1034,7 +1043,13 @@ $slider-hover-handle-border-color: $primary !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position-x: center;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-before-height, $tick-before-top, 'horizontal');
             }
             @else {
@@ -1044,7 +1059,10 @@ $slider-hover-handle-border-color: $primary !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
             }
           }
@@ -1120,7 +1138,12 @@ $slider-hover-handle-border-color: $primary !default;
             }
             @if ($skin-name == 'material' or $skin-name == 'material-dark') {
               background-position: center;
-              height: 99%;
+              @if ($skin-name == 'material-dark') {
+                height: 12px;
+              }
+              @else {
+                height: 99%;
+              }
             }
           }
@@ -1146,6 +1169,10 @@ $slider-hover-handle-border-color: $primary !default;
             @else if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
               @include alignment(calc(100% + 3px), -9px, 'horizontal');
             }
+            @else if ($skin-name == 'material-dark') {
+              height: 20px;
+              top: 4px;
+            }
           }
         }
@@ -1245,7 +1272,7 @@ $slider-hover-handle-border-color: $primary !default;
           background-position: center center;
         }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -1335,7 +1362,7 @@ $slider-hover-handle-border-color: $primary !default;
         .e-tick {
           display: inline-block;
           @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+            background-repeat: repeat-y;
           }
           @if ($skin-name != 'material' and $skin-name != 'material-dark') {

package/SCSS-Themes/inputs/slider/fluent2-dark.scss CHANGED Viewed

@@ -1020,7 +1020,13 @@ $slider-button-vup-bg-image:  none !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position: bottom;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-after-height, $tick-after-top, 'horizontal');
             }
             @else {
@@ -1030,7 +1036,10 @@ $slider-button-vup-bg-image:  none !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
             }
           }
@@ -1060,7 +1069,13 @@ $slider-button-vup-bg-image:  none !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position-x: center;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-before-height, $tick-before-top, 'horizontal');
             }
             @else {
@@ -1070,7 +1085,10 @@ $slider-button-vup-bg-image:  none !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
             }
           }
@@ -1146,7 +1164,12 @@ $slider-button-vup-bg-image:  none !default;
             }
             @if ($skin-name == 'material' or $skin-name == 'material-dark') {
               background-position: center;
-              height: 99%;
+              @if ($skin-name == 'material-dark') {
+                height: 12px;
+              }
+              @else {
+                height: 99%;
+              }
             }
           }
@@ -1172,6 +1195,10 @@ $slider-button-vup-bg-image:  none !default;
             @else if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
               @include alignment(calc(100% + 3px), -9px, 'horizontal');
             }
+            @else if ($skin-name == 'material-dark') {
+              height: 20px;
+              top: 4px;
+            }
           }
         }
@@ -1271,7 +1298,7 @@ $slider-button-vup-bg-image:  none !default;
           background-position: center center;
         }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -1361,7 +1388,7 @@ $slider-button-vup-bg-image:  none !default;
         .e-tick {
           display: inline-block;
           @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+            background-repeat: repeat-y;
           }
           @if ($skin-name != 'material' and $skin-name != 'material-dark') {

package/SCSS-Themes/inputs/slider/fluent2.scss CHANGED Viewed

@@ -1020,7 +1020,13 @@ $slider-button-vup-bg-image:  none !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position: bottom;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-after-height, $tick-after-top, 'horizontal');
             }
             @else {
@@ -1030,7 +1036,10 @@ $slider-button-vup-bg-image:  none !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
             }
           }
@@ -1060,7 +1069,13 @@ $slider-button-vup-bg-image:  none !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position-x: center;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-before-height, $tick-before-top, 'horizontal');
             }
             @else {
@@ -1070,7 +1085,10 @@ $slider-button-vup-bg-image:  none !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
             }
           }
@@ -1146,7 +1164,12 @@ $slider-button-vup-bg-image:  none !default;
             }
             @if ($skin-name == 'material' or $skin-name == 'material-dark') {
               background-position: center;
-              height: 99%;
+              @if ($skin-name == 'material-dark') {
+                height: 12px;
+              }
+              @else {
+                height: 99%;
+              }
             }
           }
@@ -1172,6 +1195,10 @@ $slider-button-vup-bg-image:  none !default;
             @else if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
               @include alignment(calc(100% + 3px), -9px, 'horizontal');
             }
+            @else if ($skin-name == 'material-dark') {
+              height: 20px;
+              top: 4px;
+            }
           }
         }
@@ -1271,7 +1298,7 @@ $slider-button-vup-bg-image:  none !default;
           background-position: center center;
         }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -1361,7 +1388,7 @@ $slider-button-vup-bg-image:  none !default;
         .e-tick {
           display: inline-block;
           @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+            background-repeat: repeat-y;
           }
           @if ($skin-name != 'material' and $skin-name != 'material-dark') {

package/SCSS-Themes/inputs/slider/highcontrast.scss CHANGED Viewed

@@ -1062,7 +1062,13 @@ $slider-limit-bar-color: rgba($bg-base-0, .25) !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position: bottom;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-after-height, $tick-after-top, 'horizontal');
             }
             @else {
@@ -1072,7 +1078,10 @@ $slider-limit-bar-color: rgba($bg-base-0, .25) !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
             }
           }
@@ -1102,7 +1111,13 @@ $slider-limit-bar-color: rgba($bg-base-0, .25) !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position-x: center;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-before-height, $tick-before-top, 'horizontal');
             }
             @else {
@@ -1112,7 +1127,10 @@ $slider-limit-bar-color: rgba($bg-base-0, .25) !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
             }
           }
@@ -1188,7 +1206,12 @@ $slider-limit-bar-color: rgba($bg-base-0, .25) !default;
             }
             @if ($skin-name == 'material' or $skin-name == 'material-dark') {
               background-position: center;
-              height: 99%;
+              @if ($skin-name == 'material-dark') {
+                height: 12px;
+              }
+              @else {
+                height: 99%;
+              }
             }
           }
@@ -1214,6 +1237,10 @@ $slider-limit-bar-color: rgba($bg-base-0, .25) !default;
             @else if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
               @include alignment(calc(100% + 3px), -9px, 'horizontal');
             }
+            @else if ($skin-name == 'material-dark') {
+              height: 20px;
+              top: 4px;
+            }
           }
         }
@@ -1313,7 +1340,7 @@ $slider-limit-bar-color: rgba($bg-base-0, .25) !default;
           background-position: center center;
         }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -1403,7 +1430,7 @@ $slider-limit-bar-color: rgba($bg-base-0, .25) !default;
         .e-tick {
           display: inline-block;
           @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+            background-repeat: repeat-y;
           }
           @if ($skin-name != 'material' and $skin-name != 'material-dark') {