@syncfusion/ej2-angular-ribbon 22.1.34 → 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

@@ -12,10 +12,6 @@
         display: none;
       }
 
-      .e-item {
-        width: fit-content;
-      }
-
       .e-ribbon-file-menu {
         position: absolute;
         line-height: $ribbon-file-menu-height;
@@ -24,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;
@@ -121,6 +118,12 @@
         }
       }
 
+      .e-hscroll.e-scroll-device {
+        .e-scroll-nav.e-scroll-right-nav {
+          box-shadow: none;
+        }
+      }
+
       .e-hscroll {
         padding: $ribbon-hscroll-padding;
 
@@ -130,9 +133,10 @@
           min-width: auto;
           width: auto;
           border-style: solid;
+          transform: none;
           border-width: $ribbon-hscroll-nav-border-width;
           border-radius: $ribbon-hscroll-nav-border-radius;
-          z-index: 2;
+          z-index: 3;
 
           &.e-overlay {
             display: none;
@@ -141,6 +145,7 @@
           .e-nav-arrow {
             font-size: $ribbon-nav-arrow-size;
             height: auto;
+            transform: none;
             line-height: $ribbon-nav-arrow-height;
             padding: $ribbon-hscroll-nav-arrow-padding;
             width: auto;
@@ -192,6 +197,7 @@
         border: $ribbon-items-border;
         height: $ribbon-overflow-btn-height;
         margin: auto;
+        box-shadow: none;
 
         .e-btn-icon {
           font-size: 16px;
@@ -232,6 +238,10 @@
         overflow-y: hidden;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group {
         padding-top: $ribbon-simplified-group-padding;
         height: auto;
@@ -295,6 +305,10 @@
       .e-tab-header {
         left: var(--fileMenuWidth);
       }
+
+      .e-ribbon-tab .e-hscroll.e-scroll-device {
+        padding-right: 30px;
+      }
     }
 
     &.e-rtl {
@@ -312,6 +326,10 @@
       .e-tab-header {
         right: var(--fileMenuWidth);
       }
+
+      .e-ribbon-tab .e-hscroll.e-scroll-device {
+        padding-left: 30px;
+      }
     }
   }
 
@@ -353,6 +371,8 @@
 
         .e-clear-icon {
           min-width: auto;
+          min-height: auto;
+          border-radius: unset;
         }
       }
 
@@ -430,6 +450,7 @@
         font-weight: $ribbon-items-font-weight;
         font-size: $ribbon-items-btn-size;
         text-transform: none;
+        box-shadow: none;
 
         &:focus {
           outline: none;
@@ -513,6 +534,7 @@
 
       .e-colorpicker-wrapper {
         border: 1px solid transparent;
+        border-radius: $ribbon-items-border-radius;
 
         .e-split-btn-wrapper.e-rtl .e-split-colorpicker {
           &.e-split-btn {
@@ -524,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;
@@ -659,8 +682,12 @@
 
     .e-ribbon-overflow-target {
 
-      .e-ribbon-item > .e-input-group {
-        margin: $ribbon-overflow-wrapper-item-margin;
+      .e-ribbon-item {
+
+        & > .e-input-group,
+        .e-ribbon-template {
+          margin: $ribbon-overflow-wrapper-item-margin;
+        }
       }
 
       .e-ribbon-item > .e-checkbox-wrapper {
@@ -675,6 +702,7 @@
         > .e-split-btn-wrapper .e-btn,
         > .e-btn {
           line-height: $ribbon-overflow-item-btn-height;
+          overflow: hidden;
         }
 
         >.e-split-btn-wrapper {
@@ -686,14 +714,6 @@
           width: 100%;
           justify-content: flex-start;
         }
-
-        >.e-split-btn-wrapper,
-        >.e-dropdown-btn {
-          .e-icons.e-caret {
-            transform: rotate(-90deg);
-            margin-left: auto;
-          }
-        }
       }
 
       .e-ribbon-overflow-header {
@@ -704,6 +724,20 @@
     }
   }
 
+  .e-ribbon-group-overflow-ddb:not(.e-rtl) {
+    .e-ribbon-overflow-target .e-ribbon-item {
+
+      >.e-split-btn-wrapper,
+      >.e-dropdown-btn {
+        .e-icons.e-caret {
+          transform: rotate(-90deg);
+          padding: $ribbon-items-margin;
+          margin: 0 0 0 auto;
+        }
+      }
+    }
+  }
+
   .e-rtl.e-ribbon-group-overflow-ddb {
     .e-ribbon-overflow-target .e-ribbon-item {
 
@@ -711,8 +745,8 @@
       >.e-dropdown-btn {
         .e-icons.e-caret {
           transform: rotate(90deg);
-          margin-right: auto;
-          margin-left: unset;
+          padding: $ribbon-items-margin;
+          margin: 0 auto 0 0;
         }
       }
     }
@@ -742,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;
@@ -789,6 +834,10 @@
         height: $ribbon-bigger-help-template-height;
       }
 
+      .e-hscroll {
+        min-height: auto;
+      }
+
       .e-tab-header {
         .e-hor-nav {
           height: $ribbon-bigger-horizontal-nav-height;
@@ -888,6 +937,10 @@
         height: auto;
       }
 
+      .e-input-group {
+        margin-bottom: 0;
+      }
+
       .e-ribbon-group-content {
         height: $ribbon-bigger-simplified-group-content-height;
       }
@@ -1011,8 +1064,12 @@
   .e-bigger.e-ribbon-group-overflow-ddb {
     .e-ribbon-overflow-target {
 
-      .e-ribbon-item > .e-input-group {
-        margin: $ribbon-bigger-overflow-wrapper-item-margin;
+      .e-ribbon-item {
+
+        & > .e-input-group,
+        .e-ribbon-template {
+          margin: $ribbon-bigger-overflow-wrapper-item-margin;
+        }
       }
 
       .e-ribbon-item > .e-checkbox-wrapper {
@@ -1020,6 +1077,40 @@
         padding: 0;
       }
     }
+
+    &:not(.e-rtl) {
+      .e-ribbon-overflow-target .e-ribbon-item {
+
+        >.e-split-btn-wrapper,
+        >.e-dropdown-btn {
+          .e-icons.e-caret {
+            padding: $ribbon-bigger-items-margin;
+          }
+        }
+      }
+    }
+
+    &.e-rtl {
+      .e-ribbon-overflow-target .e-ribbon-item {
+
+        >.e-split-btn-wrapper,
+        >.e-dropdown-btn {
+          .e-icons.e-caret {
+            padding: $ribbon-bigger-items-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 {
+      font-size: 20px;
+      line-height: 20px;
+    }
   }
 
   .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical,

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';