@syncfusion/blazor-themes 24.1.44 → 24.1.46

package/SCSS-Themes/bootstrap4.scss

@@ -2774,6 +2774,11 @@ $ddl-bigger-small-list-font-size: 14px !default;
     }
   }
 
+  .e-popup.e-ddl-device.e-popup-close {
+    display: block;
+    visibility: hidden;
+  }
+
   .e-popup-full-page {
     bottom: 0;
     left: 0;
@@ -21518,8 +21523,8 @@ $btn-border-color: $gray-600 !default;
 $btn-hover-bgcolor: darken($gray-600, 7.5%) !default;
 $btn-hover-border-color: darken($gray-600, 10%) !default;
 $btn-hover-color: $white !default;
-$btn-focus-bgcolor: $gray-600 !default;
-$btn-focus-border-color: $gray-600 !default;
+$btn-focus-bgcolor: darken($gray-600, 7%) !default;
+$btn-focus-border-color: darken($gray-600, 5%) !default;
 $btn-focus-color: $white !default;
 $btn-active-border-color: darken($gray-600, 12.5%) !default;
 $btn-active-bgcolor: darken($gray-600, 10%) !default;
@@ -21564,9 +21569,9 @@ $btn-primary-hover-bgcolor: darken($primary, 7.5%) !default;
 $btn-primary-active-bgcolor: darken($primary, 10%) !default;
 $btn-primary-border-color:  $primary !default;
 $btn-primary-hover-border-color: darken($primary, 10%) !default;
-$btn-primary-focus-border-color: $primary !default;
+$btn-primary-focus-border-color: darken($primary, 5%) !default;
 $btn-primary-active-border-color: darken($primary, 12.5%) !default;
-$btn-primary-focus-bgcolor: $primary !default;
+$btn-primary-focus-bgcolor: darken($primary, 7%) !default;
 $btn-primary-disabled-bgcolor: rgba($btn-primary-bgcolor, .65) !default;
 $btn-primary-disabled-color: $white !default;
 $btn-primary-disabled-border-color: transparent !default;
@@ -21626,11 +21631,11 @@ $btn-ripple-flat-danger-bgcolor: transparent !default;
 $btn-success-color: $white !default;
 $btn-success-bgcolor: $success !default;
 $btn-success-hover-bgcolor: darken($success, 7.5%) !default;
-$btn-success-focus-bgcolor: $success !default;
+$btn-success-focus-bgcolor: darken($success, 7%) !default;
 $btn-success-active-bgcolor: darken($success, 10%) !default;
 $btn-success-border-color: $success !default;
 $btn-success-hover-border-color: darken($success, 10%) !default;
-$btn-success-focus-border-color: $success !default;
+$btn-success-focus-border-color: darken($success, 5%) !default;
 $btn-success-active-border-color: darken($success, 12.5%) !default;
 $btn-success-disabled-bgcolor: rgba($btn-success-bgcolor, .65) !default;
 $btn-success-disabled-color: $white !default;
@@ -21646,11 +21651,11 @@ $btn-warning-bgcolor: $warning !default;
 $btn-warning-color: $gray-900 !default;
 $btn-warning-hover-color: $gray-900 !default;
 $btn-warning-hover-bgcolor: darken($warning, 7.5%) !default;
-$btn-warning-focus-bgcolor: $warning !default;
+$btn-warning-focus-bgcolor: darken($warning, 7%) !default;
 $btn-warning-active-bgcolor: darken($warning, 10%) !default;
 $btn-warning-border-color: $warning !default;
 $btn-warning-hover-border-color: darken($warning, 10%) !default;
-$btn-warning-focus-border-color: $warning !default;
+$btn-warning-focus-border-color: darken($warning, 5%) !default;
 $btn-warning-focus-color: $gray-900 !default;
 $btn-warning-active-color: $gray-900 !default;
 $btn-warning-active-border-color: darken($warning, 12.5%) !default;
@@ -21664,12 +21669,12 @@ $btn-ripple-warning-bgcolor: transparent !default;
 $btn-danger-color: $white !default;
 $btn-danger-bgcolor: $danger !default;
 $btn-danger-hover-bgcolor: darken($danger, 7.5%) !default;
-$btn-danger-focus-bgcolor: $danger !default;
+$btn-danger-focus-bgcolor: darken($danger, 7%) !default;
 $btn-danger-active-bgcolor: darken($danger, 10%) !default;
 $btn-danger-active-color: $white !default;
 $btn-danger-border-color: $danger !default;
 $btn-danger-hover-border-color: darken($danger, 10%) !default;
-$btn-danger-focus-border-color: $danger !default;
+$btn-danger-focus-border-color: darken($danger, 5%) !default;
 $btn-danger-active-border-color: darken($danger, 12.5%) !default;
 $btn-danger-disabled-bgcolor: rgba($btn-danger-bgcolor, .65) !default;
 $btn-danger-disabled-color: $white !default;
@@ -21682,11 +21687,11 @@ $btn-ripple-danger-bgcolor: transparent !default;
 $btn-info-bgcolor: $info !default;
 $btn-info-color: $white !default;
 $btn-info-hover-bgcolor: darken($info, 7.5%) !default;
-$btn-info-focus-bgcolor: $info !default;
+$btn-info-focus-bgcolor: darken($info, 7%) !default;
 $btn-info-active-bgcolor: darken($info, 10%) !default;
 $btn-info-border-color: $info !default;
 $btn-info-hover-border-color: darken($info, 10%) !default;
-$btn-info-focus-border-color: $info !default;
+$btn-info-focus-border-color: darken($info, 5%) !default;
 $btn-info-active-border-color: darken($info, 12.5%) !default;
 $btn-info-disabled-bgcolor: rgba($btn-info-bgcolor, .65) !default;
 $btn-info-disabled-color: $white !default;
@@ -22571,11 +22576,7 @@ $btn-focus-box-shadow: none !default;
     outline: $btn-active-outline;
     outline-offset: $btn-active-outline-offset;
   }
