@syncfusion/ej2-ribbon 21.1.37 → 22.1.34

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 (89) hide show
  1. package/.eslintrc.json +1 -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 +1344 -176
  5. package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
  6. package/dist/es6/ej2-ribbon.es5.js +1367 -191
  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 +12 -12
  12. package/src/ribbon/base/constant.d.ts +2 -0
  13. package/src/ribbon/base/constant.js +2 -0
  14. package/src/ribbon/base/interface.d.ts +6 -6
  15. package/src/ribbon/base/interface.js +6 -6
  16. package/src/ribbon/base/ribbon-model.d.ts +2 -2
  17. package/src/ribbon/base/ribbon.d.ts +43 -1
  18. package/src/ribbon/base/ribbon.js +1082 -169
  19. package/src/ribbon/base/utils.d.ts +2 -2
  20. package/src/ribbon/base/utils.js +11 -6
  21. package/src/ribbon/items/ribbon-button.js +1 -0
  22. package/src/ribbon/items/ribbon-checkbox.js +1 -0
  23. package/src/ribbon/items/ribbon-colorpicker.d.ts +7 -0
  24. package/src/ribbon/items/ribbon-colorpicker.js +41 -3
  25. package/src/ribbon/items/ribbon-combobox.js +5 -1
  26. package/src/ribbon/items/ribbon-dropdown.d.ts +7 -1
  27. package/src/ribbon/items/ribbon-dropdown.js +173 -3
  28. package/src/ribbon/items/ribbon-splitbutton.js +45 -2
  29. package/src/ribbon/models/ribbon-combobox-settings-model.d.ts +10 -5
  30. package/src/ribbon/models/ribbon-combobox-settings.d.ts +10 -5
  31. package/src/ribbon/models/ribbon-file-menu-settings-model.d.ts +3 -1
  32. package/src/ribbon/models/ribbon-file-menu-settings.d.ts +3 -1
  33. package/src/ribbon/models/ribbon-item-model.d.ts +1 -1
  34. package/src/ribbon/models/ribbon-item.d.ts +1 -1
  35. package/styles/bootstrap-dark.css +62 -12
  36. package/styles/bootstrap.css +62 -12
  37. package/styles/bootstrap4.css +62 -12
  38. package/styles/bootstrap5-dark.css +62 -12
  39. package/styles/bootstrap5.css +62 -12
  40. package/styles/fabric-dark.css +62 -12
  41. package/styles/fabric.css +62 -12
  42. package/styles/fluent-dark.css +62 -12
  43. package/styles/fluent.css +62 -12
  44. package/styles/highcontrast-light.css +62 -12
  45. package/styles/highcontrast.css +66 -16
  46. package/styles/material-dark.css +62 -12
  47. package/styles/material.css +62 -12
  48. package/styles/material3-dark.css +1671 -0
  49. package/styles/material3-dark.scss +3 -0
  50. package/styles/material3.css +1727 -0
  51. package/styles/material3.scss +3 -0
  52. package/styles/ribbon/_bootstrap-dark-definition.scss +4 -0
  53. package/styles/ribbon/_bootstrap-definition.scss +4 -0
  54. package/styles/ribbon/_bootstrap4-definition.scss +4 -0
  55. package/styles/ribbon/_bootstrap5-definition.scss +4 -0
  56. package/styles/ribbon/_fabric-dark-definition.scss +4 -0
  57. package/styles/ribbon/_fabric-definition.scss +4 -0
  58. package/styles/ribbon/_fluent-definition.scss +4 -0
  59. package/styles/ribbon/_fusionnew-definition.scss +4 -0
  60. package/styles/ribbon/_highcontrast-definition.scss +6 -2
  61. package/styles/ribbon/_highcontrast-light-definition.scss +4 -0
  62. package/styles/ribbon/_layout.scss +88 -18
  63. package/styles/ribbon/_material-dark-definition.scss +4 -0
  64. package/styles/ribbon/_material-definition.scss +4 -0
  65. package/styles/ribbon/_material3-dark-definition.scss +1 -0
  66. package/styles/ribbon/_material3-definition.scss +210 -0
  67. package/styles/ribbon/_tailwind-definition.scss +4 -0
  68. package/styles/ribbon/bootstrap-dark.css +62 -12
  69. package/styles/ribbon/bootstrap.css +62 -12
  70. package/styles/ribbon/bootstrap4.css +62 -12
  71. package/styles/ribbon/bootstrap5-dark.css +62 -12
  72. package/styles/ribbon/bootstrap5.css +62 -12
  73. package/styles/ribbon/fabric-dark.css +62 -12
  74. package/styles/ribbon/fabric.css +62 -12
  75. package/styles/ribbon/fluent-dark.css +62 -12
  76. package/styles/ribbon/fluent.css +62 -12
  77. package/styles/ribbon/highcontrast-light.css +62 -12
  78. package/styles/ribbon/highcontrast.css +66 -16
  79. package/styles/ribbon/icons/_material3-dark.scss +1 -0
  80. package/styles/ribbon/material-dark.css +62 -12
  81. package/styles/ribbon/material.css +62 -12
  82. package/styles/ribbon/material3-dark.css +1671 -0
  83. package/styles/ribbon/material3-dark.scss +18 -0
  84. package/styles/ribbon/material3.css +1727 -0
  85. package/styles/ribbon/material3.scss +18 -0
  86. package/styles/ribbon/tailwind-dark.css +62 -12
  87. package/styles/ribbon/tailwind.css +62 -12
  88. package/styles/tailwind-dark.css +62 -12
  89. package/styles/tailwind.css +62 -12
