npm - @syncfusion/blazor-themes - Versions diffs - 27.1.50 → 27.1.52 - Mend

@syncfusion/blazor-themes 27.1.50 → 27.1.52

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 (201) hide show

package/SCSS-Themes/inputs/input/tailwind-dark.scss CHANGED Viewed

@@ -239,7 +239,7 @@ $float-label-disbale-font-color: $input-disable-font-color !default;
 $input-placeholder-color: $placeholder-text-color !default;
 $input-group-disabled-color: $icon-color-disabled !default;
 $input-group-hovered-color: $icon-color-hover !default;
-$input-readonly-bg-color: $content-bg-color-alt1 !default;
+$input-readonly-bg-color: none !default;
 $input-readonly-color: $cool-gray-600 !default;
 $input-icon-shadow: inset  0 3px 5px rgba(0, 0, 0, .125) !default;
 $input-border-shadow: 0 0 0 3px rgba($primary, .25) !default;

package/SCSS-Themes/inputs/input/tailwind.scss CHANGED Viewed

@@ -239,7 +239,7 @@ $float-label-disbale-font-color: $input-disable-font-color !default;
 $input-placeholder-color: $placeholder-text-color !default;
 $input-group-disabled-color: $icon-color-disabled !default;
 $input-group-hovered-color: $icon-color-hover !default;
-$input-readonly-bg-color: $content-bg-color-alt1 !default;
+$input-readonly-bg-color: none !default;
 $input-readonly-color: $cool-gray-600 !default;
 $input-icon-shadow: inset  0 3px 5px rgba(0, 0, 0, .125) !default;
 $input-border-shadow: 0 0 0 3px rgba($primary, .25) !default;

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

@@ -1497,13 +1497,11 @@ $slider-button-vup-bg-image:  none !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1497,13 +1497,11 @@ $slider-button-vup-bg-image:  none !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1565,13 +1565,11 @@ $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1561,13 +1561,11 @@ $slider-tab-active-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1555,13 +1555,11 @@ $slider-disabled-track-color: $gray-300;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1499,13 +1499,11 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

package/SCSS-Themes/inputs/slider/bootstrap5.3.scss CHANGED Viewed

@@ -1499,13 +1499,11 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1499,13 +1499,11 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1570,13 +1570,11 @@ $slider-limit-bar-horizontal-height: 4px !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1564,13 +1564,11 @@ $slider-tick-font-color: $message-font !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1484,13 +1484,11 @@ $slider-hover-handle-border-color: $primary !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1484,13 +1484,11 @@ $slider-hover-handle-border-color: $primary !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1515,13 +1515,11 @@ $slider-button-vup-bg-image:  none !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1515,13 +1515,11 @@ $slider-button-vup-bg-image:  none !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1552,13 +1552,11 @@ $slider-limit-bar-color: rgba($bg-base-0, .25) !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1568,13 +1568,11 @@ $slider-button-vup-bg-image:  none !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1562,13 +1562,11 @@ $slider-button-vup-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1502,13 +1502,11 @@ $slider-button-vup-bg-image:  none !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1502,13 +1502,11 @@ $slider-button-vup-bg-image:  none !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1493,13 +1493,11 @@ $slider-tick-font-color: $content-text-color-alt1 !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');

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

@@ -1493,13 +1493,11 @@ $slider-tick-font-color: $content-text-color-alt1 !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');