@syncfusion/ej2-ribbon 29.2.4 → 30.1.37

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 (100) 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 +62 -37
  5. package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
  6. package/dist/es6/ej2-ribbon.es5.js +68 -43
  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.js +12 -7
  13. package/src/ribbon/items/ribbon-gallery.d.ts +1 -0
  14. package/src/ribbon/items/ribbon-gallery.js +16 -13
  15. package/src/ribbon/items/ribbon-groupbutton.js +32 -20
  16. package/src/ribbon/modules/ribbon-filemenu.js +8 -3
  17. package/styles/bds-lite.css +224 -213
  18. package/styles/bds.css +227 -213
  19. package/styles/bootstrap-dark-lite.css +224 -213
  20. package/styles/bootstrap-dark.css +227 -213
  21. package/styles/bootstrap-lite.css +224 -213
  22. package/styles/bootstrap.css +227 -213
  23. package/styles/bootstrap4-lite.css +224 -213
  24. package/styles/bootstrap4.css +227 -213
  25. package/styles/bootstrap5-dark-lite.css +224 -213
  26. package/styles/bootstrap5-dark.css +227 -213
  27. package/styles/bootstrap5-lite.css +224 -213
  28. package/styles/bootstrap5.3-lite.css +224 -213
  29. package/styles/bootstrap5.3.css +227 -213
  30. package/styles/bootstrap5.css +227 -213
  31. package/styles/fabric-dark-lite.css +224 -213
  32. package/styles/fabric-dark.css +227 -213
  33. package/styles/fabric-lite.css +224 -213
  34. package/styles/fabric.css +227 -213
  35. package/styles/fluent-dark-lite.css +224 -213
  36. package/styles/fluent-dark.css +227 -213
  37. package/styles/fluent-lite.css +224 -213
  38. package/styles/fluent.css +227 -213
  39. package/styles/fluent2-lite.css +225 -214
  40. package/styles/fluent2.css +228 -214
  41. package/styles/highcontrast-light-lite.css +224 -213
  42. package/styles/highcontrast-light.css +227 -213
  43. package/styles/highcontrast-lite.css +224 -213
  44. package/styles/highcontrast.css +227 -213
  45. package/styles/material-dark-lite.css +224 -213
  46. package/styles/material-dark.css +227 -213
  47. package/styles/material-lite.css +224 -213
  48. package/styles/material.css +227 -213
  49. package/styles/material3-dark-lite.css +224 -213
  50. package/styles/material3-dark.css +227 -213
  51. package/styles/material3-lite.css +224 -213
  52. package/styles/material3.css +227 -213
  53. package/styles/ribbon/_bds-definition.scss +1 -1
  54. package/styles/ribbon/_bigger.scss +4 -0
  55. package/styles/ribbon/_bootstrap-dark-definition.scss +1 -1
  56. package/styles/ribbon/_bootstrap-definition.scss +1 -1
  57. package/styles/ribbon/_bootstrap4-definition.scss +1 -1
  58. package/styles/ribbon/_bootstrap5-definition.scss +1 -1
  59. package/styles/ribbon/_bootstrap5.3-definition.scss +1 -1
  60. package/styles/ribbon/_fabric-dark-definition.scss +1 -1
  61. package/styles/ribbon/_fabric-definition.scss +1 -1
  62. package/styles/ribbon/_fluent-definition.scss +1 -1
  63. package/styles/ribbon/_fluent2-definition.scss +2 -2
  64. package/styles/ribbon/_fusionnew-definition.scss +1 -1
  65. package/styles/ribbon/_highcontrast-definition.scss +1 -1
  66. package/styles/ribbon/_highcontrast-light-definition.scss +1 -1
  67. package/styles/ribbon/_layout.scss +13 -1
  68. package/styles/ribbon/_material-dark-definition.scss +1 -1
  69. package/styles/ribbon/_material-definition.scss +1 -1
  70. package/styles/ribbon/_material3-definition.scss +1 -1
  71. package/styles/ribbon/_tailwind-definition.scss +1 -1
  72. package/styles/ribbon/_tailwind3-definition.scss +2 -2
  73. package/styles/ribbon/_theme.scss +40 -33
  74. package/styles/ribbon/bds.css +227 -213
  75. package/styles/ribbon/bootstrap-dark.css +227 -213
  76. package/styles/ribbon/bootstrap.css +227 -213
  77. package/styles/ribbon/bootstrap4.css +227 -213
  78. package/styles/ribbon/bootstrap5-dark.css +227 -213
  79. package/styles/ribbon/bootstrap5.3.css +227 -213
  80. package/styles/ribbon/bootstrap5.css +227 -213
  81. package/styles/ribbon/fabric-dark.css +227 -213
  82. package/styles/ribbon/fabric.css +227 -213
  83. package/styles/ribbon/fluent-dark.css +227 -213
  84. package/styles/ribbon/fluent.css +227 -213
  85. package/styles/ribbon/fluent2.css +228 -214
  86. package/styles/ribbon/highcontrast-light.css +227 -213
  87. package/styles/ribbon/highcontrast.css +227 -213
  88. package/styles/ribbon/material-dark.css +227 -213
  89. package/styles/ribbon/material.css +227 -213
  90. package/styles/ribbon/material3-dark.css +227 -213
  91. package/styles/ribbon/material3.css +227 -213
  92. package/styles/ribbon/tailwind-dark.css +227 -213
  93. package/styles/ribbon/tailwind.css +227 -213
  94. package/styles/ribbon/tailwind3.css +228 -214
  95. package/styles/tailwind-dark-lite.css +224 -213
  96. package/styles/tailwind-dark.css +227 -213
  97. package/styles/tailwind-lite.css +224 -213
  98. package/styles/tailwind.css +227 -213
  99. package/styles/tailwind3-lite.css +225 -214
  100. package/styles/tailwind3.css +228 -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;
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
  }
@@ -521,6 +521,14 @@
521
521
  }
522
522
  }
523
523
 
524
+ body:has(.e-ribbon.e-rbn .e-ribbon-tooltip-target .e-ribbon-open) .e-ribbon-tooltip.e-popup-open {
525
+ visibility: hidden;
526
+ }
527
+
528
+ body:has(.e-ribbon.e-rbn .e-ribbon-tooltip-target .e-ribbon-hover:not(.e-ribbon-open)) .e-ribbon-tooltip.e-popup-open {
529
+ visibility: visible;
530
+ }
531
+
524
532
  .e-ribbon-backstage-popup {
525
533
  &.e-ribbon-backstage-open {
526
534
  display: flex;
@@ -1429,6 +1437,10 @@
1429
1437
  height: $ribbon-ddb-popup-height;
1430
1438
  align-items: center;
1431
1439
 
1440
+ &.e-separator {
1441
+ height: auto;
1442
+ }
1443
+
1432
1444
  .e-menu-icon {
1433
1445
  @include ribbon-font-props(16px, 16px);
1434
1446
  @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
  }