@syncfusion/blazor-themes 23.1.44 → 23.2.5

package/SCSS-Themes/material3.scss

@@ -65882,6 +65882,13 @@ $de-column-presets-font-size: 60px !default;
         padding-left: 20px;
         padding-right: 20px;
     }
+
+    .e-de-para-tab {
+        float: left;
+    }
+    .e-de-para-tab.e-rtl {
+        float: right;
+    }
     
     .e-de-column-label.e-de-rtl {
         font-size: $de-border-dlg-settinglabels-fontsize;
@@ -70491,6 +70498,14 @@ $de-toggle-disabled-color: $secondary-bg-color !default;
 $de-background-color: $content-bg-color-alt3 !default;
 $de-toolbar-background-color: $content-bg-color-alt2 !default;
 $de-pane-background-color: $content-bg-color-alt1 !default;
+$de-ruler-background-color: $content-bg-color-alt3 !default;
+$de-ruler-margin-color: rgba($content-bg-color) !default;
+$de-ruler-tick-stroke: rgba($icon-color) !default;
+$de-ruler-label-fill: rgba($content-text-color-alt1) !default;
+$de-ruler-indent-stroke: rgba($icon-color) !default;
+$de-ruler-indent-fill:  rgba($content-bg-color) !default;
+$de-ruler-indent-hover: $content-bg-color-alt5 !default;
+$de-ruler-indent-active: rgba($primary) !default;
 
 //Blazor
 $e-de-bzr-button-border-color: rgba($white) !default;
@@ -72185,6 +72200,62 @@ $de-hover-bg: $content-bg-color-alt2 !default;
             }
         }
     }
+    .e-de-hRuler {
+        background-color: $de-ruler-background-color;
+        @if $skin-name =='Material3' {
+            background: $de-ruler-background-color;
+        }
+        border-bottom: 0.5px solid $de-panel-border;
+    }
+    .e-de-vRuler {
+        background-color: $de-ruler-background-color;
+        @if $skin-name =='Material3' {
+            background: $de-ruler-background-color;
+        }
+        border-right: 0.5px solid $de-panel-border;
+    }
+    .e-de-ruler-margin {
+        background-color: $de-ruler-margin-color;
+        @if $skin-name =='Material3' {
+            background: $de-ruler-margin-color;
+        }
+    }
+    .e-de-ruler-tick {
+        stroke: $de-ruler-tick-stroke;
+    }
+    .e-de-ruler-tick-label {
+        fill: $de-ruler-label-fill
+    }
+    .e-de-ruler-markIndicator {
+        background-color: $de-ruler-margin-color;
+    }
+    .e-de-ruler-marker .e-de-ruler-tab-svg {
+        fill: $de-ruler-tick-stroke;
+    }
+   .e-de-ruler-marker .e-de-ruler-indent-svg {
+        fill: $de-ruler-tick-stroke;
+    }
+    .e-de-ruler-indent .e-de-ruler-indent-svg {
+        fill: $de-ruler-indent-fill;
+        stroke: $de-ruler-indent-stroke;
+    }
+    .e-de-ruler-indent .e-de-ruler-indent-svg:hover {
+        fill: $de-ruler-indent-hover;
+        stroke:  $de-ruler-indent-stroke;
+    }
+    .e-de-ruler-indent .e-de-ruler-indent-svg:active {
+        fill: $de-ruler-indent-active;
+        stroke:  $de-ruler-indent-stroke;
+    }
+    .e-de-ruler-table-svg {
+        fill: $de-ruler-indent-stroke;
+    }
+    .e-de-ruler-table-svg:hover {
+        fill: $de-ruler-indent-hover;
+    }
+    .e-de-ruler-table-svg:active {
+        fill: $de-ruler-indent-active;
+    }
     .e-rtl {
         .e-listview .e-list-icon {
             height: 24px;
@@ -72197,6 +72268,11 @@ $de-hover-bg: $content-bg-color-alt2 !default;
             line-height: 22px;
             margin-left: $e-de-ctnr-break-listview-margin-left;
         }
+        .e-de-vRuler {
+            background-color: $de-ruler-background-color;
+            border-right: none;
+            border-left: 0.5px solid $de-panel-border;
+        }
     }
     .e-bigger {
         @if $skin-name =='tailwind' or $skin-name =='bootstrap5' or $skin-name =='FluentUI' or $skin-name =='bootstrap4' {
@@ -77981,6 +78057,15 @@ $grid-dropitems-count-margin-left: -9px !default;
       border-bottom-width: $grid-border-bottom-width;
     }
 
+    .e-bigger & .e-gridcontent .e-groupcaptionrow .e-lastrowcell.e-recordplusexpand ~ td.e-lastrowcell,
+    &.e-bigger .e-gridcontent .e-groupcaptionrow .e-lastrowcell.e-recordplusexpand ~ td.e-lastrowcell,
+    .e-gridcontent .e-groupcaptionrow .e-lastrowcell.e-recordplusexpand ~ td.e-lastrowcell {
+      &.e-groupcaption,
+      &.e-summarycell {
+        border-bottom-width: 0;
+      }
+    }
+
     & .e-cloneproperties.e-draganddrop .e-row .e-icon-rowdragicon::before {
       position: relative;
       left: -5px;
@@ -81301,7 +81386,7 @@ margin: $grid-group-animator-cell-margin;
         text-align: left;
       }
       
-      &.e-default table th:not([rowspan = '1'])  {
+      &.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell)  {
         border-width: $grid-headercell-both-border-width;
       }
 
@@ -81327,7 +81412,7 @@ margin: $grid-group-animator-cell-margin;
         border-right-width: 1px;
       }
       
