@syncfusion/ej2-ribbon 21.2.3 → 22.1.39

package/styles/material3.scss

@@ -0,0 +1,3 @@
+
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ribbon/material3.scss';

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

@@ -94,6 +94,8 @@ $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-ddb-popup-font-size: 14px;
+$ribbon-ddb-popup-height: 26px;
 
 $ribbon-bigger-content-height: 132px !default;
 $ribbon-bigger-group-overflow-content-height: 132px !default;
@@ -157,6 +159,8 @@ $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-bigger-ddb-popup-font-size: 14px;
+$ribbon-bigger-ddb-popup-height: 32px;
 
 $ribbon-header-bg-color: $gray-darker !default;
 $ribbon-border-color: unset !default;

package/styles/ribbon/_bootstrap-definition.scss

@@ -94,6 +94,8 @@ $ribbon-menu-border-radius: 4px !default;
 $ribbon-menu-blank-icon-padding: 34px !default;
 $ribbon-launcher-icon-margin: 0 7px 3px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 3px 7px !default;
+$ribbon-ddb-popup-font-size: 14px;
+$ribbon-ddb-popup-height: 26px;
 
 $ribbon-bigger-content-height: 132px !default;
 $ribbon-bigger-group-overflow-content-height: 132px !default;
@@ -157,6 +159,8 @@ $ribbon-bigger-color-picker-height: 20px !default;
 $ribbon-bigger-color-picker-width: 20px !default;
 $ribbon-bigger-launcher-icon-margin: 0 8px 8px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 8px 8px !default;
+$ribbon-bigger-ddb-popup-font-size: 14px;
+$ribbon-bigger-ddb-popup-height: 32px;
 
 $ribbon-header-bg-color: $grey-f8 !default;
 $ribbon-border-color: unset !default;

package/styles/ribbon/_bootstrap4-definition.scss

@@ -94,6 +94,8 @@ $ribbon-menu-border-radius: 4px !default;
 $ribbon-menu-blank-icon-padding: 34px !default;
 $ribbon-launcher-icon-margin: 0 7px 5px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 5px 7px !default;
+$ribbon-ddb-popup-font-size: 14px;
+$ribbon-ddb-popup-height: 26px;
 
 $ribbon-bigger-content-height: 120px !default;
 $ribbon-bigger-group-overflow-content-height: 120px !default;
@@ -157,6 +159,8 @@ $ribbon-bigger-color-picker-height: 20px !default;
 $ribbon-bigger-color-picker-width: 20px !default;
 $ribbon-bigger-launcher-icon-margin: 0 8px 8px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 8px 8px !default;
+$ribbon-bigger-ddb-popup-font-size: 14px;
+$ribbon-bigger-ddb-popup-height: 32px;
 
 $ribbon-header-bg-color: $gray-100 !default;
 $ribbon-border-color: unset !default;

package/styles/ribbon/_bootstrap5-definition.scss

@@ -94,6 +94,8 @@ $ribbon-menu-border-radius: 2px !default;
 $ribbon-menu-blank-icon-padding: 38px !default;
 $ribbon-launcher-icon-margin: 0 8px 4px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 4px 8px !default;
+$ribbon-ddb-popup-font-size: 12px;
+$ribbon-ddb-popup-height: 24px;
 
 $ribbon-bigger-content-height: 114px !default;
 $ribbon-bigger-group-overflow-content-height: 114px !default;
@@ -157,6 +159,8 @@ $ribbon-bigger-color-picker-height: 20px !default;
 $ribbon-bigger-color-picker-width: 20px !default;
 $ribbon-bigger-launcher-icon-margin: 0 8px 4px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 4px 8px !default;
+$ribbon-bigger-ddb-popup-font-size: 14px;
+$ribbon-bigger-ddb-popup-height: 32px;
 
 $ribbon-header-bg-color: $content-bg-color-alt1 !default;
 $ribbon-border-color: unset !default;

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

