@syncfusion/ej2-angular-ribbon 22.2.12 → 23.1.36

package/styles/ribbon/_material-dark-definition.scss

@@ -96,6 +96,26 @@ $ribbon-launcher-icon-margin: 0 7px 2px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 2px 7px !default;
 $ribbon-ddb-popup-font-size: 14px;
 $ribbon-ddb-popup-height: 36px;
+$ribbon-backstage-menu-hover-border: 0 !default;
+$ribbon-backstage-menu-active-border: 0 !default;
+$ribbon-backstage-menu-item-height: 32px !default;
+$ribbon-backstage-menu-icon-font-size: 16px !default;
+$ribbon-backstage-menu-icon-line-height: 16px !default;
+$ribbon-backstage-menu-icon-padding: 8px 16px !default;
+$ribbon-backstage-menu-blank-icon-padding: 48px !default;
+$ribbon-backstage-btn-focus-border: 0 !default;
+$ribbon-backstage-btn-height: 32px !default;
+$ribbon-backstage-btn-line-height: 32px !default;
+$ribbon-backstage-btn-icon-font-size: 16px !default;
+$ribbon-backstage-btn-icon-line-height: 16px !default;
+$ribbon-backstage-btn-icon-padding: 8px 16px !default;
+$ribbon-backstage-btn-hover-border: 0 !default;
+$ribbon-group-button-icon-margin: $ribbon-items-margin !default;
+$ribbon-group-button-ddb-padding: 6px 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 8px 0 0 !default;
+$ribbon-group-button-ddb-border: none !default;
 
 $ribbon-bigger-content-height: 120px !default;
 $ribbon-bigger-group-overflow-content-height: 120px !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: 48px;
+$ribbon-bigger-backstage-menu-item-height: 36px !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: 8px 12px 8px 16px !default;
+$ribbon-bigger-backstage-menu-blank-icon-padding: 48px !default;
+$ribbon-bigger-backstage-btn-height: 36px !default;
+$ribbon-bigger-backstage-btn-line-height: 36px !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: 8px 12px 8px 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 8px 0 0 !default;
 
 $ribbon-header-bg-color: $grey-900 !default;
 $ribbon-border-color: $grey-600 !default;
@@ -208,3 +242,34 @@ $ribbon-hscroll-focus-color: $grey-dark-font !default;
 $ribbon-tooltip-background-color: $grey-700 !default;
 $ribbon-tooltip-text-color: $grey-dark-font !default;
 $ribbon-overflow-box-shadow: 0 3px 8px 0 rgba($grey-black, .26) !default;
+$ribbon-backstage-menu-bg-color: $primary !default;
+$ribbon-backstage-menu-items-bg-color: $primary !default;
+$ribbon-backstage-items-color: $primary-font !default;
+$ribbon-backstage-menu-icon-color: $primary-font !default;
+$ribbon-backstage-menu-hover-bg-color: $primary-300 !default;
+$ribbon-backstage-menu-hover-border-color: unset !default;
+$ribbon-backstage-menu-items-hover-color: $primary-font !default;
+$ribbon-backstage-menu-icon-hover-color: $primary-font !default;
+$ribbon-backstage-menu-active-bg-color: $primary-200 !default;
+$ribbon-backstage-menu-active-border-color: unset !default;
+$ribbon-backstage-menu-items-active-color: $primary-font !default;
+$ribbon-backstage-menu-icon-active-color: $primary-font !default;
+$ribbon-backstage-separator-color: $grey-600 !default;
+$ribbon-backstage-btn-bg-color: $primary !default;
+$ribbon-backstage-btn-color: $primary-font !default;
+$ribbon-backstage-btn-focus-bg-color: $primary-300 !default;
+$ribbon-backstage-btn-focus-color: $primary-font !default;
+$ribbon-backstage-btn-focus-border-color: unset !default;
+$ribbon-backstage-btn-hover-bg-color: $primary-200 !default;
+$ribbon-backstage-btn-hover-color: $primary-font !default;
+$ribbon-backstage-btn-hover-border-color: unset !default;
+$ribbon-backstage-close-btn-font-weight: 400 !default;
+$ribbon-group-button-dropdown-popup-background: $grey-800 !default;
+$ribbon-group-button-icon-hover-color: rgba($grey-white, .64) !default;
+$ribbon-group-button-hover-background: rgba($grey-white, .12) !default;
+$ribbon-group-button-text-hover-color: rgba($grey-white, 1) !default;
+$ribbon-group-button-active-background: rgba($grey-white, .16) !default;
+$ribbon-group-button-text-active-color: rgba($grey-white, 1) !default;
+$ribbon-group-button-selected-background: rgba($grey-white, .16) !default;
+$ribbon-group-button-dropdown-popup-border-color: unset !default;
+$ribbon-group-button-dropdown-popup-box-shadow: 0 3px 8px 0 rgba($grey-black, .26) !default;

