npm - @syncfusion/blazor-themes - Versions diffs - 23.2.7 → 24.1.43 - Mend

@syncfusion/blazor-themes 23.2.7 → 24.1.43

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

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

@@ -1,5 +1,6 @@
 $rating-li-font-size: $font-icon-20 !default;
 $rating-li-padding: 4px !default;
+$rating-li-line-height: 3px !default;
 $rating-li-min-width-height: 28px !default;
 $rating-focus-border-radius: 4px !default;
 $rating-label-bottom-margin: 6px !default;
@@ -12,18 +13,21 @@ $rating-reset-font-size : $font-icon-16 !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
 $rating-small-li-font-size: $font-icon-16 !default;
+$rating-small-li-line-height: 10px !default;
 $rating-small-li-min-width-height: 24px !default;
 $rating-small-label-font-size: $text-xxs !default;
 $rating-small-label-line-height: 16px !default;
 $rating-small-reset-font-size : $font-icon-12 !default;
 $rating-bigger-li-font-size: $font-icon-24 !default;
+$rating-bigger-li-line-height: 18px !default;
 $rating-bigger-li-min-width-height: 32px !default;
 $rating-bigger-label-font-size: $text-2xl !default;
 $rating-bigger-label-line-height: 22px !default;
 $rating-bigger-reset-font-size : $font-icon-20 !default;
 $rating-bigger-small-li-font-size: $font-icon-22 !default;
+$rating-bigger-small-li-line-height: 15px !default;
 $rating-bigger-small-li-min-width-height: 30px !default;
 $rating-bigger-small-label-font-size: $text-xs !default;
 $rating-bigger-small-label-line-height: 18px !default;
@@ -60,7 +64,10 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
       margin: 4px;
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline: 1px solid;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline: 1px solid;
+        }
       }
       &:focus-visible {
@@ -74,6 +81,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
     }
     .e-rating-item-container {
+      &:has(svg) {
+        line-height: $rating-li-line-height;
+      }
       cursor: pointer;
       font-size: $rating-li-font-size;
       padding: $rating-li-padding;
@@ -88,12 +98,11 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
       }
     }
