@syncfusion/ej2-ribbon 24.1.46 → 24.2.3

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 (65) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/README.md +1 -1
  3. package/dist/ej2-ribbon.umd.min.js +2 -2
  4. package/dist/ej2-ribbon.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-ribbon.es2015.js +34 -18
  6. package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
  7. package/dist/es6/ej2-ribbon.es5.js +34 -18
  8. package/dist/es6/ej2-ribbon.es5.js.map +1 -1
  9. package/dist/global/ej2-ribbon.min.js +2 -2
  10. package/dist/global/ej2-ribbon.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +12 -12
  13. package/src/ribbon/base/ribbon.js +21 -14
  14. package/src/ribbon/items/ribbon-groupbutton.js +4 -4
  15. package/src/ribbon/models/ribbon-group-button-item.d.ts +7 -0
  16. package/src/ribbon/models/ribbon-group-button-item.js +9 -0
  17. package/styles/bootstrap-dark.css +16 -0
  18. package/styles/bootstrap.css +16 -0
  19. package/styles/bootstrap4.css +16 -0
  20. package/styles/bootstrap5-dark.css +16 -0
  21. package/styles/bootstrap5.css +16 -0
  22. package/styles/fabric-dark.css +16 -0
  23. package/styles/fabric.css +16 -0
  24. package/styles/fluent-dark.css +16 -0
  25. package/styles/fluent.css +16 -0
  26. package/styles/highcontrast-light.css +16 -0
  27. package/styles/highcontrast.css +16 -0
  28. package/styles/material-dark.css +16 -0
  29. package/styles/material.css +16 -0
  30. package/styles/material3-dark.css +16 -0
  31. package/styles/material3.css +16 -0
  32. package/styles/ribbon/_bootstrap-dark-definition.scss +2 -0
  33. package/styles/ribbon/_bootstrap-definition.scss +2 -0
  34. package/styles/ribbon/_bootstrap4-definition.scss +2 -0
  35. package/styles/ribbon/_bootstrap5-definition.scss +2 -0
  36. package/styles/ribbon/_fabric-dark-definition.scss +2 -0
  37. package/styles/ribbon/_fabric-definition.scss +2 -0
  38. package/styles/ribbon/_fluent-definition.scss +2 -0
  39. package/styles/ribbon/_fusionnew-definition.scss +2 -0
  40. package/styles/ribbon/_highcontrast-definition.scss +2 -0
  41. package/styles/ribbon/_highcontrast-light-definition.scss +2 -0
  42. package/styles/ribbon/_layout.scss +8 -0
  43. package/styles/ribbon/_material-dark-definition.scss +2 -0
  44. package/styles/ribbon/_material-definition.scss +2 -0
  45. package/styles/ribbon/_material3-definition.scss +2 -0
  46. package/styles/ribbon/_tailwind-definition.scss +2 -0
  47. package/styles/ribbon/bootstrap-dark.css +16 -0
  48. package/styles/ribbon/bootstrap.css +16 -0
  49. package/styles/ribbon/bootstrap4.css +16 -0
  50. package/styles/ribbon/bootstrap5-dark.css +16 -0
  51. package/styles/ribbon/bootstrap5.css +16 -0
  52. package/styles/ribbon/fabric-dark.css +16 -0
  53. package/styles/ribbon/fabric.css +16 -0
  54. package/styles/ribbon/fluent-dark.css +16 -0
  55. package/styles/ribbon/fluent.css +16 -0
  56. package/styles/ribbon/highcontrast-light.css +16 -0
  57. package/styles/ribbon/highcontrast.css +16 -0
  58. package/styles/ribbon/material-dark.css +16 -0
  59. package/styles/ribbon/material.css +16 -0
  60. package/styles/ribbon/material3-dark.css +16 -0
  61. package/styles/ribbon/material3.css +16 -0
  62. package/styles/ribbon/tailwind-dark.css +16 -0
  63. package/styles/ribbon/tailwind.css +16 -0
  64. package/styles/tailwind-dark.css +16 -0
  65. package/styles/tailwind.css +16 -0
package/styles/material3.css CHANGED
@@ -850,6 +850,12 @@
850
850
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
851
851
  height: 50%;
852
852
  }
853
+ .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
854
+ .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
855
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
856
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
857
+ gap: 4px;
858
+ }
853
859
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
854
860
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
855
861
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1419,6 +1425,16 @@
1419
1425
  font-size: 36px;
1420
1426
  padding: 8px 3px 4px;