@@ -94,6 +94,8 @@ $ribbon-menu-border-radius: unset !default;
 $ribbon-menu-blank-icon-padding: 30px !default;
 $ribbon-launcher-icon-margin: 0 8px 4px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 4px 8px !default;
+$ribbon-ddb-popup-font-size: 16px;
+$ribbon-ddb-popup-height: 36px;
 
 $ribbon-bigger-content-height: 132px !default;
 $ribbon-bigger-group-overflow-content-height: 132px !default;
@@ -157,6 +159,8 @@ $ribbon-bigger-color-picker-height: 20px !default;
 $ribbon-bigger-color-picker-width: 20px !default;
 $ribbon-bigger-launcher-icon-margin: 0 8px 8px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 8px 8px !default;
+$ribbon-bigger-ddb-popup-font-size: 16px;
+$ribbon-bigger-ddb-popup-height: 45px;
 
 $ribbon-header-bg-color: $neutral-lighter !default;
 $ribbon-border-color: unset !default;

package/styles/ribbon/_fabric-definition.scss

@@ -94,6 +94,8 @@ $ribbon-menu-border-radius: 2px !default;
 $ribbon-menu-blank-icon-padding: 30px !default;
 $ribbon-launcher-icon-margin: 0 8px 4px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 4px 8px !default;
+$ribbon-ddb-popup-font-size: 16px;
+$ribbon-ddb-popup-height: 36px;
 
 $ribbon-bigger-content-height: 132px !default;
 $ribbon-bigger-group-overflow-content-height: 132px !default;
@@ -157,6 +159,8 @@ $ribbon-bigger-color-picker-height: 20px !default;
 $ribbon-bigger-color-picker-width: 20px !default;
 $ribbon-bigger-launcher-icon-margin: 0 8px 8px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 8px 8px !default;
+$ribbon-bigger-ddb-popup-font-size: 16px;
+$ribbon-bigger-ddb-popup-height: 45px;
 
 $ribbon-header-bg-color: $neutral-white !default;
 $ribbon-border-color: $neutral-quintenaryalt !default;

package/styles/ribbon/_fluent-definition.scss

@@ -94,6 +94,8 @@ $ribbon-menu-border-radius: 2px !default;
 $ribbon-menu-blank-icon-padding: 26px !default;
 $ribbon-launcher-icon-margin: 0 8px 4px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 4px 8px !default;
+$ribbon-ddb-popup-font-size: 12px;
+$ribbon-ddb-popup-height: 24px;
 
 $ribbon-bigger-content-height: 114px !default;
 $ribbon-bigger-group-overflow-content-height: 114px !default;
@@ -157,6 +159,8 @@ $ribbon-bigger-color-picker-height: 20px !default;
 $ribbon-bigger-color-picker-width: 20px !default;
 $ribbon-bigger-launcher-icon-margin: 0 8px 4px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 4px 8px !default;
+$ribbon-bigger-ddb-popup-font-size: 14px;
+$ribbon-bigger-ddb-popup-height: 32px;
 
 $ribbon-header-bg-color: $content-bg-color-alt2 !default;
 $ribbon-border-color: unset !default;

package/styles/ribbon/_fusionnew-definition.scss

@@ -94,6 +94,8 @@ $ribbon-menu-border-radius: 2px !default;
 $ribbon-menu-blank-icon-padding: 26px !default;
 $ribbon-launcher-icon-margin: 0 8px 4px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 4px 8px !default;
+$ribbon-ddb-popup-font-size: 12px;
+$ribbon-ddb-popup-height: 24px;
 
 $ribbon-bigger-content-height: 114px !default;
 $ribbon-bigger-group-overflow-content-height: 114px !default;
@@ -157,6 +159,8 @@ $ribbon-bigger-color-picker-height: 20px !default;
 $ribbon-bigger-color-picker-width: 20px !default;
 $ribbon-bigger-launcher-icon-margin: 0 8px 4px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 4px 8px !default;
+$ribbon-bigger-ddb-popup-font-size: 14px;
+$ribbon-bigger-ddb-popup-height: 32px;
 
 $ribbon-header-bg-color: $content-bg-color-alt2 !default;
 $ribbon-border-color: unset !default;

