@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
@@ -135,9 +135,6 @@
135
135
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
136
136
  display: none;
137
137
  }
138
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
139
- width: fit-content;
140
- }
141
138
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
142
139
  position: absolute;
143
140
  line-height: 22px;
@@ -146,6 +143,7 @@
146
143
  border-width: unset;
147
144
  font-size: 14px;
148
145
  font-weight: 400;
146
+ box-shadow: none;
149
147
  }
150
148
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
151
149
  border-radius: unset;
@@ -221,6 +219,9 @@
221
219
  height: auto;
222
220
  min-height: auto;
223
221
  }
222
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
223
+ box-shadow: none;
224
+ }
224
225
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
225
226
  padding: 0;
226
227
  }
@@ -230,9 +231,10 @@
230
231
  min-width: auto;
231
232
  width: auto;
232
233
  border-style: solid;
234
+ transform: none;
233
235
  border-width: 1px;
234
236
  border-radius: 2px;
235
- z-index: 2;
237
+ z-index: 3;
236
238
  }
237
239
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
238
240
  display: none;
@@ -240,6 +242,7 @@
240
242
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
241
243
  font-size: 16px;
242
244
  height: auto;
245
+ transform: none;
243
246
  line-height: 16px;
244
247
  padding: 0 4px;
245
248
  width: auto;
@@ -278,6 +281,7 @@
278
281
  border: none;
279
282
  height: 32px;
280
283
  margin: auto;
284
+ box-shadow: none;
281
285
  }
282
286
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
283
287
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -308,6 +312,9 @@
308
312
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
309
313
  overflow-y: hidden;
310
314
  }
315
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
316
+ margin-bottom: 0;
317
+ }
311
318
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
312
319
  padding-top: 2px;
313
320
  height: auto;
@@ -357,6 +364,9 @@
357
364
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
358
365
  left: var(--fileMenuWidth);
359
366
  }
367
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
368
+ padding-right: 30px;
369
+ }
360
370
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
361
371
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
362
372
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -368,6 +378,9 @@
368
378
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
369
379
  right: var(--fileMenuWidth);
370
380
  }
381
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
382
+ padding-left: 30px;
383
+ }
371
384
 
372
385
  .e-ribbon.e-rbn,
373
386
  .e-ribbon-group-overflow-ddb {
@@ -408,6 +421,8 @@
408
421
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
409
422
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
410
423
  min-width: auto;
424
+ min-height: auto;
425
+ border-radius: unset;
411
426
  }
412
427
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
413
428
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -491,6 +506,7 @@
491
506
  font-weight: 400;
492
507
  font-size: 12px;
493
508
  text-transform: none;
509
+ box-shadow: none;
494
510
  }
495
511
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
496
512
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -589,6 +605,7 @@
589
605
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
590
606
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
591
607
  border: 1px solid transparent;
608
+ border-radius: 4px;
592
609
  }
593
610
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
594
611
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -598,6 +615,7 @@
598
615
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
599
616
  border: 1px solid transparent;
600
617
  border-radius: 4px;
618
+ box-shadow: none;
601
619
  }
602
620
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
603
621
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -707,7 +725,8 @@
707
725
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
708
726
  display: none;
709
727
  }
710
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
728
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
729
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
711
730
  margin: 2px 8px;
712
731
  }
713
732
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -721,6 +740,7 @@
721
740
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
722
741
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
723
742
  line-height: 22px;
743
+ overflow: hidden;
724
744
  }
725
745
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
726
746
  width: inherit;
@@ -731,22 +751,24 @@
731
751
  -ms-flex-pack: start;
732
752
  justify-content: flex-start;
733
753
  }
734
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
735
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
736
- transform: rotate(-90deg);
737
- margin-left: auto;
738
- }
739
754
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
740
755
  padding: 2px 8px;
741
756
  font-weight: 400;
742
757
  line-height: 22px;
743
758
  }
744
759
 
760
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
761
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
762
+ transform: rotate(-90deg);
763
+ padding: 8px;
764
+ margin: 0 0 0 auto;
765
+ }
766
+
745
767
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
746
768
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
747
769
  transform: rotate(90deg);
