@syncfusion/ej2-ribbon 31.2.12 → 32.1.24

package/styles/ribbon/_bds-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
 $ribbon-border: none !default;
 $ribbon-border-radius: unset !default;
 $ribbon-disabled-opacity: .35 !default;
@@ -413,3 +415,145 @@ $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !d
 $ribbon-items-focus-box-shadow: none !default;
 $ribbon-skeleton-wave-color: linear-gradient(90deg, transparent 20%, $content-bg-color-alt3 50%, transparent 70%) !default;
 $ribbon-skeleton-bg-color: $content-bg-color-alt2 !default;
+
+$ribbon-skeleton-border-radius: 4px !default;
+$ribbon-overlay-gap: 30px !default;
+$ribbon-overlay-padding: 10px !default;
+$ribbon-tbar-child-margin: 0 !default;
+$ribbon-tbar-item-margin: 0 !default;
+$ribbon-tbar-item-border: none !default;
+$ribbon-tbar-active-border: none !default;
+$ribbon-tab-wrap-padding: 0 !default;
+$ribbon-tab-wrap-border: none !default;
+$ribbon-tab-text-margin: 0 !default;
+$ribbon-nav-arrow-letter-spacing: unset !default;
+$ribbon-overflow-items-margin: auto !default;
+$ribbon-overflow-btn-icon-size: 16px !default;
+$ribbon-overflow-btn-icon-line-height: 16px !default;
+$ribbon-gallery-text-font-size: 12px !default;
+$input-group-margin-bottom: 0 !default;
+$ribbon-group-container-padding: 0 !default;
+$ribbon-simplified-mode-group-content-padding: 0 !default;
+$ribbon-simplified-overlay-gap: 16px !default;
+$ribbon-group-border-right: 1px !default;
+$ribbon-scroll-device-padding-right: 30px !default;
+$ribbon-rtl-scroll-device-padding-left: 30px !default;
+$ribbon-backstage-btn-border: none !default;
+$ribbon-backstage-btn-border-radius: unset !default;
+$ribbon-backstage-btn-padding: unset !default;
+$ribbon-backstage-btn-icon-margin: 0 !default;
+$ribbon-backstage-menu-border: unset !default;
+$ribbon-backstage-menu-border-radius: unset !default;
+$ribbon-backstage-menu-item-margin: 4px 20px !default;
+$ribbon-backstage-menu-item-padding: 0 !default;
+$ribbon-backstage-menu-icon-margin-right: unset !default;
+$ribbon-backstage-menu-blank-icon-padding-left: 0 !default;
+$ribbon-input-icon-margin: 0 !default;
+$ribbon-input-icon-border: none !default;
+$ribbon-input-icon-border-radius: unset !default;
+$ribbon-clear-icon-border-radius: unset !default;
+$ribbon-item-padding: 1px !default;
+$ribbon-gallery-btn-icon-border-width: 0 0 0 1px !default;
+$ribbon-gallery-btn-icon-border-radius: 0 4px 4px 0 !default;
+$ribbon-gallery-container-padding: 0 !default;
+$ribbon-gallery-container-border-width: 1px !default;
+$ribbon-items-checkbox-margin: auto 0 !default;
+$ribbon-items-colorpicker-border: 1px !default;
+$ribbon-split-btn-padding: 0 !default;
+$ribbon-split-btn-wrapper-border: 1px !default;
+$ribbon-split-btn-border-radius: 0 !default;
+$ribbon-dropdown-btn-margin: auto !default;
+$ribbon-small-medium-item-padding: 0 !default;
+$ribbon-colorpicker-split-btn-wrapper-border: none !default;
+$ribbon-split-preview-border-radius: unset !default;
+$ribbon-dropdown-caret-btn-margin: 0 !default;
+$ribbon-split-btn-wrapper-margin: 0 !default;
+$ribbon-items-dropdown-btn-padding: 0 !default;
+$ribbon-items-icons-padding: 0 2px 0 0 !default;
+$ribbon-rtl-items-icons-padding: 0 0 0 2px !default;
+$ribbon-gallery-button-border-width: 0 1px 0 0 !default;
+$ribbon-gallery-button-border-radius: 4px 0 0 4px !default;
+$ribbon-overflow-target-border: 0 !default;
+$ribbon-item-input-group-margin: 5px 0 !default;
+$ribbon-gallery-dropdown-btn-padding: 0 !default;
+$ribbon-gallery-dropdown-btn-margin: 0 !default;
+$ribbon-checkbox-wrapper-padding: 0 !default;
+$ribbon-checkbox-wrapper-frame-margin: unset !default;
+$ribbon-btn-icon-left-margin: 0 !default;
+$ribbon-caret-icon-margin: 0 0 0 auto !default;
+$ribbon-rtl-caret-icon-margin: 0 auto 0 0 !default;
+$ribbon-group-btn-first-border-top-right-radius: 4px !default;
+$ribbon-group-btn-first-border-top-left-radius: 4px !default;
+$ribbon-group-btn-first-border-bottom-right-radius: 0 !default;
+$ribbon-group-btn-first-border-bottom-left-radius: 0 !default;
+$ribbon-group-btn-last-border-top-right-radius: 0 !default;
+$ribbon-group-btn-last-border-top-left-radius: 0 !default;
+$ribbon-group-btn-last-border-bottom-right-radius: 4px !default;
+$ribbon-group-btn-last-border-bottom-left-radius: 4px !default;
+$ribbon-group-button-item-padding: 0 !default;
+$ribbon-gallery-header-padding-top: 0 !default;
+$ribbon-gallery-popup-border-radius: 4px !default;
+$ribbon-group-button-icon-font-size: 16px !default;
+$ribbon-group-button-icon-line-height: 16px !default;
+$ribbon-gallery-item-margin: 2px !default;
+$ribbon-overflow-gallery-container-padding: 0 !default;
+$ribbon-overflow-gallery-container-margin: 0 !default;
+$ribbon-gallery-popup-items-border-width: 2px !default;
+$ribbon-gallery-popup-items-border-radius: 4px !default;
+$ribbon-gallery-icons-padding: 3px !default;
+$ribbon-gallery-selected-border-radius: 4px !default;
+$ribbon-menu-item-border-radius: unset !default;
+$ribbon-menu-icon-font-size: 16px !default;
+$ribbon-menu-icon-line-height: 16px !default;
+$ribbon-tooltip-padding: 4px !default;
+$ribbon-tooltip-title-font-size: 12px !default;
+$ribbon-tooltip-title-line-height: 18px !default;
+$ribbon-tooltip-title-padding: 4px 4px 0 !default;
+$ribbon-text-container-padding: 4px !default;
+$ribbon-tooltip-content-font-size: 10px !default;
+$ribbon-tooltip-content-line-height: 15px !default;
+$ribbon-tooltip-icon-font-size: 32px !default;
+$ribbon-tooltip-icon-line-height: 32px !default;
+$ribbon-tooltip-icon-padding-right: 8px !default;
+$ribbon-tab-header-border-width: 0 !default;
+$ribbon-medium-item-font-size: 16px !default;
+$ribbon-medium-item-line-height: 16px !default;
+
+$ribbon-bigger-tab-header-tbar-margin-right: 0 !default;
+$ribbon-bigger-gallery-container-padding: 0 !default;
+$ribbon-bigger-simplified-group-margin-bottom: 0 !default;
+$ribbon-bigger-colorpicker-split-btn-padding: 0 !default;
+$ribbon-bigger-colorpicker-split-btn-border: none !default;
+$ribbon-bigger-dropdown-caret-btn-margin: 0 !default;
+$ribbon-bigger-overflow-items-icon-left-margin: 0 !default;
+$ribbon-bigger-checkbox-padding: 0 !default;
+$ribbon-bigger-menu-icon-font-size: 20px !default;
+$ribbon-bigger-menu-icon-line-height: 20px !default;
+$dropdown-popup-border: 1px !default;
+$ribbon-backstage-wrapper-btn-icon-border: 2px !default;
+$ribbon-backstage-wrapper-btn-icon-focus-border: 2px !default;
+$ribbon-backstage-menu-item-border: 2px !default;
+$ribbon-backstage-menu-selected-focus-border: 2px !default;
+
+$ribbon-skeleton-height: 20px !default;
+$ribbon-overlay-height: 100% !default;
+$ribbon-tab-wrap-height: auto !default;
+$ribbon-text-wrap-height: auto !default;
+$ribbon-hscroll-nav-arrow-height: auto !default;
+$ribbon-simplified-group-height: auto !default;
+$ribbon-backstage-items-wrapper-height: 100% !default;
+$icon-top-height: 50% !default;
+$split-btn-wrapper-height: 50% !default;
+$split-btn-wrapper-icon-top-height: unset !default;
+$ribbon-items-checkbox-height: fit-content !default;
+$split-btn-wrapper-vertical-height: 100% !default;
+$ribbon-split-btn-icon-height: 16px !default;
+$ribbon-gallery-popup-items-height: 54px !default;
+$ribbon-group-after-height: calc(100% - 16px) !default;
+
+$ribbon-text-wrap-bigger-height: auto !default;
+$ribbon-simplified-group-bigger-height: auto !default;
+$ribbon-input-bigger-height: auto !default;
+$ribbon-separator-height: auto !default;
+$ribbon-split-btn-icon-width: 16px !default;
+$ribbon-tab-header-left: var(--fileMenuWidth) !default;