-    &.e-rating-animation:not(.e-disabled) {
-      .e-rating-item-container:hover .e-rating-item {
-        transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
-        transform: scale(1.4);
-        pointer-events: none;
-      }
+    &.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item,
+    &.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
+      transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
+      transform: scale(1.4);
+      pointer-events: none;
     }
     &.e-disabled {
@@ -202,6 +211,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .e-small.e-rating-container,
   .e-small .e-rating-container {
     .e-rating-item-container {
+      &:has(svg) {
+        line-height: $rating-small-li-line-height;
+      }
       font-size: $rating-small-li-font-size;
     }
@@ -218,6 +230,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .e-bigger.e-rating-container,
   .e-bigger .e-rating-container {
     .e-rating-item-container {
+      &:has(svg) {
+        line-height: $rating-bigger-li-line-height;
+      }
       font-size: $rating-bigger-li-font-size;
     }
@@ -236,6 +251,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .e-bigger .e-small.e-rating-container,
   .e-small .e-bigger.e-rating-container {
     .e-rating-item-container {
+      &:has(svg) {
+        line-height: $rating-bigger-small-li-line-height;
+      }
       font-size: $rating-bigger-small-li-font-size;
     }
@@ -255,8 +273,11 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .e-rating-container {
     .e-rating-item-list {
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline-color: $rating-li-focus;
-        border-radius: $rating-focus-border-radius;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline-color: $rating-li-focus;
+          border-radius: $rating-focus-border-radius;
+        }
       }
     }

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

@@ -317,24 +317,28 @@ $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -313,24 +313,28 @@ $slider-tick-font-color: $grey-light-font !default;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -308,24 +308,28 @@ $slider-disabled-track-color: $gray-300;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -251,24 +251,28 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -251,24 +251,28 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -323,24 +323,28 @@ $slider-limit-bar-horizontal-height: 4px !default;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -317,24 +317,28 @@ $slider-tick-font-color: $message-font !default;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -235,24 +235,28 @@ $slider-hover-handle-border-color: $primary !default;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -235,24 +235,28 @@ $slider-hover-handle-border-color: $primary !default;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -306,24 +306,28 @@ $slider-limit-bar-color: rgba($bg-base-0, .25) !default;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -320,24 +320,28 @@ $slider-button-vup-bg-image:  none !default;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -315,24 +315,28 @@ $slider-button-vup-bg-image:  none !default;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -258,24 +258,28 @@ $slider-button-vup-bg-image:  none !default;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -258,24 +258,28 @@ $slider-button-vup-bg-image:  none !default;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -245,24 +245,28 @@ $slider-tick-font-color: $content-text-color-alt1 !default;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

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

@@ -245,24 +245,28 @@ $slider-tick-font-color: $content-text-color-alt1 !default;
         }
         &.e-slider-horizontal-before {
+          transform: rotate(45deg);
           .e-tip-content {
             transform: rotate(-45deg);
           }
         }
         &.e-slider-horizontal-after {
+          transform: rotate(225deg);
           .e-tip-content {
             transform: rotate(-225deg);
           }
         }
         &.e-slider-vertical-before {
+          transform: rotate(-45deg);
           .e-tip-content {
             transform: rotate(45deg);
           }
         }
         &.e-slider-vertical-after {
+          transform: rotate(-225deg);
           .e-tip-content {
             transform: rotate(225deg);
           }

package/SCSS-Themes/lists/list-view/bootstrap4.scss CHANGED Viewed

@@ -13,7 +13,7 @@ $listview-background: $content-bg !default;
 $listview-line-color: rgba($black, .13) !default;
 $listview-item-hover-bg: darken($gray-100, 5%) !default;
 $listview-item-height: 40px !default;
-$listview-item-line-height: 1.5 !default;
+$listview-item-line-height: 1.6 !default;
 $listview-item-padding: 8px 16px 8px 16px !default;
 $listview-root-border-color: rgba($black, .13);
@@ -64,7 +64,7 @@ $listview-back-padding-right: 10px !default;
 $listview-back-icon-height: 0 !default;
 $listview-back-icon-font-size: 14px !default;
 $listview-touch-item-height: 50px !default;
-$listview-touch-item-line-height: 1.5 !default;
+$listview-touch-item-line-height: 1.6 !default;
 $listview-touch-item-font-size: 16px !default;
 $listview-touch-groupheader-height: 50px !default;
 $listview-touch-groupheader-line-height: 1.5 !default;

package/SCSS-Themes/lists/list-view/bootstrap5-dark.scss CHANGED Viewed

@@ -31,7 +31,7 @@ $listview-font-size: $text-sm !default;
 $listview-back-padding-right: 8px !default;
 $listview-back-icon-size: 20px !default;
 $listview-touch-item-height: 40px !default;
-$listview-touch-item-line-height: 21px !default;
+$listview-touch-item-line-height: 24px !default;
 $listview-touch-item-size: 24px !default;
 $listview-touch-item-padding: 16px 14px 12px 16px !default;
 $listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;

package/SCSS-Themes/lists/list-view/bootstrap5.scss CHANGED Viewed

@@ -31,7 +31,7 @@ $listview-font-size: $text-sm !default;
 $listview-back-padding-right: 8px !default;
 $listview-back-icon-size: 20px !default;
 $listview-touch-item-height: 40px !default;
-$listview-touch-item-line-height: 21px !default;
+$listview-touch-item-line-height: 24px !default;
 $listview-touch-item-size: 24px !default;
 $listview-touch-item-padding: 16px 14px 12px 16px !default;
 $listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;

package/SCSS-Themes/lists/list-view/material.scss CHANGED Viewed

@@ -62,7 +62,7 @@ $listview-back-padding-right: 30px !default;
 $listview-back-icon-height: 1px !default;
 $listview-back-icon-font-size: auto !default;
 $listview-touch-item-height: 48px !default;
-$listview-touch-item-line-height: 45px !default;
+$listview-touch-item-line-height: 42px !default;
 $listview-touch-item-font-size: 15px !default;
 $listview-touch-groupheader-height: 48px !default;
 $listview-touch-groupheader-line-height: 45px !default;

package/SCSS-Themes/lists/list-view/material3-dark.scss CHANGED Viewed

@@ -6,7 +6,7 @@ $listview-icon-back-margin: 0 !default;
 $listview-icon-back-margin-right: 14px !default;
 $listview-rtl-icon-back-margin: 0 !default;
 $listview-item-height: 40px !default;
-$listview-item-line-height: 20px !default;
+$listview-item-line-height: 22px !default;
 $listview-item-padding: 10px 16px !default;
 $listview-rtl-item-padding: 7px 12px 7px 12px !default;
 $listview-header-padding: 6px 12px !default;

package/SCSS-Themes/lists/list-view/material3.scss CHANGED Viewed

@@ -6,7 +6,7 @@ $listview-icon-back-margin: 0 !default;
 $listview-icon-back-margin-right: 14px !default;
 $listview-rtl-icon-back-margin: 0 !default;
 $listview-item-height: 40px !default;
-$listview-item-line-height: 20px !default;
+$listview-item-line-height: 22px !default;
 $listview-item-padding: 10px 16px !default;
 $listview-rtl-item-padding: 7px 12px 7px 12px !default;
 $listview-header-padding: 6px 12px !default;

package/SCSS-Themes/lists/list-view/tailwind-dark.scss CHANGED Viewed

@@ -3,7 +3,7 @@
 //layout
 $listview-icon-margin-right: 2px !default;
 $listview-item-height: 38px !default;
-$listview-item-line-height: 22px !default;
+$listview-item-line-height: 21px !default;
 $listview-item-padding: 8px 9px 8px 12px !default;
 $listview-rtl-item-padding: 8px 12px 8px 9px !default;
 $listview-header-padding: 6px 12px !default;
@@ -32,7 +32,7 @@ $listview-back-padding-right: 8px !default;
 $listview-back-icon-size: 20px !default;
 $listview-back-icon-font-size: $text-base !default;
 $listview-touch-item-height: 48px !default;
-$listview-touch-item-line-height: 24px !default;
+$listview-touch-item-line-height: 23px !default;
 $listview-touch-item-size: 24px !default;
 $listview-touch-item-padding: 12px 14px 12px 16px !default;
 $listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;