@syncfusion/ej2-ribbon 22.2.12 → 23.1.38

package/styles/ribbon/_fusionnew-definition.scss

@@ -96,6 +96,26 @@ $ribbon-launcher-icon-margin: 0 8px 4px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 4px 8px !default;
 $ribbon-ddb-popup-font-size: 12px;
 $ribbon-ddb-popup-height: 24px;
+$ribbon-backstage-menu-hover-border: 0 !default;
+$ribbon-backstage-menu-active-border: 0 !default;
+$ribbon-backstage-menu-item-height: 38px !default;
+$ribbon-backstage-menu-icon-font-size: 16px !default;
+$ribbon-backstage-menu-icon-line-height: 16px !default;
+$ribbon-backstage-menu-icon-padding: 11px 18px 11px 16px !default;
+$ribbon-backstage-menu-blank-icon-padding: 50px !default;
+$ribbon-backstage-btn-focus-border: 0 !default;
+$ribbon-backstage-btn-height: 38px !default;
+$ribbon-backstage-btn-line-height: 38px !default;
+$ribbon-backstage-btn-icon-font-size: 16px !default;
+$ribbon-backstage-btn-icon-line-height: 16px !default;
+$ribbon-backstage-btn-icon-padding: 11px 18px 11px 16px !default;
+$ribbon-backstage-btn-hover-border: 0 !default;
+$ribbon-group-button-icon-margin: $ribbon-items-margin !default;
+$ribbon-group-button-ddb-padding: 4px 9px !default;
+$ribbon-group-button-icon-padding: 0 2px 0 0 !default;
+$ribbon-group-button-ddb-border-radius: 4px !default;
+$ribbon-group-button-padding: 0 5px 0 0 !default;
+$ribbon-group-button-ddb-border: 1px solid !default;
 
 $ribbon-bigger-content-height: 114px !default;
 $ribbon-bigger-group-overflow-content-height: 114px !default;
@@ -161,6 +181,20 @@ $ribbon-bigger-launcher-icon-margin: 0 8px 4px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 4px 8px !default;
 $ribbon-bigger-ddb-popup-font-size: 14px;
 $ribbon-bigger-ddb-popup-height: 32px;
+$ribbon-bigger-backstage-menu-item-height: 48px !default;
+$ribbon-bigger-backstage-menu-icon-font-size: 20px !default;
+$ribbon-bigger-backstage-menu-icon-line-height: 20px !default;
+$ribbon-bigger-backstage-menu-icon-padding: 14px 16px !default;
+$ribbon-bigger-backstage-menu-blank-icon-padding: 52px !default;
+$ribbon-bigger-backstage-btn-height: 48px !default;
+$ribbon-bigger-backstage-btn-line-height: 48px !default;
+$ribbon-bigger-backstage-btn-icon-font-size: 20px !default;
+$ribbon-bigger-backstage-btn-icon-line-height: 20px !default;
+$ribbon-bigger-backstage-btn-icon-padding: 14px 16px !default;
+$ribbon-bigger-group-button-icon-padding: 0 !default;
+$ribbon-bigger-group-button-icon-margin: $ribbon-bigger-items-margin !default;
+$ribbon-bigger-group-button-ddb-padding: 8px 12px 12px !default;
+$ribbon-bigger-group-button-padding: 0 7px 0 0 !default;
 
 $ribbon-header-bg-color: $content-bg-color-alt2 !default;
 $ribbon-border-color: unset !default;
@@ -208,3 +242,34 @@ $ribbon-hscroll-focus-color: $icon-color !default;
 $ribbon-tooltip-background-color: $tooltip-bg-color !default;
 $ribbon-tooltip-text-color: $toooltip-text-color !default;
 $ribbon-overflow-box-shadow: $shadow-md !default;