-  @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-active-bgcolor, 50%), $btn-active-border-color, 15%), .5);
-    box-shadow: 0 0 0 .25em $color-rgba;
-  }
-  @else if $skin-name != 'bootstrap5' {
+  @else if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' {
     box-shadow: $btn-active-box-shadow;
   }
 }
@@ -22607,11 +22608,7 @@ $btn-focus-box-shadow: none !default;
   @if $skin-name != 'FluentUI' {
     outline: $btn-active-outline;
   }
-  @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-primary-active-bgcolor, 50%), $btn-primary-active-border-color, 15%), .5);
-    box-shadow: 0 0 0 .25em $color-rgba;
-  }
-  @else if $skin-name != 'bootstrap5' {
+  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' {
     box-shadow: $btn-active-box-shadow;
   }
 }
@@ -22648,13 +22645,11 @@ $btn-focus-box-shadow: none !default;
   @if $skin-name == 'bootstrap4' {
     background: $btn-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-outline-active-bgcolor, 50%), $btn-outline-active-border-color, 15%), .5);
-    box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else {
     background: $btn-outline-active-bgcolor;
     border-color: $btn-outline-active-border-color;
-    @if $skin-name != 'bootstrap5' {
+    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' {
       box-shadow: $btn-outline-active-box-shadow;
     }
   }
@@ -22683,8 +22678,6 @@ $btn-focus-box-shadow: none !default;
   @if $skin-name == 'bootstrap4' {
     background: $btn-primary-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-primary-active-bgcolor, 50%), $btn-outline-primary-active-border-color, 15%), .5);
-    box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'bootstrap5') {
     background: $btn-primary-bgcolor;
@@ -22692,7 +22685,7 @@ $btn-focus-box-shadow: none !default;
   @else {
     background: $btn-primary-active-bgcolor;
     border-color: $btn-outline-primary-active-border-color;
-    @if $skin-name != 'bootstrap5' {
+    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' {
       box-shadow: $btn-outline-active-box-shadow;
     }
   }
@@ -22726,13 +22719,11 @@ $btn-focus-box-shadow: none !default;
   @if $skin-name == 'bootstrap4' {
     background: $btn-success-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-success-active-bgcolor, 50%), $btn-success-active-border-color, 15%), .5);
-    box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else {
     background: $btn-success-active-bgcolor;
     border-color: $btn-success-active-border-color;
-    @if $skin-name != 'bootstrap5' {
+    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' {
       box-shadow: $btn-outline-active-box-shadow;
     }
   }
@@ -22766,8 +22757,6 @@ $btn-focus-box-shadow: none !default;
   @if $skin-name == 'bootstrap4' {
     background: $btn-info-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-info-active-bgcolor, 50%), $btn-info-active-border-color, 15%), .5);