-      &.e-rtl.e-default table th:not([rowspan = '1'])  {
+      &.e-rtl.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell)  {
         border-width: $grid-rtl-headercell-both-border-width;
       }
 
@@ -81369,6 +81454,29 @@ margin: $grid-group-animator-cell-margin;
       &.e-rtl.e-default.e-bothlines .e-detailheadercell {
         border-width: $grid-headercell-both-border-width;
       }
+
+      &.e-resize-lines,
+      &.e-resize-lines.e-rtl {
+
+        & th.e-headercell.e-stackedheadercell:not(.e-freezerightborder, .e-freezeleftborder),
+        & th.e-headercell.e-firstcell:not(.e-freezerightborder, .e-freezeleftborder) {
+          border-left: 0;
+          border-right: 0;
+          border-top: 0;
+        }
+      }
+
+      &.e-default.e-bothlines .e-headercell,
+      &.e-default.e-bothlines .e-detailheadercell {
+        border-width: $grid-headercell-both-border-width;
+      }
+
+      &.e-bothlines .e-gridheader th.e-stackedheadercell {
+        border-bottom-style: $grid-border-type;
+        border-bottom-width: $grid-border-size;
+        border-left-style: $grid-border-type;
+        border-left-width: $grid-border-size;
+      }
       
       .e-bigger #{&}.e-grid.sf-grid,
       #{&}.e-grid.sf-grid.e-bigger {
@@ -81612,6 +81720,20 @@ margin: $grid-group-animator-cell-margin;
   }
 }
 
+.e-bigger {
+  &.e-grid.sf-grid.e-row-responsive,
+  .e-grid.sf-grid.e-row-responsive {
+    & .e-gridcontent,
+    & .e-summarycontent {
+      & td::before{
+        @if $grid-skin == 'fluent' {
+          overflow: hidden;
+        }
+      }
+    }
+  }
+}
+
 .e-bigger .e-grid.e-row-responsive,
 .e-bigger.e-grid.e-row-responsive {
 
@@ -83465,7 +83587,7 @@ $fe-grid-header-cb-padding-left: 12px !default;
 $fe-grid-content-font-size: 12px !default;
 $fe-grid-content-name-font-size: 14px !default;
 $fe-grid-icon-sort-margin: 0 !default;
-$fe-grid-icon-padding: 0 0 0 24px !default;
+$fe-grid-icon-padding: 0 0 0 6px !default;
 $fe-lg-margin: 0 !default;
 $fe-lg-padding: 0 4px !default;
 $fe-lg-item-height: 96px !default;
@@ -95502,12 +95624,12 @@ $editor-btn-icon-color: rgba($icon-color) !default;
     position: relative;
     width: auto;
 
-    .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
+    .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
       display: block;
       visibility: hidden;
     }
 
