@syncfusion/ej2-ribbon 26.2.10 → 27.1.50

package/styles/ribbon/_layout.scss

@@ -17,6 +17,14 @@
         padding: $btn-padding;
       }
     }
+    @if ($skin-name == 'fluent2') {
+      .e-dropdown-btn.e-btn {
+        padding: 0 4px;
+      }
+      .e-split-btn-wrapper .e-dropdown-btn.e-btn {
+        padding: 0;
+      }
+    }
   }
 
   &.e-ribbon-medium-item {
@@ -61,6 +69,10 @@
     border-radius: $ribbon-border-radius;
 
     .e-ribbon-tab {
+      // For blazor ribbon overflow case
+      &.e-tab .e-content > .e-item.e-active {
+        overflow: hidden;
+      }
       .e-toolbar {
         min-height: auto;
         display: inline-block;
@@ -112,11 +124,20 @@
           border-width: 0;
         }
 
-        .e-indicator {
-          display: block;
-          z-index: 1;
-        }
+        
 
+        @if ($skin-name == 'fluent2') {
+          .e-indicator {
+            display: none;
+            z-index: 1;
+          }
+        }
+        @else {
+          .e-indicator {
+            display: block;
+            z-index: 1;
+          }
+        }
         .e-toolbar-items {
           @include ribbon-items-height($ribbon-toolbar-items-height, auto);
 
@@ -141,8 +162,15 @@
           &.e-active {
             border: none;
 
-            &::before {
-              display: none;
+            @if ($skin-name == 'fluent2') {
+              &::before {
+                display: block;
+              }
+            }
+            @else {
+              &::before {
+                display: none;
+              }
             }
           }
 
@@ -343,7 +371,10 @@
         }
       }
 
-      .e-ribbon-launcher-icon {
+      .e-ribbon-launcher-icon,
+      // For blazor ribbon overflow case
+      .e-ribbon-overall-overflow-popup,
+      .e-ribbon-group-container .e-ribbon-group-overflow-popup {
         display: none;
       }
 
@@ -641,6 +672,7 @@
     }
 
     .e-ribbon-row {
+      overflow: hidden;
       @include ribbon-display(inline-flex, column);
     }
 
@@ -729,7 +761,7 @@
           height: 50%;
 
           .e-icon-top {
-            height: 100%;
+            height: unset;
           }
         }
 
@@ -865,6 +897,11 @@
         }
       }
 