package/styles/ribbon/_highcontrast-definition.scss

@@ -28,7 +28,7 @@ $ribbon-simplified-group-content-height: 40px !default;
 $ribbon-collapse-btn-padding: 4px !default;
 $ribbon-collapse-btn-height: 16px !default;
 $ribbon-collapse-btn-font-weight: 400 !default;
-$ribbon-collapsible-content-width: 20px !default;
+$ribbon-collapsible-content-width: 25px !default;
 $ribbon-overflow-btn-content-width: 40px !default;
 $ribbon-overflow-btn-font-weight: 400 !default;
 $ribbon-overflow-btn-icon-padding: 12px 10px !default;
@@ -94,6 +94,8 @@ $ribbon-menu-border-radius: unset !default;
 $ribbon-menu-blank-icon-padding: 30px !default;
 $ribbon-launcher-icon-margin: 0 8px 2px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 2px 8px !default;
+$ribbon-ddb-popup-font-size: 16px;
+$ribbon-ddb-popup-height: 36px;
 
 $ribbon-bigger-content-height: 132px !default;
 $ribbon-bigger-group-overflow-content-height: 132px !default;
@@ -108,7 +110,7 @@ $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-collapsible-content-width: 28px !default;
 $ribbon-bigger-overflow-btn-content-width: 40px !default;
 $ribbon-bigger-overflow-btn-font-size: 20px !default;
 $ribbon-bigger-overflow-btn-height: 20px !default;
@@ -157,6 +159,8 @@ $ribbon-bigger-color-picker-height: 20px !default;
 $ribbon-bigger-color-picker-width: 20px !default;
 $ribbon-bigger-launcher-icon-margin: 0 8px 8px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 8px 8px !default;
+$ribbon-bigger-ddb-popup-font-size: 16px;
+$ribbon-bigger-ddb-popup-height: 45px;
 
 $ribbon-header-bg-color: $bg-base-0 !default;
 $ribbon-border-color: $border-default !default;

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

@@ -94,6 +94,8 @@ $ribbon-menu-border-radius: unset !default;
 $ribbon-menu-blank-icon-padding: 30px !default;
 $ribbon-launcher-icon-margin: 0 8px 2px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 2px 8px !default;
+$ribbon-ddb-popup-font-size: 16px;
+$ribbon-ddb-popup-height: 36px;
 
 $ribbon-bigger-content-height: 132px !default;
 $ribbon-bigger-group-overflow-content-height: 132px !default;
@@ -157,6 +159,8 @@ $ribbon-bigger-color-picker-height: 20px !default;
 $ribbon-bigger-color-picker-width: 20px !default;
 $ribbon-bigger-launcher-icon-margin: 0 8px 8px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 8px 8px !default;
+$ribbon-bigger-ddb-popup-font-size: 16px;
+$ribbon-bigger-ddb-popup-height: 45px;
 
 $ribbon-header-bg-color: $bg-base-0 !default;
 $ribbon-border-color: $border-default !default;

package/styles/ribbon/_layout.scss

@@ -20,6 +20,7 @@
         border-width: $ribbon-file-menu-border-width;
         font-size: $ribbon-file-menu-size;
         font-weight: $ribbon-file-menu-weight;