package/styles/ribbon/_material-definition.scss

@@ -96,6 +96,26 @@ $ribbon-launcher-icon-margin: 0 7px 2px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 2px 7px !default;
 $ribbon-ddb-popup-font-size: 14px;
 $ribbon-ddb-popup-height: 36px;
+$ribbon-backstage-menu-hover-border: 0 !default;
+$ribbon-backstage-menu-active-border: 0 !default;
+$ribbon-backstage-menu-item-height: 32px !default;
+$ribbon-backstage-menu-icon-font-size: 16px !default;
+$ribbon-backstage-menu-icon-line-height: 16px !default;
+$ribbon-backstage-menu-icon-padding: 8px 16px !default;
+$ribbon-backstage-menu-blank-icon-padding: 48px !default;
+$ribbon-backstage-btn-focus-border: 0 !default;
+$ribbon-backstage-btn-height: 32px !default;
+$ribbon-backstage-btn-line-height: 32px !default;
+$ribbon-backstage-btn-icon-font-size: 16px !default;
+$ribbon-backstage-btn-icon-line-height: 16px !default;
+$ribbon-backstage-btn-icon-padding: 8px 16px !default;
+$ribbon-backstage-btn-hover-border: 0 !default;
+$ribbon-group-button-icon-margin: $ribbon-items-margin !default;
+$ribbon-group-button-ddb-padding: 6px 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 8px 0 0 !default;
+$ribbon-group-button-ddb-border: none !default;
 
 $ribbon-bigger-content-height: 120px !default;
 $ribbon-bigger-group-overflow-content-height: 120px !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: 48px;
+$ribbon-bigger-backstage-menu-item-height: 36px !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: 8px 12px 8px 16px !default;
+$ribbon-bigger-backstage-menu-blank-icon-padding: 48px !default;
+$ribbon-bigger-backstage-btn-height: 36px !default;
+$ribbon-bigger-backstage-btn-line-height: 36px !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: 8px 12px 8px 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 8px 0 0 !default;
 
 $ribbon-header-bg-color: $grey-50 !default;
 $ribbon-border-color: $grey-300 !default;
@@ -208,3 +242,34 @@ $ribbon-hscroll-focus-color: $grey-light-font !default;
 $ribbon-tooltip-background-color: $grey-700 !default;
 $ribbon-tooltip-text-color: $grey-dark-font !default;
 $ribbon-overflow-box-shadow: 0 5px 5px -3px rgba($grey-black, .2), 0 8px 10px 1px rgba($grey-black, .14), 0 3px 14px 2px rgba($grey-black, .12) !default;