-    box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'bootstrap5') {
     background: $btn-info-bgcolor;
@@ -22775,7 +22764,7 @@ $btn-focus-box-shadow: none !default;
   @else {
     background: $btn-info-active-bgcolor;
     border-color: $btn-info-active-border-color;
-    @if $skin-name != 'bootstrap5' {
+    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' {
       box-shadow: $btn-outline-active-box-shadow;
     }
   }
@@ -22809,13 +22798,11 @@ $btn-focus-box-shadow: none !default;
   @if $skin-name == 'bootstrap4' {
     background: $btn-warning-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-warning-active-bgcolor, 50%), $btn-warning-active-border-color, 15%), .5);
-    box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else {
     background: $btn-warning-active-bgcolor;
     border-color: $btn-warning-active-border-color;
-    @if $skin-name != 'bootstrap5' {
+    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' {
       box-shadow: $btn-outline-active-box-shadow;
     }
   }
@@ -22849,13 +22836,11 @@ $btn-focus-box-shadow: none !default;
   @if $skin-name == 'bootstrap4' {
     background: $btn-danger-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-danger-active-bgcolor, 50%), $btn-danger-active-border-color, 15%), .5);
-    box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else {
     background: $btn-danger-active-bgcolor;
     border-color: $btn-danger-active-border-color;
-    @if $skin-name != 'bootstrap5' {
+    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' {
       box-shadow: $btn-outline-active-box-shadow;
     }
   }
@@ -22967,11 +22952,7 @@ $btn-focus-box-shadow: none !default;
   background: $btn-success-active-bgcolor;
   border-color: $btn-success-active-border-color;
   color: $btn-success-active-color;
-  @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-success-active-bgcolor, 50%), $btn-success-active-border-color, 15%), .5);
-    box-shadow: 0 0 0 .25em $color-rgba;
-  }
-  @else if $skin-name != 'bootstrap5' {
+  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' {
     box-shadow: $btn-active-box-shadow;
   }
 }
@@ -23004,11 +22985,7 @@ $btn-focus-box-shadow: none !default;
   @else {
     border-color: $btn-info-active-border-color;
   }
-  @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-info-active-bgcolor, 50%), $btn-info-active-border-color, 15%), .5);
-    box-shadow: 0 0 0 .25em $color-rgba;
-  }
-  @else if $skin-name != 'bootstrap5' {
+  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' {
     box-shadow: $btn-active-box-shadow;
   }
 }
@@ -23041,11 +23018,7 @@ $btn-focus-box-shadow: none !default;
     border-color: $btn-warning-active-border-color;
   }
   color: $btn-warning-active-color;
-  @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-warning-active-bgcolor, 50%), $btn-warning-active-border-color, 15%), .5);
-    box-shadow: 0 0 0 .25em $color-rgba;
-  }
-  @else if $skin-name != 'bootstrap5' {
+  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' {
     box-shadow: $btn-active-box-shadow;
   }
 }
@@ -23078,11 +23051,7 @@ $btn-focus-box-shadow: none !default;
     border-color: $btn-danger-active-border-color;
   }
   color: $btn-danger-active-color;
-  @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-danger-active-bgcolor, 50%), $btn-danger-active-border-color, 15%), .5);
-    box-shadow: 0 0 0 .25em $color-rgba;
-  }
-  @else if $skin-name != 'bootstrap5' {
+  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' {
     box-shadow: $btn-active-box-shadow;
   }
 }
@@ -30962,7 +30931,9 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
         }
 
         &.e-focused {
-          background-color: $drop-down-btn-li-focus-bgcolor;
+          @if $skin-name != 'FluentUI' {
+            background-color: $drop-down-btn-li-focus-bgcolor;
+          }
           box-shadow: $drop-down-btn-li-box-shadow;
         }
 
@@ -57538,6 +57509,7 @@ $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;
 
 $step-selected-li-shadow: 0 0 0 2px $white, 0 0 0 4px $primary, 0 0 0 8px $white !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $white, 0 0 0 4px $gray-700, 0 0 0 8px $white !default;
 $step-valid-li-shadow: 0 0 0 2px $white, 0 0 0 4px $success, 0 0 0 8px $white !default;
 $step-error-li-shadow: 0 0 0 2px $white, 0 0 0 4px $danger, 0 0 0 8px $white !default;
 $step-li-shadow: 0 0 0 8px $white !default;