+        box-shadow: none;
 
         &.e-active {
           border-radius: $ribbon-file-menu-border-radius;
@@ -196,6 +197,7 @@
         border: $ribbon-items-border;
         height: $ribbon-overflow-btn-height;
         margin: auto;
+        box-shadow: none;
 
         .e-btn-icon {
           font-size: 16px;
@@ -369,6 +371,8 @@
 
         .e-clear-icon {
           min-width: auto;
+          min-height: auto;
+          border-radius: unset;
         }
       }
 
@@ -446,6 +450,7 @@
         font-weight: $ribbon-items-font-weight;
         font-size: $ribbon-items-btn-size;
         text-transform: none;
+        box-shadow: none;
 
         &:focus {
           outline: none;
@@ -541,6 +546,7 @@
       .e-split-btn-wrapper {
         border: 1px solid transparent;
         border-radius: $ribbon-items-border-radius;
+        box-shadow: none;
 
         .e-btn {
           border-radius: 0;
@@ -696,6 +702,7 @@
         > .e-split-btn-wrapper .e-btn,
         > .e-btn {
           line-height: $ribbon-overflow-item-btn-height;
+          overflow: hidden;
         }
 
         >.e-split-btn-wrapper {
@@ -769,6 +776,17 @@
     }
   }
 
+  .e-ribbon-control.e-dropdown-popup ul .e-item {
+    font-size: $ribbon-ddb-popup-font-size;
+    height: $ribbon-ddb-popup-height;
+    align-items: center;
+
+    .e-menu-icon {
+      font-size: 16px;
+      line-height: 16px;
+    }
+  }
+
   .e-ribbon-tooltip {
     .e-tip-content {
       padding: 4px;
@@ -1085,6 +1103,16 @@
     }
   }
 
+  .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 {
+      font-size: 20px;
+      line-height: 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,

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

@@ -94,6 +94,8 @@ $ribbon-menu-border-radius: unset !default;
 $ribbon-menu-blank-icon-padding: 34px !default;
 $ribbon-launcher-icon-margin: 0 7px 2px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 2px 7px !default;
+$ribbon-ddb-popup-font-size: 14px;
+$ribbon-ddb-popup-height: 36px;
 
 $ribbon-bigger-content-height: 120px !default;
 $ribbon-bigger-group-overflow-content-height: 120px !default;
@@ -157,6 +159,8 @@ $ribbon-bigger-color-picker-height: 20px !default;
 $ribbon-bigger-color-picker-width: 20px !default;
 $ribbon-bigger-launcher-icon-margin: 0 8px 8px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 8px 8px !default;
+$ribbon-bigger-ddb-popup-font-size: 16px;
+$ribbon-bigger-ddb-popup-height: 48px;
 
 $ribbon-header-bg-color: $grey-900 !default;
 $ribbon-border-color: $grey-600 !default;

package/styles/ribbon/_material-definition.scss

@@ -94,6 +94,8 @@ $ribbon-menu-border-radius: unset !default;
 $ribbon-menu-blank-icon-padding: 34px !default;
 $ribbon-launcher-icon-margin: 0 7px 2px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 2px 7px !default;
+$ribbon-ddb-popup-font-size: 14px;
+$ribbon-ddb-popup-height: 36px;
 
 $ribbon-bigger-content-height: 120px !default;
 $ribbon-bigger-group-overflow-content-height: 120px !default;
@@ -157,6 +159,8 @@ $ribbon-bigger-color-picker-height: 20px !default;
 $ribbon-bigger-color-picker-width: 20px !default;
 $ribbon-bigger-launcher-icon-margin: 0 8px 8px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 8px 8px !default;
+$ribbon-bigger-ddb-popup-font-size: 16px;
+$ribbon-bigger-ddb-popup-height: 48px;
 
 $ribbon-header-bg-color: $grey-50 !default;
 $ribbon-border-color: $grey-300 !default;

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

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

package/styles/ribbon/_material3-definition.scss

@@ -0,0 +1,210 @@
+$ribbon-border: none !default;
+$ribbon-file-menu-border: none !default;
+$ribbon-file-menu-border-width: unset !default;
+$ribbon-file-menu-weight: $font-weight-normal !default;
+$ribbon-file-menu-size: $text-sm !default;
+$ribbon-file-menu-padding: 10px 15px !default;
+$ribbon-file-menu-height: 18px !default;
+$ribbon-file-menu-border-radius: unset !default;
+$ribbon-help-template-padding: 16px !default;
+$ribbon-help-template-height: 38px !default;
+$ribbon-help-template-border: none !default;
+$ribbon-toolbar-items-height: 38px !default;
+$ribbon-horizontal-nav-height: 38px !default;
+$ribbon-group-header-padding: 6px 11px 1px 11px !default;
+$ribbon-group-header-height: 12px !default;
+$ribbon-group-header-font-size: $text-xxs !default;
+$ribbon-group-overflow-padding: 2px 10px !default;
+$ribbon-group-content-padding: 0 10px !default;
+$ribbon-group-content-height: 84px !default;
+$ribbon-group-overflow-height: 84px !default;
+$ribbon-group-header-margin: 16px !default;
+$ribbon-group-content-margin: 16px !default;
+$ribbon-group-padding: 4px !default;
+$ribbon-group-height: 107px !default;
+$ribbon-simplified-group-padding: 3px !default;
+$ribbon-simplified-group-content-padding: 0 4px 0 !default;
+$ribbon-simplified-group-content-height: 32px !default;
+$ribbon-collapse-btn-padding: 2px !default;
+$ribbon-collapse-btn-height: 12px !default;
+$ribbon-collapse-btn-font-weight: $font-weight-normal !default;
+$ribbon-collapsible-content-width: 20px !default;
+$ribbon-overflow-btn-content-width: 40px !default;
+$ribbon-overflow-btn-font-weight: $font-weight-normal !default;
+$ribbon-overflow-btn-icon-padding: 5px !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: 3px 4px !default;
+$ribbon-overflow-item-btn-height: 18px !default;
+$ribbon-overflow-item-btn-margin: 0 8px 0 0 !default;
+$ribbon-overflow-btn-height: 24px !default;
+$ribbon-rtl-overflow-item-btn-margin: 0 0 0 8px !default;
+$ribbon-overflow-btn-border-radius: 4px !default;
+$ribbon-overflow-header-height: 18px !default;
+$ribbon-overflow-header-padding: 3px 8px !default;
+$ribbon-overflow-header-weight: 500 !default;
+$ribbon-overflow-dropdown-btn-padding: 0 5px !default;
+$ribbon-overall-overflow-btn-position: 4px !default;
+$ribbon-dropdown-btn-padding: 0 5px !default;
+$ribbon-dropdown-caret-btn-size: $text-xs !default;
+$ribbon-dropdown-caret-btn-height: 12px !default;
+$ribbon-dropdown-caret-btn-padding: 2px 5px !default;
+$ribbon-items-padding: 2px !default;
+$ribbon-large-items-btn-padding: 0 2px !default;
+$ribbon-large-items-btn-height: 15px !default;
+$ribbon-large-items-icon-size: $text-4xl !default;
+$ribbon-large-items-max-width: 10ch !default;
+$ribbon-large-items-icon-padding: 4px 3px !default;
+$ribbon-items-border: none !default;
+$ribbon-items-border-radius: 4px !default;
+$ribbon-items-font-weight: $font-weight-normal !default;
+$ribbon-items-btn-size: $text-xs !default;
+$ribbon-items-btn-padding: 0 !default;
+$ribbon-items-margin: 4px !default;
+$ribbon-items-height: 15px !default;
+$ribbon-items-checkbox-size: $text-xs !default;
+$ribbon-items-checkbox-padding: 0 4px !default;
+$ribbon-input-group-height: 24px !default;
+$ribbon-input-padding: 4px 0 4px 8px !default;
+$ribbon-input-size: $text-xs !default;
+$ribbon-input-height: 16px !default;
+$ribbon-input-weight: $font-weight-normal !default;
+$ribbon-input-icon-size: $text-base !default;
+$ribbon-input-icon-height: 16px !default;
+$ribbon-input-icon-padding: 4px !default;
+$ribbon-input-icon-weight: $font-weight-normal !default;
+$ribbon-input-group-border-radius: unset !default;
+$ribbon-input-group-margin: 4px !default;
+$ribbon-tab-border: none !default;
+$ribbon-tab-text-size: $text-sm !default;
+$ribbon-tab-text-padding: 10px 15px !default;
+$ribbon-tab-text-height: 18px !default;
+$ribbon-tab-text-weight: $font-weight-normal !default;
+$ribbon-nav-arrow-size: $text-sm !default;
+$ribbon-nav-arrow-height: 14px !default;
+$ribbon-hscroll-padding: 0 !default;
+$ribbon-hscroll-nav-arrow-padding: 0 5px !default;
+$ribbon-hscroll-nav-arrow-weight: $font-weight-normal !default;
+$ribbon-hscroll-nav-border-width: 0 0 1px 0 !default;
+$ribbon-hscroll-nav-border-radius: unset !default;
+$ribbon-menu-border: 1px solid !default;
+$ribbon-menu-border-radius: 4px !default;
+$ribbon-menu-blank-icon-padding: 38px !default;
+$ribbon-launcher-icon-margin: 0 2px 2px 0 !default;
+$ribbon-rtl-launcher-icon-margin: 0 2px 2px 0 !default;
+$ribbon-ddb-popup-font-size: 12px;
+$ribbon-ddb-popup-height: 24px;
+
+$ribbon-bigger-content-height: 120px !default;
+$ribbon-bigger-group-overflow-content-height: 120px !default;
+$ribbon-bigger-group-height: 149px !default;
+$ribbon-bigger-file-menu-height: 20px !default;
+$ribbon-bigger-file-menu-padding: 14px 15px !default;
+$ribbon-bigger-file-menu-size: $text-base !default;
+$ribbon-bigger-help-template-padding: 16px !default;
+$ribbon-bigger-help-template-height: 48px !default;
+$ribbon-bigger-toolbar-items-height: 48px !default;
+$ribbon-bigger-horizontal-nav-height: 48px !default;
+$ribbon-bigger-collapse-btn-padding: 5px !default;
+$ribbon-bigger-collapse-btn-height: 14px !default;
+$ribbon-bigger-collapse-btn-font-size: $text-sm !default;
+$ribbon-bigger-collapsible-content-width: 24px !default;
+$ribbon-bigger-overflow-btn-content-width: 40px !default;
+$ribbon-bigger-overflow-btn-font-size: $text-xl !default;
+$ribbon-bigger-overflow-btn-height: 20px !default;
+$ribbon-bigger-overflow-btn-icon-padding: 7px !default;
+$ribbon-bigger-overflow-collapse-btn-right: 28px !default;
+$ribbon-bigger-overall-overflow-btn-height: 36px !default;
+$ribbon-bigger-overall-overflow-btn-position: 2px !default;
+$ribbon-bigger-overflow-wrapper-item-margin: 3px 8px !default;
+$ribbon-bigger-group-header-padding: 12px 11px 1px !default;
+$ribbon-bigger-group-header-height: 12px !default;
+$ribbon-bigger-group-header-font-size: $text-xxs !default;
+$ribbon-bigger-simplified-group-content-height: 40px !default;
+$ribbon-bigger-tab-text-size: $text-base !default;
+$ribbon-bigger-tab-text-padding: 14px 15px !default;
+$ribbon-bigger-tab-text-height: 20px !default;
+$ribbon-bigger-large-items-icon-padding: 8px 3px 4px !default;
+$ribbon-bigger-large-items-icon-size: 36px !default;
+$ribbon-bigger-large-items-btn-padding: 0 3px !default;
+$ribbon-bigger-large-items-btn-size: $text-sm !default;
+$ribbon-bigger-large-items-btn-height: 18px !default;
+$ribbon-bigger-items-padding: 2px !default;
+$ribbon-bigger-items-btn-size: $text-sm !default;
+$ribbon-bigger-items-height: 18px !default;
+$ribbon-bigger-items-icon-height: 20px !default;
+$ribbon-bigger-items-icon-size: $text-xl !default;
+$ribbon-bigger-items-margin: 8px !default;
+$ribbon-bigger-items-checkbox-size: $text-sm !default;
+$ribbon-bigger-items-checkbox-padding: 0 8px !default;
+$ribbon-bigger-input-group-height: 36px !default;
+$ribbon-bigger-input-items-size: $text-sm !default;
+$ribbon-bigger-input-items-height: 18px !default;
+$ribbon-bigger-input-items-btn-size: $text-base !default;
+$ribbon-bigger-input-items-btn-height: 16px !default;
+$ribbon-bigger-input-padding: 9px 0 9px 8px !default;
+$ribbon-bigger-input-icon-padding: 10px 10px 10px 2px !default;
+$ribbon-bigger-input-group-margin: 4px !default;
+$ribbon-bigger-dropdown-btn-padding: 0 6px !default;
+$ribbon-bigger-menu-blank-icon-padding: 50px !default;
+$ribbon-bigger-dropdown-btn-size: $text-xs !default;
+$ribbon-bigger-dropdown-btn-line-height: 12px !default;
+$ribbon-bigger-dropdown-caret-btn-padding: 2px 4px !default;
+$ribbon-bigger-dropdown-caret-btn-size: $text-xs !default;
+$ribbon-bigger-dropdown-caret-btn-height: 12px !default;
+$ribbon-bigger-caret-dropdown-btn-padding: 0 6px !default;
+$ribbon-bigger-color-picker-height: 20px !default;
+$ribbon-bigger-color-picker-width: 20px !default;
+$ribbon-bigger-launcher-icon-margin: 0 2px 2px 0 !default;
+$ribbon-bigger-rtl-launcher-icon-margin: 0 2px 2px 0 !default;
+$ribbon-bigger-ddb-popup-font-size: 14px;
+$ribbon-bigger-ddb-popup-height: 32px;
+
+$ribbon-header-bg-color: $content-bg-color-alt2 !default;
+$ribbon-border-color: unset !default;
+$ribbon-group-seperator-color: rgba($border-light) !default;
+$ribbon-group-border-color: rgba($border-light) !default;
+$ribbon-input-group-border-color: rgba($border) !default;
+$ribbon-input-group-background-color: $transparent !default;
+$ribbon-items-icon-color: rgba($icon-color) !default;
+$ribbon-items-background-color: $content-bg-color-alt2 !default;
+$ribbon-items-hover-background-color: $content-bg-color-hover !default;
+$ribbon-items-focus-background-color: $content-bg-color-hover !default;
+$ribbon-items-hover-color: rgba($icon-color) !default;
+$ribbon-items-active-color: rgba($icon-color) !default;
+$ribbon-items-focus-color: rgba($icon-color) !default;
+$ribbon-items-active-background-color: $content-bg-color-hover !default;
+$ribbon-items-hover-border-color: unset !default;
+$ribbon-items-focus-border-color: unset !default;
+$ribbon-items-disabled-color: $content-bg-color-alt6 !default;
+$ribbon-collapse-btn-background: $content-bg-color-alt2 !default;
+$ribbon-text-color: rgba($content-text-color) !default;
+$ribbon-tab-text-focus-color: rgba($primary) !default;
+$ribbon-tab-text-hover-color: rgba($primary) !default;
+$ribbon-active-tab-color: rgba($primary) !default;
+$ribbon-active-tab-indicator-color: rgba($primary) !default;
+$ribbon-active-file-menu-color: rgba($surface) !default;
+$ribbon-active-file-menu-background: rgba($primary) !default;
+$ribbon-menu-border-color: rgba($border-light) !default;
+$ribbon-menu-hover-background-color: $content-bg-color-alt2 !default;
+$ribbon-menu-items-color: rgba($content-text-color) !default;
+$ribbon-menu-items-icon-color: rgba($icon-color) !default;
+$ribbon-menu-background-color: rgba($surface) !default;
+$ribbon-menu-items-background-color: rgba($surface) !default;
+$ribbon-hscroll-border-color: rgba($border) !default;
+$ribbon-hscroll-color: rgba($icon-color) !default;
+$ribbon-hscroll-background-color: rgba($surface) !default;
+$ribbon-hscroll-hover-border-color: rgba($border) !default;
+$ribbon-hscroll-hover-background-color: rgba($surface) !default;
+$ribbon-hscroll-hover-color: rgba($icon-color) !default;
+$ribbon-hscroll-active-border-color: rgba($border) !default;
+$ribbon-hscroll-active-background-color: rgba($surface) !default;
+$ribbon-hscroll-active-color: rgba($icon-color) !default;
+$ribbon-hscroll-focus-border-color: rgba($border) !default;
+$ribbon-hscroll-focus-background-color: rgba($surface) !default;
+$ribbon-hscroll-focus-color: rgba($icon-color) !default;
+$ribbon-tooltip-background-color: rgba($tooltip-bg-color) !default;
+$ribbon-tooltip-text-color: rgba($tooltip-text-color) !default;
+$ribbon-overflow-box-shadow: $shadow-md !default;

package/styles/ribbon/_tailwind-definition.scss

@@ -94,6 +94,8 @@ $ribbon-menu-border-radius: 2px !default;
 $ribbon-menu-blank-icon-padding: 38px !default;
 $ribbon-launcher-icon-margin: 0 8px 4px 0 !default;
 $ribbon-rtl-launcher-icon-margin: 0 0 4px 8px !default;
+$ribbon-ddb-popup-font-size: 12px;
+$ribbon-ddb-popup-height: 24px;
 
 $ribbon-bigger-content-height: 114px !default;
 $ribbon-bigger-group-overflow-content-height: 114px !default;
@@ -157,6 +159,8 @@ $ribbon-bigger-color-picker-height: 20px !default;
 $ribbon-bigger-color-picker-width: 20px !default;
 $ribbon-bigger-launcher-icon-margin: 0 8px 4px 0 !default;
 $ribbon-bigger-rtl-launcher-icon-margin: 0 0 4px 8px !default;
+$ribbon-bigger-ddb-popup-font-size: 14px;
+$ribbon-bigger-ddb-popup-height: 32px;
 
 $ribbon-header-bg-color: $content-bg-color-alt2 !default;
 $ribbon-border-color: unset !default;

package/styles/ribbon/bootstrap-dark.css

@@ -138,6 +138,7 @@
   border-width: unset;
   font-size: 14px;
   font-weight: 400;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
   border-radius: unset;
@@ -275,6 +276,7 @@
   border: none;
   height: 32px;
   margin: auto;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -414,6 +416,8 @@
 .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
   min-width: auto;
+  min-height: auto;
+  border-radius: unset;
 }
 .e-ribbon.e-rbn .e-input-group .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -497,6 +501,7 @@
   font-weight: 400;
   font-size: 12px;
   text-transform: none;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
 .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -605,6 +610,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
   border: 1px solid transparent;
   border-radius: 2px;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -729,6 +735,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
   line-height: 22px;
+  overflow: hidden;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
   width: inherit;
@@ -776,6 +783,17 @@
   padding-left: 37px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ribbon-control.e-dropdown-popup ul .e-item {
+  font-size: 14px;
+  height: 26px;
+  -ms-flex-align: center;
+      align-items: center;
+}
+.e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
+  font-size: 16px;
+  line-height: 16px;
+}
+
 .e-ribbon-tooltip .e-tip-content {
   padding: 4px;
 }
@@ -1152,6 +1170,15 @@
   padding: 10px;
 }
 
+.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
+  font-size: 14px;
+  height: 32px;
+}
+.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
+  font-size: 20px;
+  line-height: 20px;
+}
+
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,

package/styles/ribbon/bootstrap-dark.scss

@@ -12,6 +12,7 @@
 @import 'ej2-navigations/styles/toolbar/bootstrap-dark-definition.scss';
 @import 'ej2-navigations/styles/menu/bootstrap-dark-definition.scss';
 @import 'ej2-navigations/styles/tab/bootstrap-dark-definition.scss';
+@import 'ej2-inputs/styles/color-picker/bootstrap-dark-definition.scss';
 @import 'bootstrap-dark-definition.scss';
 @import 'icons/bootstrap-dark.scss';
 @import 'all.scss';