+$ribbon-backstage-menu-bg-color: $primary !default;
+$ribbon-backstage-menu-items-bg-color: $primary !default;
+$ribbon-backstage-items-color: $grey-dark-font !default;
+$ribbon-backstage-menu-icon-color: $grey-dark-font !default;
+$ribbon-backstage-menu-hover-bg-color: $primary-300 !default;
+$ribbon-backstage-menu-hover-border-color: unset !default;
+$ribbon-backstage-menu-items-hover-color: $grey-dark-font !default;
+$ribbon-backstage-menu-icon-hover-color: $grey-dark-font !default;
+$ribbon-backstage-menu-active-bg-color: $primary-200 !default;
+$ribbon-backstage-menu-active-border-color: unset !default;
+$ribbon-backstage-menu-items-active-color: $primary-font !default;
+$ribbon-backstage-menu-icon-active-color: $primary-font !default;
+$ribbon-backstage-separator-color: $grey-300 !default;
+$ribbon-backstage-btn-bg-color: $primary !default;
+$ribbon-backstage-btn-color: $grey-dark-font !default;
+$ribbon-backstage-btn-focus-bg-color: $primary-300 !default;
+$ribbon-backstage-btn-focus-color: $grey-dark-font !default;
+$ribbon-backstage-btn-focus-border-color: unset !default;
+$ribbon-backstage-btn-hover-bg-color: $primary-200 !default;
+$ribbon-backstage-btn-hover-color: $primary-font !default;
+$ribbon-backstage-btn-hover-border-color: unset !default;
+$ribbon-backstage-close-btn-font-weight: 400 !default;
+$ribbon-group-button-dropdown-popup-background: $grey-white !default;
+$ribbon-group-button-icon-hover-color: rgba($grey-black, .54) !default;
+$ribbon-group-button-hover-background: rgba($grey-black, .12) !default;
+$ribbon-group-button-text-hover-color: rgba($grey-black, .84) !default;
+$ribbon-group-button-active-background: rgba($grey-black, .16) !default;
+$ribbon-group-button-text-active-color: rgba($grey-black, .84) !default;
+$ribbon-group-button-selected-background: rgba($grey-black, .16) !default;
+$ribbon-group-button-dropdown-popup-border-color: unset !default;
+$ribbon-group-button-dropdown-popup-box-shadow: 0 6px 6px 0 rgba(0, 0, 0, .23), 0 10px 20px 0 rgba(0, 0, 0, .19) !default;

package/styles/ribbon/_material3-definition.scss

@@ -96,6 +96,26 @@ $ribbon-launcher-icon-margin: 0 2px 2px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 2px 2px 0 !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: 20px !default;
+$ribbon-backstage-menu-icon-line-height: 20px !default;
+$ribbon-backstage-menu-icon-padding: 9px 16px 9px 14px !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: 20px !default;
+$ribbon-backstage-btn-icon-line-height: 20px !default;
+$ribbon-backstage-btn-icon-padding: 9px 16px 9px 14px !default;
+$ribbon-backstage-btn-hover-border: 0 !default;
+$ribbon-group-button-icon-margin: 5px !default;
+$ribbon-group-button-ddb-padding: 4px 9px !default;
+$ribbon-group-button-icon-padding: 0 1px 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: none !default;
 
 $ribbon-bigger-content-height: 120px !default;
 $ribbon-bigger-group-overflow-content-height: 120px !default;
@@ -161,6 +181,20 @@ $ribbon-bigger-launcher-icon-margin: 0 2px 2px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 2px 2px 0 !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: 24px !default;
+$ribbon-bigger-backstage-menu-icon-line-height: 24px !default;
+$ribbon-bigger-backstage-menu-icon-padding: 12px 12px 12px 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: 24px !default;
+$ribbon-bigger-backstage-btn-icon-line-height: 24px !default;
+$ribbon-bigger-backstage-btn-icon-padding: 12px 12px 12px 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: 12px !default;
+$ribbon-bigger-group-button-padding: 0 8px 0 0 !default;
 
 $ribbon-header-bg-color: $content-bg-color-alt2 !default;
 $ribbon-border-color: unset !default;
@@ -208,3 +242,35 @@ $ribbon-hscroll-focus-color: rgba($icon-color) !default;
 $ribbon-tooltip-background-color: rgba($tooltip-bg-color) !default;
 $ribbon-tooltip-text-color: rgba($tooltip-text-color) !default;
 $ribbon-overflow-box-shadow: $shadow-md !default;
