npm - @syncfusion/blazor-themes - Versions diffs - 26.1.35 → 26.1.40 - Mend

@syncfusion/blazor-themes 26.1.35 → 26.1.40

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

package/SCSS-Themes/navigations/treeview/bootstrap5-dark.scss CHANGED Viewed

@@ -383,7 +383,7 @@ $treeview-item-active-check-color: $primary !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/navigations/treeview/bootstrap5.scss CHANGED Viewed

@@ -383,7 +383,7 @@ $treeview-item-active-check-color: $primary !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/navigations/treeview/fabric-dark.scss CHANGED Viewed

@@ -379,7 +379,7 @@ $ripple-width: 32px !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/navigations/treeview/fabric.scss CHANGED Viewed

@@ -375,7 +375,7 @@ $ripple-width: 32px !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/navigations/treeview/fluent-dark.scss CHANGED Viewed

@@ -383,7 +383,7 @@ $treeview-item-active-check-color: $primary !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/navigations/treeview/fluent.scss CHANGED Viewed

@@ -383,7 +383,7 @@ $treeview-item-active-check-color: $primary !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/navigations/treeview/fluent2-dark.scss CHANGED Viewed

@@ -26,7 +26,7 @@ $treeview-icon-padding: 0px !default;
 $treeview-text-padding: 0 12px !default;
 $treeview-text-margin: 0 !default;
 $treeview-image-size: 18px !default;
-$treeview-image-margin: 0 0 0 6px !default;
+$treeview-image-margin: 0 0 0 12px !default;
 $treeview-navigable-icon-image-margin: 0 8px 0 0 !default;
 $treeview-navigable-icon-image-margin-reverse: 0 0 0 8px !default;
 $treeview-navigable-check-margin-bigger: 0 0 0 12px !default;
@@ -41,7 +41,7 @@ $treeview-icon-image-margin: 0 0 0 12px !default;
 $treeview-rtl-icon-image-margin: 0 12px 0 0 !default;
 $treeview-check-margin: 0 0 0 4px !default;
 $treeview-rtl-check-margin: 0 4px 0 0 !default;
-$treeview-check-text-padding: 0 12px !default;
+$treeview-check-text-padding: 0 4px !default;
 $treeview-check-image-margin: 0 0 0 4px !default;
 $treeview-rtl-check-image-margin: 0 4px 0 0 !default;
 $treeview-drop-count-border-size: 1px !default;
@@ -57,11 +57,11 @@ $treeview-icon-img-wrap-width: calc(100% - 60px) !default;
 $treeview-big-item-height: 40px !default;
 $treeview-big-text-height: 38px !default;
 $treeview-big-input-height: 40px !default;
-$treeview-big-text-padding: 0 12px !default;
+$treeview-big-text-padding: 0 16px !default;
 $treeview-big-input-padding: 0 9px !default;
 $treeview-big-icon-padding: 0px !default;
-$treeview-big-image-margin: 0 0 0 12px !default;
-$treeview-big-rtl-image-margin: 0 12px 0 0 !default;
+$treeview-big-image-margin: 0 0 0 16px !default;
+$treeview-big-rtl-image-margin: 0 16px 0 0 !default;
 $treeview-big-icon-image-margin: 0 0 0 16px !default;
 $treeview-big-rtl-icon-image-margin: 0 16px 0 0 !default;
 $treeview-big-check-margin: 0 0 0 8px !default;
@@ -72,7 +72,7 @@ $treeview-big-root-ul-padding: 0 0 0 16px !default;
 $treeview-big-rtl-root-ul-padding: 0 16px 0 0 !default;
 $treeview-big-child-ul-padding: 0 0 0 24px !default;
 $treeview-big-rtl-child-ul-padding: 0 24px 0 0 !default;
-$treeview-big-image-text-padding: 0 12px !default;
+$treeview-big-image-text-padding: 0 16px !default;
 $treeview-big-icon-margin: 0 0 0 -16px !default;
 $treeview-big-rtl-icon-margin: 0 -16px 0 0 !default;
 $treeview-big-text-wrap-padding: 0 0 0 24px !default;
@@ -81,7 +81,7 @@ $treeview-big-drag-icon-font-size: $text-2xl !default;
 $treeview-big-drag-item-text-padding-left: 12px !default;
 $treeview-big-drag-icon-margin: -6px 0px 5px -9px !default;
 $treeview-big-drag-before-icon-padding: 6px !default;
