@syncfusion/blazor-themes 21.1.37 → 21.1.39

package/SCSS-Themes/highcontrast.scss

@@ -39809,7 +39809,7 @@ $listview-template-multiline-avatar-top: .6153em !default;
         font-size: $listview-header-font-size;
       }
 
-      & .e-icons {
+      & .e-icons:not(.e-primary .e-icon-btn) {
         color: $listview-icon-color;
 
         @if ($skin-name == 'tailwind') {
@@ -52255,18 +52255,6 @@ $tab-background-text-color: $tab-alt-text-color !default;
         content: '\e7fc';
         position: relative;
       }
-
-      .e-popup-up-icon::before {
-        @media screen and (max-width: 480px) {
-          content: '\e976';
-        }
-      }
-
-      .e-popup-down-icon::before {
-        @media screen and (max-width: 480px) {
-          content: '\e976';
-        }
-      }
     }
 
     &.e-vertical-icon .e-tab-header {
@@ -76073,11 +76061,6 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.sf-grid {
-
-      .e-table {
-        border-spacing: .25px;
-      }
-
       span.e-ungroupbutton.e-icons {
         margin-left: $grid-group-ungroupicon-margin-left;
       }
@@ -76262,7 +76245,9 @@ $grid-dropitems-count-margin-left: -8px !default;
 }
 
 #{&}.e-grid-min-height {
-  .e-rowcell {
+  .e-rowcell,
+  .e-icon-grightarrow,
+  .e-icon-gdownarrow {
     line-height: 0;
     padding-bottom: 0;
     padding-top: 0;
@@ -89786,6 +89771,12 @@ $editor-btn-icon-color: $content-font !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -89793,6 +89784,12 @@ $editor-btn-icon-color: $content-font !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {
@@ -108572,7 +108569,9 @@ $schedule-tree-content-color: #fff !default;
       &.e-left-handler,
       &.e-right-handler {
         height: 100%;
-        width: 10px;
+        min-width: 1px;
+        max-width: 10px;
+        width: 20%;
       }
 
       &.e-left-handler {
@@ -108589,7 +108588,9 @@ $schedule-tree-content-color: #fff !default;
 
       &.e-top-handler,
       &.e-bottom-handler {
-        height: 10px;
+        min-height: 1px;
+        max-height: 10px;
+        height: 20%;
         width: 100%;
       }
 
@@ -112348,7 +112349,9 @@ $schedule-tree-content-color: #fff !default;
         background: $schedule-current-date-bg-color;
         border-radius: 50%;
         color: $schedule-current-date-header-font-color;
-        width: 20px;
+        min-width: 20px;
+        padding: 0 4px;
+        width: fit-content;
       }
 
       .e-selected-cell {
@@ -112384,7 +112387,7 @@ $schedule-tree-content-color: #fff !default;
       }
 
       .e-current-date .e-date-header {
-        width: 24px;
+        min-width: 24px;
       }
     }
 
@@ -114954,10 +114957,6 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
         display: none;
       }
 
-      .e-item {
-        width: fit-content;
-      }
-
       .e-ribbon-file-menu {
         position: absolute;
         line-height: $ribbon-file-menu-height;
@@ -115063,6 +115062,12 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
         }
       }
 
+      .e-hscroll.e-scroll-device {
+        .e-scroll-nav.e-scroll-right-nav {
+          box-shadow: none;
+        }
+      }
+
       .e-hscroll {
         padding: $ribbon-hscroll-padding;
 
@@ -115072,6 +115077,7 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
           min-width: auto;
           width: auto;
           border-style: solid;
+          transform: none;
           border-width: $ribbon-hscroll-nav-border-width;
           border-radius: $ribbon-hscroll-nav-border-radius;
           z-index: 3;
@@ -115083,6 +115089,7 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
           .e-nav-arrow {
             font-size: $ribbon-nav-arrow-size;
             height: auto;
+            transform: none;
             line-height: $ribbon-nav-arrow-height;
             padding: $ribbon-hscroll-nav-arrow-padding;
             width: auto;
@@ -115174,6 +115181,10 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
         overflow-y: hidden;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group {
         padding-top: $ribbon-simplified-group-padding;
         height: auto;
@@ -115237,6 +115248,10 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
       .e-tab-header {
         left: var(--fileMenuWidth);
       }
+
+      .e-ribbon-tab .e-hscroll.e-scroll-device {
+        padding-right: 30px;
+      }
     }
 
     &.e-rtl {
@@ -115254,6 +115269,10 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
       .e-tab-header {
         right: var(--fileMenuWidth);
       }
+
+      .e-ribbon-tab .e-hscroll.e-scroll-device {
+        padding-left: 30px;
+      }
     }
   }
 
@@ -115455,6 +115474,7 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
 
       .e-colorpicker-wrapper {
         border: 1px solid transparent;
+        border-radius: $ribbon-items-border-radius;
 
         .e-split-btn-wrapper.e-rtl .e-split-colorpicker {
           &.e-split-btn {
@@ -115601,8 +115621,12 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
 
     .e-ribbon-overflow-target {
 
-      .e-ribbon-item > .e-input-group {
-        margin: $ribbon-overflow-wrapper-item-margin;
+      .e-ribbon-item {
+
+        & > .e-input-group,
+        .e-ribbon-template {
+          margin: $ribbon-overflow-wrapper-item-margin;
+        }
       }
 
       .e-ribbon-item > .e-checkbox-wrapper {
@@ -115628,14 +115652,6 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
           width: 100%;
           justify-content: flex-start;
         }
-
-        >.e-split-btn-wrapper,
-        >.e-dropdown-btn {
-          .e-icons.e-caret {
-            transform: rotate(-90deg);
-            margin-left: auto;
-          }
-        }
       }
 
       .e-ribbon-overflow-header {
@@ -115646,6 +115662,20 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
     }
   }
 
+  .e-ribbon-group-overflow-ddb:not(.e-rtl) {
+    .e-ribbon-overflow-target .e-ribbon-item {
+
+      >.e-split-btn-wrapper,
+      >.e-dropdown-btn {
+        .e-icons.e-caret {
+          transform: rotate(-90deg);
+          padding: $ribbon-items-margin;
+          margin: 0 0 0 auto;
+        }
+      }
+    }
+  }
+
   .e-rtl.e-ribbon-group-overflow-ddb {
     .e-ribbon-overflow-target .e-ribbon-item {
 
@@ -115653,8 +115683,8 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
       >.e-dropdown-btn {
         .e-icons.e-caret {
           transform: rotate(90deg);
-          margin-right: auto;
-          margin-left: unset;
+          padding: $ribbon-items-margin;
+          margin: 0 auto 0 0;
         }
       }
     }
@@ -115834,6 +115864,10 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
         height: auto;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group-content {
         height: $ribbon-bigger-simplified-group-content-height;
       }
@@ -115957,8 +115991,12 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
   .e-bigger.e-ribbon-group-overflow-ddb {
     .e-ribbon-overflow-target {
 
-      .e-ribbon-item > .e-input-group {
-        margin: $ribbon-bigger-overflow-wrapper-item-margin;
+      .e-ribbon-item {
+
+        & > .e-input-group,
+        .e-ribbon-template {
+          margin: $ribbon-bigger-overflow-wrapper-item-margin;
+        }
       }
 
       .e-ribbon-item > .e-checkbox-wrapper {
@@ -115966,6 +116004,30 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
         padding: 0;
       }
     }
+
+    &:not(.e-rtl) {
+      .e-ribbon-overflow-target .e-ribbon-item {
+
+        >.e-split-btn-wrapper,
+        >.e-dropdown-btn {
+          .e-icons.e-caret {
+            padding: $ribbon-bigger-items-margin;
+          }
+        }
+      }
+    }
+
+    &.e-rtl {
+      .e-ribbon-overflow-target .e-ribbon-item {
+
+        >.e-split-btn-wrapper,
+        >.e-dropdown-btn {
+          .e-icons.e-caret {
+            padding: $ribbon-bigger-items-margin;
+          }
+        }
+      }
+    }
   }
 
   .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical,

package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap-dark.scss

@@ -921,6 +921,12 @@ $editor-btn-icon-color: $grey-dark-font !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -928,6 +934,12 @@ $editor-btn-icon-color: $grey-dark-font !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap.scss

@@ -922,6 +922,12 @@ $editor-btn-icon-color: $grey-light-font !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -929,6 +935,12 @@ $editor-btn-icon-color: $grey-light-font !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap4.scss

@@ -922,6 +922,12 @@ $editor-btn-icon-color: $gray-700 !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -929,6 +935,12 @@ $editor-btn-icon-color: $gray-700 !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap5-dark.scss

@@ -916,6 +916,12 @@ $editor-btn-icon-color: $icon-color !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -923,6 +929,12 @@ $editor-btn-icon-color: $icon-color !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap5.scss

@@ -916,6 +916,12 @@ $editor-btn-icon-color: $icon-color !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -923,6 +929,12 @@ $editor-btn-icon-color: $icon-color !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/inplace-editor/inplace-editor/fabric-dark.scss

@@ -921,6 +921,12 @@ $editor-btn-icon-color: $neutral-light-fontalt !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -928,6 +934,12 @@ $editor-btn-icon-color: $neutral-light-fontalt !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/inplace-editor/inplace-editor/fabric.scss

@@ -922,6 +922,12 @@ $editor-btn-icon-color: $neutral-light-font !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -929,6 +935,12 @@ $editor-btn-icon-color: $neutral-light-font !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/inplace-editor/inplace-editor/fluent-dark.scss

@@ -917,6 +917,12 @@ $editor-btn-icon-color: $icon-color !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -924,6 +930,12 @@ $editor-btn-icon-color: $icon-color !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/inplace-editor/inplace-editor/fluent.scss

@@ -917,6 +917,12 @@ $editor-btn-icon-color: $icon-color !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -924,6 +930,12 @@ $editor-btn-icon-color: $icon-color !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/inplace-editor/inplace-editor/highcontrast.scss

@@ -921,6 +921,12 @@ $editor-btn-icon-color: $content-font !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -928,6 +934,12 @@ $editor-btn-icon-color: $content-font !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/inplace-editor/inplace-editor/material-dark.scss

@@ -922,6 +922,12 @@ $editor-btn-icon-color: $grey-dark-font !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -929,6 +935,12 @@ $editor-btn-icon-color: $grey-dark-font !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/inplace-editor/inplace-editor/material.scss

@@ -922,6 +922,12 @@ $editor-btn-icon-color: rgba($grey-light-font, .54) !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -929,6 +935,12 @@ $editor-btn-icon-color: rgba($grey-light-font, .54) !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/inplace-editor/inplace-editor/tailwind-dark.scss

@@ -917,6 +917,12 @@ $editor-btn-icon-color: $icon-color !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -924,6 +930,12 @@ $editor-btn-icon-color: $icon-color !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/inplace-editor/inplace-editor/tailwind.scss

@@ -917,6 +917,12 @@ $editor-btn-icon-color: $icon-color !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -924,6 +930,12 @@ $editor-btn-icon-color: $icon-color !default;
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/lists/list-view/bootstrap-dark.scss

@@ -731,7 +731,7 @@ $listview-template-multiline-avatar-top: .7142em !default;
         font-size: $listview-header-font-size;
       }
 
-      & .e-icons {
+      & .e-icons:not(.e-primary .e-icon-btn) {
         color: $listview-icon-color;
 
         @if ($skin-name == 'tailwind') {