@syncfusion/ej2-angular-ribbon 21.1.35-ngcc → 21.1.35

package/src/ribbon/collections.directive.d.ts

@@ -1,5 +1,6 @@
 import { ViewContainerRef } from '@angular/core';
 import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
+import * as i0 from "@angular/core";
 /**
  * `e-ribbon-collection` directive represent a collection in the Angular Ribbon.
  * ```html
@@ -42,6 +43,8 @@ export declare class RibbonCollectionDirective extends ComplexBase<RibbonCollect
      */
     items: any;
     constructor(viewContainerRef: ViewContainerRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<RibbonCollectionDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RibbonCollectionDirective, "e-ribbon-collection", never, { "cssClass": "cssClass"; "id": "id"; "items": "items"; }, {}, ["childItems"]>;
 }
 /**
  * RibbonCollection Array Directive
@@ -49,4 +52,6 @@ export declare class RibbonCollectionDirective extends ComplexBase<RibbonCollect
  */
 export declare class RibbonCollectionsDirective extends ArrayBase<RibbonCollectionsDirective> {
     constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<RibbonCollectionsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RibbonCollectionsDirective, "e-ribbon-collections", never, {}, {}, ["children"]>;
 }

package/src/ribbon/groups.directive.d.ts

@@ -1,5 +1,6 @@
 import { ViewContainerRef } from '@angular/core';
 import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
+import * as i0 from "@angular/core";
 /**
  * `e-ribbon-group` directive represent a group in the Angular Ribbon.
  * ```html
@@ -83,6 +84,8 @@ export declare class RibbonGroupDirective extends ComplexBase<RibbonGroupDirecti
      */
     showLauncherIcon: any;
     constructor(viewContainerRef: ViewContainerRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<RibbonGroupDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RibbonGroupDirective, "e-ribbon-group", never, { "collections": "collections"; "cssClass": "cssClass"; "enableGroupOverflow": "enableGroupOverflow"; "groupIconCss": "groupIconCss"; "header": "header"; "id": "id"; "isCollapsed": "isCollapsed"; "isCollapsible": "isCollapsible"; "orientation": "orientation"; "priority": "priority"; "showLauncherIcon": "showLauncherIcon"; }, {}, ["childCollections"]>;
 }
 /**
  * RibbonGroup Array Directive
@@ -90,4 +93,6 @@ export declare class RibbonGroupDirective extends ComplexBase<RibbonGroupDirecti
  */
 export declare class RibbonGroupsDirective extends ArrayBase<RibbonGroupsDirective> {
     constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<RibbonGroupsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RibbonGroupsDirective, "e-ribbon-groups", never, {}, {}, ["children"]>;
 }

package/src/ribbon/items.directive.d.ts

@@ -1,5 +1,6 @@
 import { ViewContainerRef } from '@angular/core';
 import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
+import * as i0 from "@angular/core";
 /**
  * `e-ribbon-item` directive represent a item in the Angular Ribbon.
  * ```html
@@ -110,6 +111,8 @@ export declare class RibbonItemDirective extends ComplexBase<RibbonItemDirective
      */
     itemTemplate: any;
     constructor(viewContainerRef: ViewContainerRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<RibbonItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RibbonItemDirective, "e-ribbon-item", never, { "activeSize": "activeSize"; "allowedSizes": "allowedSizes"; "buttonSettings": "buttonSettings"; "checkBoxSettings": "checkBoxSettings"; "colorPickerSettings": "colorPickerSettings"; "comboBoxSettings": "comboBoxSettings"; "cssClass": "cssClass"; "disabled": "disabled"; "displayOptions": "displayOptions"; "dropDownSettings": "dropDownSettings"; "id": "id"; "itemTemplate": "itemTemplate"; "ribbonTooltipSettings": "ribbonTooltipSettings"; "splitButtonSettings": "splitButtonSettings"; "type": "type"; }, {}, ["itemTemplate"]>;
 }
 /**
  * RibbonItem Array Directive
@@ -117,4 +120,6 @@ export declare class RibbonItemDirective extends ComplexBase<RibbonItemDirective
  */
 export declare class RibbonItemsDirective extends ArrayBase<RibbonItemsDirective> {
     constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<RibbonItemsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RibbonItemsDirective, "e-ribbon-items", never, {}, {}, ["children"]>;
 }

