@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
@@ -106,9 +106,6 @@
106
106
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
107
107
  display: none;
108
108
  }
109
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
110
- width: fit-content;
111
- }
112
109
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
113
110
  position: absolute;
114
111
  line-height: 22px;
@@ -117,6 +114,7 @@
117
114
  border-width: unset;
118
115
  font-size: 14px;
119
116
  font-weight: 400;
117
+ box-shadow: none;
120
118
  }
121
119
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
122
120
  border-radius: unset;
@@ -192,6 +190,9 @@
192
190
  height: auto;
193
191
  min-height: auto;
194
192
  }
193
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
194
+ box-shadow: none;
195
+ }
195
196
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
196
197
  padding: 0;
197
198
  }
@@ -201,9 +202,10 @@
201
202
  min-width: auto;
202
203
  width: auto;
203
204
  border-style: solid;
205
+ transform: none;
204
206
  border-width: 1px;
205
207
  border-radius: unset;
206
- z-index: 2;
208
+ z-index: 3;
207
209
  }
208
210
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
209
211
  display: none;
@@ -211,6 +213,7 @@
211
213
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
212
214
  font-size: 16px;
213
215
  height: auto;
216
+ transform: none;
214
217
  line-height: 16px;
215
218
  padding: 0 4px;
216
219
  width: auto;
@@ -249,6 +252,7 @@
249
252
  border: none;
250
253
  height: 32px;
251
254
  margin: auto;
255
+ box-shadow: none;
252
256
  }
253
257
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
254
258
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -279,6 +283,9 @@
279
283
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
280
284
  overflow-y: hidden;
281
285
  }
286
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
287
+ margin-bottom: 0;
288
+ }
282
289
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
283
290
  padding-top: 2px;
284
291
  height: auto;
@@ -328,6 +335,9 @@
328
335
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
329
336
  left: var(--fileMenuWidth);
330
337
  }
338
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
339
+ padding-right: 30px;
340
+ }
331
341
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
332
342
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
333
343
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -339,6 +349,9 @@
339
349
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
340
350
  right: var(--fileMenuWidth);
341
351
  }
352
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
353
+ padding-left: 30px;
354
+ }
342
355
 
343
356
  .e-ribbon.e-rbn,
344
357
  .e-ribbon-group-overflow-ddb {
@@ -379,6 +392,8 @@
379
392
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
380
393
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
381
394
  min-width: auto;
395
+ min-height: auto;
396
+ border-radius: unset;
382
397
  }
383
398
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
384
399
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -462,6 +477,7 @@
462
477
  font-weight: 400;
463
478
  font-size: 12px;
464
479
  text-transform: none;
480
+ box-shadow: none;
465
481
  }
466
482
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
467
483
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -560,6 +576,7 @@
560
576
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
561
577
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
562
578
  border: 1px solid transparent;
579
+ border-radius: unset;
563
580
  }
564
581
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
565
582
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -569,6 +586,7 @@
569
586
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
570
587
  border: 1px solid transparent;
571
588
  border-radius: unset;
589
+ box-shadow: none;
572
590
  }
573
591
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
574
592
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -678,7 +696,8 @@
678
696
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
679
697
  display: none;
680
698
  }
681
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
699
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
700
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
682
701
  margin: 7px 8px;
683
702
  }
684
703
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -692,6 +711,7 @@
692
711
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
693
712
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
694
713
  line-height: 22px;
714
+ overflow: hidden;
695
715
  }
696
716
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
697
717
  width: inherit;
@@ -702,22 +722,24 @@
702
722
  -ms-flex-pack: start;
703
723
  justify-content: flex-start;
704
724
  }
705
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
706
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
707
- transform: rotate(-90deg);
708
- margin-left: auto;
709
- }
710
725
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
711
726
  padding: 6px 8px;
712
727
  font-weight: 600;
713
728
  line-height: 24px;
714
729
  }
715
730
 
731
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
732
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
733
+ transform: rotate(-90deg);
734
+ padding: 8px;
735
+ margin: 0 0 0 auto;
736
+ }
737
+
716
738
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
717
739
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
718
740
  transform: rotate(90deg);
