@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
@@ -176,9 +176,6 @@
176
176
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
177
177
  display: none;
178
178
  }
179
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
180
- width: fit-content;
181
- }
182
179
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
183
180
  position: absolute;
184
181
  line-height: 22px;
@@ -187,6 +184,7 @@
187
184
  border-width: 0 0 1px 0;
188
185
  font-size: 14px;
189
186
  font-weight: 400;
187
+ box-shadow: none;
190
188
  }
191
189
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
192
190
  border-radius: unset;
@@ -262,6 +260,9 @@
262
260
  height: auto;
263
261
  min-height: auto;
264
262
  }
263
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
264
+ box-shadow: none;
265
+ }
265
266
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
266
267
  padding: 0;
267
268
  }
@@ -271,9 +272,10 @@
271
272
  min-width: auto;
272
273
  width: auto;
273
274
  border-style: solid;
275
+ transform: none;
274
276
  border-width: 1px;
275
277
  border-radius: unset;
276
- z-index: 2;
278
+ z-index: 3;
277
279
  }
278
280
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
279
281
  display: none;
@@ -281,6 +283,7 @@
281
283
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
282
284
  font-size: 16px;
283
285
  height: auto;
286
+ transform: none;
284
287
  line-height: 16px;
285
288
  padding: 0 4px;
286
289
  width: auto;
@@ -319,6 +322,7 @@
319
322
  border: none;
320
323
  height: 32px;
321
324
  margin: auto;
325
+ box-shadow: none;
322
326
  }
323
327
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
324
328
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -349,6 +353,9 @@
349
353
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
350
354
  overflow-y: hidden;
351
355
  }
356
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
357
+ margin-bottom: 0;
358
+ }
352
359
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
353
360
  padding-top: 2px;
354
361
  height: auto;
@@ -398,6 +405,9 @@
398
405
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
399
406
  left: var(--fileMenuWidth);
400
407
  }
408
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
409
+ padding-right: 30px;
410
+ }
401
411
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
402
412
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
403
413
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -409,6 +419,9 @@
409
419
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
410
420
  right: var(--fileMenuWidth);
411
421
  }
422
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
423
+ padding-left: 30px;
424
+ }
412
425
 
413
426
  .e-ribbon.e-rbn,
414
427
  .e-ribbon-group-overflow-ddb {
@@ -449,6 +462,8 @@
449
462
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
450
463
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
451
464
  min-width: auto;
465
+ min-height: auto;
466
+ border-radius: unset;
452
467
  }
453
468
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
454
469
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -532,6 +547,7 @@
532
547
  font-weight: 400;
533
548
  font-size: 12px;
534
549
  text-transform: none;
550
+ box-shadow: none;
535
551
  }
536
552
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
537
553
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -630,6 +646,7 @@
630
646
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
631
647
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
632
648
  border: 1px solid transparent;
649
+ border-radius: unset;
633
650
  }
634
651
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
635
652
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -639,6 +656,7 @@
639
656
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
640
657
  border: 1px solid transparent;
641
658
  border-radius: unset;
659
+ box-shadow: none;
642
660
  }
643
661
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
644
662
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -748,7 +766,8 @@
748
766
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
749
767
  display: none;
750
768
  }
751
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
769
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
770
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
752
771
  margin: 7px 8px;
753
772
  }
754
773
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -762,6 +781,7 @@
762
781
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
763
782
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
764
783
  line-height: 22px;
784
+ overflow: hidden;
765
785
  }
766
786
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
767
787
  width: inherit;
@@ -772,22 +792,24 @@
772
792
  -ms-flex-pack: start;
773
793
  justify-content: flex-start;
774
794
  }
775
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
776
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
777
- transform: rotate(-90deg);
778
- margin-left: auto;
779
- }
780
795
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
781
796
  padding: 7px 8px;
782
797
  font-weight: 400;
783
798
  line-height: 22px;
784
799
  }
785
800
 
801
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
802
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
803
+ transform: rotate(-90deg);
804
+ padding: 8px;
805
+ margin: 0 0 0 auto;
806
+ }
807
+
786
808
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
787
809
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
788
810
  transform: rotate(90deg);