package/src/ribbon/ribbon-all.module.d.ts

@@ -1,4 +1,7 @@
 import { ValueProvider } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./ribbon.module";
 export declare const RibbonButtonService: ValueProvider;
 export declare const RibbonDropDownService: ValueProvider;
 export declare const RibbonSplitButtonService: ValueProvider;
@@ -10,4 +13,7 @@ export declare const RibbonFileMenuService: ValueProvider;
  * NgModule definition for the Ribbon component with providers.
  */
 export declare class RibbonAllModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RibbonAllModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RibbonAllModule, never, [typeof i1.CommonModule, typeof i2.RibbonModule], [typeof i2.RibbonModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RibbonAllModule>;
 }

package/src/ribbon/ribbon.component.d.ts

@@ -2,6 +2,7 @@ import { ElementRef, ViewContainerRef, Renderer2, Injector, QueryList } from '@a
 import { IComponentBase } from '@syncfusion/ej2-angular-base';
 import { Ribbon } from '@syncfusion/ej2-ribbon';
 import { RibbonTabsDirective } from './tabs.directive';
+import * as i0 from "@angular/core";
 export declare const inputs: string[];
 export declare const outputs: string[];
 export declare const twoWays: string[];
@@ -39,4 +40,6 @@ export declare class RibbonComponent extends Ribbon implements IComponentBase {
     ngAfterContentChecked(): void;
     registerEvents: (eventList: string[]) => void;
     addTwoWay: (propList: string[]) => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RibbonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RibbonComponent, "ejs-ribbon", never, { "activeLayout": "activeLayout"; "cssClass": "cssClass"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "fileMenu": "fileMenu"; "helpPaneTemplate": "helpPaneTemplate"; "isMinimized": "isMinimized"; "launcherIconCss": "launcherIconCss"; "locale": "locale"; "selectedTab": "selectedTab"; "tabAnimation": "tabAnimation"; "tabs": "tabs"; "width": "width"; }, { "launcherIconClick": "launcherIconClick"; "ribbonCollapsing": "ribbonCollapsing"; "ribbonExpanding": "ribbonExpanding"; "tabSelected": "tabSelected"; "tabSelecting": "tabSelecting"; }, ["helpPaneTemplate", "childTabs"], ["div"]>;
 }

package/src/ribbon/ribbon.module.d.ts

@@ -1,5 +1,15 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ribbon.component";
+import * as i2 from "./items.directive";
+import * as i3 from "./collections.directive";
+import * as i4 from "./groups.directive";
+import * as i5 from "./tabs.directive";
+import * as i6 from "@angular/common";
 /**
  * NgModule definition for the Ribbon component.
  */
 export declare class RibbonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RibbonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RibbonModule, [typeof i1.RibbonComponent, typeof i2.RibbonItemDirective, typeof i2.RibbonItemsDirective, typeof i3.RibbonCollectionDirective, typeof i3.RibbonCollectionsDirective, typeof i4.RibbonGroupDirective, typeof i4.RibbonGroupsDirective, typeof i5.RibbonTabDirective, typeof i5.RibbonTabsDirective], [typeof i6.CommonModule], [typeof i1.RibbonComponent, typeof i2.RibbonItemDirective, typeof i2.RibbonItemsDirective, typeof i3.RibbonCollectionDirective, typeof i3.RibbonCollectionsDirective, typeof i4.RibbonGroupDirective, typeof i4.RibbonGroupsDirective, typeof i5.RibbonTabDirective, typeof i5.RibbonTabsDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RibbonModule>;
 }

package/src/ribbon/tabs.directive.d.ts

@@ -1,5 +1,6 @@
 import { ViewContainerRef } from '@angular/core';
 import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