+$ribbon-backstage-menu-bg-color: $primary !default;
+$ribbon-backstage-menu-items-bg-color: $primary !default;
+$ribbon-backstage-items-color: $primary-text-color !default;
+$ribbon-backstage-menu-icon-color: $primary-text-color !default;
+$ribbon-backstage-menu-hover-bg-color: $primary-bg-color-focus !default;
+$ribbon-backstage-menu-hover-border-color: unset !default;
+$ribbon-backstage-menu-items-hover-color: $primary-text-color !default;
+$ribbon-backstage-menu-icon-hover-color: $primary-text-color !default;
+$ribbon-backstage-menu-active-bg-color: $primary-bg-color-pressed !default;
+$ribbon-backstage-menu-active-border-color: unset !default;
+$ribbon-backstage-menu-items-active-color: $primary-text-hover !default;
+$ribbon-backstage-menu-icon-active-color: $primary-text-hover !default;
+$ribbon-backstage-separator-color: $border-light !default;
+$ribbon-backstage-btn-bg-color: $primary !default;
+$ribbon-backstage-btn-color: $primary-text-color !default;
+$ribbon-backstage-btn-focus-bg-color: $primary-bg-color-focus !default;
+$ribbon-backstage-btn-focus-color: $primary-text-color !default;
+$ribbon-backstage-btn-focus-border-color: unset !default;
+$ribbon-backstage-btn-hover-bg-color: $primary-bg-color-pressed !default;
+$ribbon-backstage-btn-hover-color: $primary-text-hover !default;
+$ribbon-backstage-btn-hover-border-color: unset !default;
+$ribbon-backstage-close-btn-font-weight: 400 !default;
+$ribbon-group-button-dropdown-popup-background: $flyout-bg-color !default;
+$ribbon-group-button-icon-hover-color: $flyout-text-color-hover !default;
+$ribbon-group-button-hover-background: $flyout-bg-color-hover !default;
+$ribbon-group-button-text-hover-color: $flyout-text-color-hover !default;
+$ribbon-group-button-active-background: $flyout-bg-color-selected !default;
+$ribbon-group-button-text-active-color: $flyout-text-color-selected !default;
+$ribbon-group-button-selected-background: $flyout-bg-color-selected !default;
+$ribbon-group-button-dropdown-popup-border-color: $flyout-border !default;
+$ribbon-group-button-dropdown-popup-box-shadow: none !default;

package/styles/ribbon/_highcontrast-definition.scss

@@ -96,6 +96,26 @@ $ribbon-launcher-icon-margin: 0 8px 2px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 2px 8px !default;
 $ribbon-ddb-popup-font-size: 16px;
 $ribbon-ddb-popup-height: 36px;
+$ribbon-backstage-menu-hover-border: 2px !default;
+$ribbon-backstage-menu-active-border: 2px !default;
+$ribbon-backstage-menu-item-height: 40px !default;
+$ribbon-backstage-menu-icon-font-size: 16px !default;
+$ribbon-backstage-menu-icon-line-height: 16px !default;
+$ribbon-backstage-menu-icon-padding: 12px 16px !default;
+$ribbon-backstage-menu-blank-icon-padding: 48px !default;
+$ribbon-backstage-btn-focus-border: 2px !default;
+$ribbon-backstage-btn-height: 40px !default;
+$ribbon-backstage-btn-line-height: 40px !default;
+$ribbon-backstage-btn-icon-font-size: 16px !default;
+$ribbon-backstage-btn-icon-line-height: 16px !default;
+$ribbon-backstage-btn-icon-padding: 12px 16px !default;
+$ribbon-backstage-btn-hover-border: 2px !default;
+$ribbon-group-button-icon-margin: $ribbon-items-margin !default;
+$ribbon-group-button-ddb-padding: 8px !default;
+$ribbon-group-button-icon-padding: 0 2px 0 0 !default;
+$ribbon-group-button-ddb-border-radius: unset !default;
+$ribbon-group-button-padding: 0 10px 0 0 !default;
+$ribbon-group-button-ddb-border: 1px solid !default;
 
 $ribbon-bigger-content-height: 132px !default;
 $ribbon-bigger-group-overflow-content-height: 132px !default;
@@ -161,6 +181,20 @@ $ribbon-bigger-launcher-icon-margin: 0 8px 8px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 8px 8px !default;
 $ribbon-bigger-ddb-popup-font-size: 16px;
 $ribbon-bigger-ddb-popup-height: 45px;