package/styles/ribbon/_bigger.bds.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bds';
+@import './_bigger';

package/styles/ribbon/_bigger.bootstrap-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap-dark';
+@import './_bigger';

package/styles/ribbon/_bigger.bootstrap.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap';
+@import './_bigger';

package/styles/ribbon/_bigger.bootstrap4.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap4';
+@import './_bigger';

package/styles/ribbon/_bigger.bootstrap5-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap5-dark';
+@import './_bigger';

package/styles/ribbon/_bigger.bootstrap5.3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap5.3';
+@import './_bigger';

package/styles/ribbon/_bigger.bootstrap5.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap5';
+@import './_bigger';

package/styles/ribbon/_bigger.fabric-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fabric-dark';
+@import './_bigger';

package/styles/ribbon/_bigger.fabric.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fabric';
+@import './_bigger';

package/styles/ribbon/_bigger.fluent-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fluent-dark';
+@import './_bigger';

package/styles/ribbon/_bigger.fluent.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fluent';
+@import './_bigger';

package/styles/ribbon/_bigger.fluent2.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fluent2';
+@import './_bigger';

package/styles/ribbon/_bigger.highcontrast-light.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.highcontrast-light';
+@import './_bigger';

package/styles/ribbon/_bigger.highcontrast.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.highcontrast';
+@import './_bigger';

