@syncfusion/ej2-vue-ribbon 21.1.35 → 21.2.3

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.
@@ -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;
@@ -262,6 +259,9 @@
262
259
  height: auto;
263
260
  min-height: auto;
264
261
  }
262
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
263
+ box-shadow: none;
264
+ }
265
265
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
266
266
  padding: 0;
267
267
  }
@@ -271,6 +271,7 @@
271
271
  min-width: auto;
272
272
  width: auto;
273
273
  border-style: solid;
274
+ transform: none;
274
275
  border-width: 1px;
275
276
  border-radius: unset;
276
277
  z-index: 3;
@@ -281,6 +282,7 @@
281
282
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
282
283
  font-size: 16px;
283
284
  height: auto;
285
+ transform: none;
284
286
  line-height: 16px;
285
287
  padding: 0 4px;
286
288
  width: auto;
@@ -349,6 +351,9 @@
349
351
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
350
352
  overflow-y: hidden;
351
353
  }
354
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
355
+ margin-bottom: 0;
356
+ }
352
357
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
353
358
  padding-top: 2px;
354
359
  height: auto;
@@ -398,6 +403,9 @@
398
403
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
399
404
  left: var(--fileMenuWidth);
400
405
  }
406
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
407
+ padding-right: 30px;
408
+ }
401
409
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
402
410
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
403
411
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -409,6 +417,9 @@
409
417
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
410
418
  right: var(--fileMenuWidth);
411
419
  }
420
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
421
+ padding-left: 30px;
422
+ }
412
423
 
413
424
  .e-ribbon.e-rbn,
414
425
  .e-ribbon-group-overflow-ddb {
@@ -630,6 +641,7 @@
630
641
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
631
642
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
632
643
  border: 1px solid transparent;
644
+ border-radius: unset;
633
645
  }
634
646
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
635
647
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -748,7 +760,8 @@
748
760
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
749
761
  display: none;
750
762
  }
751
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
763
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
764
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
752
765
  margin: 7px 8px;
753
766
  }
754
767
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -772,22 +785,24 @@
772
785
  -ms-flex-pack: start;
773
786
  justify-content: flex-start;
774
787
  }
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
788
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
781
789
  padding: 7px 8px;
782
790
  font-weight: 400;
783
791
  line-height: 22px;
784
792
  }
785
793
 
794
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
795
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
796
+ transform: rotate(-90deg);
797
+ padding: 8px;
798
+ margin: 0 0 0 auto;
799
+ }
800
+
786
801
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
787
802
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
788
803
  transform: rotate(90deg);
789
- margin-right: auto;
790
- margin-left: unset;
804
+ padding: 8px;
805
+ margin: 0 auto 0 0;
791
806
  }
792
807
 
793
808
  .e-ribbon-menu {
@@ -940,6 +955,12 @@
940
955
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
941
956
  height: auto;
942
957
  }
958
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
959
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
960
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
961
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
962
+ margin-bottom: 0;
963
+ }
943
964
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
944
965
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
945
966
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1154,7 +1175,9 @@
1154
1175
  }
1155
1176
 
1156
1177
  .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-input-group {
1178
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1179
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1180
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1158
1181
  margin: 7px 8px;
1159
1182
  }
1160
1183
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1162,6 +1185,18 @@
1162
1185
  margin: 8px;
1163
1186
  padding: 0;
1164
1187
  }
1188
+ .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,
1189
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1190
+ .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,
1191
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1192
+ padding: 8px;
1193
+ }
1194
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1195
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1196
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1197
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1198
+ padding: 8px;
1199
+ }
1165
1200
 
1166
1201
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1167
1202
  .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;
@@ -295,6 +292,9 @@
295
292
  height: auto;
296
293
  min-height: auto;
297
294
  }
295
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
296
+ box-shadow: none;
297
+ }
298
298
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
299
299
  padding: 0;
300
300
  }
@@ -304,6 +304,7 @@
304
304
  min-width: auto;
305
305
  width: auto;
306
306
  border-style: solid;
307
+ transform: none;
307
308
  border-width: 1px;
308
309
  border-radius: unset;
309
310
  z-index: 3;
@@ -314,6 +315,7 @@
314
315
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
315
316
  font-size: 16px;
316
317
  height: auto;
318
+ transform: none;
317
319
  line-height: 16px;
318
320
  padding: 0 4px;
319
321
  width: auto;
@@ -382,6 +384,9 @@
382
384
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
383
385
  overflow-y: hidden;
384
386
  }
387
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
388
+ margin-bottom: 0;
389
+ }
385
390
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
386
391
  padding-top: 2px;
387
392
  height: auto;
@@ -431,6 +436,9 @@
431
436
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
432
437
  left: var(--fileMenuWidth);
433
438
  }
439
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
440
+ padding-right: 30px;
441
+ }
434
442
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
435
443
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
436
444
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -442,6 +450,9 @@
442
450
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
443
451
  right: var(--fileMenuWidth);
444
452
  }
453
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
454
+ padding-left: 30px;
455
+ }
445
456
 