+$ribbon-bigger-backstage-menu-item-height: 50px !default;
+$ribbon-bigger-backstage-menu-icon-font-size: 20px !default;
+$ribbon-bigger-backstage-menu-icon-line-height: 20px !default;
+$ribbon-bigger-backstage-menu-icon-padding: 15px 16px !default;
+$ribbon-bigger-backstage-menu-blank-icon-padding: 52px !default;
+$ribbon-bigger-backstage-btn-height: 50px !default;
+$ribbon-bigger-backstage-btn-line-height: 50px !default;
+$ribbon-bigger-backstage-btn-icon-font-size: 20px !default;
+$ribbon-bigger-backstage-btn-icon-line-height: 20px !default;
+$ribbon-bigger-backstage-btn-icon-padding: 15px 16px !default;
+$ribbon-bigger-group-button-icon-padding: 0 !default;
+$ribbon-bigger-group-button-icon-margin: $ribbon-bigger-items-margin !default;
+$ribbon-bigger-group-button-ddb-padding: 8px 12px 12px !default;
+$ribbon-bigger-group-button-padding: 0 10px 0 0 !default;
 
 $ribbon-header-bg-color: $bg-base-0 !default;
 $ribbon-border-color: $border-default !default;
@@ -208,3 +242,34 @@ $ribbon-hscroll-focus-color: $content-font !default;
 $ribbon-tooltip-background-color: $bg-base-0 !default;
 $ribbon-tooltip-text-color: $content-font !default;
 $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
+$ribbon-backstage-menu-bg-color: $border-fg-alt !default;
+$ribbon-backstage-menu-items-bg-color: $border-fg-alt !default;
+$ribbon-backstage-items-color: $bg-base-0 !default;
+$ribbon-backstage-menu-icon-color: $bg-base-0 !default;
+$ribbon-backstage-menu-hover-bg-color: $border-fg-alt !default;
+$ribbon-backstage-menu-hover-border-color: $bg-base-0 !default;
+$ribbon-backstage-menu-items-hover-color: $bg-base-0 !default;
+$ribbon-backstage-menu-icon-hover-color: $bg-base-0 !default;
+$ribbon-backstage-menu-active-bg-color: $hover-bg !default;
+$ribbon-backstage-menu-active-border-color: $hover-border !default;
+$ribbon-backstage-menu-items-active-color: $content-font !default;
+$ribbon-backstage-menu-icon-active-color: $content-font !default;
+$ribbon-backstage-separator-color: $bg-base-0 !default;
+$ribbon-backstage-btn-bg-color: $border-fg-alt !default;
+$ribbon-backstage-btn-color: $bg-base-0 !default;
+$ribbon-backstage-btn-focus-bg-color: $border-fg-alt !default;
+$ribbon-backstage-btn-focus-color: $bg-base-0 !default;
+$ribbon-backstage-btn-focus-border-color: $bg-base-0 !default;
+$ribbon-backstage-btn-hover-bg-color: $hover-bg !default;
+$ribbon-backstage-btn-hover-color: $content-font !default;
+$ribbon-backstage-btn-hover-border-color: $hover-border !default;
+$ribbon-backstage-close-btn-font-weight: 400 !default;
+$ribbon-group-button-dropdown-popup-background: $bg-base-0 !default;
+$ribbon-group-button-icon-hover-color: $hover-font !default;
+$ribbon-group-button-hover-background: $hover-bg !default;
+$ribbon-group-button-text-hover-color: $hover-font !default;
+$ribbon-group-button-active-background: $hover-bg !default;
+$ribbon-group-button-text-active-color: $hover-font !default;
+$ribbon-group-button-selected-background: $hover-bg !default;
+$ribbon-group-button-dropdown-popup-border-color: $border-default !default;
+$ribbon-group-button-dropdown-popup-box-shadow: 0 0 6px 0 rgba(0, 0, 0, .25) !default;