-    .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
+    .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
       display: block;
       visibility: hidden;
     }
@@ -95919,8 +96041,8 @@ $editor-btn-icon-color: rgba($icon-color) !default;
     &.e-tooltip-wrap {
       max-width: 100%;
 
-      .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
-      .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
+      .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
+      .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
         display: block;
         visibility: hidden;
       }
@@ -99193,7 +99315,7 @@ $pv-blazor-scale-ratio-dialog-max-width: 476px !default;
 $pv-handwritten-sign-width: 712px !default;
 $pv-handwritten-sign-height: 366px !default;
 $pv-canvas-sign-width: 100% !default;
-$pv-canvas-sign-width-blazor: 100% !default;
+$pv-canvas-sign-width-blazor: 714px !default;
 $pv-font-div-padding: 15px 8px !default;
 $pv-font-div-padding-blazor: 15px 8px !default;
 $pv-signature-appearance-checkbox: 5px !default;
@@ -118752,7 +118874,18 @@ $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
       line-height: normal;
     }
 
-    .e-save-icon {
+    .e-title-text {
+      text-align: center;
+    }
+
+    .e-save-icon,
+    .e-back-icon,
+    .e-delete-icon {
+      width: 2.5em;
+    }
+
+    .e-save-icon,
+    .e-delete-icon {
       text-align: right;
     }
 
@@ -120265,6 +120398,10 @@ $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
       content: '\e7c8';
     }
 