789
- margin-right: auto;
790
- margin-left: unset;
811
+ padding: 8px;
812
+ margin: 0 auto 0 0;
791
813
  }
792
814
 
793
815
  .e-ribbon-menu {
@@ -807,6 +829,17 @@
807
829
  padding-left: 34px !important; /* stylelint-disable-line declaration-no-important */
808
830
  }
809
831
 
832
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
833
+ font-size: 14px;
834
+ height: 36px;
835
+ -ms-flex-align: center;
836
+ align-items: center;
837
+ }
838
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
839
+ font-size: 16px;
840
+ line-height: 16px;
841
+ }
842
+
810
843
  .e-ribbon-tooltip .e-tip-content {
811
844
  padding: 4px;
812
845
  }
@@ -845,6 +878,10 @@
845
878
  padding-right: 16px;
846
879
  height: 56px;
847
880
  }
881
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
882
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
883
+ min-height: auto;
884
+ }
848
885
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
849
886
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
850
887
  height: 56px;
@@ -936,6 +973,12 @@
936
973
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
937
974
  height: auto;
938
975
  }
976
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
977
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
978
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
979
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
980
+ margin-bottom: 0;
981
+ }
939
982
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
940
983
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
941
984
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1150,7 +1193,9 @@
1150
1193
  }
1151
1194
 
1152
1195
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1153
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1196
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1197
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1198
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1154
1199
  margin: 7px 8px;
1155
1200
  }
1156
1201
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1158,6 +1203,27 @@
1158
1203
  margin: 8px;
1159
1204
  padding: 0;
1160
1205
  }
1206
+ .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,
1207
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1208
+ .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,
1209
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1210
+ padding: 8px;
1211
+ }
1212
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1213
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1214
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1215
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1216
+ padding: 8px;
1217
+ }
1218
+
1219
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1220
+ font-size: 16px;
1221
+ height: 48px;
1222
+ }
1223
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1224
+ font-size: 20px;
1225
+ line-height: 20px;
1226
+ }
1161
1227
 
1162
1228
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1163
1229
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
@@ -209,9 +209,6 @@
209
209
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
210
210
  display: none;
211
211
  }
212
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
213
- width: fit-content;
214
- }
215
212
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
216
213
  position: absolute;
217
214
  line-height: 22px;
@@ -220,6 +217,7 @@
220
217
  border-width: 0 0 1px 0;
221
218
  font-size: 14px;
222
219
  font-weight: 400;
220
+ box-shadow: none;
223
221
  }
224
222
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
225
223
  border-radius: unset;
@@ -295,6 +293,9 @@
295
293
  height: auto;
296
294
  min-height: auto;
297
295
  }
296
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
297
+ box-shadow: none;
298
+ }
298
299
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
299
300
  padding: 0;
300
301
  }
@@ -304,9 +305,10 @@
304
305
  min-width: auto;
305
306
  width: auto;
306
307
  border-style: solid;
308
+ transform: none;
307
309
  border-width: 1px;
308
310
  border-radius: unset;
309
- z-index: 2;
311
+ z-index: 3;
310
312
  }
311
313
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
312
314
  display: none;
@@ -314,6 +316,7 @@
314
316
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
315
317
  font-size: 16px;
316
318
  height: auto;
319
+ transform: none;
317
320
  line-height: 16px;
318
321
  padding: 0 4px;
319
322
  width: auto;
@@ -352,6 +355,7 @@
352
355
  border: none;
353
356
  height: 32px;
354
357
  margin: auto;
358
+ box-shadow: none;
355
359
  }
356
360
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
357
361
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -382,6 +386,9 @@
382
386
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
383
387
  overflow-y: hidden;
384
388
  }
389
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
390
+ margin-bottom: 0;
391
+ }
385
392
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
386
393
  padding-top: 2px;
387
394
  height: auto;
@@ -431,6 +438,9 @@
431
438
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
432
439
  left: var(--fileMenuWidth);
433
440
  }
441
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
442
+ padding-right: 30px;
443
+ }
434
444
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
435
445
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
436
446
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -442,6 +452,9 @@
442
452
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
443
453
  right: var(--fileMenuWidth);
444
454
  }