package/styles/ribbon/_highcontrast-light-definition.scss

@@ -96,6 +96,26 @@ $ribbon-launcher-icon-margin: 0 8px 2px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 2px 8px !default;
 $ribbon-ddb-popup-font-size: 16px;
 $ribbon-ddb-popup-height: 36px;
+$ribbon-backstage-menu-hover-border: 2px !default;
+$ribbon-backstage-menu-active-border: 2px !default;
+$ribbon-backstage-menu-item-height: 40px !default;
+$ribbon-backstage-menu-icon-font-size: 16px !default;
+$ribbon-backstage-menu-icon-line-height: 16px !default;
+$ribbon-backstage-menu-icon-padding: 12px 16px !default;
+$ribbon-backstage-menu-blank-icon-padding: 48px !default;
+$ribbon-backstage-btn-focus-border: 2px !default;
+$ribbon-backstage-btn-height: 40px !default;
+$ribbon-backstage-btn-line-height: 40px !default;
+$ribbon-backstage-btn-icon-font-size: 16px !default;
+$ribbon-backstage-btn-icon-line-height: 16px !default;
+$ribbon-backstage-btn-icon-padding: 12px 16px !default;
+$ribbon-backstage-btn-hover-border: 2px !default;
+$ribbon-group-button-icon-margin: $ribbon-items-margin !default;
+$ribbon-group-button-ddb-padding: 8px !default;
+$ribbon-group-button-icon-padding: 0 2px 0 0 !default;
+$ribbon-group-button-ddb-border-radius: 0 !default;
+$ribbon-group-button-padding: 0 10px 0 0 !default;
+$ribbon-group-button-ddb-border: 1px solid !default;
 
 $ribbon-bigger-content-height: 132px !default;
 $ribbon-bigger-group-overflow-content-height: 132px !default;
@@ -161,6 +181,20 @@ $ribbon-bigger-launcher-icon-margin: 0 8px 8px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 8px 8px !default;
 $ribbon-bigger-ddb-popup-font-size: 16px;
 $ribbon-bigger-ddb-popup-height: 45px;
+$ribbon-bigger-backstage-menu-item-height: 50px !default;
+$ribbon-bigger-backstage-menu-icon-font-size: 20px !default;
+$ribbon-bigger-backstage-menu-icon-line-height: 20px !default;
+$ribbon-bigger-backstage-menu-icon-padding: 15px 16px !default;
+$ribbon-bigger-backstage-menu-blank-icon-padding: 52px !default;
+$ribbon-bigger-backstage-btn-height: 50px !default;
+$ribbon-bigger-backstage-btn-line-height: 50px !default;
+$ribbon-bigger-backstage-btn-icon-font-size: 20px !default;
+$ribbon-bigger-backstage-btn-icon-line-height: 20px !default;
+$ribbon-bigger-backstage-btn-icon-padding: 15px 16px !default;
+$ribbon-bigger-group-button-icon-padding: 0 !default;
+$ribbon-bigger-group-button-icon-margin: $ribbon-bigger-items-margin !default;
+$ribbon-bigger-group-button-ddb-padding: 8px 12px 12px !default;
+$ribbon-bigger-group-button-padding: 0 10px 0 0 !default;
 
 $ribbon-header-bg-color: $bg-base-0 !default;
 $ribbon-border-color: $border-default !default;
@@ -208,3 +242,34 @@ $ribbon-hscroll-focus-color: $content-font !default;
 $ribbon-tooltip-background-color: $bg-base-0 !default;
 $ribbon-tooltip-text-color: $content-font !default;
 $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