-$treeview-big-check-text-padding: 0 12px !default;
+$treeview-big-check-text-padding: 0 8px !default;
 $treeview-big-check-wrap-width: calc(100% - 29px) !default;
 $treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
@@ -389,7 +389,7 @@ $treeview-drag-icon-color: $treeview-icon-color !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/navigations/treeview/fluent2.scss CHANGED Viewed

@@ -26,7 +26,7 @@ $treeview-icon-padding: 0px !default;
 $treeview-text-padding: 0 12px !default;
 $treeview-text-margin: 0 !default;
 $treeview-image-size: 18px !default;
-$treeview-image-margin: 0 0 0 6px !default;
+$treeview-image-margin: 0 0 0 12px !default;
 $treeview-navigable-icon-image-margin: 0 8px 0 0 !default;
 $treeview-navigable-icon-image-margin-reverse: 0 0 0 8px !default;
 $treeview-navigable-check-margin-bigger: 0 0 0 12px !default;
@@ -41,7 +41,7 @@ $treeview-icon-image-margin: 0 0 0 12px !default;
 $treeview-rtl-icon-image-margin: 0 12px 0 0 !default;
 $treeview-check-margin: 0 0 0 4px !default;
 $treeview-rtl-check-margin: 0 4px 0 0 !default;
-$treeview-check-text-padding: 0 12px !default;
+$treeview-check-text-padding: 0 4px !default;
 $treeview-check-image-margin: 0 0 0 4px !default;
 $treeview-rtl-check-image-margin: 0 4px 0 0 !default;
 $treeview-drop-count-border-size: 1px !default;
@@ -57,11 +57,11 @@ $treeview-icon-img-wrap-width: calc(100% - 60px) !default;
 $treeview-big-item-height: 40px !default;
 $treeview-big-text-height: 38px !default;
 $treeview-big-input-height: 40px !default;
-$treeview-big-text-padding: 0 12px !default;
+$treeview-big-text-padding: 0 16px !default;
 $treeview-big-input-padding: 0 9px !default;
 $treeview-big-icon-padding: 0px !default;
-$treeview-big-image-margin: 0 0 0 12px !default;
-$treeview-big-rtl-image-margin: 0 12px 0 0 !default;
+$treeview-big-image-margin: 0 0 0 16px !default;
+$treeview-big-rtl-image-margin: 0 16px 0 0 !default;
 $treeview-big-icon-image-margin: 0 0 0 16px !default;
 $treeview-big-rtl-icon-image-margin: 0 16px 0 0 !default;
 $treeview-big-check-margin: 0 0 0 8px !default;
@@ -72,7 +72,7 @@ $treeview-big-root-ul-padding: 0 0 0 16px !default;
 $treeview-big-rtl-root-ul-padding: 0 16px 0 0 !default;
 $treeview-big-child-ul-padding: 0 0 0 24px !default;
 $treeview-big-rtl-child-ul-padding: 0 24px 0 0 !default;
-$treeview-big-image-text-padding: 0 12px !default;
+$treeview-big-image-text-padding: 0 16px !default;
 $treeview-big-icon-margin: 0 0 0 -16px !default;
 $treeview-big-rtl-icon-margin: 0 -16px 0 0 !default;
 $treeview-big-text-wrap-padding: 0 0 0 24px !default;
@@ -81,7 +81,7 @@ $treeview-big-drag-icon-font-size: $text-2xl !default;
 $treeview-big-drag-item-text-padding-left: 12px !default;
 $treeview-big-drag-icon-margin: -6px 0px 5px -9px !default;
 $treeview-big-drag-before-icon-padding: 6px !default;
-$treeview-big-check-text-padding: 0 12px !default;
+$treeview-big-check-text-padding: 0 8px !default;
 $treeview-big-check-wrap-width: calc(100% - 29px) !default;
 $treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
@@ -389,7 +389,7 @@ $treeview-drag-icon-color: $treeview-icon-color !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/navigations/treeview/highcontrast.scss CHANGED Viewed

@@ -381,7 +381,7 @@ $ripple-width: 32px !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/navigations/treeview/material-dark.scss CHANGED Viewed