+import * as i0 from "@angular/core";
 /**
  * `e-ribbon-tab` directive represent a tab of the Angular Ribbon.
  * It must be contained in a Ribbon component(`ejs-ribbon`).
@@ -39,6 +40,8 @@ export declare class RibbonTabDirective extends ComplexBase<RibbonTabDirective>
      */
     id: any;
     constructor(viewContainerRef: ViewContainerRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<RibbonTabDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RibbonTabDirective, "e-ribbon-tab", never, { "cssClass": "cssClass"; "groups": "groups"; "header": "header"; "id": "id"; }, {}, ["childGroups"]>;
 }
 /**
  * RibbonTab Array Directive
@@ -46,4 +49,6 @@ export declare class RibbonTabDirective extends ComplexBase<RibbonTabDirective>
  */
 export declare class RibbonTabsDirective extends ArrayBase<RibbonTabsDirective> {
     constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<RibbonTabsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RibbonTabsDirective, "e-ribbon-tabs", never, {}, {}, ["children"]>;
 }

package/styles/bootstrap-dark.css

@@ -227,7 +227,7 @@
   border-style: solid;
   border-width: 1px;
   border-radius: 2px;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -799,10 +799,6 @@
   padding-right: 16px;
   height: 50px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 50px;

package/styles/bootstrap.css

@@ -232,7 +232,7 @@
   border-style: solid;
   border-width: 1px;
   border-radius: 2px;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -804,10 +804,6 @@
   padding-right: 16px;
   height: 52px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 52px;

package/styles/bootstrap4.css

@@ -282,7 +282,7 @@
   border-style: solid;
   border-width: 1px;
   border-radius: 2px;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -854,10 +854,6 @@
   padding-right: 16px;
   height: 52px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 52px;

package/styles/bootstrap5-dark.css

@@ -311,7 +311,7 @@
   border-style: solid;
   border-width: 1px;
   border-radius: 2px;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -883,10 +883,6 @@
   padding-right: 16px;
   height: 48px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 48px;

package/styles/bootstrap5.css

@@ -311,7 +311,7 @@
   border-style: solid;
   border-width: 1px;
   border-radius: 2px;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -883,10 +883,6 @@
   padding-right: 16px;
   height: 48px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 48px;

package/styles/fabric-dark.css

@@ -203,7 +203,7 @@
   border-style: solid;
   border-width: 1px;
   border-radius: unset;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -775,10 +775,6 @@
   padding-right: 16px;
   height: 50px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 50px;

package/styles/fabric.css

@@ -201,7 +201,7 @@
   border-style: solid;
   border-width: 1px;
   border-radius: unset;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -773,10 +773,6 @@
   padding-right: 16px;
   height: 50px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 50px;

package/styles/fluent-dark.css

@@ -287,7 +287,7 @@
   border-style: solid;
   border-width: 1px;
   border-radius: 2px;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -859,10 +859,6 @@
   padding-right: 16px;
   height: 48px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 48px;

package/styles/fluent.css

@@ -287,7 +287,7 @@
   border-style: solid;
   border-width: 1px;
   border-radius: 2px;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -859,10 +859,6 @@
   padding-right: 16px;
   height: 48px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 48px;

package/styles/highcontrast-light.css

@@ -210,7 +210,7 @@
   border-style: solid;
   border-width: 1px;
   border-radius: unset;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -782,10 +782,6 @@
   padding-right: 16px;
   height: 50px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 50px;

package/styles/highcontrast.css

@@ -219,7 +219,7 @@
   border-style: solid;
   border-width: 1px;
   border-radius: unset;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -791,10 +791,6 @@
   padding-right: 16px;
   height: 50px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 50px;

package/styles/material-dark.css

@@ -273,7 +273,7 @@
   border-style: solid;
   border-width: 1px;
   border-radius: unset;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -845,10 +845,6 @@
   padding-right: 16px;
   height: 56px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 56px;

package/styles/material.css

@@ -306,7 +306,7 @@
   border-style: solid;
   border-width: 1px;
   border-radius: unset;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -878,10 +878,6 @@
   padding-right: 16px;
   height: 56px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 56px;

package/styles/ribbon/_all.scss

@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';

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