1421
1427
  }
1428
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1429
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1430
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1431
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1432
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1433
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1434
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1435
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
1436
+ gap: 9px;
1437
+ }
1422
1438
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
1423
1439
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
1424
1440
  .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
package/styles/ribbon/_bootstrap-dark-definition.scss CHANGED
@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 18px !default;
57
57
  $ribbon-large-items-icon-size: 32px !default;
58
58
  $ribbon-large-items-max-width: 10ch !default;
59
59
  $ribbon-large-items-icon-padding: 8px 6px 6px !default;
60
+ $ribbon-large-items-btn-gap: 5px !default;
60
61
  $ribbon-items-border: none !default;
61
62
  $ribbon-items-border-radius: 2px !default;
62
63
  $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
153
154
  $ribbon-bigger-large-items-btn-padding: 0 6px !default;
154
155
  $ribbon-bigger-large-items-btn-size: 14px !default;
155
156
  $ribbon-bigger-large-items-btn-height: 22px !default;
157
+ $ribbon-bigger-large-items-btn-gap: 8px !default;
156
158
  $ribbon-bigger-items-padding: 2px !default;
157
159
  $ribbon-bigger-items-btn-size: 14px !default;
158
160
  $ribbon-bigger-items-height: 22px !default;
package/styles/ribbon/_bootstrap-definition.scss CHANGED
@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 18px !default;
57
57
  $ribbon-large-items-icon-size: 32px !default;
58
58
  $ribbon-large-items-max-width: 10ch !default;
59
59
  $ribbon-large-items-icon-padding: 8px 6px 6px !default;
60
+ $ribbon-large-items-btn-gap: 5px !default;
60
61
  $ribbon-items-border: none !default;
61
62
  $ribbon-items-border-radius: 4px !default;
62
63
  $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
153
154
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
154
155
  $ribbon-bigger-large-items-btn-size: 14px !default;
155
156
  $ribbon-bigger-large-items-btn-height: 22px !default;
157
+ $ribbon-bigger-large-items-btn-gap: 9px !default;
156
158
  $ribbon-bigger-items-padding: 2px !default;
157
159
  $ribbon-bigger-items-btn-size: 14px !default;
158
160
  $ribbon-bigger-items-height: 22px !default;
package/styles/ribbon/_bootstrap4-definition.scss CHANGED
@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 22px !default;
57
57
  $ribbon-large-items-icon-size: 32px !default;
58
58
  $ribbon-large-items-max-width: 10ch !default;
59
59
  $ribbon-large-items-icon-padding: 8px 5px 6px !default;
60
+ $ribbon-large-items-btn-gap: 5px !default;
60
61
  $ribbon-items-border: none !default;
61
62
  $ribbon-items-border-radius: 4px !default;
62
63
  $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
153
154
  $ribbon-bigger-large-items-btn-padding: 0 3px !default;
154
155
  $ribbon-bigger-large-items-btn-size: 16px !default;
155
156
  $ribbon-bigger-large-items-btn-height: 24px !default;
157
+ $ribbon-bigger-large-items-btn-gap: 6px !default;
156
158
  $ribbon-bigger-items-padding: 1px !default;
157
159
  $ribbon-bigger-items-btn-size: 16px !default;
158
160
  $ribbon-bigger-items-height: 24px !default;
package/styles/ribbon/_bootstrap5-definition.scss CHANGED
@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 18px !default;
57
57
  $ribbon-large-items-icon-size: $text-2xl !default;
58
58
  $ribbon-large-items-max-width: 10ch !default;
59
59
  $ribbon-large-items-icon-padding: 8px 6px 4px !default;
60
+ $ribbon-large-items-btn-gap: 5px !default;
60
61
  $ribbon-items-border: none !default;
61
62
  $ribbon-items-border-radius: 4px !default;
62
63
  $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 32px !default;
153
154
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
154
155
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
155
156
  $ribbon-bigger-large-items-btn-height: 18px !default;
157
+ $ribbon-bigger-large-items-btn-gap: 8px !default;
156
158
  $ribbon-bigger-items-padding: 2px !default;
157
159
  $ribbon-bigger-items-btn-size: $text-sm !default;
158
160
  $ribbon-bigger-items-height: 18px !default;
package/styles/ribbon/_fabric-dark-definition.scss CHANGED
@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 18px !default;
57
57
  $ribbon-large-items-icon-size: 32px !default;
58
58
  $ribbon-large-items-max-width: 10ch !default;