@@ -377,7 +377,7 @@ $ripple-width: 32px !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/navigations/treeview/material.scss CHANGED Viewed

@@ -375,7 +375,7 @@ $ripple-width: 32px !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/navigations/treeview/material3-dark.scss CHANGED Viewed

@@ -373,7 +373,7 @@ $treeview-drag-icon-color: rgba($content-text-color-alt1) !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/navigations/treeview/material3.scss CHANGED Viewed

@@ -373,7 +373,7 @@ $treeview-drag-icon-color: rgba($content-text-color-alt1) !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/navigations/treeview/tailwind-dark.scss CHANGED Viewed

@@ -387,7 +387,7 @@ $treeview-drag-icon-color: $treeview-icon-color !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/navigations/treeview/tailwind.scss CHANGED Viewed

@@ -387,7 +387,7 @@ $treeview-drag-icon-color: $treeview-icon-color !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @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 == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }

package/SCSS-Themes/pivotview/pivotfieldlist/bds-dark.scss CHANGED Viewed

@@ -713,6 +713,12 @@ $field-list-adaptive-outerdiv-height: 179px !default;
         &:not(.e-active) {
           .e-list-icon {
             color: $field-list-tree-icon-color;
+            @if ($skin-name == 'fluent2') {
+              &:hover {
+                color: $field-list-icon-hover-color;
+              }
+            }
           }
         }
@@ -724,6 +730,15 @@ $field-list-adaptive-outerdiv-height: 179px !default;
           float: right !important;
           margin: 0 12px 0 0;
           /* stylelint-enable */
+          @if ($skin-name == 'fluent2') {
+            &:hover {
+              color: $field-list-icon-hover-color;
+            }
+            &:active {
+              color: $field-list-icon-hover-color;
+            }
+          }
         }
       }
@@ -788,6 +803,11 @@ $field-list-adaptive-outerdiv-height: 179px !default;
         margin-right: 4px;
         pointer-events: auto;
         width: 20px;
+        @if ($skin-name == 'fluent2') {
+          font-size: 16px;
+          margin-top: 3px;
+        }
       }
       @if ($skin-name == 'tailwind') {
         &.e-active {
@@ -1155,7 +1175,11 @@ $field-list-adaptive-outerdiv-height: 179px !default;
             position: relative;
             top: 3px;
           }
+          @if ($skin-name == 'fluent2') {
+            font-size: 20px;
+          }
           @if ($skin-name == 'tailwind') {
             position: relative;
             top: 1px;
@@ -2697,6 +2721,10 @@ $field-list-adaptive-outerdiv-height: 179px !default;
                 vertical-align: bottom;
                 width: 20px;
+                @if ($skin-name =='fluent2') {
+                  font-size: 16px;
+                }
                 @if ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
                   margin-right: 4px;
                   padding-left: 8px;
@@ -2977,6 +3005,10 @@ $field-list-adaptive-outerdiv-height: 179px !default;
                   height: 20px;
                   width: 20px;
+                  @if ($skin-name =='fluent2') {
+                    font-size: 16px;
+                  }
                   &.e-disable-drag {
                     cursor: not-allowed;
                     opacity: .4;
@@ -3955,6 +3987,11 @@ $field-list-adaptive-outerdiv-height: 179px !default;
           margin-bottom: $field-list-treeview-drag-bigger-padding !important;
           margin-right: 4px !important;
           width: 24px !important;
+          @if ($skin-name =='fluent2') {
+            font-size: 20px !important;
+            margin-bottom: 5px !important;
+          }
         }
         .e-calc-measure-icon,
@@ -4056,6 +4093,10 @@ $field-list-adaptive-outerdiv-height: 179px !default;
               .e-drag {
                 font-size: $field-list-bigger-icon-size;
                 width: 24px;
+                @if ($skin-name =='fluent2') {
+                  font-size: 20px;
+                }
               }
             }
           }

package/SCSS-Themes/pivotview/pivotfieldlist/bds.scss CHANGED Viewed

@@ -713,6 +713,12 @@ $field-list-adaptive-outerdiv-height: 179px !default;
         &:not(.e-active) {
           .e-list-icon {
             color: $field-list-tree-icon-color;
+            @if ($skin-name == 'fluent2') {
+              &:hover {
+                color: $field-list-icon-hover-color;
+              }
+            }
           }
         }
