@syncfusion/ej2-angular-spreadsheet 20.4.54 → 21.1.35

package/styles/{ribbon → spreadsheet-ribbon}/_layout.scss

@@ -1,7 +1,7 @@
 @import 'mixin.scss';
-@include export-module('ribbon-layout') {
-  .e-ribbon {
-    border: $ribbon-border;
+@include export-module('spreadsheet-ribbon-layout') {
+  .e-spreadsheet .e-ribbon {
+    border: $spreadsheet-ribbon-border;
     position: relative;
 
     & .e-tab {
@@ -104,11 +104,7 @@
       width: 18px;
 
       @if $skin-name != 'bootstrap4' {
-        font-size: 10px;
-      }
-
-      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
-        font-size: 18px;
+        font-size: $spreadsheet-ribbon-drop-icon-font-size;
       }
 
       &.e-disabled {
@@ -145,11 +141,15 @@
 
     @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
       .e-tab-header .e-menu-wrapper.e-file-menu ul.e-menu {
-        font-size: 14px;
+        font-size: $tab-file-menu-font-size;
       }
     }
 
     & .e-content .e-toolbar {
+      & .e-toolbar-items {
+        display: inline-block;
+      }
+
       @if $skin-name == 'highcontrast' {
         border-color: transparent;
 
@@ -190,8 +190,8 @@
     }
   }
 
-  .e-bigger .e-ribbon,
-  .e-bigger.e-ribbon {
+  .e-bigger .e-spreadsheet .e-ribbon,
+  .e-bigger.e-spreadsheet .e-ribbon {
     & .e-menu-wrapper.e-file-menu ul.e-menu {
       padding: 0;
 
@@ -210,7 +210,7 @@
       }
 
       @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-        font-size: 15px;
+        font-size: $bigger-tab-file-menu-font-size;
       }
     }
 
@@ -221,11 +221,10 @@
     }
 
     & .e-drop-icon {
-      font-size: 12px;
+      font-size: $bigger-spreadsheet-ribbon-drop-icon-font-size;
       margin: $bigger-drop-icon-margin;
 
       @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
-        font-size: 18px;
         line-height: 8px;
       }
     }

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

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

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

@@ -0,0 +1,14 @@
+$spreadsheet-ribbon-skin: 'material' !default;
+$spreadsheet-ribbon-border-color: $grey-300 !default;
+$spreadsheet-ribbon-border: 1px solid $spreadsheet-ribbon-border-color !default;
+$spreadsheet-ribbon-header-bg-color: $grey-50 !default;
+$spreadsheet-ribbon-focus-bg-color: rgba($accent, .12) !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 12.5px 4px !default;
+$spreadsheet-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;
+$spreadsheet-ribbon-comb-icon-color: rgba($accent, 1) !default;
+$spreadsheet-ribbon-drop-icon-font-size: 10px !default;
+$bigger-spreadsheet-ribbon-drop-icon-font-size: 12px !default;

package/styles/spreadsheet-ribbon/_tailwind-definition.scss

@@ -0,0 +1,15 @@
+$spreadsheet-ribbon-skin: 'tailwind' !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 8px 4px !default;
+$bigger-drop-icon-margin: 16px 5px !default;
+$spreadsheet-ribbon-border-color: $border-light !default;
+$spreadsheet-ribbon-border: 1px solid $spreadsheet-ribbon-border-color !default;
+$spreadsheet-ribbon-content-bg-color: $content-bg-color-alt2 !default;
+$spreadsheet-ribbon-header-bg-color: $content-bg-color-alt2 !default;
+$separator-border-color: $border-light !default;
+$expand-icon-color: $icon-color !default;
+$spreadsheet-ribbon-comb-icon-color: $primary !default;
+$spreadsheet-ribbon-focus-bg-color: rgba($content-bg-color-alt2, .12) !default;
+$spreadsheet-ribbon-focus-text-color: $primary !default;
+$spreadsheet-ribbon-drop-icon-font-size: $text-lg !default;
+$bigger-spreadsheet-ribbon-drop-icon-font-size: $font-icon-18 !default;

package/styles/{ribbon → spreadsheet-ribbon}/_theme.scss

@@ -1,6 +1,6 @@
-@include export-module('ribbon-theme') {
-  .e-ribbon {
-    background-color: $ribbon-header-bg-color;
+@include export-module('spreadsheet-ribbon-theme') {
+  .e-spreadsheet .e-ribbon {
+    background-color: $spreadsheet-ribbon-header-bg-color;
 
     & .e-tab {
       & .e-tab-header {
@@ -8,42 +8,42 @@
 
         @if $skin-name == 'bootstrap' {
           &::before {
-            border-bottom-color: $ribbon-border-color;
+            border-bottom-color: $spreadsheet-ribbon-border-color;
           }
 
           & .e-toolbar-item.e-active {
-            border-bottom-color: $ribbon-content-bg-color;
-            border-left-color: $ribbon-border-color;
-            border-right-color: $ribbon-border-color;
-            border-top-color: $ribbon-border-color;
+            border-bottom-color: $spreadsheet-ribbon-content-bg-color;
+            border-left-color: $spreadsheet-ribbon-border-color;
+            border-right-color: $spreadsheet-ribbon-border-color;
+            border-top-color: $spreadsheet-ribbon-border-color;
           }
         }
 
         .e-tab-wrap:focus {
-          background: $ribbon-focus-bg-color;
+          background: $spreadsheet-ribbon-focus-bg-color;
 
-          @if $ribbon-skin == 'fabric' or $ribbon-skin == 'highcontrast' {
-            border-color: $ribbon-focused-wrap-focus-border-color;
+          @if $spreadsheet-ribbon-skin == 'fabric' or $spreadsheet-ribbon-skin == 'highcontrast' {
+            border-color: $spreadsheet-ribbon-focused-wrap-focus-border-color;
           }
 
-          @if $ribbon-skin == 'bootstrap5' {
-            border: 1px solid $ribbon-focused-wrap-focus-border-color;
+          @if $spreadsheet-ribbon-skin == 'bootstrap5' {
+            border: 1px solid $spreadsheet-ribbon-focused-wrap-focus-border-color;
           }
 
-          @if $ribbon-skin == 'highcontrast' {
+          @if $spreadsheet-ribbon-skin == 'highcontrast' {
             border-style: solid;
           }
 
-          @if $ribbon-skin == 'bootstrap5' or $ribbon-skin == 'FluentUI' {
+          @if $spreadsheet-ribbon-skin == 'bootstrap5' or $spreadsheet-ribbon-skin == 'FluentUI' {
             .e-tab-icon {
-              color: $ribbon-comb-icon-color;
+              color: $spreadsheet-ribbon-comb-icon-color;
             }
           }
         }
 
         .e-tab-wrap:focus .e-tab-icon,
         .e-tab-wrap:focus .e-tab-text {
-          color: $ribbon-focus-text-color;
+          color: $spreadsheet-ribbon-focus-text-color;
         }
       }
 
@@ -60,12 +60,12 @@
       @if $skin-name == 'FluentUI' {
         & .e-toolbar,
         & .e-toolbar-items {
-          background-color: $ribbon-header-bg-color;
+          background-color: $spreadsheet-ribbon-header-bg-color;
         }
 
         & .e-hscroll .e-scroll-nav.e-scroll-left-nav,
         & .e-hscroll .e-scroll-nav.e-scroll-right-nav {
-          background-color: $ribbon-header-bg-color;
+          background-color: $spreadsheet-ribbon-header-bg-color;
         }
       }
     }
@@ -86,12 +86,12 @@
       & .e-tab {
         & .e-tab-header .e-toolbar-item {
           &.e-active {
-            background: $ribbon-content-bg-color;
+            background: $spreadsheet-ribbon-content-bg-color;
           }
         }
 
         & .e-content .e-toolbar {
-          background: $ribbon-content-bg-color;
+          background: $spreadsheet-ribbon-content-bg-color;
 
           & .e-toolbar-items,
           & .e-toolbar-item .e-btn.e-tbar-btn:not(:hover):not(:focus),
@@ -123,11 +123,11 @@
           }
 
           & .e-tab-wrap:focus-visible {
-            border: 1px solid $ribbon-focused-wrap-focus-border-color;
+            border: 1px solid $spreadsheet-ribbon-focused-wrap-focus-border-color;
           }
 
           & .e-tab-wrap:focus-visible:hover {
-            border: 1px solid $ribbon-focused-wrap-focus-border-color;
+            border: 1px solid $spreadsheet-ribbon-focused-wrap-focus-border-color;
           }
         }
       }

package/styles/spreadsheet-ribbon/bootstrap-dark.css

@@ -0,0 +1,177 @@
+.e-spreadsheet .e-ribbon .e-drop-icon::before {
+  content: "\e95d";
+}
+.e-spreadsheet .e-ribbon .e-menu-wrapper.e-file-menu ul .e-menu-item .e-caret::before {
+  content: "\e969";
+}
+
+.e-spreadsheet .e-ribbon {
+  border: 1px solid #484848;
+  position: relative;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-content .e-toolbar {
+  border-left-width: 0;
+  border-right-width: 0;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header {
+  height: 35px;
+  min-height: 35px;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) {
+  height: 35px;
+  min-height: 35px;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) .e-tab-wrap {
+  height: 35px;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) .e-text-wrap {
+  height: 35px;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items {
+  height: 35px;
+  min-height: 35px;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items .e-scroll-nav {
+  height: 35px;
+  min-height: 35px;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-hscroll {
+  display: inline-block !important; /* stylelint-disable-line declaration-no-important */
+  width: calc(100% - 28px);
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items .e-toolbar-item:nth-child(2) .e-tab-wrap {
+  padding: 0;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items .e-toolbar-item:nth-child(2) .e-text-wrap {
+  vertical-align: top;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-indicator {
+  z-index: 1;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items .e-toolbar-item.e-hide {
+  display: none;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item {
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
+  text-transform: none;
+}
+.e-spreadsheet .e-ribbon .e-tab.e-sheet-tab .e-tab-header .e-tab-text {
+  white-space: pre;
+}
+.e-spreadsheet .e-ribbon .e-drop-icon {
+  cursor: pointer;
+  font-family: "e-icons";
+  margin: 16.5px 4px 17.5px;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 0;
+  transform: rotate(180deg);
+  transition: transform 300ms ease;
+  width: 18px;
+  font-size: 10px;
+}
+.e-spreadsheet .e-ribbon .e-drop-icon.e-disabled {
+  cursor: default;
+  pointer-events: none;
+}
+.e-spreadsheet .e-ribbon.e-collapsed .e-content, .e-spreadsheet .e-ribbon.e-collapsed .e-indicator, .e-spreadsheet .e-ribbon.e-collapsed .e-tab-header .e-toolbar-item.e-active .e-text-wrap::before {
+  display: none;
+}
+.e-spreadsheet .e-ribbon.e-collapsed .e-drop-icon {
+  transform: rotate(0deg);
+}
+.e-spreadsheet .e-ribbon .e-content .e-toolbar .e-toolbar-items {
+  display: inline-block;
+}
+.e-spreadsheet .e-ribbon .e-content .e-toolbar.e-overlay .e-toolbar-items .e-toolbar-item.e-overlay {
+  opacity: 1;
+}
+.e-spreadsheet .e-ribbon .e-menu-wrapper {
+  border-width: 0;
+}
+.e-spreadsheet .e-ribbon .e-menu-wrapper ul.e-menu {
+  padding: 0;
+}
+.e-spreadsheet .e-ribbon .e-menu-wrapper ul .e-menu-item.e-menu-caret-icon {
+  height: 35px;
+  line-height: 35px;
+}
+.e-spreadsheet .e-ribbon .e-menu-wrapper ul .e-menu-item.e-menu-caret-icon .e-caret {
+  line-height: 35px;
+}
+
+.e-bigger .e-spreadsheet .e-ribbon .e-menu-wrapper.e-file-menu ul.e-menu,
+.e-bigger.e-spreadsheet .e-ribbon .e-menu-wrapper.e-file-menu ul.e-menu {
+  padding: 0;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-menu-wrapper.e-file-menu ul.e-menu .e-menu-item.e-menu-caret-icon,
+.e-bigger.e-spreadsheet .e-ribbon .e-menu-wrapper.e-file-menu ul.e-menu .e-menu-item.e-menu-caret-icon {
+  height: 41px;
+  line-height: 41px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-menu-wrapper.e-file-menu ul.e-menu .e-menu-item.e-menu-caret-icon .e-caret,
+.e-bigger.e-spreadsheet .e-ribbon .e-menu-wrapper.e-file-menu ul.e-menu .e-menu-item.e-menu-caret-icon .e-caret {
+  line-height: 41px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-drop-icon,
+.e-bigger.e-spreadsheet .e-ribbon .e-drop-icon {
+  font-size: 12px;
+  margin: 18.5px 5px 19.5px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-tab .e-tab-header,
+.e-bigger.e-spreadsheet .e-ribbon .e-tab .e-tab-header {
+  height: 41px;
+  min-height: 41px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator),
+.e-bigger.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) {
+  height: 41px;
+  min-height: 41px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) .e-tab-wrap,
+.e-bigger.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) .e-tab-wrap {
+  height: 41px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) .e-text-wrap,
+.e-bigger.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) .e-text-wrap {
+  height: 41px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items,
+.e-bigger.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items {
+  height: 41px;
+  min-height: 41px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items .e-scroll-nav,
+.e-bigger.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items .e-scroll-nav {
+  height: 41px;
+  min-height: 41px;
+}
+
+.e-spreadsheet .e-ribbon {
+  background-color: #191919;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header {
+  background-color: inherit;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-tab-wrap:focus {
+  background: #414141;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-tab-wrap:focus .e-tab-icon,
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-tab-wrap:focus .e-tab-text {
+  color: #f0f0f0;
+}
+.e-spreadsheet .e-ribbon .e-drop-icon {
+  color: #f0f0f0;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-content .e-toolbar {
+  border-bottom-color: transparent;
+  border-top-color: transparent;
+}
+.e-spreadsheet .e-ribbon .e-menu-wrapper {
+  background-color: transparent;
+}

package/styles/spreadsheet-ribbon/bootstrap.css

@@ -0,0 +1,207 @@
+.e-spreadsheet .e-ribbon .e-drop-icon::before {
+  content: "\e95d";
+}
+.e-spreadsheet .e-ribbon .e-menu-wrapper.e-file-menu ul .e-menu-item .e-caret::before {
+  content: "\e969";
+}
+
+.e-spreadsheet .e-ribbon {
+  border: 1px solid #e5e5e5;
+  position: relative;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-content .e-toolbar {
+  border-left-width: 0;
+  border-right-width: 0;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header {
+  height: 35px;
+  min-height: 35px;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) {
+  height: 35px;
+  min-height: 35px;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) .e-tab-wrap {
+  height: 35px;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) .e-text-wrap {
+  height: 35px;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items {
+  height: 35px;
+  min-height: 35px;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items .e-scroll-nav {
+  height: 35px;
+  min-height: 35px;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-hscroll {
+  display: inline-block !important; /* stylelint-disable-line declaration-no-important */
+  width: calc(100% - 28px);
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items .e-toolbar-item:nth-child(2) {
+  border-width: 0;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items .e-toolbar-item:nth-child(2) .e-tab-wrap {
+  padding: 0;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items .e-toolbar-item:nth-child(2) .e-text-wrap {
+  vertical-align: top;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-indicator {
+  z-index: 1;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items .e-toolbar-item.e-hide {
+  display: none;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header {
+  margin-top: 10px;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-content .e-toolbar {
+  border-radius: 0;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item {
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
+  text-transform: none;
+}
+.e-spreadsheet .e-ribbon .e-tab.e-sheet-tab .e-tab-header .e-tab-text {
+  white-space: pre;
+}
+.e-spreadsheet .e-ribbon .e-drop-icon {
+  cursor: pointer;
+  font-family: "e-icons";
+  margin: 16.5px 4px 17.5px;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 0;
+  transform: rotate(180deg);
+  transition: transform 300ms ease;
+  width: 18px;
+  font-size: 10px;
+}
+.e-spreadsheet .e-ribbon .e-drop-icon.e-disabled {
+  cursor: default;
+  pointer-events: none;
+}
+.e-spreadsheet .e-ribbon.e-collapsed .e-content, .e-spreadsheet .e-ribbon.e-collapsed .e-indicator, .e-spreadsheet .e-ribbon.e-collapsed .e-tab-header .e-toolbar-item.e-active .e-text-wrap::before {
+  display: none;
+}
+.e-spreadsheet .e-ribbon.e-collapsed .e-tab .e-tab-header:not(.e-vertical)::before {
+  border-width: 0;
+}
+.e-spreadsheet .e-ribbon.e-collapsed .e-drop-icon {
+  transform: rotate(0deg);
+}
+.e-spreadsheet .e-ribbon .e-content .e-toolbar .e-toolbar-items {
+  display: inline-block;
+}
+.e-spreadsheet .e-ribbon .e-content .e-toolbar.e-overlay .e-toolbar-items .e-toolbar-item.e-overlay {
+  opacity: 1;
+}
+.e-spreadsheet .e-ribbon .e-menu-wrapper {
+  border-width: 0;
+}
+.e-spreadsheet .e-ribbon .e-menu-wrapper ul.e-menu {
+  padding: 0;
+}
+.e-spreadsheet .e-ribbon .e-menu-wrapper ul .e-menu-item.e-menu-caret-icon {
+  height: 35px;
+  line-height: 35px;
+}
+.e-spreadsheet .e-ribbon .e-menu-wrapper ul .e-menu-item.e-menu-caret-icon .e-caret {
+  line-height: 35px;
+}
+
+.e-bigger .e-spreadsheet .e-ribbon .e-menu-wrapper.e-file-menu ul.e-menu,
+.e-bigger.e-spreadsheet .e-ribbon .e-menu-wrapper.e-file-menu ul.e-menu {
+  padding: 0;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-menu-wrapper.e-file-menu ul.e-menu .e-menu-item.e-menu-caret-icon,
+.e-bigger.e-spreadsheet .e-ribbon .e-menu-wrapper.e-file-menu ul.e-menu .e-menu-item.e-menu-caret-icon {
+  height: 41px;
+  line-height: 41px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-menu-wrapper.e-file-menu ul.e-menu .e-menu-item.e-menu-caret-icon .e-caret,
+.e-bigger.e-spreadsheet .e-ribbon .e-menu-wrapper.e-file-menu ul.e-menu .e-menu-item.e-menu-caret-icon .e-caret {
+  line-height: 41px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-drop-icon,
+.e-bigger.e-spreadsheet .e-ribbon .e-drop-icon {
+  font-size: 12px;
+  margin: 18.5px 5px 19.5px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-tab .e-tab-header,
+.e-bigger.e-spreadsheet .e-ribbon .e-tab .e-tab-header {
+  height: 41px;
+  min-height: 41px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator),
+.e-bigger.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) {
+  height: 41px;
+  min-height: 41px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) .e-tab-wrap,
+.e-bigger.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) .e-tab-wrap {
+  height: 41px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) .e-text-wrap,
+.e-bigger.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) .e-text-wrap {
+  height: 41px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items,
+.e-bigger.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items {
+  height: 41px;
+  min-height: 41px;
+}
+.e-bigger .e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items .e-scroll-nav,
+.e-bigger.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-items .e-scroll-nav {
+  height: 41px;
+  min-height: 41px;
+}
+
+.e-spreadsheet .e-ribbon {
+  background-color: #f9f9f9;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header {
+  background-color: inherit;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header::before {
+  border-bottom-color: #e5e5e5;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item.e-active {
+  border-bottom-color: #fff;
+  border-left-color: #e5e5e5;
+  border-right-color: #e5e5e5;
+  border-top-color: #e5e5e5;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-tab-wrap:focus {
+  background: #eee;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-tab-wrap:focus .e-tab-icon,
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-tab-wrap:focus .e-tab-text {
+  color: #1f496e;
+}
+.e-spreadsheet .e-ribbon .e-drop-icon {
+  color: #777;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-content .e-toolbar {
+  border-bottom-color: transparent;
+  border-top-color: transparent;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-tab-header .e-toolbar-item.e-active {
+  background: #fff;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-content .e-toolbar {
+  background: #fff;
+}
+.e-spreadsheet .e-ribbon .e-tab .e-content .e-toolbar .e-toolbar-items, .e-spreadsheet .e-ribbon .e-tab .e-content .e-toolbar .e-toolbar-item .e-btn.e-tbar-btn:not(:hover):not(:focus), .e-spreadsheet .e-ribbon .e-tab .e-content .e-toolbar .e-toolbar-item.e-overlay {
+  background: transparent;
+}
+.e-spreadsheet .e-ribbon .e-menu-wrapper {
+  background-color: transparent;
+}