package/styles/bootstrap5-dark.css CHANGED
@@ -214,9 +214,6 @@
214
214
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
215
215
  display: none;
216
216
  }
217
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
218
- width: fit-content;
219
- }
220
217
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
221
218
  position: absolute;
222
219
  line-height: 22px;
@@ -225,6 +222,7 @@
225
222
  border-width: unset;
226
223
  font-size: 14px;
227
224
  font-weight: 400;
225
+ box-shadow: none;
228
226
  }
229
227
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
230
228
  border-radius: unset;
@@ -362,6 +360,7 @@
362
360
  border: none;
363
361
  height: 26px;
364
362
  margin: auto;
363
+ box-shadow: none;
365
364
  }
366
365
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
367
366
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -392,6 +391,9 @@
392
391
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
393
392
  overflow-y: hidden;
394
393
  }
394
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
395
+ margin-bottom: 0;
396
+ }
395
397
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
396
398
  padding-top: 1px;
397
399
  height: auto;
@@ -498,6 +500,8 @@
498
500
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
499
501
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
500
502
  min-width: auto;
503
+ min-height: auto;
504
+ border-radius: unset;
501
505
  }
502
506
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
503
507
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -581,6 +585,7 @@
581
585
  font-weight: 400;
582
586
  font-size: 12px;
583
587
  text-transform: none;
588
+ box-shadow: none;
584
589
  }
585
590
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
586
591
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -679,6 +684,7 @@
679
684
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
680
685
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
681
686
  border: 1px solid transparent;
687
+ border-radius: 4px;
682
688
  }
683
689
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
684
690
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -688,6 +694,7 @@
688
694
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
689
695
  border: 1px solid transparent;
690
696
  border-radius: 4px;
697
+ box-shadow: none;
691
698
  }
692
699
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
693
700
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -797,7 +804,8 @@
797
804
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
798
805
  display: none;
799
806
  }
800
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
807
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
808
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
801
809
  margin: 3px 5px;
802
810
  }
803
811
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -821,22 +829,24 @@
821
829
  -ms-flex-pack: start;
822
830
  justify-content: flex-start;
823
831
  }
824
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
825
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
826
- transform: rotate(-90deg);
827
- margin-left: auto;
828
- }
829
832
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
830
833
  padding: 3px 5px;
831
834
  font-weight: 500;
832
835
  line-height: 18px;
833
836
  }
834
837
 
838
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
839
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
840
+ transform: rotate(-90deg);
841
+ padding: 5px;
842
+ margin: 0 0 0 auto;
843
+ }
844
+
835
845
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
836
846
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
837
847
  transform: rotate(90deg);
838
- margin-right: auto;
839
- margin-left: unset;
848
+ padding: 5px;
849
+ margin: 0 auto 0 0;
840
850
  }
841
851
 
842
852
  .e-ribbon-menu {
@@ -856,6 +866,17 @@
856
866
  padding-left: 38px !important; /* stylelint-disable-line declaration-no-important */
857
867
  }
858
868
 
869
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
870
+ font-size: 12px;
871
+ height: 24px;
872
+ -ms-flex-align: center;
873
+ align-items: center;
874
+ }
875
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
876
+ font-size: 16px;
877
+ line-height: 16px;
878
+ }
879
+
859
880
  .e-ribbon-tooltip .e-tip-content {
860
881
  padding: 4px;
861
882
  }
@@ -989,6 +1010,12 @@
989
1010
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
990
1011
  height: auto;
991
1012
  }
1013
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1014
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1015
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
1016
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
1017
+ margin-bottom: 0;
1018
+ }
992
1019
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
993
1020
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
994
1021
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1203,7 +1230,9 @@
1203
1230
  }
1204
1231
 
1205
1232
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1206
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1233
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1234
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1235
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1207
1236
  margin: 3px 7px;
