@syncfusion/ej2-angular-ribbon 22.1.34 → 22.1.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/license +10 -0
  2. package/package.json +7 -7
  3. package/styles/bootstrap-dark.css +79 -13
  4. package/styles/bootstrap.css +79 -13
  5. package/styles/bootstrap4.css +79 -13
  6. package/styles/bootstrap5-dark.css +79 -13
  7. package/styles/bootstrap5.css +79 -13
  8. package/styles/fabric-dark.css +79 -13
  9. package/styles/fabric.css +79 -13
  10. package/styles/fluent-dark.css +79 -13
  11. package/styles/fluent.css +79 -13
  12. package/styles/highcontrast-light.css +79 -13
  13. package/styles/highcontrast.css +83 -17
  14. package/styles/material-dark.css +79 -13
  15. package/styles/material.css +79 -13
  16. package/styles/material3-dark.css +1672 -0
  17. package/styles/material3-dark.scss +3 -0
  18. package/styles/material3.css +1728 -0
  19. package/styles/material3.scss +3 -0
  20. package/styles/ribbon/_bootstrap-dark-definition.scss +4 -0
  21. package/styles/ribbon/_bootstrap-definition.scss +4 -0
  22. package/styles/ribbon/_bootstrap4-definition.scss +4 -0
  23. package/styles/ribbon/_bootstrap5-definition.scss +4 -0
  24. package/styles/ribbon/_fabric-dark-definition.scss +4 -0
  25. package/styles/ribbon/_fabric-definition.scss +4 -0
  26. package/styles/ribbon/_fluent-definition.scss +4 -0
  27. package/styles/ribbon/_fusionnew-definition.scss +4 -0
  28. package/styles/ribbon/_highcontrast-definition.scss +6 -2
  29. package/styles/ribbon/_highcontrast-light-definition.scss +4 -0
  30. package/styles/ribbon/_layout.scss +110 -19
  31. package/styles/ribbon/_material-dark-definition.scss +4 -0
  32. package/styles/ribbon/_material-definition.scss +4 -0
  33. package/styles/ribbon/_material3-dark-definition.scss +1 -0
  34. package/styles/ribbon/_material3-definition.scss +210 -0
  35. package/styles/ribbon/_tailwind-definition.scss +4 -0
  36. package/styles/ribbon/bootstrap-dark.css +79 -13
  37. package/styles/ribbon/bootstrap.css +79 -13
  38. package/styles/ribbon/bootstrap4.css +79 -13
  39. package/styles/ribbon/bootstrap5-dark.css +79 -13
  40. package/styles/ribbon/bootstrap5.css +79 -13
  41. package/styles/ribbon/fabric-dark.css +79 -13
  42. package/styles/ribbon/fabric.css +79 -13
  43. package/styles/ribbon/fluent-dark.css +79 -13
  44. package/styles/ribbon/fluent.css +79 -13
  45. package/styles/ribbon/highcontrast-light.css +79 -13
  46. package/styles/ribbon/highcontrast.css +83 -17
  47. package/styles/ribbon/icons/_material3-dark.scss +1 -0
  48. package/styles/ribbon/material-dark.css +79 -13
  49. package/styles/ribbon/material.css +79 -13
  50. package/styles/ribbon/material3-dark.css +1672 -0
  51. package/styles/ribbon/material3-dark.scss +18 -0
  52. package/styles/ribbon/material3.css +1728 -0
  53. package/styles/ribbon/material3.scss +18 -0
  54. package/styles/ribbon/tailwind-dark.css +79 -13
  55. package/styles/ribbon/tailwind.css +79 -13
  56. package/styles/tailwind-dark.css +79 -13
  57. package/styles/tailwind.css +79 -13
@@ -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;
@@ -300,6 +298,9 @@
300
298
  height: auto;
301
299
  min-height: auto;
302
300
  }
301
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
302
+ box-shadow: none;
303
+ }
303
304
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
304
305
  padding: 0;
305
306
  }
@@ -309,9 +310,10 @@
309
310
  min-width: auto;
310
311
  width: auto;
311
312
  border-style: solid;
313
+ transform: none;
312
314
  border-width: 1px;
313
315
  border-radius: 2px;
314
- z-index: 2;
316
+ z-index: 3;
315
317
  }
316
318
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
317
319
  display: none;
@@ -319,6 +321,7 @@
319
321
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
320
322
  font-size: 14px;
321
323
  height: auto;
324
+ transform: none;
322
325
  line-height: 14px;
323
326
  padding: 0 5px;
324
327
  width: auto;
@@ -357,6 +360,7 @@
357
360
  border: none;
358
361
  height: 26px;
359
362
  margin: auto;
363
+ box-shadow: none;
360
364
  }
361
365
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
362
366
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -387,6 +391,9 @@
387
391
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
388
392
  overflow-y: hidden;
389
393
  }
394
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
395
+ margin-bottom: 0;
396
+ }
390
397
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
391
398
  padding-top: 1px;
392
399
  height: auto;
@@ -436,6 +443,9 @@
436
443
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
437
444
  left: var(--fileMenuWidth);