package/styles/ribbon/_bigger.material-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material-dark';
+@import './_bigger';

package/styles/ribbon/_bigger.material.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material';
+@import './_bigger';

package/styles/ribbon/_bigger.material3-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material3-dark';
+@import './_bigger';

package/styles/ribbon/_bigger.material3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material3';
+@import './_bigger';

package/styles/ribbon/_bigger.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @mixin ribbon-font-props($font-size, $line-height) {
   font-size: $font-size;
   line-height: $line-height;
@@ -49,7 +50,7 @@
         }
 
         .e-toolbar-item {
-          margin-right: 0;
+          margin-right: $ribbon-bigger-tab-header-tbar-margin-right;
 
           .e-tab-text {
             @include ribbon-font-props($ribbon-bigger-tab-text-size, $ribbon-bigger-tab-text-height);
@@ -68,7 +69,7 @@
       &.e-tab {
         &.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus,
         .e-tab-header .e-toolbar-item .e-text-wrap {
-          height: auto;
+          height: $ribbon-text-wrap-bigger-height;
         }
       }
     }
@@ -116,7 +117,7 @@
         height: $ribbon-bigger-gallery-wrapper-height;
       }
       &:has(.e-ribbon-gallery-container) {
-        padding: 0;
+        padding: $ribbon-bigger-gallery-container-padding;
       }
 
       .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
@@ -158,11 +159,11 @@
         &:not(:has(.e-ribbon-template)) {
           .e-btn {
             &:not(.e-icon-btn, .e-dropdown-btn) {
-              padding: 0 12px 0 1px;
+              padding: $ribbon-bigger-group-overflow-ddb-btn-padding;
             }
           }
           .e-dropdown-btn.e-btn {
-            padding: 0 4px 0 1px;
+            padding: $ribbon-bigger-group-overflow-dropdown-btn-padding;
           }
         }
       }
