@syncfusion/blazor-themes 21.1.38 → 21.1.39

package/SCSS-Themes/bootstrap-dark.scss

@@ -40073,7 +40073,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') {
@@ -52475,18 +52475,10 @@ $tab-background-text-color: $tab-alt-text-color !default;
 
       .e-popup-up-icon::before {
         content: '\e988';
-
-        @media screen and (max-width: 480px) {
-          content: '\e936';
-        }
       }
 
       .e-popup-down-icon::before {
         content: '\e968';
-
-        @media screen and (max-width: 480px) {
-          content: '\e936';
-        }
       }
     }
 
@@ -89942,6 +89934,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' {
 
@@ -89949,6 +89947,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' {
@@ -108784,7 +108788,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 {
@@ -108801,7 +108807,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%;
       }
 
@@ -115392,6 +115400,10 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
         overflow-y: hidden;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group {
         padding-top: $ribbon-simplified-group-padding;
         height: auto;
@@ -115681,6 +115693,7 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($grey-base, .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 {
@@ -116070,6 +116083,10 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
         height: auto;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group-content {
         height: $ribbon-bigger-simplified-group-content-height;
       }

package/SCSS-Themes/bootstrap.scss

@@ -39813,7 +39813,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') {
@@ -52199,18 +52199,10 @@ $tab-background-text-color: $tab-alt-text-color !default;
 
       .e-popup-up-icon::before {
         content: '\e988';
-
-        @media screen and (max-width: 480px) {
-          content: '\e936';
-        }
       }
 
       .e-popup-down-icon::before {
         content: '\e968';
-
-        @media screen and (max-width: 480px) {
-          content: '\e936';
-        }
       }
     }
 
@@ -89705,6 +89697,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' {
 
@@ -89712,6 +89710,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' {
@@ -108498,7 +108502,9 @@ $schedule-tree-content-color: $shadow !default;
       &.e-left-handler,
       &.e-right-handler {
         height: 100%;
-        width: 10px;
+        min-width: 1px;
+        max-width: 10px;
+        width: 20%;
       }
 
       &.e-left-handler {
@@ -108515,7 +108521,9 @@ $schedule-tree-content-color: $shadow !default;
 
       &.e-top-handler,
       &.e-bottom-handler {
-        height: 10px;
+        min-height: 1px;
+        max-height: 10px;
+        height: 20%;
         width: 100%;
       }
 
@@ -115106,6 +115114,10 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
         overflow-y: hidden;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group {
         padding-top: $ribbon-simplified-group-padding;
         height: auto;
@@ -115395,6 +115407,7 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($grey-base, .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 {
@@ -115784,6 +115797,10 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
         height: auto;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group-content {
         height: $ribbon-bigger-simplified-group-content-height;
       }

package/SCSS-Themes/bootstrap4.scss

@@ -39830,7 +39830,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') {
@@ -52261,18 +52261,6 @@ $tab-background-text-color: $tab-alt-text-color !default;
         content: '\e745';
         position: relative;
       }
-
-      .e-popup-up-icon::before {
-        @media screen and (max-width: 480px) {
-          content: '\e781';
-        }
-      }
-
-      .e-popup-down-icon::before {
-        @media screen and (max-width: 480px) {
-          content: '\e781';
-        }
-      }
     }
 
     &.e-vertical-icon .e-tab-header {
@@ -90026,6 +90014,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' {
 
@@ -90033,6 +90027,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' {
@@ -108882,7 +108882,9 @@ $schedule-tbar-border-hover-color: darken($gray-600, 12.5%) !default;
       &.e-left-handler,
       &.e-right-handler {
         height: 100%;
-        width: 10px;
+        min-width: 1px;
+        max-width: 10px;
+        width: 20%;
       }
 
       &.e-left-handler {
@@ -108899,7 +108901,9 @@ $schedule-tbar-border-hover-color: darken($gray-600, 12.5%) !default;
 
       &.e-top-handler,
       &.e-bottom-handler {
-        height: 10px;
+        min-height: 1px;
+        max-height: 10px;
+        height: 20%;
         width: 100%;
       }
 
@@ -115490,6 +115494,10 @@ $ribbon-overflow-box-shadow: none !default;
         overflow-y: hidden;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group {
         padding-top: $ribbon-simplified-group-padding;
         height: auto;
@@ -115779,6 +115787,7 @@ $ribbon-overflow-box-shadow: none !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 {
@@ -116168,6 +116177,10 @@ $ribbon-overflow-box-shadow: none !default;
         height: auto;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group-content {
         height: $ribbon-bigger-simplified-group-content-height;
       }

package/SCSS-Themes/bootstrap5-dark.scss

@@ -35898,7 +35898,7 @@ $cmenu-back-icon: '\e977' !default;
 $cmenu-back-icon-margin: 8px !default;
 $cmenu-bigger-caret-font-size: $text-base !default;
 $cmenu-bigger-font-size: $text-base !default;
-$cmenu-bigger-li-height: 32px !default;
+$cmenu-bigger-li-height: 36px !default;
 $cmenu-bigger-li-padding: 0 16px !default;
 $cmenu-bigger-max-width: 280px !default;
 $cmenu-bigger-min-width: 112px !default;
@@ -40142,7 +40142,7 @@ $listview-template-focused-multiline-content-color: $content-text-color-selected
         font-size: $listview-header-font-size;
       }
 
-      & .e-icons {
+      & .e-icons:not(.e-primary .e-icon-btn) {
         color: $listview-icon-color;
 
         @if ($skin-name == 'tailwind') {
@@ -52632,18 +52632,6 @@ $tab-background-text-color: $tab-alt-text-color !default;
         content: '\e7e7';
         position: relative;
       }
-
-      .e-popup-up-icon::before {
-        @media screen and (max-width: 480px) {
-          content: '\e770';
-        }
-      }
-
-      .e-popup-down-icon::before {
-        @media screen and (max-width: 480px) {
-          content: '\e770';
-        }
-      }
     }
 
     &.e-vertical-icon .e-tab-header {
@@ -54577,7 +54565,7 @@ $menu-ul-border: none !default;
 $menu-li-hover-outline: 0 solid $menu-li-border-color !default;
 $menu-srollbar-ul-border: none !default;
 $submenu-caret-font-size: $menu-caret-font-size !default;
-$submenu-bigger-caret-font-size: $submenu-caret-font-size !default;
+$submenu-bigger-caret-font-size: $text-base !default;
 $submenu-color: $content-text-color !default;
 $menu-icon-color: $icon-color !default;
 $menu-icon-hover-color: $content-text-color !default;
@@ -90237,6 +90225,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' {
 
@@ -90244,6 +90238,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' {
@@ -109071,7 +109071,9 @@ $schedule-multiple-event-popup-icon-bg-color: $schedule-header-bg-color !default
       &.e-left-handler,
       &.e-right-handler {
         height: 100%;
-        width: 10px;
+        min-width: 1px;
+        max-width: 10px;
+        width: 20%;
       }
 
       &.e-left-handler {
@@ -109088,7 +109090,9 @@ $schedule-multiple-event-popup-icon-bg-color: $schedule-header-bg-color !default
 
       &.e-top-handler,
       &.e-bottom-handler {
-        height: 10px;
+        min-height: 1px;
+        max-height: 10px;
+        height: 20%;
         width: 100%;
       }
 
@@ -115685,6 +115689,10 @@ $ribbon-overflow-box-shadow: none !default;
         overflow-y: hidden;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group {
         padding-top: $ribbon-simplified-group-padding;
         height: auto;
@@ -115974,6 +115982,7 @@ $ribbon-overflow-box-shadow: none !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 {
@@ -116363,6 +116372,10 @@ $ribbon-overflow-box-shadow: none !default;
         height: auto;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group-content {
         height: $ribbon-bigger-simplified-group-content-height;
       }

package/SCSS-Themes/bootstrap5.scss

@@ -35898,7 +35898,7 @@ $cmenu-back-icon: '\e977' !default;
 $cmenu-back-icon-margin: 8px !default;
 $cmenu-bigger-caret-font-size: $text-base !default;
 $cmenu-bigger-font-size: $text-base !default;
-$cmenu-bigger-li-height: 32px !default;
+$cmenu-bigger-li-height: 36px !default;
 $cmenu-bigger-li-padding: 0 16px !default;
 $cmenu-bigger-max-width: 280px !default;
 $cmenu-bigger-min-width: 112px !default;
@@ -40142,7 +40142,7 @@ $listview-template-focused-multiline-content-color: $content-text-color-selected
         font-size: $listview-header-font-size;
       }
 
-      & .e-icons {
+      & .e-icons:not(.e-primary .e-icon-btn) {
         color: $listview-icon-color;
 
         @if ($skin-name == 'tailwind') {
@@ -52632,18 +52632,6 @@ $tab-background-text-color: $tab-alt-text-color !default;
         content: '\e7e7';
         position: relative;
       }
-
-      .e-popup-up-icon::before {
-        @media screen and (max-width: 480px) {
-          content: '\e770';
-        }
-      }
-
-      .e-popup-down-icon::before {
-        @media screen and (max-width: 480px) {
-          content: '\e770';
-        }
-      }
     }
 
     &.e-vertical-icon .e-tab-header {
@@ -54577,7 +54565,7 @@ $menu-ul-border: none !default;
 $menu-li-hover-outline: 0 solid $menu-li-border-color !default;
 $menu-srollbar-ul-border: none !default;
 $submenu-caret-font-size: $menu-caret-font-size !default;
-$submenu-bigger-caret-font-size: $submenu-caret-font-size !default;
+$submenu-bigger-caret-font-size: $text-base !default;
 $submenu-color: $content-text-color !default;
 $menu-icon-color: $icon-color !default;
 $menu-icon-hover-color: $content-text-color !default;
@@ -90237,6 +90225,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' {
 
@@ -90244,6 +90238,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' {
@@ -109071,7 +109071,9 @@ $schedule-multiple-event-popup-icon-bg-color: $schedule-header-bg-color !default
       &.e-left-handler,
       &.e-right-handler {
         height: 100%;
-        width: 10px;
+        min-width: 1px;
+        max-width: 10px;
+        width: 20%;
       }
 
       &.e-left-handler {
@@ -109088,7 +109090,9 @@ $schedule-multiple-event-popup-icon-bg-color: $schedule-header-bg-color !default
 
       &.e-top-handler,
       &.e-bottom-handler {
-        height: 10px;
+        min-height: 1px;
+        max-height: 10px;
+        height: 20%;
         width: 100%;
       }
 
@@ -115685,6 +115689,10 @@ $ribbon-overflow-box-shadow: none !default;
         overflow-y: hidden;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group {
         padding-top: $ribbon-simplified-group-padding;
         height: auto;
@@ -115974,6 +115982,7 @@ $ribbon-overflow-box-shadow: none !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 {
@@ -116363,6 +116372,10 @@ $ribbon-overflow-box-shadow: none !default;
         height: auto;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group-content {
         height: $ribbon-bigger-simplified-group-content-height;
       }

package/SCSS-Themes/fabric-dark.scss

@@ -39927,7 +39927,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') {
@@ -52357,18 +52357,10 @@ $tab-background-text-color: $tab-alt-text-color !default;
 
       .e-popup-up-icon::before {
         content: '\e85e';
-
-        @media screen and (max-width: 480px) {
-          content: '\e976';
-        }
       }
 
       .e-popup-down-icon::before {
         content: '\e84f';
-
-        @media screen and (max-width: 480px) {
-          content: '\e976';
-        }
       }
     }
 
@@ -89782,6 +89774,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' {
 
@@ -89789,6 +89787,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' {
@@ -108579,7 +108583,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 {
@@ -108596,7 +108602,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%;
       }
 
@@ -115187,6 +115195,10 @@ $ribbon-overflow-box-shadow: 0 2px 5px 0 rgba($shadow, .26) !default;
         overflow-y: hidden;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group {
         padding-top: $ribbon-simplified-group-padding;
         height: auto;
@@ -115476,6 +115488,7 @@ $ribbon-overflow-box-shadow: 0 2px 5px 0 rgba($shadow, .26) !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 {
@@ -115865,6 +115878,10 @@ $ribbon-overflow-box-shadow: 0 2px 5px 0 rgba($shadow, .26) !default;
         height: auto;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group-content {
         height: $ribbon-bigger-simplified-group-content-height;
       }