1208
1237
  }
1209
1238
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1211,6 +1240,27 @@
1211
1240
  margin: 7px;
1212
1241
  padding: 0;
1213
1242
  }
1243
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1244
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1245
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1246
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1247
+ padding: 7px;
1248
+ }
1249
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1250
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1251
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1252
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1253
+ padding: 7px;
1254
+ }
1255
+
1256
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1257
+ font-size: 14px;
1258
+ height: 32px;
1259
+ }
1260
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1261
+ font-size: 20px;
1262
+ line-height: 20px;
1263
+ }
1214
1264
 
1215
1265
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1216
1266
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/bootstrap5.css CHANGED
@@ -214,9 +214,6 @@
214
214
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
215
215
  display: none;
216
216
  }
217
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
218
- width: fit-content;
219
- }
220
217
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
221
218
  position: absolute;
222
219
  line-height: 22px;
@@ -225,6 +222,7 @@
225
222
  border-width: unset;
226
223
  font-size: 14px;
227
224
  font-weight: 400;
225
+ box-shadow: none;
228
226
  }
229
227
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
230
228
  border-radius: unset;
@@ -362,6 +360,7 @@
362
360
  border: none;
363
361
  height: 26px;
364
362
  margin: auto;
363
+ box-shadow: none;
365
364
  }
366
365
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
367
366
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -392,6 +391,9 @@
392
391
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
393
392
  overflow-y: hidden;
394
393
  }
394
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
395
+ margin-bottom: 0;
396
+ }
395
397
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
396
398
  padding-top: 1px;
397
399
  height: auto;
@@ -498,6 +500,8 @@
498
500
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
499
501
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
500
502
  min-width: auto;
503
+ min-height: auto;
504
+ border-radius: unset;
501
505
  }
502
506
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
503
507
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -581,6 +585,7 @@
581
585
  font-weight: 400;
582
586
  font-size: 12px;
583
587
  text-transform: none;
588
+ box-shadow: none;
584
589
  }
585
590
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
586
591
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -679,6 +684,7 @@
679
684
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
680
685
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
681
686
  border: 1px solid transparent;
687
+ border-radius: 4px;
682
688
  }
683
689
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
684
690
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -688,6 +694,7 @@
688
694
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
689
695
  border: 1px solid transparent;
690
696
  border-radius: 4px;
697
+ box-shadow: none;
691
698
  }
692
699
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
693
700
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -797,7 +804,8 @@
797
804
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
798
805
  display: none;
799
806
  }
800
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
807
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
808
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
801
809
  margin: 3px 5px;
802
810
  }
803
811
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -821,22 +829,24 @@
821
829
  -ms-flex-pack: start;
822
830
  justify-content: flex-start;
823
831
  }
824
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
825
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
826
- transform: rotate(-90deg);
827
- margin-left: auto;
828
- }
829
832
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
830
833
  padding: 3px 5px;
831
834
  font-weight: 500;
832
835
  line-height: 18px;
833
836
  }
834
837
 
838
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
839
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
840
+ transform: rotate(-90deg);
841
+ padding: 5px;
842
+ margin: 0 0 0 auto;
843
+ }
844
+
835
845
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
836
846
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
837
847
  transform: rotate(90deg);
838
- margin-right: auto;
839
- margin-left: unset;
848
+ padding: 5px;
849
+ margin: 0 auto 0 0;
840
850
  }
841
851
 
842
852
  .e-ribbon-menu {
@@ -856,6 +866,17 @@
856
866
  padding-left: 38px !important; /* stylelint-disable-line declaration-no-important */
857
867
  }
858
868
 
869
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
870
+ font-size: 12px;
871
+ height: 24px;
872
+ -ms-flex-align: center;
873
+ align-items: center;
874
+ }
875
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
876
+ font-size: 16px;
877
+ line-height: 16px;
878
+ }
879
+
859
880
  .e-ribbon-tooltip .e-tip-content {
860
881
  padding: 4px;
861
882
  }
@@ -989,6 +1010,12 @@
989
1010
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
990
1011
  height: auto;
991
1012
  }
1013
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1014
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1015
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
1016
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
1017
+ margin-bottom: 0;
1018
+ }
992
1019
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
993
1020
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
994
1021
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1203,7 +1230,9 @@
1203
1230
  }
1204
1231
 
1205
1232
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1206
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1233
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1234
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1235
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1207
1236
  margin: 3px 7px;
1208
1237
  }
1209
1238
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1211,6 +1240,27 @@
1211
1240
  margin: 7px;
1212
1241
  padding: 0;
1213
1242
  }