+$ribbon-backstage-menu-bg-color: rgba($primary) !default;
+$ribbon-backstage-menu-items-bg-color: rgba($primary) !default;
+$ribbon-backstage-items-color: rgba($surface) !default;
+$ribbon-backstage-menu-icon-color: rgba($surface) !default;
+$ribbon-backstage-menu-hover-bg-color: $primary-bg-color-hover !default;
+$ribbon-backstage-menu-hover-border-color: unset !default;
+$ribbon-backstage-menu-items-hover-color: rgba($surface) !default;
+$ribbon-backstage-menu-icon-hover-color: rgba($surface) !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: rgba($surface) !default;
+$ribbon-backstage-menu-icon-active-color: rgba($surface) !default;
+$ribbon-backstage-separator-color: rgba($flyout-border) !default;
+$ribbon-backstage-separator-color: $border-light !default;
+$ribbon-backstage-btn-bg-color: rgba($primary) !default;
+$ribbon-backstage-btn-color: rgba($surface) !default;
+$ribbon-backstage-btn-focus-bg-color: $primary-bg-color-hover !default;
+$ribbon-backstage-btn-focus-color: rgba($surface) !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: rgba($surface) !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: $icon-color-hover !default;
+$ribbon-group-button-hover-background: $flyout-bg-color-hover !default;
+$ribbon-group-button-text-hover-color: $content-text-color-hover !default;
+$ribbon-group-button-active-background: rgba($content-bg-color-selected) !default;
+$ribbon-group-button-text-active-color: $content-text-color-selected !default;
+$ribbon-group-button-selected-background: rgba($content-bg-color-selected) !default;
+$ribbon-group-button-dropdown-popup-border-color: unset !default;
+$ribbon-group-button-dropdown-popup-box-shadow: $shadow-sm !default;

package/styles/ribbon/_tailwind-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: 2px !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: 2px !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: $secondary-text-color-pressed !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-hover !default;
+$ribbon-backstage-menu-hover-border-color: $primary-lighter !default;
+$ribbon-backstage-menu-items-hover-color: $primary-text-focus !default;
+$ribbon-backstage-menu-icon-hover-color: $primary-text-focus !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-pressed !default;
+$ribbon-backstage-menu-icon-active-color: $primary-text-pressed !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-hover !default;
+$ribbon-backstage-btn-focus-color: $primary-text-focus !default;
+$ribbon-backstage-btn-focus-border-color: $primary-lighter !default;
+$ribbon-backstage-btn-hover-bg-color: $primary-bg-color-pressed !default;
+$ribbon-backstage-btn-hover-color: $primary-text-pressed !default;
+$ribbon-backstage-btn-hover-border-color: unset !default;
+$ribbon-backstage-close-btn-font-weight: 400 !default;
+$ribbon-group-button-dropdown-popup-background: $content-bg-color !default;
+$ribbon-group-button-icon-hover-color: $content-text-color-hover !default;
+$ribbon-group-button-hover-background: $content-bg-color-hover !default;
+$ribbon-group-button-text-hover-color: $content-text-color-hover !default;
+$ribbon-group-button-active-background: $content-bg-color-selected !default;
+$ribbon-group-button-text-active-color: $content-text-color-selected !default;
+$ribbon-group-button-selected-background: $content-bg-color-selected !default;
+$ribbon-group-button-dropdown-popup-border-color: $border-light !default;
+$ribbon-group-button-dropdown-popup-box-shadow: none !default;

package/styles/ribbon/_theme.scss

@@ -62,7 +62,8 @@
         }
       }
 
-      .e-ribbon-file-menu {
+      .e-ribbon-file-menu,
+      .e-ribbon-backstage {
         color: $ribbon-text-color;
         background: $ribbon-items-background-color;
         border-color: $ribbon-border-color;
@@ -108,6 +109,105 @@
     }
   }
 