+$ribbon-backstage-menu-bg-color: $border-fg-alt !default;
+$ribbon-backstage-menu-items-bg-color: $border-fg-alt !default;
+$ribbon-backstage-items-color: $bg-base-0 !default;
+$ribbon-backstage-menu-icon-color: $bg-base-0 !default;
+$ribbon-backstage-menu-hover-bg-color: $border-fg-alt !default;
+$ribbon-backstage-menu-hover-border-color: $bg-base-0 !default;
+$ribbon-backstage-menu-items-hover-color: $bg-base-0 !default;
+$ribbon-backstage-menu-icon-hover-color: $bg-base-0 !default;
+$ribbon-backstage-menu-active-bg-color: $hover-bg !default;
+$ribbon-backstage-menu-active-border-color: $hover-border !default;
+$ribbon-backstage-menu-items-active-color: $content-font !default;
+$ribbon-backstage-menu-icon-active-color: $content-font !default;
+$ribbon-backstage-separator-color: $bg-base-0 !default;
+$ribbon-backstage-btn-bg-color: $border-fg-alt !default;
+$ribbon-backstage-btn-color: $bg-base-0 !default;
+$ribbon-backstage-btn-focus-bg-color: $border-fg-alt !default;
+$ribbon-backstage-btn-focus-color: $bg-base-0 !default;
+$ribbon-backstage-btn-focus-border-color: $bg-base-0 !default;
+$ribbon-backstage-btn-hover-bg-color: $hover-bg !default;
+$ribbon-backstage-btn-hover-color: $content-font !default;
+$ribbon-backstage-btn-hover-border-color: $hover-border !default;
+$ribbon-backstage-close-btn-font-weight: 400 !default;
+$ribbon-group-button-dropdown-popup-background: $bg-base-0 !default;
+$ribbon-group-button-icon-hover-color: $hover-font !default;
+$ribbon-group-button-hover-background: $hover-bg !default;
+$ribbon-group-button-text-hover-color: $hover-font !default;
+$ribbon-group-button-active-background: $hover-bg !default;
+$ribbon-group-button-text-active-color: $hover-font !default;
+$ribbon-group-button-selected-background: $hover-bg !default;
+$ribbon-group-button-dropdown-popup-border-color: $border-default !default;
+$ribbon-group-button-dropdown-popup-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;

package/styles/ribbon/_layout.scss

@@ -12,7 +12,8 @@
         display: none;
       }
 
