@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
@@ -190,9 +190,6 @@
190
190
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
191
191
  display: none;
192
192
  }
193
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
194
- width: fit-content;
195
- }
196
193
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
197
194
  position: absolute;
198
195
  line-height: 22px;
@@ -201,6 +198,7 @@
201
198
  border-width: unset;
202
199
  font-size: 14px;
203
200
  font-weight: 400;
201
+ box-shadow: none;
204
202
  }
205
203
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
206
204
  border-radius: unset;
@@ -276,6 +274,9 @@
276
274
  height: auto;
277
275
  min-height: auto;
278
276
  }
277
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
278
+ box-shadow: none;
279
+ }
279
280
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
280
281
  padding: 0;
281
282
  }
@@ -285,9 +286,10 @@
285
286
  min-width: auto;
286
287
  width: auto;
287
288
  border-style: solid;
289
+ transform: none;
288
290
  border-width: 1px;
289
291
  border-radius: 2px;
290
- z-index: 2;
292
+ z-index: 3;
291
293
  }
292
294
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
293
295
  display: none;
@@ -295,6 +297,7 @@
295
297
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
296
298
  font-size: 14px;
297
299
  height: auto;
300
+ transform: none;
298
301
  line-height: 14px;
299
302
  padding: 0 5px;
300
303
  width: auto;
@@ -333,6 +336,7 @@
333
336
  border: none;
334
337
  height: 26px;
335
338
  margin: auto;
339
+ box-shadow: none;
336
340
  }
337
341
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
338
342
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -363,6 +367,9 @@
363
367
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
364
368
  overflow-y: hidden;
365
369
  }
370
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
371
+ margin-bottom: 0;
372
+ }
366
373
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
367
374
  padding-top: 1px;
368
375
  height: auto;
@@ -412,6 +419,9 @@
412
419
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
413
420
  left: var(--fileMenuWidth);
414
421
  }
422
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
423
+ padding-right: 30px;
424
+ }
415
425
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
416
426
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
417
427
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -423,6 +433,9 @@
423
433
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
424
434
  right: var(--fileMenuWidth);
425
435
  }
436
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
437
+ padding-left: 30px;
438
+ }
426
439
 
427
440
  .e-ribbon.e-rbn,
428
441
  .e-ribbon-group-overflow-ddb {
@@ -463,6 +476,8 @@
463
476
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
464
477
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
465
478
  min-width: auto;
479
+ min-height: auto;
480
+ border-radius: unset;
466
481
  }
467
482
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
468
483
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -546,6 +561,7 @@
546
561
  font-weight: 400;
547
562
  font-size: 12px;
548
563
  text-transform: none;
564
+ box-shadow: none;
549
565
  }
550
566
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
551
567
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -644,6 +660,7 @@
644
660
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
645
661
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
646
662
  border: 1px solid transparent;
663
+ border-radius: 2px;
647
664
  }
648
665
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
649
666
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -653,6 +670,7 @@
653
670
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
654
671
  border: 1px solid transparent;
655
672
  border-radius: 2px;
673
+ box-shadow: none;
656
674
  }
657
675
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
658
676
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -762,7 +780,8 @@
762
780
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
763
781
  display: none;
764
782
  }
765
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
783
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
784
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
766
785
  margin: 3px 5px;
767
786
  }
768
787
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -776,6 +795,7 @@
776
795
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
777
796
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
778
797
  line-height: 18px;
798
+ overflow: hidden;
779
799
  }
780
800
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
781
801
  width: inherit;
@@ -786,22 +806,24 @@
786
806
  -ms-flex-pack: start;
787
807
  justify-content: flex-start;
788
808
  }
789
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
790
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
791
- transform: rotate(-90deg);
792
- margin-left: auto;
793
- }
794
809
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
795
810
  padding: 3px 5px;
796
811
  font-weight: 600;
797
812
  line-height: 18px;
798
813
  }
799
814
 
815
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
816
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
817
+ transform: rotate(-90deg);
818
+ padding: 5px;
819
+ margin: 0 0 0 auto;
820
+ }
821
+
800
822
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
801
823
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
802
824
  transform: rotate(90deg);
