@syncfusion/ej2-ribbon 26.2.10 → 27.1.48

package/styles/ribbon/_material3-definition.scss

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

package/styles/ribbon/_tailwind-definition.scss

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

package/styles/ribbon/_theme.scss

@@ -55,6 +55,12 @@
             }
           }
 
+          @if ($skin-name == 'fluent2') {
+            &.e-active::before {
+              background: $ribbon-active-tab-indicator-color;
+            }
+          }
+
           &.e-active .e-tab-wrap .e-tab-text {
             color: $ribbon-active-tab-color;
           }
@@ -234,6 +240,7 @@
       .e-colorpicker-wrapper,
       .e-split-btn-wrapper {
         &.e-ribbon-hover,
+        &:not(.e-ribbon-hover):hover,
         &.e-ribbon-open {
           border-color: $ribbon-items-hover-background-color;
         }
@@ -353,28 +360,6 @@
     }
   }
 
-  .e-bigger.e-ribbon.e-rbn,
-  .e-bigger .e-ribbon.e-rbn,
-  .e-bigger .e-ribbon-group-overflow-ddb,
-  .e-bigger.e-ribbon-group-overflow-ddb {
-    .e-ribbon-item .e-split-colorpicker.e-split-btn {
-      background: $ribbon-items-background-color;
-
-      &:hover {
-        background: $ribbon-items-hover-background-color;
-      }
-
-      &.e-active,
-      &:active {
-        background: $ribbon-items-active-background-color;
-      }
-
-      &:focus {
-        background: $ribbon-items-focus-background-color;
-      }
-    }
-  }
-
   .e-ribbon-file-menu,
   .e-ribbon-vertical-center,
   .e-ribbon-group-overflow-ddb,
@@ -424,6 +409,9 @@
     .e-ribbon-gallery-item {
       &:hover {
         background: $ribbon-gallery-hover-background-color;
+        @if ($skin-name == 'fluent2') {
+          @include ribbon-gallery-text-icon-colors($content-text-color-hover, $content-text-color-hover);
+        }
       }
       &.e-ribbon-gallery-selected {
         background: $ribbon-gallery-item-selected-color;
@@ -519,6 +507,11 @@
         &.e-focused {
           background: $ribbon-menu-hover-background-color;
           color: $ribbon-menu-items-color;
+          @if ($skin-name == 'fluent2') {
+            .e-menu-icon {
+              color: $ribbon-menu-items-color;
+            }
+          }
         }
       }
     }