59
59
  $ribbon-large-items-icon-padding: 12px 7px 4px !default;
60
+ $ribbon-large-items-btn-gap: 6px !default;
60
61
  $ribbon-items-border: none !default;
61
62
  $ribbon-items-border-radius: unset !default;
62
63
  $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
153
154
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
154
155
  $ribbon-bigger-large-items-btn-size: 14px !default;
155
156
  $ribbon-bigger-large-items-btn-height: 22px !default;
157
+ $ribbon-bigger-large-items-btn-gap: 8px !default;
156
158
  $ribbon-bigger-items-padding: 2px !default;
157
159
  $ribbon-bigger-items-btn-size: 14px !default;
158
160
  $ribbon-bigger-items-height: 22px !default;
package/styles/ribbon/_fabric-definition.scss CHANGED
@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 22px !default;
57
57
  $ribbon-large-items-icon-size: 32px !default;
58
58
  $ribbon-large-items-max-width: 10ch !default;
59
59
  $ribbon-large-items-icon-padding: 12px 5px 4px !default;
60
+ $ribbon-large-items-btn-gap: 5px !default;
60
61
  $ribbon-items-border: none !default;
61
62
  $ribbon-items-border-radius: unset !default;
62
63
  $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
153
154
  $ribbon-bigger-large-items-btn-padding: 0 6px !default;
154
155
  $ribbon-bigger-large-items-btn-size: 14px !default;
155
156
  $ribbon-bigger-large-items-btn-height: 22px !default;
157
+ $ribbon-bigger-large-items-btn-gap: 9px !default;
156
158
  $ribbon-bigger-items-padding: 2px !default;
157
159
  $ribbon-bigger-items-btn-size: 14px !default;
158
160
  $ribbon-bigger-items-height: 22px !default;
package/styles/ribbon/_fluent-definition.scss CHANGED
@@ -57,6 +57,7 @@ $ribbon-large-items-btn-padding: 0 2px !default;
57
57
  $ribbon-large-items-btn-height: 18px !default;
58
58
  $ribbon-large-items-icon-size: $text-2xl !default;
59
59
  $ribbon-large-items-max-width: 10ch !default;
60
+ $ribbon-large-items-btn-gap: 4px !default;
60
61
  $ribbon-items-border: none !default;
61
62
  $ribbon-items-border-radius: 2px !default;
62
63
  $ribbon-items-font-weight: $font-weight-normal !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: $text-4xl !default;
153
154
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
154
155
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
155
156
  $ribbon-bigger-large-items-btn-height: 125% !default;
157
+ $ribbon-bigger-large-items-btn-gap: 8px !default;
156
158
  $ribbon-bigger-items-padding: 2px !default;
157
159
  $ribbon-bigger-items-btn-size: $text-sm !default;
158
160
  $ribbon-bigger-items-height: 125% !default;
package/styles/ribbon/_fusionnew-definition.scss CHANGED
@@ -57,6 +57,7 @@ $ribbon-large-items-btn-padding: 0 2px !default;
57
57
  $ribbon-large-items-btn-height: 18px !default;
58
58
  $ribbon-large-items-icon-size: $text-2xl !default;
59
59
  $ribbon-large-items-max-width: 10ch !default;
60
+ $ribbon-large-items-btn-gap: 5px !default;
60
61
  $ribbon-items-border: none !default;
61
62
  $ribbon-items-border-radius: 2px !default;
62
63
  $ribbon-items-font-weight: $font-weight-normal !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: $text-4xl !default;
153
154
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
154
155
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
155
156
  $ribbon-bigger-large-items-btn-height: 125% !default;
157
+ $ribbon-bigger-large-items-btn-gap: 8px !default;
156
158
  $ribbon-bigger-items-padding: 2px !default;
157
159
  $ribbon-bigger-items-btn-size: $text-sm !default;
158
160
  $ribbon-bigger-items-height: 125% !default;
package/styles/ribbon/_highcontrast-definition.scss CHANGED
@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 22px !default;
57
57
  $ribbon-large-items-icon-size: 32px !default;
58
58
  $ribbon-large-items-max-width: 10ch !default;
59
59
  $ribbon-large-items-icon-padding: 12px 10px 4px !default;
60
+ $ribbon-large-items-btn-gap: 8px !default;
60
61
  $ribbon-items-border: 2px solid !default;
61
62
  $ribbon-items-border-radius: unset !default;
62
63
  $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