+      // For blazor ribbon small item to override dropdown width
+      &.e-ribbon-small-item .e-dropdown-btn .e-icon-left {
+        width: 1em;
+      }
+
       &.e-ribbon-medium-item {
         .e-btn {
           align-items: center;
@@ -883,17 +920,20 @@
     }
 
     &:not(.e-rtl) .e-ribbon-item {
-      @include ribbon-item-padding(0 4px 0 0, 0 2px 0 0);
+      @include ribbon-item-padding($ribbon-items-btn-padding, 0 2px 0 0);
     }
 
     &.e-rtl .e-ribbon-item {
-      @include ribbon-item-padding(0 0 0 4px, 0 0 0 2px);
+      @include ribbon-item-padding($ribbon-items-btn-rtl-padding, 0 0 0 2px);
     }
   }
 
   .e-ribbon-group-overflow-ddb {
     &.e-dropdown-popup:has(.e-ribbon-overflow-target) {
       min-width: 190px;
+      @if ($skin-name == 'fluent2') {
+        padding: 4px;
+      }
     }
     .e-ribbon-of-tab:not(.e-ribbon-active) {
       display: none;
@@ -903,6 +943,11 @@
       .e-ribbon-item:has(.e-ribbon-gallery-container) {
         border: 0;
       }
+      @if ($skin-name == 'fluent2') {
+        .e-ribbon-item.e-ribbon-medium-item .e-dropdown-btn.e-btn {
+          padding: 0;
+        }
+      }
       
       .e-ribbon-item:has(.e-input-group) {
         margin: 5px 0;
@@ -1010,6 +1055,14 @@
 
   .e-ribbon-group-overflow-ddb:not(.e-rtl) {
     .e-ribbon-overflow-target .e-ribbon-item {
+      @if ($skin-name == 'fluent2') {
+        &.e-ribbon-medium-item .e-btn {
+          &:not(.e-icon-btn, .e-dropdown-btn) {
+            padding: 0 4px 0 0;
+          }
+        }
+      }
+
       .e-ribbon-combobox-label,
       .e-ribbon-colorpicker-label {
         margin-left: $ribbon-items-label;
@@ -1021,13 +1074,14 @@
         }
 
         &:not(:has(.e-colorpicker-wrapper)) .e-btn {
-          &:not(:has(.e-btn-icon.e-icon-left)) {
+          &:not(:has(.e-btn-icon)) {
             padding-left: $ribbon-items-label;
           }
         }
       }
 
       &:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper,
+      &:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container,
       &:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
         margin-left: $ribbon-items-label;
       }
@@ -1049,6 +1103,13 @@
         padding: $ribbon-rtl-overflow-header-padding;
       }
       .e-ribbon-item {
+        @if ($skin-name == 'fluent2') {
+          &.e-ribbon-medium-item .e-btn {
+            &:not(.e-icon-btn, .e-dropdown-btn) {
+              padding: 0 0 0 4px;
+            }
+          }
+        }
         .e-ribbon-combobox-label,
         .e-ribbon-colorpicker-label {
           margin-right: $ribbon-items-label;
@@ -1060,7 +1121,7 @@
           }
 
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {
-            &:not(:has(.e-btn-icon.e-icon-left)) {
+            &:not(:has(.e-btn-icon)) {
               padding-right: $ribbon-items-label;
             }
           }
@@ -1135,6 +1196,7 @@
         @include ribbon-items-icon-images(16px);
         margin: $ribbon-group-button-icon-margin;
         width: auto;
+
         &.e-icon-left {
           padding: $ribbon-group-button-icon-padding;
         }
@@ -1288,6 +1350,7 @@
       @include ribbon-font-props(16px, 16px);
       @include ribbon-items-icon-images(16px);
     }
+
     @if ($skin-name == 'fluent2') {
       .e-menu-icon {
         padding: 0;
@@ -1321,267 +1384,6 @@
     }
   }
 
-  .e-bigger.e-ribbon.e-rbn,
-  .e-bigger .e-ribbon.e-rbn {
-    .e-ribbon-group {
-      height: $ribbon-bigger-group-height;
-    }
-
-    .e-ribbon-tab {
-      .e-ribbon-file-menu,
-      .e-ribbon-backstage {
-        @include ribbon-font-props($ribbon-bigger-file-menu-size, $ribbon-bigger-file-menu-height);
-        padding: $ribbon-bigger-file-menu-padding;
-      }
-
-      .e-ribbon-help-template {
-        padding-right: $ribbon-bigger-help-template-padding;
-        height: $ribbon-bigger-help-template-height;
-      }
-
-      .e-hscroll {
-        min-height: auto;
-      }
-
-      .e-tab-header {
-        .e-hor-nav {
-          @include ribbon-items-height($ribbon-bigger-horizontal-nav-height, $ribbon-bigger-horizontal-nav-height);
-        }
-
-        .e-toolbar-items {
-          height: $ribbon-bigger-toolbar-items-height;
-        }
-
-        .e-toolbar-item {
-          margin-right: 0;
-
-          .e-tab-text {
-            @include ribbon-font-props($ribbon-bigger-tab-text-size, $ribbon-bigger-tab-text-height);
-            padding: $ribbon-bigger-tab-text-padding;
-          }
-        }
-      }
-
-      &.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap {
-        &:focus,
-        &:focus .e-text-wrap {
-          height: $ribbon-bigger-toolbar-items-height;
-        }
-      }
-    }
-
-    &.e-ribbon-collapsible {
-      .e-content {
-        width: calc(100% - $ribbon-bigger-collapsible-content-width);
-      }
-
-      .e-ribbon-collapse-btn {
-        @include ribbon-font-props($ribbon-bigger-collapse-btn-font-size, $ribbon-bigger-collapse-btn-height);
-        padding: $ribbon-bigger-collapse-btn-padding;
-      }
-
-      &.e-ribbon-overflow {
-        .e-content {
-          width: calc(100% - $ribbon-bigger-collapsible-content-width - $ribbon-bigger-overflow-btn-content-width);
-        }
-
-        .e-ribbon-group-of-btn,
-        .e-ribbon-overall-of-btn {
-          height: $ribbon-bigger-overall-overflow-btn-height;
-
-          .e-btn-icon {
-            @include ribbon-font-props($ribbon-bigger-overflow-btn-font-size, $ribbon-bigger-overflow-btn-height);
-            padding: $ribbon-bigger-overflow-btn-icon-padding;
-          }
-        }
-
-        .e-ribbon-overall-of-btn {
-          bottom: $ribbon-bigger-overall-overflow-btn-position;
-        }
-
-        &:not(.e-rtl) .e-ribbon-overall-of-btn {
-          right: $ribbon-bigger-overflow-collapse-btn-right;
-        }
-
-        &.e-rtl .e-ribbon-overall-of-btn {
-          left: $ribbon-bigger-overflow-collapse-btn-right;
-        }
-      }
-    }
-    .e-ribbon-item {
-      &:has(.e-ribbon-gallery-container:not(.e-hidden)) {
-        height: $ribbon-bigger-gallery-wrapper-height;
-      }
-      &:has(.e-ribbon-gallery-container) {
-        padding: 0;
-      }
-
-      .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
-        max-height: $ribbon-bigger-gallery-items-wrapper-height;
-        width: $ribbon-bigger-gallery-items-wrapper-width;
-      }
-    }
-    
-    &.e-ribbon-simplified-mode {
-      .e-ribbon-item {
-        &:has(.e-ribbon-gallery-container:not(.e-hidden)) {
-          height: $ribbon-bigger-gallery-simplified-wrapper-height;
-        }
-
-        .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
-          max-height: $ribbon-bigger-gallery-simplified-items-wrapper-height;
-        }
-      }
-    }
-  }
-
-  .e-bigger.e-ribbon.e-rbn,
-  .e-bigger .e-ribbon.e-rbn,
-  .e-bigger .e-ribbon-group-overflow-ddb,
-  .e-bigger.e-ribbon-group-overflow-ddb {
-    .e-ribbon-group-header {
-      @include ribbon-font-props($ribbon-bigger-group-header-font-size, $ribbon-bigger-group-header-height);
-      padding: $ribbon-bigger-group-header-padding;
-    }
-
-    .e-ribbon-launcher-icon {
-      margin: $ribbon-bigger-launcher-icon-margin;
-    }
-
-    &.e-rtl .e-ribbon-launcher-icon {
-      margin: $ribbon-bigger-rtl-launcher-icon-margin;
-    }
-
-    &.e-ribbon-simplified-mode {
-      .e-ribbon-group {
-        height: auto;
-      }
-
-      .e-input-group {
-        margin-bottom: 0;
-      }
-
-      .e-ribbon-group-content {
-        height: $ribbon-bigger-simplified-group-content-height;
-      }
-    }
-
-    .e-ribbon-content-height {
-      height: $ribbon-bigger-content-height;
-    }
-
-    .e-ribbon-group-overflow {
-      height: $ribbon-bigger-group-overflow-content-height;
-    }
-
-    .e-input-group {
-      height: $ribbon-bigger-input-group-height;
-      margin: $ribbon-bigger-input-group-margin;
-
-      &:not(.e-float-input) .e-input {
-        min-height: auto;
-      }
-
-      input.e-input {
-        @include ribbon-font-props($ribbon-bigger-input-items-size, $ribbon-bigger-input-items-height);
-        padding: $ribbon-bigger-input-padding;
-        height: auto;
-      }
-
-      &.e-control-wrapper {
-        .e-input-group-icon {
-          @include ribbon-font-props($ribbon-bigger-input-items-btn-size, $ribbon-bigger-input-items-btn-height);
-          padding: $ribbon-bigger-input-icon-padding;
-
-          &.e-ddl-icon {
-            font-size: $ribbon-bigger-input-items-btn-size;
-          }
-        }
-      }
-    }
-
-    .e-ribbon-item {
-      padding: $ribbon-bigger-items-padding;
-
-      .e-checkbox-wrapper {
-        padding: $ribbon-bigger-items-checkbox-padding;
-
-        .e-label {
-          font-size: $ribbon-bigger-items-checkbox-size;
-        }
-      }
-    }
-
-    .e-ribbon-group-overflow,
-    .e-ribbon-item {
-      &.e-ribbon-large-item {
-        .e-btn {
-          @include ribbon-font-props($ribbon-bigger-large-items-btn-size, $ribbon-bigger-large-items-btn-height);
-          padding: $ribbon-bigger-large-items-btn-padding;
-          max-width: $ribbon-bigger-large-items-max-width;
-
-          .e-btn-icon:not(.e-caret) {
-            @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
-            font-size: $ribbon-bigger-large-items-icon-size;
-            padding: $ribbon-bigger-large-items-icon-padding;
-          }
-
-          &.e-top-icon-btn {
-            gap: $ribbon-bigger-large-items-btn-gap;
-          }
-        }
-
-        .e-dropdown-btn .e-caret {
-          @include ribbon-font-props($ribbon-bigger-dropdown-btn-size, $ribbon-bigger-dropdown-btn-line-height);
-          padding: $ribbon-bigger-caret-dropdown-btn-padding;
-        }
-      }
-
-      .e-split-btn-wrapper {
-        .e-dropdown-btn .e-caret {
-          @include ribbon-font-props($ribbon-bigger-dropdown-btn-size, $ribbon-bigger-dropdown-btn-line-height);
-          padding: $ribbon-bigger-dropdown-btn-padding;
-        }
-      }
-
-      &.e-ribbon-medium-item,
-      &.e-ribbon-small-item {
-        .e-btn {
-          @include ribbon-font-props($ribbon-bigger-items-btn-size, $ribbon-bigger-items-height);
-
-          .e-btn-icon {
-            @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
-            margin: $ribbon-bigger-items-margin;
-            &:not(.e-caret) {
-              min-width: $ribbon-bigger-items-min-width-height;
-              min-height: $ribbon-bigger-items-min-width-height;
-            }
-          }
-        }
-
-        .e-split-colorpicker.e-split-btn {
-          padding: 0;
-          border: none;
-
-          .e-btn-icon {
-            height: $ribbon-bigger-color-picker-height;
-            width: $ribbon-bigger-color-picker-width;
-          }
-        }
-
-        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
-          padding: $ribbon-bigger-colorpicker-caret-btn-padding;
-        }
-
-        .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;
-        }
-      }
-    }
-  }
-
   .e-ribbon-vertical-center,
   .e-ribbon-group-overflow-ddb {
     &.e-dropdown-popup {
@@ -1591,224 +1393,4 @@
       border-radius: $ribbon-filemenu-popup-border-radius;
     }
   }