+    .e-delete-icon::before {
+      content: '\e820';
+    }
+
     .e-recurrence-container {
       .e-recurrence-edit-button {
         .e-recurrence-edit.e-icons::before {
@@ -120350,6 +120487,10 @@ $image-editor-tbar-btn-fontsize: $text-base !default;
 $image-editor-bigger-tbar-btn-fontsize: $text-lg !default;
 $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
 $image-editor-drop-border: 2px dashed rgba($icon-color);
+$image-editor-dropdown-btn-preview-top: -2px !default;
+$image-editor-dropdown-btn-preview-left: -9px !default;
+$image-editor-bigger-dropdown-btn-preview-top: -1px !default;
+$image-editor-bigger-dropdown-btn-preview-left: -7px !default;
 
 @include export-module('image-editor-layout') {
 
@@ -120417,6 +120558,7 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -120435,6 +120577,17 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
           }
         }
 
+        & .e-btn-icon.e-dropdownbtn-preview {
+          margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-bigger-dropdown-btn-preview-left;
+        }
+
+        & .e-dropdown-btn.e-icon-btn {
+          @if $skin-name == 'Material3' {
+            padding: 7px 15px;
+          }
+        }
+
         & .e-dropdown-btn.e-image-popup {
           & .e-select,
           & .e-annotation,
@@ -120581,6 +120734,7 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -120602,7 +120756,8 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
         & .e-btn-icon.e-dropdownbtn-preview {
           height: 18px;
           width: 18px;
-          margin-top: -4px;
+          margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-dropdown-btn-preview-left;
         }
 
         & .e-dropdown-btn.e-image-popup {
@@ -120674,6 +120829,11 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
           margin: 4px;
           text-align: center;
         }
+
+        & .e-dropdown-btn {
+          margin: 0 auto;
+          width: max-content;
+        }
       }
 
       &.e-frame-wrapper {
@@ -120715,12 +120875,7 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
 
       & .e-slider-container {
         margin-left: calc(50% - 137px);
-        @if $skin-name == 'Material3' {
-          height: 70px !important; /* stylelint-disable-line declaration-no-important */
-        }
-        @else {
-          height: 54px !important; /* stylelint-disable-line declaration-no-important */
-        }
+        height: 54px !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }
@@ -123096,6 +123251,10 @@ $ribbon-group-button-dropdown-popup-box-shadow: $shadow-sm !default;
         &:focus {
           outline: none;
         }
+
+        &.e-hidden {
+          display: none;
+        }
       }
 
       .e-ribbon-overall-of-btn {
@@ -123167,7 +123326,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: $shadow-sm !default;
       padding-top: $ribbon-group-padding;
       height: $ribbon-group-height;
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -123709,7 +123869,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: $shadow-sm !default;
 
     .e-ribbon-overflow-target {
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -123718,7 +123879,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: $shadow-sm !default;
       }
 
       .e-ribbon-of-tab .e-ribbon-of-group-container {
-        &.e-hidden {
+        &.e-hidden,
+        &.e-hide-group {
           display: none;
         }
 

package/SCSS-Themes/pdfviewer/pdfviewer/material3-dark.scss

@@ -567,7 +567,7 @@ $pv-blazor-scale-ratio-dialog-max-width: 476px !default;
 $pv-handwritten-sign-width: 712px !default;
 $pv-handwritten-sign-height: 366px !default;
 $pv-canvas-sign-width: 100% !default;
-$pv-canvas-sign-width-blazor: 100% !default;
+$pv-canvas-sign-width-blazor: 714px !default;
 $pv-font-div-padding: 15px 8px !default;
 $pv-font-div-padding-blazor: 15px 8px !default;
 $pv-signature-appearance-checkbox: 5px !default;

package/SCSS-Themes/pdfviewer/pdfviewer/material3.scss

@@ -567,7 +567,7 @@ $pv-blazor-scale-ratio-dialog-max-width: 476px !default;
 $pv-handwritten-sign-width: 712px !default;
 $pv-handwritten-sign-height: 366px !default;
 $pv-canvas-sign-width: 100% !default;
-$pv-canvas-sign-width-blazor: 100% !default;
+$pv-canvas-sign-width-blazor: 714px !default;
 $pv-font-div-padding: 15px 8px !default;
 $pv-font-div-padding-blazor: 15px 8px !default;
 $pv-signature-appearance-checkbox: 5px !default;

package/SCSS-Themes/ribbon/ribbon/bootstrap-dark.scss

@@ -494,6 +494,10 @@ $ribbon-group-button-dropdown-popup-box-shadow: 0 6px 12px rgba($grey-base, .175
         &:focus {
           outline: none;
         }
+
+        &.e-hidden {
+          display: none;
+        }
       }
 
       .e-ribbon-overall-of-btn {
@@ -565,7 +569,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: 0 6px 12px rgba($grey-base, .175
       padding-top: $ribbon-group-padding;
       height: $ribbon-group-height;
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -1107,7 +1112,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: 0 6px 12px rgba($grey-base, .175
 
     .e-ribbon-overflow-target {
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -1116,7 +1122,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: 0 6px 12px rgba($grey-base, .175
       }
 
       .e-ribbon-of-tab .e-ribbon-of-group-container {
-        &.e-hidden {
+        &.e-hidden,
+        &.e-hide-group {
           display: none;
         }
 

package/SCSS-Themes/ribbon/ribbon/bootstrap.scss

@@ -494,6 +494,10 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
         &:focus {
           outline: none;
         }
+
+        &.e-hidden {
+          display: none;
+        }
       }
 
       .e-ribbon-overall-of-btn {
@@ -565,7 +569,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
       padding-top: $ribbon-group-padding;
       height: $ribbon-group-height;
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -1107,7 +1112,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
 
     .e-ribbon-overflow-target {
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -1116,7 +1122,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
       }
 
       .e-ribbon-of-tab .e-ribbon-of-group-container {
-        &.e-hidden {
+        &.e-hidden,
+        &.e-hide-group {
           display: none;
         }
 

package/SCSS-Themes/ribbon/ribbon/bootstrap4.scss

@@ -494,6 +494,10 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
         &:focus {
           outline: none;
         }
+
+        &.e-hidden {
+          display: none;
+        }
       }
 
       .e-ribbon-overall-of-btn {
@@ -565,7 +569,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
       padding-top: $ribbon-group-padding;
       height: $ribbon-group-height;
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -1107,7 +1112,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
 
     .e-ribbon-overflow-target {
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -1116,7 +1122,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
       }
 
       .e-ribbon-of-tab .e-ribbon-of-group-container {
-        &.e-hidden {
+        &.e-hidden,
+        &.e-hide-group {
           display: none;
         }
 

package/SCSS-Themes/ribbon/ribbon/bootstrap5-dark.scss

@@ -494,6 +494,10 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
         &:focus {
           outline: none;
         }
+
+        &.e-hidden {
+          display: none;
+        }
       }
 
       .e-ribbon-overall-of-btn {
@@ -565,7 +569,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
       padding-top: $ribbon-group-padding;
       height: $ribbon-group-height;
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -1107,7 +1112,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
 
     .e-ribbon-overflow-target {
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -1116,7 +1122,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
       }
 
       .e-ribbon-of-tab .e-ribbon-of-group-container {
-        &.e-hidden {
+        &.e-hidden,
+        &.e-hide-group {
           display: none;
         }
 

package/SCSS-Themes/ribbon/ribbon/bootstrap5.scss

@@ -494,6 +494,10 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
         &:focus {
           outline: none;
         }
+
+        &.e-hidden {
+          display: none;
+        }
       }
 
       .e-ribbon-overall-of-btn {
@@ -565,7 +569,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
       padding-top: $ribbon-group-padding;
       height: $ribbon-group-height;
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -1107,7 +1112,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
 
     .e-ribbon-overflow-target {
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -1116,7 +1122,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: none !default;
       }
 
       .e-ribbon-of-tab .e-ribbon-of-group-container {
-        &.e-hidden {
+        &.e-hidden,
+        &.e-hide-group {
           display: none;
         }
 

package/SCSS-Themes/ribbon/ribbon/fabric-dark.scss

@@ -494,6 +494,10 @@ $ribbon-group-button-dropdown-popup-box-shadow: 0 0 6px 0 rgba(0, 0, 0, .25) !de
         &:focus {
           outline: none;
         }
+
+        &.e-hidden {
+          display: none;
+        }
       }
 
       .e-ribbon-overall-of-btn {
@@ -565,7 +569,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: 0 0 6px 0 rgba(0, 0, 0, .25) !de
       padding-top: $ribbon-group-padding;
       height: $ribbon-group-height;
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -1107,7 +1112,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: 0 0 6px 0 rgba(0, 0, 0, .25) !de
 
     .e-ribbon-overflow-target {
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -1116,7 +1122,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: 0 0 6px 0 rgba(0, 0, 0, .25) !de
       }
 
       .e-ribbon-of-tab .e-ribbon-of-group-container {
-        &.e-hidden {
+        &.e-hidden,
+        &.e-hide-group {
           display: none;
         }
 

package/SCSS-Themes/ribbon/ribbon/fabric.scss

@@ -494,6 +494,10 @@ $ribbon-group-button-dropdown-popup-box-shadow: 0 0 6px 0 rgba(0, 0, 0, .25) !de
         &:focus {
           outline: none;
         }
+
+        &.e-hidden {
+          display: none;
+        }
       }
 
       .e-ribbon-overall-of-btn {
@@ -565,7 +569,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: 0 0 6px 0 rgba(0, 0, 0, .25) !de
       padding-top: $ribbon-group-padding;
       height: $ribbon-group-height;
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -1107,7 +1112,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: 0 0 6px 0 rgba(0, 0, 0, .25) !de
 
     .e-ribbon-overflow-target {
 
-      &.e-hidden {
+      &.e-hidden,
+      &.e-hide-group {
         display: none;
       }
 
@@ -1116,7 +1122,8 @@ $ribbon-group-button-dropdown-popup-box-shadow: 0 0 6px 0 rgba(0, 0, 0, .25) !de
       }
 
       .e-ribbon-of-tab .e-ribbon-of-group-container {
-        &.e-hidden {
+        &.e-hidden,
+        &.e-hide-group {
           display: none;
         }