153
154
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
154
155
  $ribbon-bigger-large-items-btn-size: 16px !default;
155
156
  $ribbon-bigger-large-items-btn-height: 24px !default;
157
+ $ribbon-bigger-large-items-btn-gap: 8px !default;
156
158
  $ribbon-bigger-items-padding: 2px !default;
157
159
  $ribbon-bigger-items-btn-size: 14px !default;
158
160
  $ribbon-bigger-items-height: 22px !default;
package/styles/ribbon/_highcontrast-light-definition.scss CHANGED
@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 22px !default;
57
57
  $ribbon-large-items-icon-size: 32px !default;
58
58
  $ribbon-large-items-max-width: 10ch !default;
59
59
  $ribbon-large-items-icon-padding: 12px 10px 4px !default;
60
+ $ribbon-large-items-btn-gap: 8px !default;
60
61
  $ribbon-items-border: 2px solid !default;
61
62
  $ribbon-items-border-radius: unset !default;
62
63
  $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
153
154
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
154
155
  $ribbon-bigger-large-items-btn-size: 16px !default;
155
156
  $ribbon-bigger-large-items-btn-height: 24px !default;
157
+ $ribbon-bigger-large-items-btn-gap: 8px !default;
156
158
  $ribbon-bigger-items-padding: 2px !default;
157
159
  $ribbon-bigger-items-btn-size: 14px !default;
158
160
  $ribbon-bigger-items-height: 22px !default;
package/styles/ribbon/_layout.scss CHANGED
@@ -648,6 +648,10 @@
648
648
  .e-icon-top {
649
649
  height: 50%;
650
650
  }
651
+
652
+ &.e-top-icon-btn {
653
+ gap: $ribbon-large-items-btn-gap;
654
+ }
651
655
  }
652
656
 
653
657
  & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1273,6 +1277,10 @@
1273
1277
  font-size: $ribbon-bigger-large-items-icon-size;
1274
1278
  padding: $ribbon-bigger-large-items-icon-padding;
1275
1279
  }
1280
+
1281
+ &.e-top-icon-btn {
1282
+ gap: $ribbon-bigger-large-items-btn-gap;
1283
+ }
1276
1284
  }
1277
1285
 
1278
1286
  .e-dropdown-btn {
package/styles/ribbon/_material-dark-definition.scss CHANGED
@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 18px !default;
57
57
  $ribbon-large-items-icon-size: 32px !default;
58
58
  $ribbon-large-items-max-width: 10ch !default;
59
59
  $ribbon-large-items-icon-padding: 8px 6px 6px !default;
60
+ $ribbon-large-items-btn-gap: 7px !default;
60
61
  $ribbon-items-border: none !default;
61
62
  $ribbon-items-border-radius: unset !default;
62
63
  $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
153
154
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
154
155
  $ribbon-bigger-large-items-btn-size: 16px !default;
155
156
  $ribbon-bigger-large-items-btn-height: 24px !default;
157
+ $ribbon-bigger-large-items-btn-gap: 6px !default;
156
158
  $ribbon-bigger-items-padding: 2px !default;
157
159
  $ribbon-bigger-items-btn-size: 14px !default;
158
160
  $ribbon-bigger-items-height: 22px !default;
package/styles/ribbon/_material-definition.scss CHANGED
@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 18px !default;
57
57
  $ribbon-large-items-icon-size: 32px !default;
58
58
  $ribbon-large-items-max-width: 10ch !default;
59
59
  $ribbon-large-items-icon-padding: 8px 6px 6px !default;
60
+ $ribbon-large-items-btn-gap: 7px !default;
60
61
  $ribbon-items-border: none !default;
61
62
  $ribbon-items-border-radius: unset !default;
62
63
  $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
153
154
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
154
155
  $ribbon-bigger-large-items-btn-size: 16px !default;
155
156
  $ribbon-bigger-large-items-btn-height: 24px !default;
157
+ $ribbon-bigger-large-items-btn-gap: 6px !default;
156
158
  $ribbon-bigger-items-padding: 2px !default;
157
159
  $ribbon-bigger-items-btn-size: 14px !default;
158
160
  $ribbon-bigger-items-height: 22px !default;
package/styles/ribbon/_material3-definition.scss CHANGED
@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 15px !default;
57
57
  $ribbon-large-items-icon-size: $text-4xl !default;
58
58
  $ribbon-large-items-max-width: 10ch !default;
59
59
  $ribbon-large-items-icon-padding: 4px 3px !default;
60
+ $ribbon-large-items-btn-gap: 4px !default;
60
61
  $ribbon-items-border: none !default;
61
62
  $ribbon-items-border-radius: 4px !default;
62
63
  $ribbon-items-font-weight: $font-weight-normal !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
153
154
  $ribbon-bigger-large-items-btn-padding: 0 3px !default;
154
155
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
155
156
  $ribbon-bigger-large-items-btn-height: 18px !default;
157
+ $ribbon-bigger-large-items-btn-gap: 9px !default;
156
158
  $ribbon-bigger-items-padding: 2px !default;
157
159
  $ribbon-bigger-items-btn-size: $text-sm !default;
158
160
  $ribbon-bigger-items-height: 18px !default;
package/styles/ribbon/_tailwind-definition.scss CHANGED
@@ -57,6 +57,7 @@ $ribbon-large-items-btn-padding: 0 2px !default;
57
57
  $ribbon-large-items-btn-height: 18px !default;
58
58
  $ribbon-large-items-icon-size: $text-2xl !default;
59
59
  $ribbon-large-items-max-width: 10ch !default;
60
+ $ribbon-large-items-btn-gap: 4px !default;
60
61
  $ribbon-items-border: none !default;
61
62
  $ribbon-items-border-radius: 4px !default;
62
63
  $ribbon-items-font-weight: $font-weight-normal !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 32px !default;
153
154
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
154
155
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
155
156
  $ribbon-bigger-large-items-btn-height: 125% !default;
157
+ $ribbon-bigger-large-items-btn-gap: 8px !default;
156
158
  $ribbon-bigger-items-padding: 2px !default;
157
159
  $ribbon-bigger-items-btn-size: $text-sm !default;
158
160
  $ribbon-bigger-items-height: 125% !default;
package/styles/ribbon/bootstrap-dark.css CHANGED
@@ -687,6 +687,12 @@
687
687
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
688
688
  height: 50%;
689
689
  }