803
- margin-right: auto;
804
- margin-left: unset;
825
+ padding: 5px;
826
+ margin: 0 auto 0 0;
805
827
  }
806
828
 
807
829
  .e-ribbon-menu {
@@ -821,6 +843,17 @@
821
843
  padding-left: 26px !important; /* stylelint-disable-line declaration-no-important */
822
844
  }
823
845
 
846
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
847
+ font-size: 12px;
848
+ height: 24px;
849
+ -ms-flex-align: center;
850
+ align-items: center;
851
+ }
852
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
853
+ font-size: 16px;
854
+ line-height: 16px;
855
+ }
856
+
824
857
  .e-ribbon-tooltip .e-tip-content {
825
858
  padding: 4px;
826
859
  }
@@ -859,6 +892,10 @@
859
892
  padding-right: 16px;
860
893
  height: 48px;
861
894
  }
895
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
896
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
897
+ min-height: auto;
898
+ }
862
899
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
863
900
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
864
901
  height: 48px;
@@ -950,6 +987,12 @@
950
987
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
951
988
  height: auto;
952
989
  }
990
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
991
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
992
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
993
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
994
+ margin-bottom: 0;
995
+ }
953
996
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
954
997
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
955
998
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1164,7 +1207,9 @@
1164
1207
  }
1165
1208
 
1166
1209
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1167
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1210
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1211
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1212
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1168
1213
  margin: 3px 7px;
1169
1214
  }
1170
1215
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1172,6 +1217,27 @@
1172
1217
  margin: 7px;
1173
1218
  padding: 0;
1174
1219
  }
1220
+ .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,
1221
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1222
+ .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,
1223
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1224
+ padding: 7px;
1225
+ }
1226
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1227
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1228
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1229
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1230
+ padding: 7px;
1231
+ }
1232
+
1233
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1234
+ font-size: 14px;
1235
+ height: 32px;
1236
+ }
1237
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1238
+ font-size: 20px;
1239
+ line-height: 20px;
1240
+ }
1175
1241
 
1176
1242
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1177
1243
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
@@ -190,9 +190,6 @@
190
190
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
191
191
  display: none;
192
192
  }
193
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
194
- width: fit-content;
195
- }
196
193
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
197
194
  position: absolute;
198
195
  line-height: 22px;
@@ -201,6 +198,7 @@
201
198
  border-width: unset;
202
199
  font-size: 14px;
203
200
  font-weight: 400;
201
+ box-shadow: none;
204
202
  }
205
203
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
206
204
  border-radius: unset;
@@ -276,6 +274,9 @@
276
274
  height: auto;
277
275
  min-height: auto;
278
276
  }
277
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
278
+ box-shadow: none;
279
+ }
279
280
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
280
281
  padding: 0;
281
282
  }
@@ -285,9 +286,10 @@
285
286
  min-width: auto;
286
287
  width: auto;
287
288
  border-style: solid;
289
+ transform: none;
288
290
  border-width: 1px;
289
291
  border-radius: 2px;
290
- z-index: 2;
292
+ z-index: 3;
291
293
  }
292
294
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
293
295
  display: none;
@@ -295,6 +297,7 @@
295
297
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
296
298
  font-size: 14px;
297
299
  height: auto;
300
+ transform: none;
298
301
  line-height: 14px;
299
302
  padding: 0 5px;
300
303
  width: auto;
@@ -333,6 +336,7 @@
333
336
  border: none;
334
337
  height: 26px;
335
338
  margin: auto;
339
+ box-shadow: none;
336
340
  }
337
341
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
338
342
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -363,6 +367,9 @@
363
367
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
364
368
  overflow-y: hidden;
365
369
  }
370
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
371
+ margin-bottom: 0;
372
+ }
366
373
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
367
374
  padding-top: 1px;
368
375
  height: auto;
@@ -412,6 +419,9 @@
412
419
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
413
420
  left: var(--fileMenuWidth);
414
421
  }
422
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
423
+ padding-right: 30px;
424
+ }
415
425
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
416
426
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
417
427
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -423,6 +433,9 @@
423
433
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
424
434
  right: var(--fileMenuWidth);