748
- margin-right: auto;
749
- margin-left: unset;
770
+ padding: 8px;
771
+ margin: 0 auto 0 0;
750
772
  }
751
773
 
752
774
  .e-ribbon-menu {
@@ -766,6 +788,17 @@
766
788
  padding-left: 34px !important; /* stylelint-disable-line declaration-no-important */
767
789
  }
768
790
 
791
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
792
+ font-size: 14px;
793
+ height: 26px;
794
+ -ms-flex-align: center;
795
+ align-items: center;
796
+ }
797
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
798
+ font-size: 16px;
799
+ line-height: 16px;
800
+ }
801
+
769
802
  .e-ribbon-tooltip .e-tip-content {
770
803
  padding: 4px;
771
804
  }
@@ -804,6 +837,10 @@
804
837
  padding-right: 16px;
805
838
  height: 52px;
806
839
  }
840
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
841
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
842
+ min-height: auto;
843
+ }
807
844
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
808
845
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
809
846
  height: 52px;
@@ -895,6 +932,12 @@
895
932
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
896
933
  height: auto;
897
934
  }
935
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
936
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
937
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
938
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
939
+ margin-bottom: 0;
940
+ }
898
941
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
899
942
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
900
943
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1109,7 +1152,9 @@
1109
1152
  }
1110
1153
 
1111
1154
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1112
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1155
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1156
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1157
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1113
1158
  margin: 2px 10px;
1114
1159
  }
1115
1160
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1117,6 +1162,27 @@
1117
1162
  margin: 10px;
1118
1163
  padding: 0;
1119
1164
  }
1165
+ .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,
1166
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1167
+ .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,
1168
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1169
+ padding: 10px;
1170
+ }
1171
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1172
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1173
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1174
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1175
+ padding: 10px;
1176
+ }
1177
+
1178
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1179
+ font-size: 14px;
1180
+ height: 32px;
1181
+ }
1182
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1183
+ font-size: 20px;
1184
+ line-height: 20px;
1185
+ }
1120
1186
 
1121
1187
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1122
1188
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
@@ -185,9 +185,6 @@
185
185
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
186
186
  display: none;
187
187
  }
188
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
189
- width: fit-content;
190
- }
191
188
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
192
189
  position: absolute;
193
190
  line-height: 22px;
@@ -196,6 +193,7 @@
196
193
  border-width: unset;
197
194
  font-size: 14px;
198
195
  font-weight: 400;
196
+ box-shadow: none;
199
197
  }
200
198
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
201
199
  border-radius: unset;
@@ -271,6 +269,9 @@
271
269
  height: auto;
272
270
  min-height: auto;
273
271
  }
272
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
273
+ box-shadow: none;
274
+ }
274
275
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
275
276
  padding: 0;
276
277
  }
@@ -280,9 +281,10 @@
280
281
  min-width: auto;
281
282
  width: auto;
282
283
  border-style: solid;
284
+ transform: none;
283
285
  border-width: 1px;
284
286
  border-radius: 2px;
285
- z-index: 2;
287
+ z-index: 3;
286
288
  }
287
289
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
288
290
  display: none;
@@ -290,6 +292,7 @@
290
292
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
291
293
  font-size: 20px;
292
294
  height: auto;
295
+ transform: none;
293
296
  line-height: 20px;
294
297
  padding: 0 2px;
295
298
  width: auto;
@@ -328,6 +331,7 @@
328
331
  border: none;
329
332
  height: 32px;
330
333
  margin: auto;
334
+ box-shadow: none;
331
335
  }
332
336
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
333
337
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -358,6 +362,9 @@
358
362
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
359
363
  overflow-y: hidden;
360
364
  }
365
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
366
+ margin-bottom: 0;
367
+ }
361
368
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
362
369
  padding-top: 2px;
363
370
  height: auto;
@@ -407,6 +414,9 @@
407
414
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
408
415
  left: var(--fileMenuWidth);
409
416
  }
417
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
418
+ padding-right: 30px;
419
+ }
410
420
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
411
421
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
412
422
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -418,6 +428,9 @@
418
428
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
419
429
  right: var(--fileMenuWidth);