719
- margin-right: auto;
720
- margin-left: unset;
741
+ padding: 8px;
742
+ margin: 0 auto 0 0;
721
743
  }
722
744
 
723
745
  .e-ribbon-menu {
@@ -737,6 +759,17 @@
737
759
  padding-left: 30px !important; /* stylelint-disable-line declaration-no-important */
738
760
  }
739
761
 
762
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
763
+ font-size: 16px;
764
+ height: 36px;
765
+ -ms-flex-align: center;
766
+ align-items: center;
767
+ }
768
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
769
+ font-size: 16px;
770
+ line-height: 16px;
771
+ }
772
+
740
773
  .e-ribbon-tooltip .e-tip-content {
741
774
  padding: 4px;
742
775
  }
@@ -775,6 +808,10 @@
775
808
  padding-right: 16px;
776
809
  height: 50px;
777
810
  }
811
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
812
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
813
+ min-height: auto;
814
+ }
778
815
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
779
816
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
780
817
  height: 50px;
@@ -866,6 +903,12 @@
866
903
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
867
904
  height: auto;
868
905
  }
906
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
907
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
908
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
909
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
910
+ margin-bottom: 0;
911
+ }
869
912
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
870
913
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
871
914
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1080,7 +1123,9 @@
1080
1123
  }
1081
1124
 
1082
1125
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1083
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1126
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1127
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1128
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1084
1129
  margin: 7px 10px;
1085
1130
  }
1086
1131
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1088,6 +1133,27 @@
1088
1133
  margin: 10px;
1089
1134
  padding: 0;
1090
1135
  }
1136
+ .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,
1137
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1138
+ .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,
1139
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1140
+ padding: 10px;
1141
+ }
1142
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1143
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1144
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1145
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1146
+ padding: 10px;
1147
+ }
1148
+
1149
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1150
+ font-size: 16px;
1151
+ height: 45px;
1152
+ }
1153
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1154
+ font-size: 20px;
1155
+ line-height: 20px;
1156
+ }
1091
1157
 
1092
1158
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1093
1159
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
@@ -104,9 +104,6 @@
104
104
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
105
105
  display: none;
106
106
  }
107
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
108
- width: fit-content;
109
- }
110
107
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
111
108
  position: absolute;
112
109
  line-height: 22px;
@@ -115,6 +112,7 @@
115
112
  border-width: 0 0 1px 0;
116
113
  font-size: 14px;
117
114
  font-weight: 400;
115
+ box-shadow: none;
118
116
  }
119
117
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
120
118
  border-radius: unset;
@@ -190,6 +188,9 @@
190
188
  height: auto;
191
189
  min-height: auto;
192
190
  }
191
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
192
+ box-shadow: none;
193
+ }
193
194
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
194
195
  padding: 0;
195
196
  }
@@ -199,9 +200,10 @@
199
200
  min-width: auto;
200
201
  width: auto;
201
202
  border-style: solid;
203
+ transform: none;
202
204
  border-width: 1px;
203
205
  border-radius: unset;
204
- z-index: 2;
206
+ z-index: 3;
205
207
  }
206
208
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
207
209
  display: none;
@@ -209,6 +211,7 @@
209
211
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
210
212
  font-size: 16px;
211
213
  height: auto;
214
+ transform: none;
212
215
  line-height: 16px;
213
216
  padding: 0 4px;
214
217
  width: auto;
@@ -247,6 +250,7 @@
247
250
  border: none;
248
251
  height: 32px;
249
252
  margin: auto;
253
+ box-shadow: none;
250
254
  }
251
255
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
252
256
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -277,6 +281,9 @@
277
281
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
278
282
  overflow-y: hidden;
279
283
  }
284
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
285
+ margin-bottom: 0;
286
+ }
280
287
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
281
288
  padding-top: 4px;
282
289
  height: auto;
@@ -326,6 +333,9 @@
326
333
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
327
334
  left: var(--fileMenuWidth);
328
335
  }
336
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
337
+ padding-right: 30px;
338
+ }
329
339
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
330
340
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
331
341
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -337,6 +347,9 @@
337
347
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
338
348
  right: var(--fileMenuWidth);