690
+ .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
691
+ .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
692
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
693
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
694
+ gap: 5px;
695
+ }
690
696
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
691
697
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
692
698
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1256,6 +1262,16 @@
1256
1262
  font-size: 40px;
1257
1263
  padding: 12px 9px 4px;
1258
1264
  }
1265
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1266
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1267
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1268
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1269
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1270
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1271
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1272
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
1273
+ gap: 8px;
1274
+ }
1259
1275
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
1260
1276
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
1261
1277
  .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
package/styles/ribbon/bootstrap.css CHANGED
@@ -692,6 +692,12 @@
692
692
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
693
693
  height: 50%;
694
694
  }
695
+ .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
696
+ .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
697
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
698
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
699
+ gap: 5px;
700
+ }
695
701
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
696
702
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
697
703
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1261,6 +1267,16 @@
1261
1267
  font-size: 40px;
1262
1268
  padding: 12px 8px;
1263
1269
  }
1270
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1271
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1272
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1273
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1274
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1275
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1276
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1277
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
1278
+ gap: 9px;
1279
+ }
1264
1280
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
1265
1281
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
1266
1282
  .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
package/styles/ribbon/bootstrap4.css CHANGED
@@ -753,6 +753,12 @@
753
753
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
754
754
  height: 50%;
755
755
  }
756
+ .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
757
+ .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
758
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
759
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
760
+ gap: 5px;
761
+ }
756
762
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
757
763
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
758
764
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1322,6 +1328,16 @@
1322
1328
  font-size: 40px;
1323
1329
  padding: 8px 5px 6px;
1324
1330
  }
1331
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1332
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1333
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1334
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1335
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1336
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1337
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1338
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
1339
+ gap: 6px;
1340
+ }
1325
1341
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
1326
1342
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
1327
1343
  .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
package/styles/ribbon/bootstrap5-dark.css CHANGED
@@ -771,6 +771,12 @@
771
771
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
772
772
  height: 50%;
773
773
  }
774
+ .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
775
+ .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
776
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
777
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
778
+ gap: 5px;
779
+ }
774
780
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
775
781
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
776
782
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1340,6 +1346,16 @@
1340
1346
  font-size: 32px;
1341
1347
  padding: 8px 3px;
1342
1348
  }
1349
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1350
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1351
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1352
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1353
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1354
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1355
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1356
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
1357
+ gap: 8px;
1358
+ }
1343
1359
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
1344
1360
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
1345
1361
  .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
package/styles/ribbon/bootstrap5.css CHANGED
@@ -771,6 +771,12 @@
771
771
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
772
772
  height: 50%;
