@syncfusion/blazor-themes 24.1.43 → 24.1.45

package/SCSS-Themes/material.scss

@@ -24565,12 +24565,22 @@ $btn-focus-box-shadow: none !default;
           @if $skin-name == 'FluentUI' {
             outline: none !important; /* stylelint-disable-line declaration-no-important */
           }
+
+          @if $skin-name == 'bootstrap5' {
+            background: $btn-outline-active-bgcolor;
+            color: $btn-outline-active-color;
+          }
         }
 
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
             background: $btn-outline-bgcolor;
           }
+
+          @if $skin-name == 'bootstrap5' {
+            box-shadow: $btn-focus-box-shadow;
+          }
+
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
             box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24621,12 +24631,22 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-outline-primary-focus-bgcolor;
+              color: $btn-outline-active-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-primary-focus-box-shadow;
+            }
+
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24684,12 +24704,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-success-bgcolor;
+              color: $btn-success-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-success-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24747,12 +24775,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-info-bgcolor;
+              color: $btn-info-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-info-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24810,12 +24846,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-warning-bgcolor;
+              color: $btn-warning-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-warning-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24873,12 +24917,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-danger-bgcolor;
+              color: $btn-danger-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-danger-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -59268,6 +59320,11 @@ $ddt-bigger-outline-chip-padding: 8px 15px !default;
       }
     }
 
+    &.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon,
+    &.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
+      display: flex;
+    }
+
     .e-chips-wrapper {
       width: 100%;
     }
@@ -83647,6 +83704,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;
@@ -85312,7 +85378,8 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
         }
 
         &.e-active,
-        &.e-hover {
+        &.e-hover,
+        &:hover {
           @include visibility(visible);
         }
       }
@@ -85960,7 +86027,8 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
           margin: $fe-mobile-lg-item-margin;
           width: $fe-mobile-lg-item-width;
 
-          &.e-hover {
+          &.e-hover,
+          &:hover {
             @include visibility(hidden);
           }
 
@@ -86871,11 +86939,13 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
           @include active-item;
         }
 
-        &.e-hover {
+        &.e-hover,
+        &:hover {
           @include hover-item($fe-hover-bg-color, $fe-hover-border-color);
         }
 
-        &.e-active.e-hover {
+        &.e-active.e-hover,
+        &.e-active:hover {
           @include hover-item($fe-ah-bg-color, $fe-ah-border-color);
         }
 
@@ -86883,7 +86953,8 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
           border-color: $fe-focus-border-color;
         }
 
-        &.e-hover.e-fe-drop-folder {
+        &.e-hover.e-fe-drop-folder,
+        &:hover.e-fe-drop-folder {
           border-color: $fe-drop-folder-bg-color;
         }
       }
@@ -86923,7 +86994,8 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
 
         .e-large-icon {
 
-          &.e-hover {
+          &.e-hover,
+          &:hover {
             @include hover-item(transparent, transparent);
           }
 
@@ -89998,6 +90070,20 @@ $btn-flat-primary-path-arc: none;
   }
 }
 
+.e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
+  fill: $btn-outline-color;
+  stroke: $btn-outline-color;
+}
+
+.e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
+  fill: $btn-color;
+  stroke: $btn-color;
+}
+
+.e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
+  stroke: $btn-outline-color;
+}
+
 
 
 
@@ -115624,6 +115710,10 @@ $qrybldr-btngrp-brdr-radius: 2px !default;
     border-top: $qrybldr-val-error-border;
   }
 