@@ -0,0 +1,206 @@
+$ribbon-border: none !default;
+$ribbon-file-menu-border: none !default;
+$ribbon-file-menu-border-width: unset !default;
+$ribbon-file-menu-weight: 400 !default;
+$ribbon-file-menu-size: 14px !default;
+$ribbon-file-menu-padding: 12px 15px 14px !default;
+$ribbon-file-menu-height: 22px !default;
+$ribbon-file-menu-border-radius: unset !default;
+$ribbon-help-template-padding: 16px !default;
+$ribbon-help-template-height: 48px !default;
+$ribbon-help-template-border: none !default;
+$ribbon-toolbar-items-height: 48px !default;
+$ribbon-horizontal-nav-height: 48px !default;
+$ribbon-group-header-padding: 8px 11px 3px 11px !default;
+$ribbon-group-header-height: 15px !default;
+$ribbon-group-header-font-size: 10px !default;
+$ribbon-group-overflow-padding: 2px 8px !default;
+$ribbon-group-content-padding: 0 8px !default;
+$ribbon-group-content-height: 108px !default;
+$ribbon-group-overflow-height: 108px !default;
+$ribbon-group-header-margin: 16px !default;
+$ribbon-group-content-margin: 16px !default;
+$ribbon-group-padding: 6px !default;
+$ribbon-group-height: 140px !default;
+$ribbon-simplified-group-padding: 2px !default;
+$ribbon-simplified-group-content-padding: 0 4px 0 !default;
+$ribbon-simplified-group-content-height: 40px !default;
+$ribbon-collapse-btn-padding: 2px !default;
+$ribbon-collapse-btn-height: 12px !default;
+$ribbon-collapse-btn-font-weight: 400 !default;
+$ribbon-collapsible-content-width: 20px !default;
+$ribbon-overflow-btn-content-width: 40px !default;
+$ribbon-overflow-btn-font-weight: 400 !default;
+$ribbon-overflow-btn-icon-padding: 8px !default;
+$ribbon-overflow-btn-padding: 0 !default;
+$ribbon-overflow-btn-margin: 0 !default;
+$ribbon-overflow-collapse-btn-right: 25px !default;
+$ribbon-overflow-item-padding: 0 !default;
+$ribbon-overflow-wrapper-item-margin: 2px 8px !default;
+$ribbon-overflow-item-btn-height: 22px !default;
+$ribbon-overflow-item-btn-margin: 0 6px 0 0 !default;
+$ribbon-overflow-btn-height: 32px !default;
+$ribbon-rtl-overflow-item-btn-margin: 0 0 0 6px !default;
+$ribbon-overflow-btn-border-radius: 2px !default;
+$ribbon-overflow-header-height: 22px !default;
+$ribbon-overflow-header-padding: 2px 8px !default;
+$ribbon-overflow-header-weight: 400 !default;
+$ribbon-overflow-dropdown-btn-padding: 0 13px !default;
+$ribbon-overall-overflow-btn-position: 4px !default;
+$ribbon-dropdown-btn-padding: 0 13px !default;
+$ribbon-dropdown-caret-btn-size: 16px !default;
+$ribbon-dropdown-caret-btn-height: 16px !default;
+$ribbon-dropdown-caret-btn-padding: 2px 4px !default;
+$ribbon-items-padding: 2px !default;
+$ribbon-large-items-btn-padding: 0 3px !default;
+$ribbon-large-items-btn-height: 18px !default;
+$ribbon-large-items-icon-size: 32px !default;
+$ribbon-large-items-max-width: 10ch !default;
+$ribbon-large-items-icon-padding: 8px 6px 6px !default;
+$ribbon-items-border: none !default;
+$ribbon-items-border-radius: 2px !default;
+$ribbon-items-font-weight: 400 !default;
+$ribbon-items-btn-size: 12px !default;
+$ribbon-items-btn-padding: 0 !default;
+$ribbon-items-margin: 8px !default;
+$ribbon-items-height: 18px !default;
+$ribbon-items-checkbox-size: 12px !default;
+$ribbon-items-checkbox-padding: 0 8px !default;
+$ribbon-input-group-height: 32px !default;
+$ribbon-input-padding: 5px 0 5px 8px !default;
+$ribbon-input-size: 14px !default;
+$ribbon-input-height: 22px !default;
+$ribbon-input-weight: 400 !default;
+$ribbon-input-icon-size: 16px !default;
+$ribbon-input-icon-height: 16px !default;
+$ribbon-input-icon-padding: 8px 4px 8px 2px !default;
+$ribbon-input-icon-weight: 400 !default;
+$ribbon-input-group-border-radius: 2px !default;
+$ribbon-input-group-margin: 4px !default;
+$ribbon-tab-border: none !default;
+$ribbon-tab-text-size: 14px !default;
+$ribbon-tab-text-padding: 12px 15px 14px !default;
+$ribbon-tab-text-height: 22px !default;
+$ribbon-tab-text-weight: 400 !default;
+$ribbon-nav-arrow-size: 16px !default;
+$ribbon-nav-arrow-height: 16px !default;
+$ribbon-hscroll-padding: 0 !default;
+$ribbon-hscroll-nav-arrow-padding: 0 4px !default;
+$ribbon-hscroll-nav-arrow-weight: 400 !default;
+$ribbon-hscroll-nav-border-width: 1px !default;
+$ribbon-hscroll-nav-border-radius: 2px !default;
+$ribbon-menu-border: 1px solid !default;
+$ribbon-menu-border-radius: 4px !default;
+$ribbon-menu-blank-icon-padding: 37px !default;
+$ribbon-launcher-icon-margin: 0 8px 3px 0 !default;
+$ribbon-rtl-launcher-icon-margin: 0 0 3px 8px !default;
+
+$ribbon-bigger-content-height: 132px !default;
+$ribbon-bigger-group-overflow-content-height: 132px !default;
+$ribbon-bigger-group-height: 164px !default;
+$ribbon-bigger-file-menu-height: 24px !default;
+$ribbon-bigger-file-menu-padding: 13px 20px !default;
+$ribbon-bigger-file-menu-size: 16px !default;
+$ribbon-bigger-help-template-padding: 16px !default;
+$ribbon-bigger-help-template-height: 50px !default;
+$ribbon-bigger-toolbar-items-height: 50px !default;
+$ribbon-bigger-horizontal-nav-height: 50px !default;
+$ribbon-bigger-collapse-btn-padding: 4px !default;
+$ribbon-bigger-collapse-btn-height: 16px !default;
+$ribbon-bigger-collapse-btn-font-size: 16px !default;
+$ribbon-bigger-collapsible-content-width: 24px !default;
+$ribbon-bigger-overflow-btn-content-width: 40px !default;
+$ribbon-bigger-overflow-btn-font-size: 20px !default;
+$ribbon-bigger-overflow-btn-height: 20px !default;
+$ribbon-bigger-overflow-btn-icon-padding: 10px !default;
+$ribbon-bigger-overflow-collapse-btn-right: 28px !default;
+$ribbon-bigger-overall-overflow-btn-height: 40px !default;
+$ribbon-bigger-overall-overflow-btn-position: 6px !default;
+$ribbon-bigger-overflow-wrapper-item-margin: 2px 10px !default;
+$ribbon-bigger-group-header-padding: 0 11px 8px !default;
+$ribbon-bigger-group-header-height: 18px !default;
+$ribbon-bigger-group-header-font-size: 12px !default;
+$ribbon-bigger-simplified-group-content-height: 52px !default;
+$ribbon-bigger-tab-text-size: 16px !default;
+$ribbon-bigger-tab-text-padding: 13px 20px !default;
+$ribbon-bigger-tab-text-height: 24px !default;
+$ribbon-bigger-large-items-icon-padding: 12px 9px 4px !default;
+$ribbon-bigger-large-items-icon-size: 40px !default;
+$ribbon-bigger-large-items-btn-padding: 0 6px !default;
+$ribbon-bigger-large-items-btn-size: 14px !default;
+$ribbon-bigger-large-items-btn-height: 22px !default;
+$ribbon-bigger-items-padding: 2px !default;
+$ribbon-bigger-items-btn-size: 14px !default;
+$ribbon-bigger-items-height: 22px !default;
+$ribbon-bigger-items-icon-height: 20px !default;
+$ribbon-bigger-items-icon-size: 20px !default;
+$ribbon-bigger-items-margin: 10px !default;
+$ribbon-bigger-items-checkbox-size: 14px !default;
+$ribbon-bigger-items-checkbox-padding: 0 10px !default;
+$ribbon-bigger-input-group-height: 40px !default;
+$ribbon-bigger-input-items-size: 14px !default;
+$ribbon-bigger-input-items-height: 22px !default;
+$ribbon-bigger-input-items-btn-size: 16px !default;
+$ribbon-bigger-input-items-btn-height: 16px !default;
+$ribbon-bigger-input-padding: 9px 0 9px 12px !default;
+$ribbon-bigger-input-icon-padding: 12px 4px 12px 2px !default;
+$ribbon-bigger-input-group-margin: 4px !default;
+$ribbon-bigger-dropdown-btn-padding: 0 17px !default;
+$ribbon-bigger-menu-blank-icon-padding: 41px !default;
+$ribbon-bigger-dropdown-btn-size: 16px !default;
+$ribbon-bigger-dropdown-btn-line-height: 16px !default;
+$ribbon-bigger-dropdown-caret-btn-padding: 3px 5px !default;
+$ribbon-bigger-dropdown-caret-btn-size: 16px !default;
+$ribbon-bigger-dropdown-caret-btn-height: 16px !default;
+$ribbon-bigger-caret-dropdown-btn-padding: 0 17px !default;
+$ribbon-bigger-color-picker-height: 20px !default;
+$ribbon-bigger-color-picker-width: 20px !default;
+$ribbon-bigger-launcher-icon-margin: 0 8px 12px 0 !default;
+$ribbon-bigger-rtl-launcher-icon-margin: 0 0 12px 8px !default;
+
+$ribbon-header-bg-color: $gray-darker !default;
+$ribbon-border-color: unset !default;
+$ribbon-group-seperator-color: $grey-99 !default;
+$ribbon-group-border-color: $grey-99 !default;
+$ribbon-input-group-border-color: $grey-99 !default;
+$ribbon-input-group-background-color: $gray-base !default;
+$ribbon-items-icon-color: $grey-dark-font !default;
+$ribbon-items-background-color: $gray-darker !default;
+$ribbon-items-hover-background-color: $gray !default;
+$ribbon-items-focus-background-color: $gray !default;
+$ribbon-items-hover-color: $grey-dark-font !default;
+$ribbon-items-active-color: $grey-dark-font !default;
+$ribbon-items-focus-color: $grey-dark-font !default;
+$ribbon-items-active-background-color: $gray !default;
+$ribbon-items-hover-border-color: unset !default;
+$ribbon-items-focus-border-color: unset !default;
+$ribbon-items-disabled-color: rgba($grey-dark-font, .3) !default;
+$ribbon-collapse-btn-background: $gray-darker !default;
+$ribbon-text-color: $grey-light-font !default;
+$ribbon-tab-text-focus-color: $grey-dark-font !default;
+$ribbon-tab-text-hover-color: lighten($brand-primary, 10%) !default;
+$ribbon-active-tab-color: $brand-primary-lighten-10 !default;
+$ribbon-active-tab-indicator-color: $brand-primary-lighten-10 !default;
+$ribbon-active-file-menu-color: $brand-primary-font !default;
+$ribbon-active-file-menu-background: $brand-primary-lighten-10 !default;
+$ribbon-menu-border-color: $grey-44 !default;
+$ribbon-menu-hover-background-color: $grey-f5 !default;
+$ribbon-menu-items-color: $grey-light-font !default;
+$ribbon-menu-items-icon-color: $grey-dark-font !default;
+$ribbon-menu-background-color: $gray-dark !default;
+$ribbon-menu-items-background-color: $gray-dark !default;
+$ribbon-hscroll-border-color: $grey-99 !default;
+$ribbon-hscroll-color: $grey-dark-font !default;
+$ribbon-hscroll-background-color: $gray-darker !default;
+$ribbon-hscroll-hover-border-color: $grey-99 !default;
+$ribbon-hscroll-hover-background-color: $gray !default;
+$ribbon-hscroll-hover-color: $grey-dark-font !default;
+$ribbon-hscroll-active-border-color: $grey-99 !default;
+$ribbon-hscroll-active-background-color: $gray !default;
+$ribbon-hscroll-active-color: $grey-dark-font !default;
+$ribbon-hscroll-focus-border-color: $grey-99 !default;
+$ribbon-hscroll-focus-background-color: $gray !default;
+$ribbon-hscroll-focus-color: $grey-dark-font !default;
+$ribbon-tooltip-background-color: $grey-dark-font !default;
+$ribbon-tooltip-text-color: $gray-base !default;
+$ribbon-overflow-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;