420
430
  }
431
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
432
+ padding-left: 30px;
433
+ }
421
434
 
422
435
  .e-ribbon.e-rbn,
423
436
  .e-ribbon-group-overflow-ddb {
@@ -458,6 +471,8 @@
458
471
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
459
472
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
460
473
  min-width: auto;
474
+ min-height: auto;
475
+ border-radius: unset;
461
476
  }
462
477
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
463
478
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -541,6 +556,7 @@
541
556
  font-weight: 400;
542
557
  font-size: 14px;
543
558
  text-transform: none;
559
+ box-shadow: none;
544
560
  }
545
561
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
546
562
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -639,6 +655,7 @@
639
655
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
640
656
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
641
657
  border: 1px solid transparent;
658
+ border-radius: 4px;
642
659
  }
643
660
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
644
661
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -648,6 +665,7 @@
648
665
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
649
666
  border: 1px solid transparent;
650
667
  border-radius: 4px;
668
+ box-shadow: none;
651
669
  }
652
670
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
653
671
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -757,7 +775,8 @@
757
775
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
758
776
  display: none;
759
777
  }
760
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
778
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
779
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
761
780
  margin: 3px 8px;
762
781
  }
763
782
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -771,6 +790,7 @@
771
790
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
772
791
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
773
792
  line-height: 18px;
793
+ overflow: hidden;
774
794
  }
775
795
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
776
796
  width: inherit;
@@ -781,22 +801,24 @@
781
801
  -ms-flex-pack: start;
782
802
  justify-content: flex-start;
783
803
  }
784
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
785
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
786
- transform: rotate(-90deg);
787
- margin-left: auto;
788
- }
789
804
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
790
805
  padding: 3px 8px;
791
806
  font-weight: 500;
792
807
  line-height: 18px;
793
808
  }
794
809
 
810
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
811
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
812
+ transform: rotate(-90deg);
813
+ padding: 8px;
814
+ margin: 0 0 0 auto;
815
+ }
816
+
795
817
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
796
818
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
797
819
  transform: rotate(90deg);
798
- margin-right: auto;
799
- margin-left: unset;
820
+ padding: 8px;
821
+ margin: 0 auto 0 0;
800
822
  }
801
823
 
802
824
  .e-ribbon-menu {
@@ -816,6 +838,17 @@
816
838
  padding-left: 34px !important; /* stylelint-disable-line declaration-no-important */
817
839
  }
818
840
 
841
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
842
+ font-size: 14px;
843
+ height: 26px;
844
+ -ms-flex-align: center;
845
+ align-items: center;
846
+ }
847
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
848
+ font-size: 16px;
849
+ line-height: 16px;
850
+ }
851
+
819
852
  .e-ribbon-tooltip .e-tip-content {
820
853
  padding: 4px;
821
854
  }
@@ -854,6 +887,10 @@
854
887
  padding-right: 16px;
855
888
  height: 52px;
856
889
  }
890
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
891
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
892
+ min-height: auto;
893
+ }
857
894
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
858
895
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
859
896
  height: 52px;
@@ -945,6 +982,12 @@
945
982
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
946
983
  height: auto;
947
984
  }
985
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
986
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
987
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
988
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
989
+ margin-bottom: 0;
990
+ }
948
991
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
949
992
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
950
993
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1159,7 +1202,9 @@
1159
1202
  }
1160
1203
 
1161
1204
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1162
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1205
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1206
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1207
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1163
1208
  margin: 3px 9px;
1164
1209
  }
1165
1210
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1167,6 +1212,27 @@
1167
1212
  margin: 9px;
1168
1213
  padding: 0;
1169
1214
  }
1215
+ .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,
1216
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1217
+ .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,
1218
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1219
+ padding: 9px;
1220
+ }
1221
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1222
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1223
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1224
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1225
+ padding: 9px;
1226
+ }
1227
+
1228
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1229
+ font-size: 14px;
1230
+ height: 32px;
1231
+ }
1232
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1233
+ font-size: 20px;
1234
+ line-height: 20px;
1235
+ }
1170
1236
 
1171
1237
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1172
1238
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,