455
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
456
+ padding-left: 30px;
457
+ }
445
458
 
446
459
  .e-ribbon.e-rbn,
447
460
  .e-ribbon-group-overflow-ddb {
@@ -482,6 +495,8 @@
482
495
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
483
496
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
484
497
  min-width: auto;
498
+ min-height: auto;
499
+ border-radius: unset;
485
500
  }
486
501
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
487
502
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -565,6 +580,7 @@
565
580
  font-weight: 400;
566
581
  font-size: 12px;
567
582
  text-transform: none;
583
+ box-shadow: none;
568
584
  }
569
585
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
570
586
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -663,6 +679,7 @@
663
679
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
664
680
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
665
681
  border: 1px solid transparent;
682
+ border-radius: unset;
666
683
  }
667
684
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
668
685
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -672,6 +689,7 @@
672
689
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
673
690
  border: 1px solid transparent;
674
691
  border-radius: unset;
692
+ box-shadow: none;
675
693
  }
676
694
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
677
695
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -781,7 +799,8 @@
781
799
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
782
800
  display: none;
783
801
  }
784
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
802
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
803
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
785
804
  margin: 3px 8px;
786
805
  }
787
806
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -795,6 +814,7 @@
795
814
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
796
815
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
797
816
  line-height: 18px;
817
+ overflow: hidden;
798
818
  }
799
819
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
800
820
  width: inherit;
@@ -805,22 +825,24 @@
805
825
  -ms-flex-pack: start;
806
826
  justify-content: flex-start;
807
827
  }
808
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
809
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
810
- transform: rotate(-90deg);
811
- margin-left: auto;
812
- }
813
828
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
814
829
  padding: 3px 8px;
815
830
  font-weight: 600;
816
831
  line-height: 18px;
817
832
  }
818
833
 
834
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
835
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
836
+ transform: rotate(-90deg);
837
+ padding: 8px;
838
+ margin: 0 0 0 auto;
839
+ }
840
+
819
841
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
820
842
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
821
843
  transform: rotate(90deg);
822
- margin-right: auto;
823
- margin-left: unset;
844
+ padding: 8px;
845
+ margin: 0 auto 0 0;
824
846
  }
825
847
 
826
848
  .e-ribbon-menu {
@@ -840,6 +862,17 @@
840
862
  padding-left: 34px !important; /* stylelint-disable-line declaration-no-important */
841
863
  }
842
864
 
865
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
866
+ font-size: 14px;
867
+ height: 36px;
868
+ -ms-flex-align: center;
869
+ align-items: center;
870
+ }
871
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
872
+ font-size: 16px;
873
+ line-height: 16px;
874
+ }
875
+
843
876
  .e-ribbon-tooltip .e-tip-content {
844
877
  padding: 4px;
845
878
  }
@@ -878,6 +911,10 @@
878
911
  padding-right: 16px;
879
912
  height: 56px;
880
913
  }
914
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
915
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
916
+ min-height: auto;
917
+ }
881
918
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
882
919
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
883
920
  height: 56px;
@@ -969,6 +1006,12 @@
969
1006
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
970
1007
  height: auto;
971
1008
  }
1009
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1010
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1011
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
1012
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
1013
+ margin-bottom: 0;
1014
+ }
972
1015
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
973
1016
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
974
1017
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1183,7 +1226,9 @@
1183
1226
  }
1184
1227
 
1185
1228
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1186
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1229
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1230
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1231
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1187
1232
  margin: 3px 8px;
1188
1233
  }
1189
1234
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1191,6 +1236,27 @@
1191
1236
  margin: 8px;
1192
1237
  padding: 0;
1193
1238
  }
1239
+ .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,
1240
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1241
+ .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,
1242
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1243
+ padding: 8px;
1244
+ }
1245
+ .e-bigger .e-ribbon-group-overflow-ddb.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.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1247
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1248
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1249
+ padding: 8px;
1250
+ }
1251
+
1252
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1253
+ font-size: 16px;
1254
+ height: 48px;
1255
+ }
1256
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1257
+ font-size: 20px;
1258
+ line-height: 20px;
1259
+ }
1194
1260
 
1195
1261
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1196
1262
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,