@@ -58272,12 +58244,18 @@ $step-selected-active-color: darken($primary, 10%) !default;
       }
     }
 
-    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step {
+      box-shadow: $step-selected-li-shadow;
+    }
+
     .e-stepper-steps .e-step-container.e-step-focus .e-step,
     .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
     .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-      box-shadow: $step-selected-li-shadow;
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
     }
 
     &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
@@ -69629,6 +69607,11 @@ $de-column-presets-font-size: 60px !default;
     content: '\e91f';
   }
 
+  .e-de-share::before {
+    content: '\e8f2';
+    font-family: 'e-icons';
+  }
+
   .e-de-preset-container {
     width: 95px;
   }
@@ -77583,7 +77566,8 @@ $grid-dropitems-count-margin-left: -8px !default;
         & tr.e-row:first-child .e-rowcell.e-dragborder,
         & .e-rowcell.e-dragborder,
         & .e-rowdragdrop.e-dragborder,
-        & .e-detailrowcollapse.e-dragborder {
+        & .e-detailrowcollapse.e-dragborder,
+        & .e-detailrowexpand.e-dragborder {
         z-index: $grid-dragborder-z-index;
         }
     }
@@ -77602,7 +77586,10 @@ $grid-dropitems-count-margin-left: -8px !default;
         & .e-rowdragdrop.e-dragborder.e-fixedfreeze,
         & .e-detailrowcollapse.e-dragborder.e-leftfreeze,
         & .e-detailrowcollapse.e-dragborder.e-rightfreeze,
-        & .e-detailrowcollapse.e-dragborder.e-fixedfreeze {
+        & .e-detailrowcollapse.e-dragborder.e-fixedfreeze,
+        & .e-detailrowexpand.e-dragborder.e-leftfreeze,
+        & .e-detailrowexpand.e-dragborder.e-rightfreeze,
+        & .e-detailrowexpand.e-dragborder.e-fixedfreeze {
         z-index: 6;
         }
     }
@@ -77613,7 +77600,8 @@ $grid-dropitems-count-margin-left: -8px !default;
         & tr.e-row:first-child .e-rowcell.e-dragborder,
         & .e-rowcell.e-dragborder,
         & .e-rowdragdrop.e-dragborder,
-        & .e-detailrowcollapse.e-dragborder {
+        & .e-detailrowcollapse.e-dragborder,
+        & .e-detailrowexpand.e-dragborder {
         box-shadow: $grid-dragborder-box-shadow;
         }
     }
@@ -77649,7 +77637,8 @@ $grid-dropitems-count-margin-left: -8px !default;
         & tr.e-row:first-child .e-rowcell.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
         & .e-rowcell.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
         & .e-rowdragdrop.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
-        & .e-detailrowcollapse.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze) {
+        & .e-detailrowcollapse.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze)
+        & .e-detailrowexpand.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze) {
         position: $grid-dragborder-position;
         }
     }
@@ -81041,6 +81030,11 @@ margin: $grid-group-animator-cell-margin;
         overflow-y: auto;
       }
 
+      .e-gridcontent .e-content,
+      .e-detailrowcollapse.e-dragborder,
+      .e-detailrowexpand.e-dragborder{
+        position: $grid-dragborder-position;
+      }
       .e-gridcontent .e-content.e-yscroll {
         overflow-y: scroll;
       }
@@ -84391,7 +84385,8 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
         }
 
         &.e-active,
-        &.e-hover {
+        &.e-hover,
+        &:hover {
           @include visibility(visible);
         }
       }
@@ -85039,7 +85034,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);
           }
 
@@ -85950,11 +85946,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);
         }
 
@@ -85962,7 +85960,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;
         }
       }
@@ -86002,7 +86001,8 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
 
         .e-large-icon {
 
-          &.e-hover {
+          &.e-hover,
+          &:hover {
             @include hover-item(transparent, transparent);
           }
 
@@ -87278,7 +87278,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
     input:focus+label.e-btn,
     .e-btn:focus,
     .e-btn:hover {
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap4' {
         z-index: 2;
       }
     }
@@ -87568,7 +87568,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
       }
     }
 