-
-  .e-bigger .e-ribbon-group-overflow-ddb,
-  .e-bigger.e-ribbon-group-overflow-ddb {
-    .e-ribbon-overflow-target {
-      .e-ribbon-overflow-header {
-        @include ribbon-font-props($ribbon-bigger-overflow-header-font-size, $ribbon-bigger-overflow-header-line-height);
-        height: $ribbon-bigger-overflow-header-height;
-      }
-
-      .e-ribbon-item {
-        .e-dropdown-btn .e-caret {
-          font-size: $ribbon-bigger-dropdown-caret-icon-size;
-        }
-        .e-input-group {
-          height: $ribbon-bigger-combobox-height;
-        }
-        &.e-ribbon-medium-item {
-          height: $ribbon-bigger-medium-item-height;
-        }
-        .e-btn .e-btn-icon {
-          font-size: $ribbon-bigger-items-btn-icon-size;
-          &:not(.e-caret) {
-            min-width: $ribbon-bigger-overflow-items-min-width-height;
-            min-height: $ribbon-bigger-overflow-items-min-width-height;
-          }
-          &.e-icon-left {
-            margin: 0;
-          }
-        }
-        &:has(.e-colorpicker-wrapper) {
-          align-items: center;
-        }
-        .e-ribbon-combobox-label,
-        .e-ribbon-colorpicker-label {
-          font-size: $ribbon-bigger-items-label-size;
-        }
-
-        & > .e-input-group,
-        .e-ribbon-template {
-          margin: $ribbon-bigger-overflow-wrapper-item-margin;
-        }
-      }
-
-      .e-ribbon-item > .e-checkbox-wrapper {
-        margin: $ribbon-bigger-checkbox-margin;
-        padding: 0;
-      }
-    }
-
-    &:not(.e-rtl) .e-ribbon-overflow-target {
-      .e-ribbon-overflow-header {
-        padding: $ribbon-bigger-overflow-header-padding;
-      }
-      .e-ribbon-item {
-        .e-ribbon-combobox-label,
-        .e-ribbon-colorpicker-label {
-          margin-left: $ribbon-bigger-items-label;
-        }
-
-        &.e-ribbon-medium-item {
-          .e-btn .e-btn-icon.e-icon-left {
-            margin: $ribbon-bigger-button-icon-padding;
-          }
-          
-          &:not(:has(.e-colorpicker-wrapper)) .e-btn {
-            &:not(:has(.e-btn-icon.e-icon-left)) {
-              padding-left: $ribbon-bigger-items-label;
-            }
-          }
-        }
-
-        &:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper,
-        &:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
-          margin-left: $ribbon-bigger-items-label;
-        }
-
-        >.e-split-btn-wrapper,
-        >.e-dropdown-btn {
-          .e-icons.e-caret {
-            padding: $ribbon-bigger-caret-icon-padding;
-          }
-        }
-      }
-    }
-
-    &.e-rtl .e-ribbon-overflow-target {
-      .e-ribbon-overflow-header {
-        padding: $ribbon-bigger-rtl-overflow-header-padding;
-      }
-      .e-ribbon-item {
-        .e-ribbon-combobox-label,
-        .e-ribbon-colorpicker-label {
-          margin-right: $ribbon-bigger-items-label;
-        }
-
-        &.e-ribbon-medium-item {
-          .e-btn .e-btn-icon.e-icon-left {
-            margin: $ribbon-bigger-rtl-button-icon-padding;
-          }
-            
-          &:not(:has(.e-colorpicker-wrapper)) .e-btn {
-            &:not(:has(.e-btn-icon.e-icon-left)) {
-              padding-right: $ribbon-bigger-items-label;
-            }
-          }
-        }
-
-        &:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper,
-        &:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
-          margin-right: $ribbon-bigger-items-label;
-        }
-
-        >.e-split-btn-wrapper,
-        >.e-dropdown-btn {
-          .e-icons.e-caret {
-            padding: $ribbon-bigger-rtl-caret-icon-padding;
-          }
-        }
-      }
-      .e-ribbon-item > .e-checkbox-wrapper {
-        margin: $ribbon-bigger-rtl-checkbox-margin;
-      }
-    }
-  }
-
-  .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
-    font-size: $ribbon-bigger-ddb-popup-font-size;
-    height: $ribbon-bigger-ddb-popup-height;
-
-    .e-menu-icon {
-      @include ribbon-font-props(20px, 20px);
-      min-height: 20px;
-      min-width: 20px;
-    }
-  }
-
-  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical,
-  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical,
-  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul,
-  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-ul {
-    .e-menu-item {
-      &.e-blankicon {
-        padding-left: $ribbon-bigger-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
-      }
-      .e-menu-icon {
-        min-width: $ribbon-bigger-file-menu-min-width-height;
-        min-height: $ribbon-bigger-file-menu-min-width-height;
-      }
-    }
-  }
-
-  .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 {
-      @include ribbon-font-props($ribbon-bigger-backstage-btn-icon-font-size, $ribbon-bigger-backstage-btn-icon-line-height);
-      padding: $ribbon-bigger-backstage-btn-icon-padding;
-    }
-  }
-
-  .e-bigger .e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical,
-  .e-bigger.e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical,
-  .e-bigger .e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul,
-  .e-bigger.e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .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 {
-        @include ribbon-font-props($ribbon-bigger-backstage-menu-icon-font-size, $ribbon-bigger-backstage-menu-icon-line-height);
-        margin: $ribbon-bigger-backstage-menu-icon-padding;
-        min-width: $ribbon-bigger-backstage-menu-icon-font-size;
-        min-height: $ribbon-bigger-backstage-menu-icon-font-size;
-      }
-
-      &.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 {
-        @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
-        margin: $ribbon-bigger-group-button-icon-margin;
-        min-height: $ribbon-bigger-items-icon-size;
-        min-width: $ribbon-bigger-items-icon-size;
-        &.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;
-        }
-      }
-    }
-  }
-
-  .e-bigger.e-ribbon-gallery-popup.e-popup,
-  .e-bigger .e-ribbon-gallery-popup.e-popup,
-  .e-bigger.e-ribbon-gallery-dropdown.e-popup,
-  .e-bigger .e-ribbon-gallery-dropdown.e-popup {
-    padding: $ribbon-bigger-gallery-popup-padding;
-    .e-ribbon-gallery-header {
-      @include ribbon-font-props($ribbon-bigger-gallery-header-fontsize, $ribbon-bigger-gallery-header-line-height);
-      padding: $ribbon-bigger-gallery-header-padding;
-    }
-  }
-
-  .e-bigger.e-ribbon-keytip,
-  .e-bigger .e-ribbon-keytip {
-    @include ribbon-font-props($ribbon-bigger-keytip-font-size, $ribbon-bigger-keytip-line-height);
-    min-width: $ribbon-bigger-keytip-min-width;
-    height: $ribbon-bigger-keytip-height;
-  }
 }

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