+  .e-qb-ddt.e-ddt .e-prevent .e-fullrow {
+    cursor: default !important; /* stylelint-disable-line declaration-no-important */
+  }
+
   .e-dropdown-popup {
 
     & .e-addgroup {
@@ -121897,9 +121987,11 @@ $image-editor-dropdown-btn-preview-top: -4px !default;
 $image-editor-dropdown-btn-preview-left: -1px !default;
 $image-editor-bigger-dropdown-btn-preview-top: -3px !default;
 $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
-$image-editor-slider-handler: calc(50% - 6px) !default;
+$image-editor-slider-handler: calc(50% - 7px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 7px) !default;
 $image-editor-device-slider-handler: calc(50% - 5px) !default;
+$image-editor-finetune-value-span: 31% !default;
+$image-editor-finetune-span: 31% !default;
 
 @include export-module('image-editor-layout') {
 
@@ -122375,18 +122467,17 @@ $image-editor-device-slider-handler: calc(50% - 5px) !default;
     }
   }
   .e-ie-straighten-value-span,
-  .e-ie-straighten-span {
-    font-size: 14px;
+  .e-ie-straighten-span,
+  .e-ie-toolbar-straighten {
+    font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
     padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
     padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
     height: auto;
-    @if $skin-name == 'Material3' {
-      margin-left: 8px;
-      padding-right: 2px;
-    }
+    margin-left: 8px;
+    padding-right: 2px;
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -122406,6 +122497,26 @@ $image-editor-device-slider-handler: calc(50% - 5px) !default;
     }
   }
 
+  .e-ie-finetune-value-span {
+    top: $image-editor-finetune-value-span !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-ie-finetune-slider-label {
+    top: $image-editor-finetune-span !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-ie-finetune-slider-wrap {
+    top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-transparency-slider-wrap {
+    top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-ie-slider-wrap {
+    top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+
   .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
     @if $skin-name == 'Material3' {
       height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -122422,6 +122533,18 @@ $image-editor-device-slider-handler: calc(50% - 5px) !default;
   .e-dropdown-popup.e-ie-ddb-popup {
     background: none !important; /* stylelint-disable-line declaration-no-important */
   }
+
+  .e-device.e-image-editor .e-ie-device-transparency-slider {
+    margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-device.e-image-editor {
+    .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
+      @if $skin-name == 'Material' {
+        top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+  }
 }
 
 

package/SCSS-Themes/material3-dark.scss

@@ -24911,12 +24911,22 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
           @if $skin-name == 'FluentUI' {
             outline: none !important; /* stylelint-disable-line declaration-no-important */
           }
+
+          @if $skin-name == 'bootstrap5' {
+            background: $btn-outline-active-bgcolor;
+            color: $btn-outline-active-color;
+          }
         }
 
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
             background: $btn-outline-bgcolor;
           }
+
+          @if $skin-name == 'bootstrap5' {
+            box-shadow: $btn-focus-box-shadow;
+          }
+
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
             box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24967,12 +24977,22 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-outline-primary-focus-bgcolor;
+              color: $btn-outline-active-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-primary-focus-box-shadow;
+            }
+
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25030,12 +25050,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-success-bgcolor;
+              color: $btn-success-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-success-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25093,12 +25121,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-info-bgcolor;
+              color: $btn-info-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-info-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25156,12 +25192,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-warning-bgcolor;
+              color: $btn-warning-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-warning-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25219,12 +25263,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-danger-bgcolor;
+              color: $btn-danger-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-danger-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -59626,6 +59678,11 @@ $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
       }
     }
 
+    &.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon,
+    &.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
+      display: flex;
+    }
+
     .e-chips-wrapper {
       width: 100%;
     }
@@ -84148,6 +84205,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;
@@ -85857,7 +85923,8 @@ $fe-drop-folder-bg-color: rgba($primary) !default;
         }
 
         &.e-active,
-        &.e-hover {
+        &.e-hover,
+        &:hover {
           @include visibility(visible);
         }
       }
@@ -86505,7 +86572,8 @@ $fe-drop-folder-bg-color: rgba($primary) !default;
           margin: $fe-mobile-lg-item-margin;
           width: $fe-mobile-lg-item-width;
 
-          &.e-hover {
+          &.e-hover,
+          &:hover {
             @include visibility(hidden);
           }
 
@@ -87416,11 +87484,13 @@ $fe-drop-folder-bg-color: rgba($primary) !default;
           @include active-item;
         }
 
-        &.e-hover {
+        &.e-hover,
+        &:hover {
           @include hover-item($fe-hover-bg-color, $fe-hover-border-color);
         }
 
-        &.e-active.e-hover {
+        &.e-active.e-hover,
+        &.e-active:hover {
           @include hover-item($fe-ah-bg-color, $fe-ah-border-color);
         }
 
@@ -87428,7 +87498,8 @@ $fe-drop-folder-bg-color: rgba($primary) !default;
           border-color: $fe-focus-border-color;
         }
 
-        &.e-hover.e-fe-drop-folder {
+        &.e-hover.e-fe-drop-folder,
+        &:hover.e-fe-drop-folder {
           border-color: $fe-drop-folder-bg-color;
         }
       }
@@ -87468,7 +87539,8 @@ $fe-drop-folder-bg-color: rgba($primary) !default;
 
         .e-large-icon {
 
-          &.e-hover {
+          &.e-hover,
+          &:hover {
             @include hover-item(transparent, transparent);
           }
 
@@ -87798,7 +87870,7 @@ $form-group-title-border-height: 1px !default;
 $form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
 
 //tooltip styles
-$form-tooltip-background-color: $danger-light !default;
+$form-tooltip-background-color: var(--danger-light, #f9dedc) !default;
 $form-tooltip-color: var(--danger, #b3261e) !default;
 $form-validation-message-font-size: 12px;
 
@@ -90542,6 +90614,20 @@ $btn-flat-primary-path-arc: rgba($white);
   }
 }
 
+.e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
+  fill: $btn-outline-color;
+  stroke: $btn-outline-color;
+}
+
+.e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
+  fill: $btn-color;
+  stroke: $btn-color;
+}
+
+.e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
+  stroke: $btn-outline-color;
+}
+
 
 
 
@@ -116198,6 +116284,10 @@ $qrybldr-icon-color: rgba($icon-color) !default;
     border-top: $qrybldr-val-error-border;
   }
 