438
445
  }
446
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
447
+ padding-right: 30px;
448
+ }
439
449
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
440
450
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
441
451
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -447,6 +457,9 @@
447
457
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
448
458
  right: var(--fileMenuWidth);
449
459
  }
460
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
461
+ padding-left: 30px;
462
+ }
450
463
 
451
464
  .e-ribbon.e-rbn,
452
465
  .e-ribbon-group-overflow-ddb {
@@ -487,6 +500,8 @@
487
500
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
488
501
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
489
502
  min-width: auto;
503
+ min-height: auto;
504
+ border-radius: unset;
490
505
  }
491
506
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
492
507
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -570,6 +585,7 @@
570
585
  font-weight: 400;
571
586
  font-size: 12px;
572
587
  text-transform: none;
588
+ box-shadow: none;
573
589
  }
574
590
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
575
591
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -668,6 +684,7 @@
668
684
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
669
685
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
670
686
  border: 1px solid transparent;
687
+ border-radius: 4px;
671
688
  }
672
689
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
673
690
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -677,6 +694,7 @@
677
694
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
678
695
  border: 1px solid transparent;
679
696
  border-radius: 4px;
697
+ box-shadow: none;
680
698
  }
681
699
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
682
700
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -786,7 +804,8 @@
786
804
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
787
805
  display: none;
788
806
  }
789
- .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 {
790
809
  margin: 3px 5px;
791
810
  }
792
811
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -800,6 +819,7 @@
800
819
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
801
820
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
802
821
  line-height: 18px;
822
+ overflow: hidden;
803
823
  }
804
824
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
805
825
  width: inherit;
@@ -810,22 +830,24 @@
810
830
  -ms-flex-pack: start;
811
831
  justify-content: flex-start;
812
832
  }
813
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
814
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
815
- transform: rotate(-90deg);
816
- margin-left: auto;
817
- }
818
833
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
819
834
  padding: 3px 5px;
820
835
  font-weight: 500;
821
836
  line-height: 18px;
822
837
  }
823
838
 
839
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
840
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
841
+ transform: rotate(-90deg);
842
+ padding: 5px;
843
+ margin: 0 0 0 auto;
844
+ }
845
+
824
846
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
825
847
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
826
848
  transform: rotate(90deg);
827
- margin-right: auto;
828
- margin-left: unset;
849
+ padding: 5px;
850
+ margin: 0 auto 0 0;
829
851
  }
830
852
 
831
853
  .e-ribbon-menu {
@@ -845,6 +867,17 @@
845
867
  padding-left: 38px !important; /* stylelint-disable-line declaration-no-important */
846
868
  }
847
869
 
870
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
871
+ font-size: 12px;
872
+ height: 24px;
873
+ -ms-flex-align: center;
874
+ align-items: center;
875
+ }
876
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
877
+ font-size: 16px;
878
+ line-height: 16px;
879
+ }
880
+
848
881
  .e-ribbon-tooltip .e-tip-content {
849
882
  padding: 4px;
850
883
  }
@@ -883,6 +916,10 @@
883
916
  padding-right: 16px;
884
917
  height: 48px;
885
918
  }
919
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
920
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
921
+ min-height: auto;
922
+ }
886
923
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
887
924
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
888
925
  height: 48px;
@@ -974,6 +1011,12 @@
974
1011
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
975
1012
  height: auto;
976
1013
  }
1014
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1015
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1016
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
1017
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
1018
+ margin-bottom: 0;
1019
+ }
977
1020
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
978
1021
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
979
1022
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1188,7 +1231,9 @@
1188
1231
  }
1189
1232
 
1190
1233
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1191
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1234
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1235
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1236
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1192
1237
  margin: 3px 7px;
1193
1238
  }
1194
1239
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1196,6 +1241,27 @@
1196
1241
  margin: 7px;
1197
1242
  padding: 0;
1198
1243
  }
1244
+ .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,
1245
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1246
+ .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,
1247
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1248
+ padding: 7px;
1249
+ }
1250
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1251
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1252
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1253
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1254
+ padding: 7px;
1255
+ }
1256
+
1257
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1258
+ font-size: 14px;
1259
+ height: 32px;
1260
+ }
1261
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1262
+ font-size: 20px;
1263
+ line-height: 20px;
1264
+ }
1199
1265
 
1200
1266
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1201
1267
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
@@ -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;
@@ -300,6 +298,9 @@
300
298
  height: auto;
301
299
  min-height: auto;
302
300
  }
301
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
302
+ box-shadow: none;
303
+ }
303
304
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
304
305
  padding: 0;
305
306
  }
@@ -309,9 +310,10 @@
309
310
  min-width: auto;
310
311
  width: auto;
311
312
  border-style: solid;
313
+ transform: none;
312
314
  border-width: 1px;
313
315
  border-radius: 2px;
314
- z-index: 2;
316
+ z-index: 3;
315
317
  }
316
318
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
317
319
  display: none;
@@ -319,6 +321,7 @@
319
321
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
320
322
  font-size: 14px;