@@ -171,11 +172,11 @@
         &:not(:has(.e-ribbon-template)) {
           .e-btn {
             &:not(.e-icon-btn, .e-dropdown-btn) {
-              padding: 0 1px 0 12px;
+              padding: $ribbon-bigger-rtl-ddb-btn-padding;
             }
           }
           .e-dropdown-btn.e-btn {
-            padding: 0 1px 0 4px;
+            padding: $ribbon-bigger-rtl-dropdown-btn-padding;
           }
         }
       }
@@ -191,11 +192,11 @@
 
     &.e-ribbon-simplified-mode {
       .e-ribbon-group {
-        height: auto;
+        height: $ribbon-simplified-group-bigger-height;
       }
 
       .e-input-group {
-        margin-bottom: 0;
+        margin-bottom: $ribbon-bigger-simplified-group-margin-bottom;
       }
 
       .e-ribbon-group-content {
@@ -221,7 +222,7 @@
 
       input.e-input {
         @include ribbon-font-props($ribbon-bigger-input-items-size, $ribbon-bigger-input-items-height);
-        height: auto;
+        height: $ribbon-input-bigger-height;
       }
 
       &.e-control-wrapper {
@@ -296,8 +297,8 @@
         }
 
         .e-split-colorpicker.e-split-btn {
-          padding: 0;
-          border: none;
+          padding: $ribbon-bigger-colorpicker-split-btn-padding;
+          border: $ribbon-bigger-colorpicker-split-btn-border;
 
           .e-btn-icon {
             height: $ribbon-bigger-color-picker-height;
@@ -312,7 +313,7 @@
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-bigger-dropdown-caret-btn-size, $ribbon-bigger-dropdown-caret-btn-height);
           padding: $ribbon-bigger-dropdown-caret-btn-padding;
-          margin: 0;
+          margin: $ribbon-bigger-dropdown-caret-btn-margin;
         }
       }
     }
@@ -322,7 +323,7 @@
   .e-bigger.e-ribbon-group-overflow-ddb {
     &.e-dropdown-popup:has(.e-ribbon-overflow-target) {
       @if ($skin-name == 'fluent2') {
-        padding: 6px;
+        padding: $ribbon-bigger-overflow-target-padding;
       }
     }
     .e-ribbon-overflow-target {
@@ -349,7 +350,7 @@
               min-height: $ribbon-bigger-overflow-items-min-width-height;
             }
             &.e-icon-left {
-              margin: 0;
+              margin: $ribbon-bigger-overflow-items-icon-left-margin;
             }
           }
           &:has(.e-colorpicker-wrapper) {
@@ -368,7 +369,7 @@
       }
       .e-ribbon-item:not(:has(.e-ribbon-template)) > .e-checkbox-wrapper {
         margin: $ribbon-bigger-checkbox-margin;
-        padding: 0;
+        padding: $ribbon-bigger-checkbox-padding;
       }
     }
 
@@ -453,11 +454,11 @@
     height: $ribbon-bigger-ddb-popup-height;
 
     &.e-separator {
-      height: auto;
+      height: $ribbon-separator-height;
     }
 
     .e-menu-icon {
-      @include ribbon-font-props(20px, 20px);
+      @include ribbon-font-props($ribbon-bigger-menu-icon-font-size, $ribbon-bigger-menu-icon-line-height);
       min-height: 20px;
       min-width: 20px;
     }

package/styles/ribbon/_bigger.tailwind-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind-dark';
+@import './_bigger';

package/styles/ribbon/_bigger.tailwind.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind';
+@import './_bigger';

package/styles/ribbon/_bigger.tailwind3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind3';
+@import './_bigger';

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

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 
 $ribbon-border: none !default;
 $ribbon-border-radius: unset !default;
@@ -415,3 +417,141 @@ $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !d
 $ribbon-items-focus-box-shadow: none !default;
 $ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, $grey-88 50%, rgba(255, 255, 255, 0) 70%) !default;
 $ribbon-skeleton-bg-color: $gray-dark !default;