+  .e-qb-ddt.e-ddt .e-prevent .e-fullrow {
+    cursor: default !important; /* stylelint-disable-line declaration-no-important */
+  }
+
   .e-dropdown-popup {
 
     & .e-addgroup {
@@ -122486,6 +122576,8 @@ $image-editor-bigger-dropdown-btn-preview-left: -7px !default;
 $image-editor-slider-handler: calc(50% - 8px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 10px) !default;
 $image-editor-device-slider-handler: calc(50% - 8px) !default;
+$image-editor-finetune-value-span: 29% !default;
+$image-editor-finetune-span: 28% !default;
 
 @include export-module('image-editor-layout') {
 
@@ -122961,18 +123053,17 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
     }
   }
   .e-ie-straighten-value-span,
-  .e-ie-straighten-span {
-    font-size: 14px;
+  .e-ie-straighten-span,
+  .e-ie-toolbar-straighten {
+    font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
     padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
     padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
     height: auto;
-    @if $skin-name == 'Material3' {
-      margin-left: 8px;
-      padding-right: 2px;
-    }
+    margin-left: 8px;
+    padding-right: 2px;
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -122992,6 +123083,26 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
     }
   }
 
+  .e-ie-finetune-value-span {
+    top: $image-editor-finetune-value-span !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-ie-finetune-slider-label {
+    top: $image-editor-finetune-span !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-ie-finetune-slider-wrap {
+    top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-transparency-slider-wrap {
+    top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-ie-slider-wrap {
+    top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+
   .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
     @if $skin-name == 'Material3' {
       height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -123008,6 +123119,18 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
   .e-dropdown-popup.e-ie-ddb-popup {
     background: none !important; /* stylelint-disable-line declaration-no-important */
   }
+
+  .e-device.e-image-editor .e-ie-device-transparency-slider {
+    margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-device.e-image-editor {
+    .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
+      @if $skin-name == 'Material' {
+        top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+  }
 }