@syncfusion/ej2-ribbon 29.2.4 → 30.1.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/.eslintrc.json +2 -0
  2. package/dist/ej2-ribbon.umd.min.js +2 -2
  3. package/dist/ej2-ribbon.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-ribbon.es2015.js +66 -39
  5. package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
  6. package/dist/es6/ej2-ribbon.es5.js +72 -45
  7. package/dist/es6/ej2-ribbon.es5.js.map +1 -1
  8. package/dist/global/ej2-ribbon.min.js +2 -2
  9. package/dist/global/ej2-ribbon.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +19 -54
  12. package/src/ribbon/base/ribbon.d.ts +1 -0
  13. package/src/ribbon/base/ribbon.js +16 -9
  14. package/src/ribbon/items/ribbon-gallery.d.ts +1 -0
  15. package/src/ribbon/items/ribbon-gallery.js +16 -13
  16. package/src/ribbon/items/ribbon-groupbutton.js +32 -20
  17. package/src/ribbon/modules/ribbon-filemenu.js +8 -3
  18. package/styles/bds-lite.css +216 -213
  19. package/styles/bds.css +219 -213
  20. package/styles/bootstrap-dark-lite.css +216 -213
  21. package/styles/bootstrap-dark.css +219 -213
  22. package/styles/bootstrap-lite.css +216 -213
  23. package/styles/bootstrap.css +219 -213
  24. package/styles/bootstrap4-lite.css +216 -213
  25. package/styles/bootstrap4.css +219 -213
  26. package/styles/bootstrap5-dark-lite.css +216 -213
  27. package/styles/bootstrap5-dark.css +219 -213
  28. package/styles/bootstrap5-lite.css +216 -213
  29. package/styles/bootstrap5.3-lite.css +216 -213
  30. package/styles/bootstrap5.3.css +219 -213
  31. package/styles/bootstrap5.css +219 -213
  32. package/styles/fabric-dark-lite.css +216 -213
  33. package/styles/fabric-dark.css +219 -213
  34. package/styles/fabric-lite.css +216 -213
  35. package/styles/fabric.css +219 -213
  36. package/styles/fluent-dark-lite.css +216 -213
  37. package/styles/fluent-dark.css +219 -213
  38. package/styles/fluent-lite.css +216 -213
  39. package/styles/fluent.css +219 -213
  40. package/styles/fluent2-lite.css +218 -215
  41. package/styles/fluent2.css +221 -215
  42. package/styles/highcontrast-light-lite.css +216 -213
  43. package/styles/highcontrast-light.css +219 -213
  44. package/styles/highcontrast-lite.css +216 -213
  45. package/styles/highcontrast.css +219 -213
  46. package/styles/material-dark-lite.css +216 -213
  47. package/styles/material-dark.css +219 -213
  48. package/styles/material-lite.css +216 -213
  49. package/styles/material.css +219 -213
  50. package/styles/material3-dark-lite.css +216 -213
  51. package/styles/material3-dark.css +219 -213
  52. package/styles/material3-lite.css +216 -213
  53. package/styles/material3.css +219 -213
  54. package/styles/ribbon/_bds-definition.scss +1 -1
  55. package/styles/ribbon/_bigger.scss +4 -0
  56. package/styles/ribbon/_bootstrap-dark-definition.scss +1 -1
  57. package/styles/ribbon/_bootstrap-definition.scss +1 -1
  58. package/styles/ribbon/_bootstrap4-definition.scss +1 -1
  59. package/styles/ribbon/_bootstrap5-definition.scss +1 -1
  60. package/styles/ribbon/_bootstrap5.3-definition.scss +1 -1
  61. package/styles/ribbon/_fabric-dark-definition.scss +1 -1
  62. package/styles/ribbon/_fabric-definition.scss +1 -1
  63. package/styles/ribbon/_fluent-definition.scss +1 -1
  64. package/styles/ribbon/_fluent2-definition.scss +3 -3
  65. package/styles/ribbon/_fusionnew-definition.scss +1 -1
  66. package/styles/ribbon/_highcontrast-definition.scss +1 -1
  67. package/styles/ribbon/_highcontrast-light-definition.scss +1 -1
  68. package/styles/ribbon/_layout.scss +5 -1
  69. package/styles/ribbon/_material-dark-definition.scss +1 -1
  70. package/styles/ribbon/_material-definition.scss +1 -1
  71. package/styles/ribbon/_material3-definition.scss +1 -1
  72. package/styles/ribbon/_tailwind-definition.scss +1 -1
  73. package/styles/ribbon/_tailwind3-definition.scss +2 -2
  74. package/styles/ribbon/_theme.scss +40 -33
  75. package/styles/ribbon/bds.css +219 -213
  76. package/styles/ribbon/bootstrap-dark.css +219 -213
  77. package/styles/ribbon/bootstrap.css +219 -213
  78. package/styles/ribbon/bootstrap4.css +219 -213
  79. package/styles/ribbon/bootstrap5-dark.css +219 -213
  80. package/styles/ribbon/bootstrap5.3.css +219 -213
  81. package/styles/ribbon/bootstrap5.css +219 -213
  82. package/styles/ribbon/fabric-dark.css +219 -213
  83. package/styles/ribbon/fabric.css +219 -213
  84. package/styles/ribbon/fluent-dark.css +219 -213
  85. package/styles/ribbon/fluent.css +219 -213
  86. package/styles/ribbon/fluent2.css +221 -215
  87. package/styles/ribbon/highcontrast-light.css +219 -213
  88. package/styles/ribbon/highcontrast.css +219 -213
  89. package/styles/ribbon/material-dark.css +219 -213
  90. package/styles/ribbon/material.css +219 -213
  91. package/styles/ribbon/material3-dark.css +219 -213
  92. package/styles/ribbon/material3.css +219 -213
  93. package/styles/ribbon/tailwind-dark.css +219 -213
  94. package/styles/ribbon/tailwind.css +219 -213
  95. package/styles/ribbon/tailwind3.css +220 -214
  96. package/styles/tailwind-dark-lite.css +216 -213
  97. package/styles/tailwind-dark.css +219 -213
  98. package/styles/tailwind-lite.css +216 -213
  99. package/styles/tailwind.css +219 -213
  100. package/styles/tailwind3-lite.css +217 -214
  101. package/styles/tailwind3.css +220 -214