@@ -724,6 +730,15 @@ $field-list-adaptive-outerdiv-height: 179px !default;
           float: right !important;
           margin: 0 12px 0 0;
           /* stylelint-enable */
+          @if ($skin-name == 'fluent2') {
+            &:hover {
+              color: $field-list-icon-hover-color;
+            }
+            &:active {
+              color: $field-list-icon-hover-color;
+            }
+          }
         }
       }
@@ -788,6 +803,11 @@ $field-list-adaptive-outerdiv-height: 179px !default;
         margin-right: 4px;
         pointer-events: auto;
         width: 20px;
+        @if ($skin-name == 'fluent2') {
+          font-size: 16px;
+          margin-top: 3px;
+        }
       }
       @if ($skin-name == 'tailwind') {
         &.e-active {
@@ -1155,7 +1175,11 @@ $field-list-adaptive-outerdiv-height: 179px !default;
             position: relative;
             top: 3px;
           }
+          @if ($skin-name == 'fluent2') {
+            font-size: 20px;
+          }
           @if ($skin-name == 'tailwind') {
             position: relative;
             top: 1px;
@@ -2697,6 +2721,10 @@ $field-list-adaptive-outerdiv-height: 179px !default;
                 vertical-align: bottom;
                 width: 20px;
+                @if ($skin-name =='fluent2') {
+                  font-size: 16px;
+                }
                 @if ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
                   margin-right: 4px;
                   padding-left: 8px;
@@ -2977,6 +3005,10 @@ $field-list-adaptive-outerdiv-height: 179px !default;
                   height: 20px;
                   width: 20px;
+                  @if ($skin-name =='fluent2') {
+                    font-size: 16px;
+                  }
                   &.e-disable-drag {
                     cursor: not-allowed;
                     opacity: .4;
@@ -3955,6 +3987,11 @@ $field-list-adaptive-outerdiv-height: 179px !default;
           margin-bottom: $field-list-treeview-drag-bigger-padding !important;
           margin-right: 4px !important;
           width: 24px !important;
+          @if ($skin-name =='fluent2') {
+            font-size: 20px !important;
+            margin-bottom: 5px !important;
+          }
         }
         .e-calc-measure-icon,
@@ -4056,6 +4093,10 @@ $field-list-adaptive-outerdiv-height: 179px !default;
               .e-drag {
                 font-size: $field-list-bigger-icon-size;
                 width: 24px;
+                @if ($skin-name =='fluent2') {
+                  font-size: 20px;
+                }
               }
             }
           }

package/SCSS-Themes/pivotview/pivotfieldlist/bootstrap-dark.scss CHANGED Viewed

@@ -726,6 +726,12 @@ $olap-bigger-tree-outer-div-width: 325px !default;
         &:not(.e-active) {
           .e-list-icon {
             color: $field-list-tree-icon-color;
+            @if ($skin-name == 'fluent2') {
+              &:hover {
+                color: $field-list-icon-hover-color;
+              }
+            }
           }
         }
@@ -737,6 +743,15 @@ $olap-bigger-tree-outer-div-width: 325px !default;
           float: right !important;
           margin: 0 12px 0 0;
           /* stylelint-enable */
+          @if ($skin-name == 'fluent2') {
+            &:hover {
+              color: $field-list-icon-hover-color;
+            }
+            &:active {
+              color: $field-list-icon-hover-color;
+            }
+          }
         }
       }
@@ -801,6 +816,11 @@ $olap-bigger-tree-outer-div-width: 325px !default;
         margin-right: 4px;
         pointer-events: auto;
         width: 20px;