339
349
  }
350
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
351
+ padding-left: 30px;
352
+ }
340
353
 
341
354
  .e-ribbon.e-rbn,
342
355
  .e-ribbon-group-overflow-ddb {
@@ -377,6 +390,8 @@
377
390
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
378
391
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
379
392
  min-width: auto;
393
+ min-height: auto;
394
+ border-radius: unset;
380
395
  }
381
396
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
382
397
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -460,6 +475,7 @@
460
475
  font-weight: 400;
461
476
  font-size: 14px;
462
477
  text-transform: none;
478
+ box-shadow: none;
463
479
  }
464
480
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
465
481
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -558,6 +574,7 @@
558
574
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
559
575
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
560
576
  border: 1px solid transparent;
577
+ border-radius: unset;
561
578
  }
562
579
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
563
580
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -567,6 +584,7 @@
567
584
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
568
585
  border: 1px solid transparent;
569
586
  border-radius: unset;
587
+ box-shadow: none;
570
588
  }
571
589
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
572
590
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -676,7 +694,8 @@
676
694
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
677
695
  display: none;
678
696
  }
679
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
697
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
698
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
680
699
  margin: 7px 8px;
681
700
  }
682
701
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -690,6 +709,7 @@
690
709
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
691
710
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
692
711
  line-height: 22px;
712
+ overflow: hidden;
693
713
  }
694
714
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
695
715
  width: inherit;
@@ -700,22 +720,24 @@
700
720
  -ms-flex-pack: start;
701
721
  justify-content: flex-start;
702
722
  }
703
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
704
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
705
- transform: rotate(-90deg);
706
- margin-left: auto;
707
- }
708
723
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
709
724
  padding: 6px 8px;
710
725
  font-weight: 600;
711
726
  line-height: 24px;
712
727
  }
713
728
 
729
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
730
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
731
+ transform: rotate(-90deg);
732
+ padding: 8px;
733
+ margin: 0 0 0 auto;
734
+ }
735
+
714
736
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
715
737
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
716
738
  transform: rotate(90deg);
717
- margin-right: auto;
718
- margin-left: unset;
739
+ padding: 8px;
740
+ margin: 0 auto 0 0;
719
741
  }
720
742
 
721
743
  .e-ribbon-menu {
@@ -735,6 +757,17 @@
735
757
  padding-left: 30px !important; /* stylelint-disable-line declaration-no-important */
736
758
  }
737
759
 
760
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
761
+ font-size: 16px;
762
+ height: 36px;
763
+ -ms-flex-align: center;
764
+ align-items: center;
765
+ }
766
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
767
+ font-size: 16px;
768
+ line-height: 16px;
769
+ }
770
+
738
771
  .e-ribbon-tooltip .e-tip-content {
739
772
  padding: 4px;
740
773
  }
@@ -773,6 +806,10 @@
773
806
  padding-right: 16px;
774
807
  height: 50px;
775
808
  }
809
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
810
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
811
+ min-height: auto;
812
+ }
776
813
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
777
814
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
778
815
  height: 50px;
@@ -864,6 +901,12 @@
864
901
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
865
902
  height: auto;
866
903
  }
904
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
905
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
906
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
907
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
908
+ margin-bottom: 0;
909
+ }
867
910
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
868
911
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
869
912
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1078,7 +1121,9 @@
1078
1121
  }
1079
1122
 
1080
1123
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1081
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1124
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1125
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1126
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1082
1127
  margin: 7px 10px;
1083
1128
  }
1084
1129
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1086,6 +1131,27 @@
1086
1131
  margin: 10px;
1087
1132
  padding: 0;
1088
1133
  }
1134
+ .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,
1135
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1136
+ .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,
1137
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1138
+ padding: 10px;
1139
+ }
1140
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1141
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1142
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1143
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1144
+ padding: 10px;
1145
+ }
1146
+
1147
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1148
+ font-size: 16px;
1149
+ height: 45px;
1150
+ }
1151
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1152
+ font-size: 20px;
1153
+ line-height: 20px;
1154
+ }
1089
1155
 
1090
1156
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1091
1157
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,