package/styles/ribbon/_bds-definition.scss CHANGED
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 8px 8px 8px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 8px 12px 8px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 9px 12px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 12px 9px 0 !default;
142
- $ribbon-gallery-popup-items-padding: 8px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 9px !default;
144
144
  $ribbon-gallery-header-font-weight: 400 !default;
145
145
  $ribbon-gallery-header-line-height: 24px !default;
package/styles/ribbon/_bigger.scss CHANGED
@@ -452,6 +452,10 @@
452
452
  font-size: $ribbon-bigger-ddb-popup-font-size;
453
453
  height: $ribbon-bigger-ddb-popup-height;
454
454
 
455
+ &.e-separator {
456
+ height: auto;
457
+ }
458
+
455
459
  .e-menu-icon {
456
460
  @include ribbon-font-props(20px, 20px);
457
461
  min-height: 20px;
package/styles/ribbon/_bootstrap-dark-definition.scss CHANGED
@@ -141,7 +141,7 @@ $ribbon-button-icon-padding: 7px 8px 7px 12px !default;
141
141
  $ribbon-rtl-button-icon-padding: 7px 12px 7px 8px !default;
142
142
  $ribbon-caret-icon-padding: 0 12px !default;
143
143
  $ribbon-rtl-caret-icon-padding: 0 12px !default;
144
- $ribbon-gallery-popup-items-padding: 5px 0 !default;
144
+ $ribbon-gallery-popup-items-padding: 0 !default;
145
145
  $ribbon-gallery-header-padding: 8px 0 4px !default;
146
146
  $ribbon-gallery-header-font-weight: 500 !default;
147
147
  $ribbon-gallery-header-line-height: 22px !default;
package/styles/ribbon/_bootstrap-definition.scss CHANGED
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 7px 8px 7px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 7px 12px 7px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 12px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 0 12px !default;
142
- $ribbon-gallery-popup-items-padding: 5px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 8px 0 4px !default;
144
144
  $ribbon-gallery-header-font-weight: 500 !default;
145
145
  $ribbon-gallery-header-line-height: 22px !default;
package/styles/ribbon/_bootstrap4-definition.scss CHANGED
@@ -141,7 +141,7 @@ $ribbon-button-icon-padding: 7px 8px 7px 12px !default;
141
141
  $ribbon-rtl-button-icon-padding: 7px 12px 7px 8px !default;
142
142
  $ribbon-caret-icon-padding: 0 12px !default;
143
143
  $ribbon-rtl-caret-icon-padding: 0 12px !default;
144
- $ribbon-gallery-popup-items-padding: 5px 0 !default;
144
+ $ribbon-gallery-popup-items-padding: 0 !default;
145
145
  $ribbon-gallery-header-padding: 8px 0 4px !default;
146
146
  $ribbon-gallery-header-font-weight: 500 !default;
147
147
  $ribbon-gallery-header-line-height: 22px !default;
package/styles/ribbon/_bootstrap5-definition.scss CHANGED
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 7px 8px 7px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 7px 12px 7px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 8px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 0 8px !default;
142
- $ribbon-gallery-popup-items-padding: 5px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 8px 0 4px !default;
144
144
  $ribbon-gallery-header-font-weight: 400 !default;
145
145
  $ribbon-gallery-header-line-height: 22px !default;
package/styles/ribbon/_bootstrap5.3-definition.scss CHANGED
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 7px 8px 7px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 7px 12px 7px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 11px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 0 11px !default;
142
- $ribbon-gallery-popup-items-padding: 0 4px !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 8px 0 4px !default;
144
144
  $ribbon-gallery-header-font-weight: 600 !default;
145
145
  $ribbon-gallery-header-line-height: 22px !default;
package/styles/ribbon/_fabric-dark-definition.scss CHANGED
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 9px 8px 9px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 9px 12px 9px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 12px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 0 12px !default;
142
- $ribbon-gallery-popup-items-padding: 5px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 8px 0 10px !default;
144
144
  $ribbon-gallery-header-font-weight: 600 !default;
145
145
  $ribbon-gallery-header-line-height: 22px !default;
package/styles/ribbon/_fabric-definition.scss CHANGED
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 9px 8px 9px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 9px 12px 9px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 12px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 0 12px !default;
142
- $ribbon-gallery-popup-items-padding: 5px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 8px 0 10px !default;
144
144
  $ribbon-gallery-header-font-weight: 600 !default;
145
145
  $ribbon-gallery-header-line-height: 22px !default;
package/styles/ribbon/_fluent-definition.scss CHANGED
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 9px 8px 9px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 9px 12px 9px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 12px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 0 12px !default;
142
- $ribbon-gallery-popup-items-padding: 5px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 8px 0 10px !default;
144
144
  $ribbon-gallery-header-font-weight: 600 !default;
145
145
  $ribbon-gallery-header-line-height: 22px !default;
package/styles/ribbon/_fluent2-definition.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  $ribbon-border: none !default;
2
2
  $ribbon-border-radius: 4px !default;
3
- $ribbon-disabled-opacity: unset !default;
3
+ $ribbon-disabled-opacity: .35 !default;
4
4
  $ribbon-file-menu-border: none !default;
5
5
  $ribbon-file-menu-border-width: unset !default;
6
6
  $ribbon-file-menu-weight: $font-weight-normal !default;
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 8px 10px 8px 8px !default;
139
139
  $ribbon-rtl-button-icon-padding: 8px 8px 8px 10px !default;
140
140
  $ribbon-caret-icon-padding: 0 6px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 0 6px !default;
142
- $ribbon-gallery-popup-items-padding: 5px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 8px 0 8px 12px !default;
144
144
  $ribbon-gallery-header-font-weight: $font-weight-medium !default;
145
145
  $ribbon-gallery-header-line-height: 20px !default;
@@ -346,7 +346,7 @@ $ribbon-hscroll-focus-border-color: $ribbon-hscroll-border-color !default;
346
346
  $ribbon-hscroll-focus-background-color: $content-bg-color-pressed !default;
347
347
  $ribbon-hscroll-focus-color: $ribbon-hscroll-color !default;
348
348
  $ribbon-tooltip-background-color: $tooltip-bg-color !default;
349
- $ribbon-tooltip-text-color: $grey-14 !default;
349
+ $ribbon-tooltip-text-color: $tooltip-text-color !default;
350
350
  $ribbon-overflow-box-shadow: none !default;
351
351
  $ribbon-backstage-menu-bg-color: $primary !default;
352
352
  $ribbon-backstage-menu-items-bg-color: $primary !default;
package/styles/ribbon/_fusionnew-definition.scss CHANGED
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 8px 8px 8px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 8px 12px 8px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 9px 12px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 12px 9px 0 !default;
142
- $ribbon-gallery-popup-items-padding: 8px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 9px !default;
144
144
  $ribbon-gallery-header-font-weight: 400 !default;
145
145
  $ribbon-gallery-header-line-height: 24px !default;
package/styles/ribbon/_highcontrast-definition.scss CHANGED
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 9px 8px 9px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 9px 12px 9px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 12px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 0 12px !default;
142
- $ribbon-gallery-popup-items-padding: 5px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 8px 0 10px !default;
144
144
  $ribbon-gallery-header-font-weight: 600 !default;
145
145
  $ribbon-gallery-header-line-height: 22px !default;
package/styles/ribbon/_highcontrast-light-definition.scss CHANGED
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 8px 8px 8px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 8px 12px 8px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 9px 12px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 12px 9px 0 !default;
142
- $ribbon-gallery-popup-items-padding: 8px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 9px !default;
144
144
  $ribbon-gallery-header-font-weight: 400 !default;
145
145
  $ribbon-gallery-header-line-height: 24px !default;
package/styles/ribbon/_layout.scss CHANGED
@@ -364,7 +364,7 @@
364
364
  }