+        @if ($skin-name == 'fluent2') {
+          font-size: 16px;
+          margin-top: 3px;
+        }
       }
       @if ($skin-name == 'tailwind') {
         &.e-active {
@@ -1168,7 +1188,11 @@ $olap-bigger-tree-outer-div-width: 325px !default;
             position: relative;
             top: 3px;
           }
+          @if ($skin-name == 'fluent2') {
+            font-size: 20px;
+          }
           @if ($skin-name == 'tailwind') {
             position: relative;
             top: 1px;
@@ -2710,6 +2734,10 @@ $olap-bigger-tree-outer-div-width: 325px !default;
                 vertical-align: bottom;
                 width: 20px;
+                @if ($skin-name =='fluent2') {
+                  font-size: 16px;
+                }
                 @if ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
                   margin-right: 4px;
                   padding-left: 8px;
@@ -2990,6 +3018,10 @@ $olap-bigger-tree-outer-div-width: 325px !default;
                   height: 20px;
                   width: 20px;
+                  @if ($skin-name =='fluent2') {
+                    font-size: 16px;
+                  }
                   &.e-disable-drag {
                     cursor: not-allowed;
                     opacity: .4;
@@ -3968,6 +4000,11 @@ $olap-bigger-tree-outer-div-width: 325px !default;
           margin-bottom: $field-list-treeview-drag-bigger-padding !important;
           margin-right: 4px !important;
           width: 24px !important;
+          @if ($skin-name =='fluent2') {
+            font-size: 20px !important;
+            margin-bottom: 5px !important;
+          }
         }
         .e-calc-measure-icon,
@@ -4069,6 +4106,10 @@ $olap-bigger-tree-outer-div-width: 325px !default;
               .e-drag {
                 font-size: $field-list-bigger-icon-size;
                 width: 24px;
+                @if ($skin-name =='fluent2') {
+                  font-size: 20px;
+                }
               }
             }
           }

package/SCSS-Themes/pivotview/pivotfieldlist/bootstrap.scss CHANGED Viewed

@@ -712,6 +712,12 @@ $field-list-adaptive-outerdiv-height: 176px !default;
         &:not(.e-active) {
           .e-list-icon {
             color: $field-list-tree-icon-color;
+            @if ($skin-name == 'fluent2') {
+              &:hover {
+                color: $field-list-icon-hover-color;
+              }
+            }
           }
         }
@@ -723,6 +729,15 @@ $field-list-adaptive-outerdiv-height: 176px !default;
           float: right !important;
           margin: 0 12px 0 0;
           /* stylelint-enable */
+          @if ($skin-name == 'fluent2') {
+            &:hover {
+              color: $field-list-icon-hover-color;
+            }
+            &:active {
+              color: $field-list-icon-hover-color;
+            }
+          }
         }
       }
@@ -787,6 +802,11 @@ $field-list-adaptive-outerdiv-height: 176px !default;
         margin-right: 4px;
         pointer-events: auto;
         width: 20px;
+        @if ($skin-name == 'fluent2') {
+          font-size: 16px;
+          margin-top: 3px;
+        }
       }
       @if ($skin-name == 'tailwind') {
         &.e-active {
@@ -1154,7 +1174,11 @@ $field-list-adaptive-outerdiv-height: 176px !default;
             position: relative;
             top: 3px;
           }
+          @if ($skin-name == 'fluent2') {
+            font-size: 20px;
+          }
           @if ($skin-name == 'tailwind') {
             position: relative;
             top: 1px;
@@ -2696,6 +2720,10 @@ $field-list-adaptive-outerdiv-height: 176px !default;
                 vertical-align: bottom;
                 width: 20px;
+                @if ($skin-name =='fluent2') {
+                  font-size: 16px;
+                }
                 @if ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
                   margin-right: 4px;
                   padding-left: 8px;
@@ -2976,6 +3004,10 @@ $field-list-adaptive-outerdiv-height: 176px !default;
                   height: 20px;
                   width: 20px;
+                  @if ($skin-name =='fluent2') {
+                    font-size: 16px;
+                  }
                   &.e-disable-drag {
                     cursor: not-allowed;
                     opacity: .4;
@@ -3954,6 +3986,11 @@ $field-list-adaptive-outerdiv-height: 176px !default;
           margin-bottom: $field-list-treeview-drag-bigger-padding !important;
           margin-right: 4px !important;
           width: 24px !important;
+          @if ($skin-name =='fluent2') {
+            font-size: 20px !important;
+            margin-bottom: 5px !important;
+          }
         }
         .e-calc-measure-icon,
@@ -4055,6 +4092,10 @@ $field-list-adaptive-outerdiv-height: 176px !default;
               .e-drag {
                 font-size: $field-list-bigger-icon-size;
                 width: 24px;
+                @if ($skin-name =='fluent2') {
+                  font-size: 20px;
+                }
               }
             }
           }