+
+$ribbon-skeleton-border-radius: 4px !default;
+$ribbon-overlay-gap: 30px !default;
+$ribbon-overlay-padding: 10px !default;
+$ribbon-tbar-child-margin: 0 !default;
+$ribbon-tbar-item-margin: 0 !default;
+$ribbon-tbar-item-border: none !default;
+$ribbon-tbar-active-border: none !default;
+$ribbon-tab-wrap-padding: 0 !default;
+$ribbon-tab-wrap-border: none !default;
+$ribbon-tab-text-margin: 0 !default;
+$ribbon-nav-arrow-letter-spacing: unset !default;
+$ribbon-overflow-items-margin: auto !default;
+$ribbon-overflow-btn-icon-size: 16px !default;
+$ribbon-overflow-btn-icon-line-height: 16px !default;
+$ribbon-gallery-text-font-size: 12px !default;
+$input-group-margin-bottom: 0 !default;
+$ribbon-group-container-padding: 0 !default;
+$ribbon-simplified-mode-group-content-padding: 0 !default;
+$ribbon-simplified-overlay-gap: 16px !default;
+$ribbon-group-border-right: 1px !default;
+$ribbon-scroll-device-padding-right: 30px !default;
+$ribbon-rtl-scroll-device-padding-left: 30px !default;
+$ribbon-backstage-btn-border: none !default;
+$ribbon-backstage-btn-border-radius: unset !default;
+$ribbon-backstage-btn-padding: unset !default;
+$ribbon-backstage-btn-icon-margin: 0 !default;
+$ribbon-backstage-menu-border: unset !default;
+$ribbon-backstage-menu-border-radius: unset !default;
+$ribbon-backstage-menu-item-margin: 4px 20px !default;
+$ribbon-backstage-menu-item-padding: 0 !default;
+$ribbon-backstage-menu-icon-margin-right: unset !default;
+$ribbon-backstage-menu-blank-icon-padding-left: 0 !default;
+$ribbon-input-icon-margin: 0 !default;
+$ribbon-input-icon-border: none !default;
+$ribbon-input-icon-border-radius: unset !default;
+$ribbon-clear-icon-border-radius: unset !default;
+$ribbon-item-padding: 1px !default;
+$ribbon-gallery-btn-icon-border-width: 0 0 0 1px !default;
+$ribbon-gallery-btn-icon-border-radius: 0 4px 4px 0 !default;
+$ribbon-gallery-container-padding: 0 !default;
+$ribbon-gallery-container-border-width: 1px !default;
+$ribbon-items-checkbox-margin: auto 0 !default;
+$ribbon-items-colorpicker-border: 1px !default;
+$ribbon-split-btn-padding: 0 !default;
+$ribbon-split-btn-wrapper-border: 1px !default;
+$ribbon-split-btn-border-radius: 0 !default;
+$ribbon-dropdown-btn-margin: auto !default;
+$ribbon-small-medium-item-padding: 0 !default;
+$ribbon-colorpicker-split-btn-wrapper-border: none !default;
+$ribbon-split-preview-border-radius: unset !default;
+$ribbon-dropdown-caret-btn-margin: 0 !default;
+$ribbon-split-btn-wrapper-margin: 0 !default;
+$ribbon-items-dropdown-btn-padding: 0 !default;
+$ribbon-items-icons-padding: 0 2px 0 0 !default;
+$ribbon-rtl-items-icons-padding: 0 0 0 2px !default;
+$ribbon-gallery-button-border-width: 0 1px 0 0 !default;
+$ribbon-gallery-button-border-radius: 4px 0 0 4px !default;
+$ribbon-overflow-target-border: 0 !default;
+$ribbon-item-input-group-margin: 5px 0 !default;
+$ribbon-gallery-dropdown-btn-padding: 0 !default;
+$ribbon-gallery-dropdown-btn-margin: 0 !default;
+$ribbon-checkbox-wrapper-padding: 0 !default;
+$ribbon-checkbox-wrapper-frame-margin: unset !default;
+$ribbon-btn-icon-left-margin: 0 !default;
+$ribbon-caret-icon-margin: 0 0 0 auto !default;
+$ribbon-rtl-caret-icon-margin: 0 auto 0 0 !default;
+$ribbon-group-btn-first-border-top-right-radius: 4px !default;
+$ribbon-group-btn-first-border-top-left-radius: 4px !default;
+$ribbon-group-btn-first-border-bottom-right-radius: 0 !default;
+$ribbon-group-btn-first-border-bottom-left-radius: 0 !default;
+$ribbon-group-btn-last-border-top-right-radius: 0 !default;
+$ribbon-group-btn-last-border-top-left-radius: 0 !default;
+$ribbon-group-btn-last-border-bottom-right-radius: 4px !default;
+$ribbon-group-btn-last-border-bottom-left-radius: 4px !default;
+$ribbon-group-button-item-padding: 0 !default;
+$ribbon-gallery-header-padding-top: 0 !default;
+$ribbon-gallery-popup-border-radius: 4px !default;
+$ribbon-group-button-icon-font-size: 16px !default;
+$ribbon-group-button-icon-line-height: 16px !default;
+$ribbon-gallery-item-margin: 2px !default;
+$ribbon-overflow-gallery-container-padding: 0 !default;
+$ribbon-overflow-gallery-container-margin: 0 !default;
+$ribbon-gallery-popup-items-border-width: 2px !default;
+$ribbon-gallery-popup-items-border-radius: 4px !default;
+$ribbon-gallery-icons-padding: 3px !default;
+$ribbon-gallery-selected-border-radius: 4px !default;
+$ribbon-menu-item-border-radius: unset !default;
+$ribbon-menu-icon-font-size: 16px !default;
+$ribbon-menu-icon-line-height: 16px !default;
+$ribbon-tooltip-padding: 4px !default;
+$ribbon-tooltip-title-font-size: 12px !default;
+$ribbon-tooltip-title-line-height: 18px !default;
+$ribbon-tooltip-title-padding: 4px 4px 0 !default;
+$ribbon-text-container-padding: 4px !default;
+$ribbon-tooltip-content-font-size: 10px !default;
+$ribbon-tooltip-content-line-height: 15px !default;
+$ribbon-tooltip-icon-font-size: 32px !default;
+$ribbon-tooltip-icon-line-height: 32px !default;
+$ribbon-tooltip-icon-padding-right: 8px !default;
+$ribbon-tab-header-border-width: 0 !default;
+$ribbon-medium-item-font-size: 16px !default;
+$ribbon-medium-item-line-height: 16px !default;
+
+$ribbon-bigger-tab-header-tbar-margin-right: 0 !default;
+$ribbon-bigger-gallery-container-padding: 0 !default;
+$ribbon-bigger-simplified-group-margin-bottom: 0 !default;
+$ribbon-bigger-colorpicker-split-btn-padding: 0 !default;
+$ribbon-bigger-colorpicker-split-btn-border: none !default;
+$ribbon-bigger-dropdown-caret-btn-margin: 0 !default;
+$ribbon-bigger-overflow-items-icon-left-margin: 0 !default;
+$ribbon-bigger-checkbox-padding: 0 !default;
+$ribbon-bigger-menu-icon-font-size: 20px !default;
+$ribbon-bigger-menu-icon-line-height: 20px !default;
+$dropdown-popup-border: 1px !default;
+
+$ribbon-skeleton-height: 20px !default;
+$ribbon-overlay-height: 100% !default;
+$ribbon-tab-wrap-height: auto !default;
+$ribbon-text-wrap-height: auto !default;
+$ribbon-hscroll-nav-arrow-height: auto !default;
+$ribbon-simplified-group-height: auto !default;
+$ribbon-backstage-items-wrapper-height: 100% !default;
+$icon-top-height: 50% !default;
+$split-btn-wrapper-height: 50% !default;
+$split-btn-wrapper-icon-top-height: unset !default;
+$ribbon-items-checkbox-height: fit-content !default;
+$split-btn-wrapper-vertical-height: 100% !default;
+$ribbon-split-btn-icon-height: 16px !default;
+$ribbon-gallery-popup-items-height: 54px !default;
+$ribbon-group-after-height: calc(100% - 16px) !default;
+
+$ribbon-text-wrap-bigger-height: auto !default;
+$ribbon-simplified-group-bigger-height: auto !default;
+$ribbon-input-bigger-height: auto !default;
+$ribbon-separator-height: auto !default;
+$ribbon-split-btn-icon-width: 16px !default;
+$ribbon-tab-header-left: var(--fileMenuWidth) !default;