365
365
 
366
366
  &.e-ribbon-simplified-mode {
367
- .e-ribbon-item {
367
+ .e-ribbon-item:not(:has(.e-ribbon-template)) {
368
368
  &:has(.e-ribbon-gallery-container:not(.e-hidden)) {
369
369
  height: $ribbon-gallery-simplified-wrapper-height;
370
370
  }
@@ -1429,6 +1429,10 @@
1429
1429
  height: $ribbon-ddb-popup-height;
1430
1430
  align-items: center;
1431
1431
 
1432
+ &.e-separator {
1433
+ height: auto;
1434
+ }
1435
+
1432
1436
  .e-menu-icon {
1433
1437
  @include ribbon-font-props(16px, 16px);
1434
1438
  @include ribbon-items-icon-images(16px);
package/styles/ribbon/_material-dark-definition.scss CHANGED
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 10px 8px 10px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 10px 12px 10px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 12px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 0 12px !default;
142
- $ribbon-gallery-popup-items-padding: 5px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 8px 0 4px !default;
144
144
  $ribbon-gallery-header-font-weight: 500 !default;
145
145
  $ribbon-gallery-header-line-height: 18px !default;
package/styles/ribbon/_material-definition.scss CHANGED
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 10px 8px 10px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 10px 12px 10px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 12px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 0 12px !default;
142
- $ribbon-gallery-popup-items-padding: 5px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 8px 0 4px !default;
144
144
  $ribbon-gallery-header-font-weight: 500 !default;
145
145
  $ribbon-gallery-header-line-height: 18px !default;
package/styles/ribbon/_material3-definition.scss CHANGED
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 8px 8px 8px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 8px 12px 8px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 12px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 0 12px !default;
142
- $ribbon-gallery-popup-items-padding: 5px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 8px 0 !default;
144
144
  $ribbon-gallery-header-font-weight: 500 !default;
145
145
  $ribbon-gallery-header-line-height: 18px !default;
package/styles/ribbon/_tailwind-definition.scss CHANGED
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 7px 8px 7px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 7px 12px 7px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 12px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 0 12px !default;
142
- $ribbon-gallery-popup-items-padding: 5px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 8px 0 4px !default;
144
144
  $ribbon-gallery-header-font-weight: 500 !default;
145
145
  $ribbon-gallery-header-line-height: 22px !default;
package/styles/ribbon/_tailwind3-definition.scss CHANGED
@@ -77,7 +77,7 @@ $ribbon-items-height: 18px !default;
77
77
  $ribbon-items-btn-padding: 0 4px 0 0 !default;
78
78
  $ribbon-items-btn-rtl-padding: 0 0 0 4px !default;
79
79
  $ribbon-items-min-width-height: 16px !default;
80
- $ribbon-items-checkbox-size: $text-sm !default;
80
+ $ribbon-items-checkbox-size: $text-xs !default;
81
81
  $ribbon-items-checkbox-padding: 0 5px !default;
82
82
  $ribbon-input-group-height: 30px !default;
83
83
  $ribbon-input-padding: 4px 0 4px 8px !default;
@@ -139,7 +139,7 @@ $ribbon-button-icon-padding: 7px 8px 7px 12px !default;
139
139
  $ribbon-rtl-button-icon-padding: 7px 12px 7px 8px !default;
140
140
  $ribbon-caret-icon-padding: 0 11px !default;
141
141
  $ribbon-rtl-caret-icon-padding: 0 12px !default;
142
- $ribbon-gallery-popup-items-padding: 5px 0 !default;
142
+ $ribbon-gallery-popup-items-padding: 0 !default;
143
143
  $ribbon-gallery-header-padding: 8px 0 4px !default;
144
144
  $ribbon-gallery-header-font-weight: 500 !default;
145
145
  $ribbon-gallery-header-line-height: 22px !default;
package/styles/ribbon/_theme.scss CHANGED
@@ -286,47 +286,54 @@
286
286
  }
287
287
  }
288
288
 
289
- .e-ribbon-item,
289
+ .e-ribbon-item:not(:has(.e-ribbon-template)),
290
290
  .e-ribbon-group-overflow,
291
291
  &.e-ribbon-overflow {
292
- &:not(:has(.e-ribbon-template)) {
293
- .e-btn:not(.e-ribbon-file-menu),
294
- .e-btn-group .e-btn.e-ribbon-group-button,
295
- .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
296
- .e-ribbon-group-of-btn {
297
- @include ribbon-colors($ribbon-items-background-color, $ribbon-text-color, transparent);
298
- @include ribbon-button-icon-color($ribbon-items-icon-color);
292
+ .e-btn:not(.e-ribbon-file-menu),
293
+ .e-btn-group .e-btn.e-ribbon-group-button,
294
+ .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
295
+ .e-ribbon-group-of-btn {
296
+ @include ribbon-colors($ribbon-items-background-color, $ribbon-text-color, transparent);
297
+ @include ribbon-button-icon-color($ribbon-items-icon-color);
299
298
 
300
- &:hover {
301
- @include ribbon-colors($ribbon-items-hover-background-color, $ribbon-items-text-hover-color, $ribbon-items-hover-border-color);
302
- @include ribbon-button-icon-color($ribbon-items-hover-color);
303
- }
299
+ &:hover {
300
+ @include ribbon-colors($ribbon-items-hover-background-color, $ribbon-items-text-hover-color, $ribbon-items-hover-border-color);
301
+ @include ribbon-button-icon-color($ribbon-items-hover-color);
302
+ }
304
303
 
305
- &.e-active {
306
- background: $ribbon-items-active-background-color;
307
- color: $ribbon-items-text-active-color;
308
- @include ribbon-button-icon-color($ribbon-items-active-color);
309
- }
304
+ &.e-active {
305
+ background: $ribbon-items-active-background-color;
306
+ color: $ribbon-items-text-active-color;
307
+ @include ribbon-button-icon-color($ribbon-items-active-color);
308
+ }
310
309
 
311
- &:active {
312
- background: $ribbon-items-pressed-background-color;
313
- color: $ribbon-items-text-active-color;
314
- @include ribbon-button-icon-color($ribbon-items-active-color);
315
- }
310
+ &:active {
311
+ background: $ribbon-items-pressed-background-color;
312
+ color: $ribbon-items-text-active-color;
313
+ @include ribbon-button-icon-color($ribbon-items-active-color);
314
+ }
316
315
 
317
- &:focus-visible {
318
- @include ribbon-colors($ribbon-items-focus-background-color, $ribbon-items-text-focus-color, $ribbon-items-focus-border-color);
319
- @include ribbon-button-icon-color($ribbon-items-focus-color);
320
- & {
321
- box-shadow: $ribbon-items-focus-box-shadow;
322
- }
316
+ &:focus-visible {
317
+ @include ribbon-colors($ribbon-items-focus-background-color, $ribbon-items-text-focus-color, $ribbon-items-focus-border-color);
318
+ @include ribbon-button-icon-color($ribbon-items-focus-color);
319
+ & {
320
+ box-shadow: $ribbon-items-focus-box-shadow;
323
321
  }
322
+ }
323
+ }
324
+ }
324
325
 
325
- &:disabled {
326
- @include ribbon-button-icon-color($ribbon-items-disabled-color);
327
- & {
328
- color: $ribbon-items-disabled-color;
329
- }
326
+ .e-ribbon-item,
327
+ .e-ribbon-group-overflow,
328
+ &.e-ribbon-overflow {
329
+ .e-btn:not(.e-ribbon-file-menu),
330
+ .e-btn-group .e-btn.e-ribbon-group-button,
331
+ .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
332
+ .e-ribbon-group-of-btn {
333
+ &:disabled {
334
+ @include ribbon-button-icon-color($ribbon-items-disabled-color);
335
+ & {
336
+ color: $ribbon-items-disabled-color;
330
337
  }
331
338
  }
332
339
  }