321
323
  height: auto;
324
+ transform: none;
322
325
  line-height: 14px;
323
326
  padding: 0 5px;
324
327
  width: auto;
@@ -357,6 +360,7 @@
357
360
  border: none;
358
361
  height: 26px;
359
362
  margin: auto;
363
+ box-shadow: none;
360
364
  }
361
365
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
362
366
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -387,6 +391,9 @@
387
391
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
388
392
  overflow-y: hidden;
389
393
  }
394
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
395
+ margin-bottom: 0;
396
+ }
390
397
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
391
398
  padding-top: 1px;
392
399
  height: auto;
@@ -436,6 +443,9 @@
436
443
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
437
444
  left: var(--fileMenuWidth);
438
445
  }
446
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
447
+ padding-right: 30px;
448
+ }
439
449
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
440
450
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
441
451
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -447,6 +457,9 @@
447
457
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
448
458
  right: var(--fileMenuWidth);
449
459
  }
460
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
461
+ padding-left: 30px;
462
+ }
450
463
 
451
464
  .e-ribbon.e-rbn,
452
465
  .e-ribbon-group-overflow-ddb {
@@ -487,6 +500,8 @@
487
500
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
488
501
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
489
502
  min-width: auto;
503
+ min-height: auto;
504
+ border-radius: unset;
490
505
  }
491
506
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
492
507
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -570,6 +585,7 @@
570
585
  font-weight: 400;
571
586
  font-size: 12px;
572
587
  text-transform: none;
588
+ box-shadow: none;
573
589
  }
574
590
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
575
591
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -668,6 +684,7 @@
668
684
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
669
685
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
670
686
  border: 1px solid transparent;
687
+ border-radius: 4px;
671
688
  }
672
689
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
673
690
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -677,6 +694,7 @@
677
694
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
678
695
  border: 1px solid transparent;
679
696
  border-radius: 4px;
697
+ box-shadow: none;
680
698
  }
681
699
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
682
700
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -786,7 +804,8 @@
786
804
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
787
805
  display: none;
788
806
  }
789
- .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 {
790
809
  margin: 3px 5px;
791
810
  }
792
811
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -800,6 +819,7 @@
800
819
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
801
820
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
802
821
  line-height: 18px;
822
+ overflow: hidden;
803
823
  }
804
824
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
805
825
  width: inherit;
@@ -810,22 +830,24 @@
810
830
  -ms-flex-pack: start;
811
831
  justify-content: flex-start;
812
832
  }
813
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
814
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
815
- transform: rotate(-90deg);
816
- margin-left: auto;
817
- }
818
833
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
819
834
  padding: 3px 5px;
820
835
  font-weight: 500;
821
836
  line-height: 18px;
822
837
  }
823
838
 
839
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
840
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
841
+ transform: rotate(-90deg);
842
+ padding: 5px;
843
+ margin: 0 0 0 auto;
844
+ }
845
+
824
846
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
825
847
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
826
848
  transform: rotate(90deg);
827
- margin-right: auto;
828
- margin-left: unset;
849
+ padding: 5px;
850
+ margin: 0 auto 0 0;
829
851
  }
830
852
 
831
853
  .e-ribbon-menu {
@@ -845,6 +867,17 @@
845
867
  padding-left: 38px !important; /* stylelint-disable-line declaration-no-important */
846
868
  }
847
869
 
870
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
871
+ font-size: 12px;
872
+ height: 24px;
873
+ -ms-flex-align: center;
874
+ align-items: center;
875
+ }
876
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
877
+ font-size: 16px;
878
+ line-height: 16px;
879
+ }
880
+
848
881
  .e-ribbon-tooltip .e-tip-content {
849
882
  padding: 4px;
850
883
  }
@@ -883,6 +916,10 @@
883
916
  padding-right: 16px;
884
917
  height: 48px;
885
918
  }
919
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
920
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
921
+ min-height: auto;
922
+ }
886
923
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
887
924
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
888
925
  height: 48px;
@@ -974,6 +1011,12 @@
974
1011
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
975
1012
  height: auto;
976
1013
  }
1014
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1015
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1016
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
1017
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
1018
+ margin-bottom: 0;
1019
+ }
977
1020
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
978
1021
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
979
1022
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1188,7 +1231,9 @@
1188
1231
  }
1189
1232
 
1190
1233
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1191
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1234
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1235
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1236
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1192
1237
  margin: 3px 7px;
1193
1238
  }
1194
1239
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1196,6 +1241,27 @@
1196
1241
  margin: 7px;
1197
1242
  padding: 0;
1198
1243
  }
1244
+ .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,
1245
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1246
+ .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,
1247
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1248
+ padding: 7px;
1249
+ }
1250
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1251
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1252
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1253
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1254
+ padding: 7px;
1255
+ }
1256
+
1257
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1258
+ font-size: 14px;
1259
+ height: 32px;
1260
+ }
1261
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1262
+ font-size: 20px;
1263
+ line-height: 20px;
1264
+ }
1199
1265
 
1200
1266
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1201
1267
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,