446
457
  .e-ribbon.e-rbn,
447
458
  .e-ribbon-group-overflow-ddb {
@@ -663,6 +674,7 @@
663
674
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
664
675
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
665
676
  border: 1px solid transparent;
677
+ border-radius: unset;
666
678
  }
667
679
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
668
680
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -781,7 +793,8 @@
781
793
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
782
794
  display: none;
783
795
  }
784
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
796
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
797
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
785
798
  margin: 3px 8px;
786
799
  }
787
800
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -805,22 +818,24 @@
805
818
  -ms-flex-pack: start;
806
819
  justify-content: flex-start;
807
820
  }
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
821
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
814
822
  padding: 3px 8px;
815
823
  font-weight: 600;
816
824
  line-height: 18px;
817
825
  }
818
826
 
827
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
828
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
829
+ transform: rotate(-90deg);
830
+ padding: 8px;
831
+ margin: 0 0 0 auto;
832
+ }
833
+
819
834
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
820
835
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
821
836
  transform: rotate(90deg);
822
- margin-right: auto;
823
- margin-left: unset;
837
+ padding: 8px;
838
+ margin: 0 auto 0 0;
824
839
  }
825
840
 
826
841
  .e-ribbon-menu {
@@ -973,6 +988,12 @@
973
988
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
974
989
  height: auto;
975
990
  }
991
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
992
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
993
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
994
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
995
+ margin-bottom: 0;
996
+ }
976
997
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
977
998
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
978
999
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1187,7 +1208,9 @@
1187
1208
  }
1188
1209
 
1189
1210
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1190
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1211
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1212
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1213
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1191
1214
  margin: 3px 8px;
1192
1215
  }
1193
1216
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1195,6 +1218,18 @@
1195
1218
  margin: 8px;
1196
1219
  padding: 0;
1197
1220
  }
1221
+ .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,
1222
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1223
+ .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,
1224
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1225
+ padding: 8px;
1226
+ }
1227
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1228
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1229
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1230
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1231
+ padding: 8px;
1232
+ }
1198
1233
 
1199
1234
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1200
1235
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
@@ -188,9 +188,6 @@
188
188
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
189
189
  display: none;
190
190
  }
191
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
192
- width: fit-content;
193
- }
194
191
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
195
192
  position: absolute;
196
193
  line-height: 22px;
@@ -274,6 +271,9 @@
274
271
  height: auto;
275
272
  min-height: auto;
276
273
  }
274
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
275
+ box-shadow: none;
276
+ }
277
277
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
278
278
  padding: 0;
279
279
  }
@@ -283,6 +283,7 @@
283
283
  min-width: auto;
284
284
  width: auto;
285
285
  border-style: solid;
286
+ transform: none;
286
287
  border-width: 1px;
287
288
  border-radius: 2px;
288
289
  z-index: 3;
@@ -293,6 +294,7 @@
293
294
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
294
295
  font-size: 14px;
295
296
  height: auto;
297
+ transform: none;
296
298
  line-height: 14px;
297
299
  padding: 0 5px;
298
300
  width: auto;
@@ -361,6 +363,9 @@
361
363
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
362
364
  overflow-y: hidden;
363
365
  }
366
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
367
+ margin-bottom: 0;
368
+ }
364
369
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
365
370
  padding-top: 1px;
366
371
  height: auto;
@@ -410,6 +415,9 @@
410
415
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
411
416
  left: var(--fileMenuWidth);
412
417
  }
418
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
419
+ padding-right: 30px;
420
+ }
413
421
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
414
422
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
415
423
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -421,6 +429,9 @@
421
429
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
422
430
  right: var(--fileMenuWidth);
423
431
  }
432
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
433
+ padding-left: 30px;
434
+ }
424
435
 
425
436
  .e-ribbon.e-rbn,
426
437
  .e-ribbon-group-overflow-ddb {
@@ -642,6 +653,7 @@
642
653
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
643
654
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
644
655
  border: 1px solid transparent;
656
+ border-radius: 4px;
645
657
  }
646
658
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
647
659
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -760,7 +772,8 @@
760
772
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
761
773
  display: none;
762
774
  }
763
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
775
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
776
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
764
777
  margin: 3px 5px;
765
778
  }
766
779
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -784,22 +797,24 @@
784
797
  -ms-flex-pack: start;
785
798
  justify-content: flex-start;
786
799
  }
787
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
788
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
789
- transform: rotate(-90deg);
790
- margin-left: auto;
791
- }
792
800
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
793
801
  padding: 3px 5px;
794
802
  font-weight: 600;
795
803
  line-height: 18px;
796
804
  }
797
805
 
806
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
807
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
808
+ transform: rotate(-90deg);
809
+ padding: 5px;
810
+ margin: 0 0 0 auto;
811
+ }
812
+
798
813
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
799
814
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
800
815
  transform: rotate(90deg);
801
- margin-right: auto;
802
- margin-left: unset;
816
+ padding: 5px;
817
+ margin: 0 auto 0 0;
803
818
  }