@@ -74,6 +74,8 @@ $ribbon-items-margin: 8px !default;
 $ribbon-checkbox-margin: 10px 0 10px 12px !default;
 $ribbon-rtl-checkbox-margin: 10px 12px 10px 0 !default;
 $ribbon-items-height: 18px !default;
+$ribbon-items-btn-padding: 0 4px 0 0 !default;
+$ribbon-items-btn-rtl-padding: 0 0 0 4px !default;
 $ribbon-items-min-width-height: 16px !default;
 $ribbon-items-checkbox-size: 12px !default;
 $ribbon-items-checkbox-padding: 0 8px !default;

package/styles/ribbon/_material-definition.scss

@@ -74,6 +74,8 @@ $ribbon-items-margin: 8px !default;
 $ribbon-checkbox-margin: 10px 0 10px 12px !default;
 $ribbon-rtl-checkbox-margin: 10px 12px 10px 0 !default;
 $ribbon-items-height: 18px !default;
+$ribbon-items-btn-padding: 0 4px 0 0 !default;
+$ribbon-items-btn-rtl-padding: 0 0 0 4px !default;
 $ribbon-items-min-width-height: 16px !default;
 $ribbon-items-checkbox-size: 12px !default;
 $ribbon-items-checkbox-padding: 0 8px !default;