773
773
  }
774
+ .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
775
+ .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
776
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
777
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
778
+ gap: 5px;
779
+ }
774
780
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
775
781
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
776
782
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1340,6 +1346,16 @@
1340
1346
  font-size: 32px;
1341
1347
  padding: 8px 3px;
1342
1348
  }
1349
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1350
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1351
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1352
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1353
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1354
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1355
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1356
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
1357
+ gap: 8px;
1358
+ }
1343
1359
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
1344
1360
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
1345
1361
  .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
package/styles/ribbon/fabric-dark.css CHANGED
@@ -663,6 +663,12 @@
663
663
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
664
664
  height: 50%;
665
665
  }
666
+ .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
667
+ .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
668
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
669
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
670
+ gap: 6px;
671
+ }
666
672
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
667
673
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
668
674
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1232,6 +1238,16 @@
1232
1238
  font-size: 36px;
1233
1239
  padding: 12px 10px 4px;
1234
1240
  }
1241
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1242
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1243
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1244
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1245
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1246
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1247
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1248
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
1249
+ gap: 8px;
1250
+ }
1235
1251
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
1236
1252
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
1237
1253
  .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
package/styles/ribbon/fabric.css CHANGED
@@ -661,6 +661,12 @@
661
661
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
662
662
  height: 50%;
663
663
  }
664
+ .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
665
+ .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
666
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
667
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
668
+ gap: 5px;
669
+ }
664
670
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
665
671
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
666
672
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1230,6 +1236,16 @@
1230
1236
  font-size: 36px;
1231
1237
  padding: 12px 9px 4px;
1232
1238
  }
1239
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1240
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1241
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1242
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1243
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1244
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1245
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1246
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
1247
+ gap: 9px;
1248
+ }
1233
1249
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
1234
1250
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
1235
1251
  .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
package/styles/ribbon/fluent-dark.css CHANGED
@@ -747,6 +747,12 @@
747
747
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
748
748
  height: 50%;
749
749
  }
750
+ .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
751
+ .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
752
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
753
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
754
+ gap: 4px;
755
+ }
750
756
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
751
757
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
752
758
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1316,6 +1322,16 @@
1316
1322
  font-size: 32px;
1317
1323
  padding: 8px 3px;
1318
1324
  }
1325
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1326
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1327
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1328
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1329
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1330
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1331
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1332
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
1333
+ gap: 8px;
1334
+ }
1319
1335
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
1320
1336
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
1321
1337
  .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
package/styles/ribbon/fluent.css CHANGED
@@ -747,6 +747,12 @@
747
747
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
748
748
  height: 50%;
749
749
  }
750
+ .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
751
+ .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
752
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
753
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
754
+ gap: 4px;
755
+ }
750
756
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
751
757
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
752
758
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1316,6 +1322,16 @@
1316
1322
  font-size: 32px;
1317
1323
  padding: 8px 3px;
1318
1324
  }
1325
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1326
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1327
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1328
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1329
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1330
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1331
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1332
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
1333
+ gap: 8px;
1334
+ }
1319
1335
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
1320
1336
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
1321
1337
  .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
package/styles/ribbon/highcontrast-light.css CHANGED
@@ -670,6 +670,12 @@
670
670
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
671
671
  height: 50%;
672
672
  }
673
+ .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
674
+ .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
675
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
676
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
677
+ gap: 8px;
678
+ }
673
679
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
674
680
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
675
681
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1239,6 +1245,16 @@
1239
1245
  font-size: 36px;
1240
1246
  padding: 12px 8px 0;
1241
1247
  }
1248
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1249
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1250
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1251
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1252
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1253
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1254
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1255
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
1256
+ gap: 8px;
1257
+ }
1242
1258
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
1243
1259
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
1244
1260
  .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
package/styles/ribbon/highcontrast.css CHANGED
@@ -679,6 +679,12 @@
679
679
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
680
680
  height: 50%;
681
681
  }
682
+ .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
683
+ .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
684
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
685
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
686
+ gap: 8px;
687
+ }
682
688
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
683
689
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
684
690
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1248,6 +1254,16 @@
1248
1254
  font-size: 36px;
1249
1255
  padding: 12px 8px 0;
1250
1256
  }
1257
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1258
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1259
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1260
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1261
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1262
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
1263
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
1264
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
1265
+ gap: 8px;
1266
+ }
1251
1267
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
1252
1268
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
1253
1269
  .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,