+  .e-ribbon-backstage-popup {
+    box-shadow: $ribbon-overflow-box-shadow;
+
+    .e-ribbon-backstage-wrapper {
+      background: $ribbon-backstage-menu-bg-color;
+    }
+
+    .e-btn {
+      background: $ribbon-backstage-btn-bg-color;
+      color: $ribbon-backstage-btn-color;
+      font-weight: $ribbon-backstage-close-btn-font-weight;
+      @if ($skin-name == 'material') {
+        text-transform: none;
+      }
+
+      &:focus {
+        background: $ribbon-backstage-btn-focus-bg-color;
+        color: $ribbon-backstage-btn-focus-color;
+        border-color: $ribbon-backstage-btn-focus-border-color;
+      }
+
+      &:hover {
+        background: $ribbon-backstage-btn-hover-bg-color;
+        color: $ribbon-backstage-btn-hover-color;
+        border-color: $ribbon-backstage-btn-hover-border-color;
+      }
+
+      &:hover:focus {
+        background: $ribbon-backstage-btn-focus-bg-color;
+        color: $ribbon-backstage-btn-focus-color;
+        border-color: $ribbon-backstage-btn-focus-border-color;
+      }
+    }
+
+    .e-ribbon-backstage-menu {
+
+      &.e-menu-wrapper,
+      &.e-menu-container {
+        &:not(.e-menu-popup) {
+          background: $ribbon-backstage-menu-bg-color;
+        }
+      }
+
+      &.e-menu-wrapper ul.e-vertical,
+      &.e-menu-wrapper ul.e-ul {
+        &.e-menu {
+          background: $ribbon-backstage-menu-items-bg-color;
+        }
+
+        .e-menu-item {
+          color: $ribbon-backstage-items-color;
+
+          .e-menu-icon {
+            color: $ribbon-backstage-menu-icon-color;
+          }
+
+          &.e-separator {
+            background: $ribbon-backstage-separator-color;
+          }
+
+          &:focus {
+            background: $ribbon-backstage-menu-hover-bg-color;
+            border-color: $ribbon-backstage-menu-hover-border-color;
+            color: $ribbon-backstage-menu-items-hover-color;
+
+            .e-menu-icon {
+              color: $ribbon-backstage-menu-icon-hover-color;
+            }
+          }
+
+          &.e-selected,
+          &:hover {
+            background: $ribbon-backstage-menu-active-bg-color;
+            border-color: $ribbon-backstage-menu-active-border-color;
+            color: $ribbon-backstage-menu-items-active-color;
+
+            .e-menu-icon {
+              color: $ribbon-backstage-menu-icon-active-color;
+            }
+          }
+          &.e-selected:focus {
+            background: $ribbon-backstage-menu-hover-bg-color;
+            border-color: $ribbon-backstage-menu-hover-border-color;
+            color: $ribbon-backstage-menu-items-hover-color;
+
+            .e-menu-icon {
+              color: $ribbon-backstage-menu-icon-hover-color;
+            }
+          }
+        }
+      }
+    }
+
+    .e-ribbon-backstage-template,
+    .e-ribbon-backstage-content {
+      background: $ribbon-header-bg-color;
+    }
+  }
+
   .e-ribbon.e-rbn,
   .e-ribbon-group-overflow-ddb {
     background: $ribbon-header-bg-color;
@@ -159,6 +259,8 @@
     &.e-ribbon-overflow {
 
       .e-btn:not(.e-ribbon-file-menu),
+      .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),
       .e-ribbon-group-of-btn {
         color: $ribbon-text-color;
         background: $ribbon-items-background-color;
@@ -295,6 +397,47 @@
     }
   }
 
+  .e-dropdown-popup.e-ribbon-dropdown-group-button {
+    background: $ribbon-group-button-dropdown-popup-background;
+    box-shadow: $ribbon-group-button-dropdown-popup-box-shadow;
+    border-color: $ribbon-group-button-dropdown-popup-border-color;
+    .e-btn-icon {
+      color: $ribbon-items-icon-color;
+    }
+    .e-btn.e-ribbon-group-button {
+      color: $ribbon-text-color;
+      background: $ribbon-group-button-dropdown-popup-background;
+      &.e-icon-btn:hover,
+      &.e-icon-btn:focus {
+        background: $ribbon-group-button-hover-background;
+        .e-btn-icon {
+          color: $ribbon-group-button-icon-hover-color;
+        }
+      }
+      &:hover,
+      &:focus {
+        background: $ribbon-group-button-hover-background;
+        color: $ribbon-group-button-text-hover-color;
+        .e-btn-icon {
+          color: $ribbon-group-button-icon-hover-color;
+        }
+      }
+      &.e-icon-btn.e-active {
+        background: $ribbon-group-button-active-background;
+        .e-btn-icon {
+          color: $ribbon-items-active-color;
+        }
+      }
+      &.e-active {
+        background: $ribbon-group-button-selected-background;
+        color: $ribbon-group-button-text-active-color;
+        .e-btn-icon {
+          color: $ribbon-items-active-color;
+        }
+      }
+    }
+  }
+
   .e-ribbon-tooltip.e-tooltip-wrap {
     &.e-popup {
       background: $ribbon-tooltip-background-color;