-    @if $skin-name == 'material' or $skin-name == 'bootstrap4' or $skin-name == 'Material3' {
+    @if $skin-name == 'material' or $skin-name == 'Material3' {
       .e-btn {
         box-shadow: none;
       }
@@ -87612,7 +87612,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
     .e-btn:focus,
     input:focus+label.e-btn {
       @include button-focus;
-      @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+      @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
         box-shadow: none;
       }
       @if $skin-name == 'bootstrap5' {
@@ -87629,7 +87629,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
 
       &.e-primary {
         @include primary-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
         @if $skin-name == 'bootstrap5' {
@@ -87643,7 +87643,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
 
       &.e-success {
         @include success-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
         @if $skin-name == 'bootstrap5' {
@@ -87657,7 +87657,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
 
       &.e-info {
         @include info-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
         @if $skin-name == 'bootstrap5' {
@@ -87671,7 +87671,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
 
       &.e-warning {
         @include warning-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
         @if $skin-name == 'bootstrap5' {
@@ -87685,7 +87685,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
 
       &.e-danger {
         @include danger-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
         @if $skin-name == 'bootstrap5' {
@@ -87707,7 +87707,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
 
       &.e-outline {
         @include outline-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+        @if $skin-name != 'bootstrap5' $skin-name != 'bootstrap4' and and $skin-name != 'tailwind' {
           box-shadow: none;
         }
         @if $skin-name == 'bootstrap5' {
@@ -87716,7 +87716,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
 
         &.e-primary {
           @include outline-primary-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
           @if $skin-name == 'bootstrap5' {
@@ -87726,7 +87726,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
 
         &.e-success {
           @include outline-success-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
           @if $skin-name == 'bootstrap5' {
@@ -87736,7 +87736,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
 
         &.e-info {
           @include outline-info-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
           @if $skin-name == 'bootstrap5' {
@@ -87746,7 +87746,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
 
         &.e-warning {
           @include outline-warning-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
           @if $skin-name == 'bootstrap5' {
@@ -87756,7 +87756,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
 
         &.e-danger {
           @include outline-danger-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
           @if $skin-name == 'bootstrap5' {
@@ -94022,7 +94022,7 @@ $gantt-rowdd-childborder-width: 1px 0 0 !default;
       }
 
       .e-zero-spacing {
-        border-spacing: .25px;
+        border-spacing: 0;
       }
 
       .e-chart-row:first-child .e-chart-row-border {
@@ -114941,6 +114941,10 @@ $qrybldr-btngrp-brdr-radius: 4px !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 {
@@ -121220,6 +121224,8 @@ $image-editor-bigger-dropdown-btn-preview-left: 0 !default;
 $image-editor-slider-handler: calc(50% - 6px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 7px) !default;
 $image-editor-device-slider-handler: calc(50% - 7px) !default;
+$image-editor-finetune-value-span: 31% !default;
+$image-editor-finetune-span: 31% !default;
 
 @include export-module('image-editor-layout') {
 
@@ -121726,7 +121732,23 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
   }
 
   .e-ie-finetune-value-span {
-    top: 26% !important; /* stylelint-disable-line declaration-no-important */
+    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 {
@@ -121745,6 +121767,18 @@ $image-editor-device-slider-handler: calc(50% - 7px) !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 */
+      }
+    }
+  }
 }
 
 
@@ -123986,6 +124020,7 @@ $ribbon-large-items-btn-height: 22px !default;
 $ribbon-large-items-icon-size: 32px !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 8px 5px 6px !default;
+$ribbon-large-items-btn-gap: 5px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 4px !default;
 $ribbon-items-font-weight: 400 !default;
@@ -124082,6 +124117,7 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
 $ribbon-bigger-large-items-btn-padding: 0 3px !default;
 $ribbon-bigger-large-items-btn-size: 16px !default;
 $ribbon-bigger-large-items-btn-height: 24px !default;
+$ribbon-bigger-large-items-btn-gap: 6px !default;
 $ribbon-bigger-items-padding: 1px !default;
 $ribbon-bigger-items-btn-size: 16px !default;
 $ribbon-bigger-items-height: 24px !default;
@@ -124861,6 +124897,10 @@ $ribbon-filemenu-popup-border-radius: 4px !default;
           .e-icon-top {
             height: 50%;
           }
+
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
 
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -125486,6 +125526,10 @@ $ribbon-filemenu-popup-border-radius: 4px !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
 
         .e-dropdown-btn {