425
435
  }
436
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
437
+ padding-left: 30px;
438
+ }
426
439
 
427
440
  .e-ribbon.e-rbn,
428
441
  .e-ribbon-group-overflow-ddb {
@@ -463,6 +476,8 @@
463
476
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
464
477
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
465
478
  min-width: auto;
479
+ min-height: auto;
480
+ border-radius: unset;
466
481
  }
467
482
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
468
483
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -546,6 +561,7 @@
546
561
  font-weight: 400;
547
562
  font-size: 12px;
548
563
  text-transform: none;
564
+ box-shadow: none;
549
565
  }
550
566
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
551
567
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -644,6 +660,7 @@
644
660
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
645
661
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
646
662
  border: 1px solid transparent;
663
+ border-radius: 2px;
647
664
  }
648
665
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
649
666
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -653,6 +670,7 @@
653
670
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
654
671
  border: 1px solid transparent;
655
672
  border-radius: 2px;
673
+ box-shadow: none;
656
674
  }
657
675
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
658
676
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -762,7 +780,8 @@
762
780
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
763
781
  display: none;
764
782
  }
765
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
783
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
784
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
766
785
  margin: 3px 5px;
767
786
  }
768
787
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -776,6 +795,7 @@
776
795
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
777
796
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
778
797
  line-height: 18px;
798
+ overflow: hidden;
779
799
  }
780
800
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
781
801
  width: inherit;
@@ -786,22 +806,24 @@
786
806
  -ms-flex-pack: start;
787
807
  justify-content: flex-start;
788
808
  }
789
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
790
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
791
- transform: rotate(-90deg);
792
- margin-left: auto;
793
- }
794
809
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
795
810
  padding: 3px 5px;
796
811
  font-weight: 600;
797
812
  line-height: 18px;
798
813
  }
799
814
 
815
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
816
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
817
+ transform: rotate(-90deg);
818
+ padding: 5px;
819
+ margin: 0 0 0 auto;
820
+ }
821
+
800
822
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
801
823
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
802
824
  transform: rotate(90deg);
803
- margin-right: auto;
804
- margin-left: unset;
825
+ padding: 5px;
826
+ margin: 0 auto 0 0;
805
827
  }
806
828
 
807
829
  .e-ribbon-menu {
@@ -821,6 +843,17 @@
821
843
  padding-left: 26px !important; /* stylelint-disable-line declaration-no-important */
822
844
  }
823
845
 
846
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
847
+ font-size: 12px;
848
+ height: 24px;
849
+ -ms-flex-align: center;
850
+ align-items: center;
851
+ }
852
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
853
+ font-size: 16px;
854
+ line-height: 16px;
855
+ }
856
+
824
857
  .e-ribbon-tooltip .e-tip-content {
825
858
  padding: 4px;
826
859
  }
@@ -859,6 +892,10 @@
859
892
  padding-right: 16px;
860
893
  height: 48px;
861
894
  }
895
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
896
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
897
+ min-height: auto;
898
+ }
862
899
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
863
900
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
864
901
  height: 48px;
@@ -950,6 +987,12 @@
950
987
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
951
988
  height: auto;
952
989
  }
990
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
991
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
992
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
993
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
994
+ margin-bottom: 0;
995
+ }
953
996
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
954
997
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
955
998
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1164,7 +1207,9 @@
1164
1207
  }
1165
1208
 
1166
1209
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1167
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1210
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1211
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1212
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1168
1213
  margin: 3px 7px;
1169
1214
  }
1170
1215
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1172,6 +1217,27 @@
1172
1217
  margin: 7px;
1173
1218
  padding: 0;
1174
1219
  }
1220
+ .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,
1221
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1222
+ .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,
1223
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1224
+ padding: 7px;
1225
+ }
1226
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1227
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1228
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1229
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1230
+ padding: 7px;
1231
+ }
1232
+
1233
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1234
+ font-size: 14px;
1235
+ height: 32px;
1236
+ }
1237
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1238
+ font-size: 20px;
1239
+ line-height: 20px;
1240
+ }
1175
1241
 
1176
1242
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1177
1243
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,