-      .e-ribbon-file-menu {
+      .e-ribbon-file-menu,
+      .e-ribbon-backstage {
         position: absolute;
         line-height: $ribbon-file-menu-height;
         padding: $ribbon-file-menu-padding;
@@ -21,6 +22,7 @@
         font-size: $ribbon-file-menu-size;
         font-weight: $ribbon-file-menu-weight;
         box-shadow: none;
+        text-transform: none;
 
         &.e-active {
           border-radius: $ribbon-file-menu-border-radius;
@@ -168,7 +170,13 @@
     }
 
     .e-content {
-      width: calc(100% - $ribbon-collapsible-content-width);
+      width: 100%;
+    }
+
+    &.e-ribbon-collapsible {
+      .e-content {
+        width: calc(100% - $ribbon-collapsible-content-width);
+      }
     }
 
     .e-ribbon-collapse-btn {
@@ -280,6 +288,14 @@
       position: relative;
       padding-top: $ribbon-group-padding;
       height: $ribbon-group-height;
+
+      &.e-hidden {
+        display: none;
+      }
+
+      &.e-disabled {
+        pointer-events: none;
+      }
     }
 
     .e-ribbon-group::after {
@@ -299,7 +315,14 @@
       }
 
       .e-ribbon-overall-of-btn {
-        right: $ribbon-overflow-collapse-btn-right;
+        right: 0;
+      }
+
+      &.e-ribbon-collapsible {
+
+        .e-ribbon-overall-of-btn {
+          right: $ribbon-overflow-collapse-btn-right;
+        }
       }
 
       .e-tab-header {
@@ -320,7 +343,14 @@
       }
 
       .e-ribbon-overall-of-btn {
-        left: $ribbon-overflow-collapse-btn-right;
+        left: 0;
+      }
+
+      &.e-ribbon-collapsible {
+
+        .e-ribbon-overall-of-btn {
+          left: $ribbon-overflow-collapse-btn-right;
+        }
       }
 
       .e-tab-header {
@@ -333,6 +363,112 @@
     }
   }
 
+  .e-ribbon-backstage-popup.e-ribbon-backstage-open {
+    display: flex;
+  }
+
+  .e-ribbon-backstage-popup {
+    .e-ribbon-backstage-wrapper {
+      display: flex;
+      flex-direction: column;
+
+      .e-ribbon-backstage-items-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+      }
+
+      .e-btn {
+        border: none;
+        border-radius: unset;
+        box-shadow: none;
+        padding: unset;
+        text-align: start;
+        width: 100%;
+        height: $ribbon-backstage-btn-height;
+        line-height: $ribbon-backstage-btn-line-height;
+
+        .e-btn-icon {
+          width: auto;
+          margin: 0;
+          font-size: $ribbon-backstage-btn-icon-font-size;
+          line-height: $ribbon-backstage-btn-icon-line-height;
+          padding: $ribbon-backstage-btn-icon-padding;
+        }
+
+        &:focus {
+          border-style: solid;
+          border-width: $ribbon-backstage-btn-focus-border;
+        }
+
+        &:hover {
+          border-style: solid;
+          border-width: $ribbon-backstage-btn-hover-border;
+        }
+
+        &:focus:hover {
+          border-style: solid;
+          border-width: $ribbon-backstage-btn-focus-border;
+        }
+      }
+
+      .e-ribbon-backstage-menu {
+        border: unset;
+        border-radius: unset;
+
+        &.e-menu-wrapper ul.e-vertical,
+        &.e-menu-wrapper ul.e-ul {
+          min-width: 135px;
+
+          &.e-menu .e-menu-item {
+            &.e-separator {
+              margin: 4px 20px;
+            }
+          }
+
+          .e-menu-item:not(.e-separator) {
+            height: $ribbon-backstage-menu-item-height;
+            line-height: $ribbon-backstage-menu-item-height;
+            padding: 0;
+
+            &:focus {
+              border-style: solid;
+              border-width: $ribbon-backstage-menu-hover-border;
+            }
+
+            &.e-selected,
+            &:hover {
+              border-style: solid;
+              border-width: $ribbon-backstage-menu-active-border;
+            }
+
+            &.e-selected:focus {
+              border-style: solid;
+              border-width: $ribbon-backstage-menu-hover-border;
+            }
+
+            .e-menu-icon {
+              width: auto;
+              margin-right: unset;
+              font-size: $ribbon-backstage-menu-icon-font-size;
+              line-height: $ribbon-backstage-menu-icon-line-height;
+              padding: $ribbon-backstage-menu-icon-padding;
+            }
+
+            &.e-blankicon {
+              padding-left: $ribbon-backstage-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
+      }
+    }
+
+    .e-ribbon-backstage-content {
+      overflow: auto;
+    }
+  }
+
   .e-ribbon.e-rbn,
   .e-ribbon-group-overflow-ddb {
     border: $ribbon-border;
@@ -444,6 +580,10 @@
       padding: 1px;
       vertical-align: middle;
 
+      &.e-hidden {
+        display: none;
+      }
+
       .e-btn {
         border: $ribbon-items-border;
         border-radius: $ribbon-items-border-radius;
@@ -457,6 +597,11 @@
         }
       }
 
+      .e-btn-group .e-btn.e-ribbon-group-button,
+      .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type) {
+        border: $ribbon-items-border;
+      }
+
       &.e-ribbon-large-item {
         .e-btn {
           max-width: $ribbon-large-items-max-width;
@@ -510,6 +655,10 @@
       min-height: 33%;
       padding: $ribbon-items-padding;
 
+      .e-btn-group {
+        box-shadow: none;
+      }
+
       .e-checkbox-wrapper {
         padding: $ribbon-items-checkbox-padding;
 
@@ -682,6 +831,24 @@
 
     .e-ribbon-overflow-target {
 
+      &.e-hidden {
+        display: none;
+      }
+
+      &.e-disabled {
+        pointer-events: none;
+      }
+
+      .e-ribbon-of-tab .e-ribbon-of-group-container {
+        &.e-hidden {
+          display: none;
+        }
+
+        &.e-disabled {
+          pointer-events: none;
+        }
+      }
+
       .e-ribbon-item {
 
         & > .e-input-group,
@@ -752,6 +919,58 @@
     }
   }
 
+  .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group {
+    flex-direction: column;
+  }
+
+  .e-dropdown-popup.e-ribbon-dropdown-group-button {
+    border-radius: $ribbon-group-button-ddb-border-radius;
+    border: $ribbon-group-button-ddb-border;
+    padding: $ribbon-group-button-ddb-padding;
+
+    &.e-ribbon-group-button-overflow-popup .e-btn-group {
+      .e-btn.e-ribbon-group-button:not(.e-icon-btn) {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+      }
+    }
+    
+    .e-btn-group {
+      box-shadow: none;
+      border-radius: $ribbon-group-button-ddb-border-radius;
+      
+      .e-btn-icon {
+        font-size: 16px;
+        line-height: 16px;
+        font-weight: $ribbon-items-font-weight;
+        margin: $ribbon-group-button-icon-margin;
+        width: auto;
+        &.e-icon-left {
+          padding: $ribbon-group-button-icon-padding;
+        }
+      }
+      .e-btn.e-ribbon-group-button {
+        padding: 0;
+        font-weight: $ribbon-items-font-weight;
+        font-size: $ribbon-items-btn-size;
+        border: none;
+        text-transform: none;
+
+        &:not(.e-icon-btn) {
+          padding: $ribbon-group-button-padding;
+        }
+
+        &:focus,
+        &:focus-visible {
+          outline: none;
+          box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
+        }
+      }
+    }
+  }
+
   .e-ribbon-menu {
     display: block;
 
@@ -823,7 +1042,8 @@
     }
 
     .e-ribbon-tab {
-      .e-ribbon-file-menu {
+      .e-ribbon-file-menu,
+      .e-ribbon-backstage {
         line-height: $ribbon-bigger-file-menu-height;
         padding: $ribbon-bigger-file-menu-padding;
         font-size: $ribbon-bigger-file-menu-size;
@@ -1124,4 +1344,59 @@
       }
     }
   }
+
+  .e-bigger .e-ribbon-backstage-popup {
+    .e-ribbon-backstage-wrapper {
+      .e-btn {
+        height: $ribbon-bigger-backstage-btn-height;
+        line-height: $ribbon-bigger-backstage-btn-line-height;
+
+        .e-btn-icon {
+          font-size: $ribbon-bigger-backstage-btn-icon-font-size;
+          line-height: $ribbon-bigger-backstage-btn-icon-line-height;
+          padding: $ribbon-bigger-backstage-btn-icon-padding;
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical,
+  .e-bigger.e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical,
+  .e-bigger .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul,
+  .e-bigger.e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul {
+    .e-menu-item:not(.e-separator) {
+      height: $ribbon-bigger-backstage-menu-item-height;
+
+      .e-menu-icon {
+        font-size: $ribbon-bigger-backstage-menu-icon-font-size;
+        line-height: $ribbon-bigger-backstage-menu-icon-line-height;
+        padding: $ribbon-bigger-backstage-menu-icon-padding;
+      }
+
+      &.e-blankicon {
+        padding-left: $ribbon-bigger-backstage-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+  }
+
+  .e-bigger .e-dropdown-popup.e-ribbon-dropdown-group-button,
+  .e-bigger.e-dropdown-popup.e-ribbon-dropdown-group-button {
+    padding: $ribbon-group-button-ddb-padding;
+    .e-btn-group {
+      .e-btn-icon {
+        font-size: $ribbon-bigger-items-icon-size;
+        line-height: $ribbon-bigger-items-icon-height;
+        margin: $ribbon-bigger-group-button-icon-margin;
+        &.e-icon-left {
+          padding: $ribbon-bigger-group-button-icon-padding;
+        }
+      }
+      .e-btn.e-ribbon-group-button {
+        font-size: $ribbon-bigger-items-btn-size;
+        &:not(.e-icon-btn) {
+          padding: $ribbon-bigger-group-button-padding;
+        }
+      }
+    }
+  }
 }