@syncfusion/ej2-angular-spreadsheet 20.2.38-ngcc → 20.2.39

package/styles/material.css

@@ -33,6 +33,7 @@
 /*! Material specific themes definition's */
 /*! Vertical Tab */
 /*! TreeView's material theme wise override definitions and variables */
+/* stylelint-disable */
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
   transform: rotate(0deg);
   transition: transform 300ms ease;
@@ -743,7 +744,7 @@
   padding-top: 3px;
 }
 .e-spreadsheet .e-unprotectworksheet-dlg.e-dialog {
-  left: 0 !important;
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-spreadsheet .e-unprotectworksheet-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
@@ -762,7 +763,7 @@
   margin-top: 10px;
 }
 .e-spreadsheet .e-reenterpwd-dlg.e-dialog {
-  left: 0 !important;
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-spreadsheet .e-reenterpwd-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
@@ -927,7 +928,7 @@
   display: none;
 }
 .e-spreadsheet.e-hide-row-header .e-column-header, .e-spreadsheet.e-hide-row-header .e-sheet-content {
-  width: 100% !important;
+  width: 100% !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-spreadsheet.e-hide-column-header .e-header-panel {
   display: none;
@@ -1054,7 +1055,7 @@
   cursor: pointer;
 }
 .e-spreadsheet .e-table tr .e-cell .e-hyperlink-style {
-  color: #00e;
+  color: inherit;
   text-decoration: underline;
 }
 .e-spreadsheet .e-table tr .e-cell.e-alt-unwrap {
@@ -1162,8 +1163,8 @@
 .e-spreadsheet .e-sheet .e-ss-overlay-active .e-ss-overlay-t {
   background-color: #e3165b;
   cursor: ns-resize;
-  left: 50%;
   position: absolute;
+  right: 50%;
   top: 0;
   transform: translate(-50%, -50%);
 }
@@ -1178,8 +1179,8 @@
 .e-spreadsheet .e-sheet .e-ss-overlay-active .e-ss-overlay-b {
   background-color: #e3165b;
   cursor: ns-resize;
-  left: 50%;
   position: absolute;
+  right: 50%;
   top: 100%;
   transform: translate(-50%, -50%);
 }
@@ -1299,14 +1300,14 @@
 }
 .e-spreadsheet .e-sheet .e-datavisualization-chart .e-control.e-chart {
   height: 100%;
-  position: initial !important;
+  position: initial !important; /* stylelint-disable-line declaration-no-important */
   width: 100%;
 }
 .e-spreadsheet .e-sheet .e-datavisualization-chart .e-control.e-accumulationchart {
   height: 100%;
   overflow: hidden;
   padding: 4px;
-  position: initial !important;
+  position: initial !important; /* stylelint-disable-line declaration-no-important */
   width: 100%;
 }
 .e-spreadsheet .e-sheet .e-datavisualization-chart .e-ss-overlay-l,
@@ -1431,7 +1432,7 @@
   margin-right: 8px;
 }
 .e-spreadsheet .e-hide {
-  display: none !important;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-spreadsheet .e-selection {
   border-style: solid;
@@ -1549,7 +1550,7 @@
   text-align: right;
 }
 .e-spreadsheet .e-ribbon .e-toolbar .e-btn:not(.e-tbar-btn) {
-  font-weight: 400;
+  font-weight: normal;
   padding-bottom: 0;
   padding-top: 0;
 }
@@ -1581,17 +1582,17 @@
   font-size: 16px;
 }
 .e-spreadsheet .e-ribbon .e-toolbar .e-toolbar-item .e-btn .e-chart-icon, .e-spreadsheet .e-ribbon .e-toolbar .e-toolbar-item .e-btn .e-chart-type-icon {
-  font-size: 30px !important;
+  font-size: 30px !important; /* stylelint-disable-line declaration-no-important */
   margin-right: 5px;
   padding: 0 5px;
   width: 30px;
 }
 .e-spreadsheet .e-ribbon .e-toolbar .e-toolbar-item .e-btn .e-switch-row-column-icon {
-  font-size: 18px !important;
+  font-size: 18px !important; /* stylelint-disable-line declaration-no-important */
   margin-right: 5px;
 }
 .e-spreadsheet .e-ribbon .e-toolbar .e-toolbar-item .e-btn .e-addchart-icon {
-  font-size: 18px !important;
+  font-size: 18px !important; /* stylelint-disable-line declaration-no-important */
   margin-right: -5px;
 }
 .e-spreadsheet .e-ribbon .e-toolbar .e-toolbar-item .e-btn.e-split-colorpicker {
@@ -1768,7 +1769,7 @@
 }
 .e-spreadsheet .e-validation-list .e-input-group {
   border: 0;
-  box-shadow: none !important;
+  box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-spreadsheet .e-validation-list .e-ddl-icon {
   bottom: 5px;
@@ -1778,7 +1779,7 @@
   text-align: left;
 }
 .e-spreadsheet .e-customsort-dlg.e-dialog {
-  height: 360px !important;
+  height: 360px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-spreadsheet .e-customsort-dlg.e-dialog .e-dlg-content {
   padding-bottom: 0;
@@ -1917,7 +1918,7 @@
 }
 .e-spreadsheet .e-hyperlink-dlg.e-dialog,
 .e-spreadsheet .e-edithyperlink-dlg.e-dialog {
-  max-height: 640px !important;
+  max-height: 640px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-spreadsheet .e-hyperlink-dlg.e-dialog .e-dlg-header-content,
 .e-spreadsheet .e-edithyperlink-dlg.e-dialog .e-dlg-header-content {
@@ -2025,7 +2026,7 @@
   text-align: left;
 }
 .e-spreadsheet .e-protectworkbook-dlg.e-dialog {
-  left: 0 !important;
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-spreadsheet .e-protectworkbook-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
@@ -2045,7 +2046,7 @@
   margin-bottom: 4px;
 }
 .e-spreadsheet .e-unprotectworkbook-dlg.e-dialog {
-  left: 0 !important;
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-spreadsheet .e-unprotectworkbook-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
@@ -2064,7 +2065,7 @@
   margin-top: 10px;
 }
 .e-spreadsheet .e-importprotectworkbook-dlg.e-dialog {
-  left: 0 !important;
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-spreadsheet .e-importprotectworkbook-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
@@ -2095,12 +2096,10 @@
   height: 18px;
   margin-right: -1px;
   padding: 0;
-  position: absolute;
+  position: relative;
   right: 0;
   width: 20px;
   z-index: 2;
-  bottom: 0.5px;
-  right: 0.5px;
 }
 
 .e-colorpicker-wrapper.e-border-colorpicker {
@@ -2108,7 +2107,7 @@
 }
 .e-colorpicker-wrapper.e-border-colorpicker .e-container {
   box-shadow: none;
-  width: 270px !important;
+  width: 270px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-colorpicker-wrapper.e-border-colorpicker .e-container .e-selected-value {
   display: -ms-flexbox;
@@ -2177,36 +2176,33 @@
   font-family: "Calibri";
 }
 .e-dropdown-popup.e-font-family ul .e-item:nth-child(7) {
-  font-family: "Comic Sans MS";
-}
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(8) {
   font-family: "Courier";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(9) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(8) {
   font-family: "Courier New";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(10) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(9) {
   font-family: "Din Condensed";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(11) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(10) {
   font-family: "Georgia";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(12) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(11) {
   font-family: "Helvetica";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(13) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(12) {
   font-family: "Helvetica New";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(14) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(13) {
   font-family: "Roboto";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(15) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(14) {
   font-family: "Tahoma";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(16) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(15) {
   font-family: "Times New Roman";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(17) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(16) {
   font-family: "Verdana";
 }
 .e-dropdown-popup.e-aggregate-list {
@@ -2489,7 +2485,7 @@
 }
 .e-spreadsheet-function-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 16px;
-  font-weight: 400;
+  font-weight: normal;
 }
 .e-spreadsheet-function-dlg.e-dialog .e-dlg-content {
   overflow: hidden;
@@ -2724,7 +2720,7 @@
 }
 .e-bigger .e-spreadsheet .e-customsort-dlg.e-dialog,
 .e-bigger.e-spreadsheet .e-customsort-dlg.e-dialog {
-  width: 590px !important;
+  width: 590px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-bigger .e-spreadsheet .e-sort-dialog .e-sort-template .e-list-item,
 .e-bigger.e-spreadsheet .e-sort-dialog .e-sort-template .e-list-item {
@@ -3966,7 +3962,7 @@
   min-height: 35px;
 }
 .e-ribbon .e-tab .e-tab-header .e-hscroll {
-  display: inline-block !important;
+  display: inline-block !important; /* stylelint-disable-line declaration-no-important */
   width: calc(100% - 28px);
 }
 .e-ribbon .e-tab .e-tab-header .e-toolbar-items .e-toolbar-item:nth-child(2) .e-tab-wrap {

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,13 @@
+$ribbon-skin: 'bootstrap' !default;
+$ribbon-border-color: $grey-88 !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-content-bg-color: $gray-darker !default;
+$ribbon-header-bg-color: #191919 !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 16.5px 4px 17.5px !default;
+$bigger-drop-icon-margin: 18.5px 5px 19.5px !default;
+$expand-icon-color: $grey-dark-font !default;
+$ribbon-header-height: 45px !default;
+$ribbon-focus-text-color: $grey-dark-font !default;
+$ribbon-focus-bg-color: $grey-44 !default;
+$ribbon-comb-icon-color: $grey-dark-font !default;

package/styles/ribbon/_bootstrap-definition.scss

@@ -0,0 +1,12 @@
+$ribbon-skin: 'bootstrap' !default;
+$ribbon-border-color: #e5e5e5 !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-content-bg-color: $grey-white !default;
+$ribbon-header-bg-color: $grey-f9 !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 16.5px 4px 17.5px !default;
+$bigger-drop-icon-margin: 18.5px 5px 19.5px !default;
+$expand-icon-color: $gray-light !default;
+$ribbon-header-height: 45px !default;
+$ribbon-focus-bg-color: $grey-lighter !default;
+$ribbon-focus-text-color: $brand-primary-darken-25 !default;

package/styles/ribbon/_bootstrap4-definition.scss

@@ -0,0 +1,13 @@
+$ribbon-skin: 'bootstrap4' !default;
+$ribbon-border-color: $gray-300 !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-header-bg-color: $gray-100 !default;
+$ribbon-content-bg-color: $white !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 15px 5px !default;
+$ribbon-comb-icon-color:  $gray-700 !default;
+$bigger-drop-icon-margin: 18.5px 5px 19.5px !default;
+$expand-icon-color: $gray-600 !default;
+$ribbon-header-height: 41px !default;
+$ribbon-focus-text-color: darken($primary, 15%) !default;
+$ribbon-focus-bg-color: #eee !default;

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

@@ -0,0 +1 @@
+@import './bootstrap5-definition.scss';

package/styles/ribbon/_bootstrap5-definition.scss

@@ -0,0 +1,14 @@
+$ribbon-skin: 'bootstrap5' !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 8px 4px !default;
+$bigger-drop-icon-margin: 16px 5px !default;
+$ribbon-border-color: $border-light !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-content-bg-color: $content-bg-color !default;
+$ribbon-header-bg-color: $content-bg-color-alt1 !default;
+$separator-border-color: $border-light !default;
+$expand-icon-color: $icon-color !default;
+$ribbon-comb-icon-color:  $icon-color !default;
+$ribbon-focus-text-color: $primary-bg-color-pressed !default;
+$ribbon-focused-wrap-focus-border-color: $icon-color !default;
+$ribbon-focus-bg-color: rgba($content-bg-color-alt2, .12) !default;

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

@@ -0,0 +1,14 @@
+$ribbon-skin: 'fabric' !default;
+$border-color: $neutral-quintenary !default;
+$ribbon-border: 1px solid $border-color !default;
+$tab-header-height: 38px !default;
+$bigger-tab-header-height: 48px !default;
+$ribbon-header-bg-color: $neutral-lighter !default;
+$file-menu-wrap-padding: 0 0 0 8px !default;
+$drop-icon-margin: 12.5px 4px !default;
+$bigger-drop-icon-margin: 14.5px 5px !default;
+$ribbon-comb-icon-color: $neutral-light-font !default;
+$expand-icon-color: $neutral-light-font !default;
+$ribbon-focus-bg-color: initial !default;
+$ribbon-focus-text-color: $neutral-light-fontalt !default;
+$ribbon-focused-wrap-focus-border-color: $neutral-secondary-alt !default;

package/styles/ribbon/_fabric-definition.scss

@@ -0,0 +1,14 @@
+$ribbon-skin: 'fabric' !default;
+$border-color: $neutral-light !default;
+$ribbon-border: 1px solid $border-color !default;
+$tab-header-height: 38px !default;
+$bigger-tab-header-height: 48px !default;
+$ribbon-header-bg-color: $neutral-white !default;
+$ribbon-focused-wrap-focus-border-color: $neutral-secondary-alt !default;
+$file-menu-wrap-padding: 0 0 0 8px !default;
+$drop-icon-margin: 12.5px 4px !default;
+$bigger-drop-icon-margin: 14.5px 5px !default;
+$ribbon-comb-icon-color: $neutral-light-font !default;
+$expand-icon-color: $neutral-secondary !default;
+$ribbon-focus-bg-color: initial !default;
+$ribbon-focus-text-color: $neutral-light-font !default;

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

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/ribbon/_fluent-definition.scss

@@ -0,0 +1,14 @@
+$ribbon-skin: 'FluentUI' !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 8px 4px !default;
+$bigger-drop-icon-margin: 16px 5px !default;
+$ribbon-border-color: $border-light !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-content-bg-color: $content-bg-color !default;
+$ribbon-header-bg-color: $content-bg-color-alt1 !default;
+$ribbon-comb-icon-color:  $icon-color !default;
+$separator-border-color: $border-light !default;
+$ribbon-focus-text-color: $content-text-color !default;
+$expand-icon-color: $icon-color !default;
+$ribbon-focused-wrap-focus-border-color: $icon-color !default;
+$ribbon-focus-bg-color: $content-bg-color-alt2 !default;

package/styles/ribbon/_fusionnew-definition.scss

@@ -0,0 +1,14 @@
+$ribbon-skin: 'bootstrap5' !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 8px 4px !default;
+$bigger-drop-icon-margin: 16px 5px !default;
+$ribbon-border-color: $border-light !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-content-bg-color: $content-bg-color !default;
+$ribbon-header-bg-color: $content-bg-color-alt1 !default;
+$ribbon-comb-icon-color:  $icon-color !default;
+$separator-border-color: $border-light !default;
+$ribbon-focus-text-color: $primary-bg-color-pressed !default;
+$expand-icon-color: $icon-color !default;
+$ribbon-focused-wrap-focus-border-color: $icon-color !default;
+$ribbon-focus-bg-color: rgba($content-bg-color-alt2, .12) !default;

package/styles/ribbon/_highcontrast-definition.scss

@@ -0,0 +1,12 @@
+$ribbon-skin: 'highcontrast' !default;
+$ribbon-border-color: $bg-base-100 !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-header-bg-color: $bg-base-0 !default;
+$file-menu-wrap-padding: 0 !default;
+$ribbon-focused-wrap-focus-border-color: $hover-border !default;
+$drop-icon-margin: 12.5px 4px !default;
+$bigger-drop-icon-margin: 14.5px 5px !default;
+$ribbon-comb-icon-color: $content-font !default;
+$expand-icon-color: $content-font !default;
+$ribbon-focus-bg-color: initial !default;
+$ribbon-focus-text-color: $content-font !default;

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

@@ -0,0 +1,12 @@
+$ribbon-skin: 'highcontrast' !default;
+$ribbon-border-color: transparent !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 12.5px 4px !default;
+$bigger-drop-icon-margin: 14.5px 5px !default;
+$expand-icon-color: initial !default;
+$ribbon-comb-icon-color: $content-font !default;
+$ribbon-header-bg-color: transparent !default;
+$ribbon-focused-wrap-focus-border-color: $hover-border !default;
+$ribbon-focus-bg-color: initial !default;
+$ribbon-focus-text-color: $content-font !default;

package/styles/ribbon/_layout.scss

@@ -0,0 +1,241 @@
+@import 'mixin.scss';
+@include export-module('ribbon-layout') {
+  .e-ribbon {
+    border: $ribbon-border;
+    position: relative;
+
+    & .e-tab {
+      @if $skin-name == 'highcontrast' {
+        border-width: 0;
+      }
+
+      & .e-content .e-toolbar {
+        @if $skin-name == 'material' {
+          border: 0;
+        }
+        @else {
+          border-left-width: 0;
+          border-right-width: 0;
+        }
+      }
+
+      & .e-tab-header {
+        @if $skin-name != 'bootstrap4' {
+          @include tab-header-layout;
+        }
+
+        & .e-hscroll {
+          display: inline-block !important; /* stylelint-disable-line declaration-no-important */
+          width: calc(100% - 28px);
+        }
+
+        & .e-toolbar-items .e-toolbar-item:nth-child(2) {
+          @if $skin-name == 'bootstrap' {
+            border-width: 0;
+          }
+
+          @if $skin-name == 'fabric' {
+            margin-right: 0;
+          }
+
+          & .e-tab-wrap {
+            padding: $file-menu-wrap-padding;
+
+            @if $skin-name == 'bootstrap4' {
+              border-width: 0;
+            }
+          }
+
+          & .e-text-wrap {
+            vertical-align: top;
+          }
+        }
+
+        & .e-indicator {
+          z-index: 1;
+        }
+
+        @if $skin-name == 'material' {
+          & .e-toolbar-item .e-tab-wrap {
+            padding: 0 12px;
+          }
+        }
+
+        & .e-toolbar-items .e-toolbar-item.e-hide {
+          display: none;
+        }
+      }
+
+      @if $skin-name == 'bootstrap5' {
+        & .e-content .e-toolbar .e-toolbar-items {
+          height: 38px;
+        }
+      }
+
+      @if $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' {
+        & .e-tab-header {
+          margin-top: 10px;
+        }
+
+        & .e-content .e-toolbar {
+          border-radius: 0;
+        }
+      }
+
+      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+        & .e-content .e-item {
+          padding: 0;
+        }
+      }
+    }
+
+    @include default-props;
+
+    & .e-drop-icon {
+      cursor: pointer;
+      font-family: 'e-icons';
+      margin: $drop-icon-margin;
+      position: absolute;
+      right: 0;
+      text-align: center;
+      top: 0;
+      transform: rotate(180deg);
+      transition: transform 300ms ease;
+      width: 18px;
+
+      @if $skin-name != 'bootstrap4' {
+        font-size: 10px;
+      }
+
+      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+        font-size: 18px;
+      }
+
+      &.e-disabled {
+        cursor: default;
+        pointer-events: none;
+      }
+    }
+
+    &.e-collapsed {
+      & .e-content,
+      & .e-indicator,
+      & .e-tab-header .e-toolbar-item.e-active .e-text-wrap::before {
+        display: none;
+      }
+
+      @if $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' {
+        & .e-tab .e-tab-header:not(.e-vertical) {
+          &::before {
+            border-width: 0;
+          }
+        }
+      }
+
+      & .e-drop-icon {
+        transform: rotate(0deg);
+      }
+    }
+
+    @if $skin-name == 'fabric' {
+      & .e-toolbar .e-toolbar-items .e-toolbar-item.e-separator {
+        min-height: 24px;
+      }
+    }
+
+    @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
+      .e-tab-header .e-menu-wrapper.e-file-menu ul.e-menu {
+        font-size: 14px;
+      }
+    }
+
+    & .e-content .e-toolbar {
+      @if $skin-name == 'highcontrast' {
+        border-color: transparent;
+
+        & .e-toolbar-items .e-toolbar-item.e-overlay {
+          opacity: .5;
+        }
+      }
+
+      &.e-overlay .e-toolbar-items .e-toolbar-item.e-overlay {
+        opacity: 1;
+      }
+    }
+
+    & .e-menu-wrapper {
+      border-width: 0;
+
+      & ul {
+        &.e-menu {
+          padding: 0;
+        }
+
+        @if $skin-name != 'bootstrap4' {
+          & .e-menu-item.e-menu-caret-icon {
+            height: 35px;
+            line-height: 35px;
+
+            & .e-caret {
+              @if $skin-name == 'FluentUI' {
+                line-height: 38px;
+              }
+              @else {
+                line-height: 35px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-ribbon,
+  .e-bigger.e-ribbon {
+    & .e-menu-wrapper.e-file-menu ul.e-menu {
+      padding: 0;
+
+      & .e-menu-item.e-menu-caret-icon {
+        height: 41px;
+        line-height: 41px;
+
+        & .e-caret {
+          @if $skin-name == 'FluentUI' {
+            line-height: 44px;
+          }
+          @else {
+            line-height: 41px;
+          }
+        }
+      }
+
+      @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
+        font-size: 15px;
+      }
+    }
+
+    @if $skin-name == 'bootstrap5' {
+      & .e-tab .e-content .e-toolbar .e-toolbar-items {
+        height: 46px;
+      }
+    }
+
+    & .e-drop-icon {
+      font-size: 12px;
+      margin: $bigger-drop-icon-margin;
+
+      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+        font-size: 18px;
+        line-height: 8px;
+      }
+    }
+
+    @if $skin-name == 'material' {
+      & .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
+        padding: 0 16px;
+      }
+    }
+
+    @include bigger-tab-header-layout;
+  }
+}

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

@@ -0,0 +1,15 @@
+$ribbon-skin: 'material' !default;
+$ribbon-border-color: $grey-700 !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$tab-header-height: 36px !default;
+$bigger-tab-header-height: 48px !default;
+$ribbon-header-bg-color: $grey-900 !default;
+$file-menu-wrap-padding: 0 !default;
+$ribbon-hover-text-color: $grey-dark-font !default;
+$drop-icon-margin: 12.5px 4px !default;
+$bigger-drop-icon-margin: 14.5px 5px !default;
+$ribbon-comb-icon-color: rgba($accent, 1) !default;
+$separator-border-color: rgba($grey-white, .24) !default;
+$expand-icon-color: $grey-dark-font !default;
+$ribbon-focus-bg-color: rgba($accent, .12) !default;
+$ribbon-focus-text-color: rgba($accent, 1) !default;

package/styles/ribbon/_material-definition.scss

@@ -0,0 +1,12 @@
+$ribbon-skin: 'material' !default;
+$ribbon-border-color: $grey-300 !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-header-bg-color: $grey-50 !default;
+$ribbon-focus-bg-color: rgba($accent, .12) !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 12.5px 4px !default;
+$ribbon-focus-text-color: rgba($accent, 1) !default;
+$bigger-drop-icon-margin: 14.5px 5px !default;
+$separator-border-color: #dcdcdc !default;
+$expand-icon-color: #5f6368 !default;
+$ribbon-comb-icon-color: rgba($accent, 1) !default;