804
819
 
805
820
  .e-ribbon-menu {
@@ -952,6 +967,12 @@
952
967
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
953
968
  height: auto;
954
969
  }
970
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
971
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
972
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
973
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
974
+ margin-bottom: 0;
975
+ }
955
976
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
956
977
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
957
978
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1166,7 +1187,9 @@
1166
1187
  }
1167
1188
 
1168
1189
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1169
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1190
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1191
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1192
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1170
1193
  margin: 3px 7px;
1171
1194
  }
1172
1195
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1174,6 +1197,18 @@
1174
1197
  margin: 7px;
1175
1198
  padding: 0;
1176
1199
  }
1200
+ .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,
1201
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1202
+ .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,
1203
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1204
+ padding: 7px;
1205
+ }
1206
+ .e-bigger .e-ribbon-group-overflow-ddb.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.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1208
+ .e-bigger.e-ribbon-group-overflow-ddb.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.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1210
+ padding: 7px;
1211
+ }
1177
1212
 
1178
1213
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1179
1214
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
@@ -188,9 +188,6 @@
188
188
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
189
189
  display: none;
190
190
  }
191
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
192
- width: fit-content;
193
- }
194
191
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
195
192
  position: absolute;
196
193
  line-height: 22px;
@@ -274,6 +271,9 @@
274
271
  height: auto;
275
272
  min-height: auto;
276
273
  }
274
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
275
+ box-shadow: none;
276
+ }
277
277
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
278
278
  padding: 0;
279
279
  }
@@ -283,6 +283,7 @@
283
283
  min-width: auto;
284
284
  width: auto;
285
285
  border-style: solid;
286
+ transform: none;
286
287
  border-width: 1px;
287
288
  border-radius: 2px;
288
289
  z-index: 3;
@@ -293,6 +294,7 @@
293
294
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
294
295
  font-size: 14px;
295
296
  height: auto;
297
+ transform: none;
296
298
  line-height: 14px;
297
299
  padding: 0 5px;
298
300
  width: auto;
@@ -361,6 +363,9 @@
361
363
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
362
364
  overflow-y: hidden;
363
365
  }
366
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
367
+ margin-bottom: 0;
368
+ }
364
369
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
365
370
  padding-top: 1px;
366
371
  height: auto;
@@ -410,6 +415,9 @@
410
415
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
411
416
  left: var(--fileMenuWidth);
412
417
  }
418
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
419
+ padding-right: 30px;
420
+ }
413
421
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
414
422
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
415
423
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -421,6 +429,9 @@
421
429
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
422
430
  right: var(--fileMenuWidth);
423
431
  }
432
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
433
+ padding-left: 30px;
434
+ }
424
435
 
425
436
  .e-ribbon.e-rbn,
426
437
  .e-ribbon-group-overflow-ddb {
@@ -642,6 +653,7 @@
642
653
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
643
654
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
644
655
  border: 1px solid transparent;
656
+ border-radius: 4px;
645
657
  }
646
658
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
647
659
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -760,7 +772,8 @@
760
772
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
761
773
  display: none;
762
774
  }
763
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
775
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
776
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
764
777
  margin: 3px 5px;
765
778
  }
766
779
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -784,22 +797,24 @@
784
797
  -ms-flex-pack: start;
785
798
  justify-content: flex-start;
786
799
  }
787
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
788
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
789
- transform: rotate(-90deg);
790
- margin-left: auto;
791
- }
792
800
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
793
801
  padding: 3px 5px;
794
802
  font-weight: 600;
795
803
  line-height: 18px;
796
804
  }
797
805
 
806
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
807
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
808
+ transform: rotate(-90deg);
809
+ padding: 5px;
810
+ margin: 0 0 0 auto;
811
+ }
812
+
798
813
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
799
814
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
800
815
  transform: rotate(90deg);
801
- margin-right: auto;
802
- margin-left: unset;
816
+ padding: 5px;
817
+ margin: 0 auto 0 0;
803
818
  }
804
819
 
805
820
  .e-ribbon-menu {
@@ -952,6 +967,12 @@
952
967
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
953
968
  height: auto;
954
969
  }
970
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
971
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
972
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
973
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
974
+ margin-bottom: 0;
975
+ }
955
976
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
956
977
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
957
978
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1166,7 +1187,9 @@
1166
1187
  }
1167
1188
 
1168
1189
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1169
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1190
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1191
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1192
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1170
1193
  margin: 3px 7px;
1171
1194
  }
1172
1195
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1174,6 +1197,18 @@
1174
1197
  margin: 7px;
1175
1198
  padding: 0;
1176
1199
  }
1200
+ .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,
1201
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1202
+ .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,
1203
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1204
+ padding: 7px;
1205
+ }
1206
+ .e-bigger .e-ribbon-group-overflow-ddb.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.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1208
+ .e-bigger.e-ribbon-group-overflow-ddb.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.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1210
+ padding: 7px;
1211
+ }
1177
1212
 
1178
1213
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1179
1214
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,