1243
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1244
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1245
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1246
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1247
+ padding: 7px;
1248
+ }
1249
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1250
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1251
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1252
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1253
+ padding: 7px;
1254
+ }
1255
+
1256
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1257
+ font-size: 14px;
1258
+ height: 32px;
1259
+ }
1260
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1261
+ font-size: 20px;
1262
+ line-height: 20px;
1263
+ }
1214
1264
 
1215
1265
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1216
1266
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/fabric-dark.css CHANGED
@@ -106,9 +106,6 @@
106
106
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
107
107
  display: none;
108
108
  }
109
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
110
- width: fit-content;
111
- }
112
109
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
113
110
  position: absolute;
114
111
  line-height: 22px;
@@ -117,6 +114,7 @@
117
114
  border-width: unset;
118
115
  font-size: 14px;
119
116
  font-weight: 400;
117
+ box-shadow: none;
120
118
  }
121
119
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
122
120
  border-radius: unset;
@@ -254,6 +252,7 @@
254
252
  border: none;
255
253
  height: 32px;
256
254
  margin: auto;
255
+ box-shadow: none;
257
256
  }
258
257
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
259
258
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -284,6 +283,9 @@
284
283
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
285
284
  overflow-y: hidden;
286
285
  }
286
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
287
+ margin-bottom: 0;
288
+ }
287
289
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
288
290
  padding-top: 2px;
289
291
  height: auto;
@@ -390,6 +392,8 @@
390
392
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
391
393
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
392
394
  min-width: auto;
395
+ min-height: auto;
396
+ border-radius: unset;
393
397
  }
394
398
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
395
399
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -473,6 +477,7 @@
473
477
  font-weight: 400;
474
478
  font-size: 12px;
475
479
  text-transform: none;
480
+ box-shadow: none;
476
481
  }
477
482
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
478
483
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -571,6 +576,7 @@
571
576
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
572
577
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
573
578
  border: 1px solid transparent;
579
+ border-radius: unset;
574
580
  }
575
581
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
576
582
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -580,6 +586,7 @@
580
586
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
581
587
  border: 1px solid transparent;
582
588
  border-radius: unset;
589
+ box-shadow: none;
583
590
  }
584
591
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
585
592
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -689,7 +696,8 @@
689
696
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
690
697
  display: none;
691
698
  }
692
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
699
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
700
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
693
701
  margin: 7px 8px;
694
702
  }
695
703
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -713,22 +721,24 @@
713
721
  -ms-flex-pack: start;
714
722
  justify-content: flex-start;
715
723
  }
716
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
717
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
718
- transform: rotate(-90deg);
719
- margin-left: auto;
720
- }
721
724
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
722
725
  padding: 6px 8px;
723
726
  font-weight: 600;
724
727
  line-height: 24px;
725
728
  }
726
729
 
730
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
731
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
732
+ transform: rotate(-90deg);
733
+ padding: 8px;
734
+ margin: 0 0 0 auto;
735
+ }
736
+
727
737
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
728
738
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
729
739
  transform: rotate(90deg);
730
- margin-right: auto;
731
- margin-left: unset;
740
+ padding: 8px;
741
+ margin: 0 auto 0 0;
732
742
  }
733
743
 
734
744
  .e-ribbon-menu {
@@ -748,6 +758,17 @@
748
758
  padding-left: 30px !important; /* stylelint-disable-line declaration-no-important */
749
759
  }
750
760
 
761
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
762
+ font-size: 16px;
763
+ height: 36px;
764
+ -ms-flex-align: center;
765
+ align-items: center;
766
+ }
767
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
768
+ font-size: 16px;
769
+ line-height: 16px;
770
+ }
771
+
751
772
  .e-ribbon-tooltip .e-tip-content {
752
773
  padding: 4px;
753
774
  }
@@ -881,6 +902,12 @@
881
902
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
882
903
  height: auto;
883
904
  }
905
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
906
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
907
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
908
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
909
+ margin-bottom: 0;
910
+ }
884
911
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
885
912
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
886
913
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1095,7 +1122,9 @@
1095
1122
  }
1096
1123
 
1097
1124
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1098
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1125
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1126
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1127
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1099
1128
  margin: 7px 10px;
1100
1129
  }
1101
1130
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1103,6 +1132,27 @@
1103
1132
  margin: 10px;
1104
1133
  padding: 0;
1105
1134
  }
1135
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1136
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1137
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1138
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1139
+ padding: 10px;
1140
+ }
1141
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1142
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1143
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1144
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1145
+ padding: 10px;
1146
+ }
1147
+
1148
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1149
+ font-size: 16px;
1150
+ height: 45px;
1151
+ }
1152
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1153
+ font-size: 20px;
1154
+ line-height: 20px;
1155
+ }
1106
1156
 
1107
1157
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1108
1158
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,