@syncfusion/ej2-angular-ribbon 21.1.37 → 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.
Files changed (32) hide show
  1. package/package.json +8 -8
  2. package/styles/bootstrap-dark.css +47 -12
  3. package/styles/bootstrap.css +47 -12
  4. package/styles/bootstrap4.css +47 -12
  5. package/styles/bootstrap5-dark.css +47 -12
  6. package/styles/bootstrap5.css +47 -12
  7. package/styles/fabric-dark.css +47 -12
  8. package/styles/fabric.css +47 -12
  9. package/styles/fluent-dark.css +47 -12
  10. package/styles/fluent.css +47 -12
  11. package/styles/highcontrast-light.css +47 -12
  12. package/styles/highcontrast.css +47 -12
  13. package/styles/material-dark.css +47 -12
  14. package/styles/material.css +47 -12
  15. package/styles/ribbon/_layout.scss +77 -18
  16. package/styles/ribbon/bootstrap-dark.css +47 -12
  17. package/styles/ribbon/bootstrap.css +47 -12
  18. package/styles/ribbon/bootstrap4.css +47 -12
  19. package/styles/ribbon/bootstrap5-dark.css +47 -12
  20. package/styles/ribbon/bootstrap5.css +47 -12
  21. package/styles/ribbon/fabric-dark.css +47 -12
  22. package/styles/ribbon/fabric.css +47 -12
  23. package/styles/ribbon/fluent-dark.css +47 -12
  24. package/styles/ribbon/fluent.css +47 -12
  25. package/styles/ribbon/highcontrast-light.css +47 -12
  26. package/styles/ribbon/highcontrast.css +47 -12
  27. package/styles/ribbon/material-dark.css +47 -12
  28. package/styles/ribbon/material.css +47 -12
  29. package/styles/ribbon/tailwind-dark.css +47 -12
  30. package/styles/ribbon/tailwind.css +47 -12
  31. package/styles/tailwind-dark.css +47 -12
  32. package/styles/tailwind.css +47 -12
package/styles/ribbon/fabric.css CHANGED
@@ -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;
@@ -190,6 +187,9 @@
190
187
  height: auto;
191
188
  min-height: auto;
192
189
  }
190
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
191
+ box-shadow: none;
192
+ }
193
193
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
194
194
  padding: 0;
195
195
  }
@@ -199,6 +199,7 @@
199
199
  min-width: auto;
200
200
  width: auto;
201
201
  border-style: solid;
202
+ transform: none;
202
203
  border-width: 1px;
203
204
  border-radius: unset;
204
205
  z-index: 3;
@@ -209,6 +210,7 @@
209
210
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
210
211
  font-size: 16px;
211
212
  height: auto;
213
+ transform: none;
212
214
  line-height: 16px;
213
215
  padding: 0 4px;
214
216
  width: auto;
@@ -277,6 +279,9 @@
277
279
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
278
280
  overflow-y: hidden;
279
281
  }
282
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
283
+ margin-bottom: 0;
284
+ }
280
285
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
281
286
  padding-top: 4px;
282
287
  height: auto;
@@ -326,6 +331,9 @@
326
331
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
327
332
  left: var(--fileMenuWidth);
328
333
  }
334
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
335
+ padding-right: 30px;
336
+ }
329
337
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
330
338
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
331
339
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -337,6 +345,9 @@
337
345
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
338
346
  right: var(--fileMenuWidth);
339
347
  }
348
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
349
+ padding-left: 30px;
350
+ }
340
351
 
341
352
  .e-ribbon.e-rbn,
342
353
  .e-ribbon-group-overflow-ddb {
@@ -558,6 +569,7 @@
558
569
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
559
570
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
560
571
  border: 1px solid transparent;
572
+ border-radius: unset;
561
573
  }
562
574
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
563
575
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -676,7 +688,8 @@
676
688
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
677
689
  display: none;
678
690
  }
679
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
691
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
692
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
680
693
  margin: 7px 8px;
681
694
  }
682
695
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -700,22 +713,24 @@
700
713
  -ms-flex-pack: start;
701
714
  justify-content: flex-start;
702
715
  }
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
716
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
709
717
  padding: 6px 8px;
710
718
  font-weight: 600;
711
719
  line-height: 24px;
712
720
  }
713
721
 
722
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
723
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
724
+ transform: rotate(-90deg);
725
+ padding: 8px;
726
+ margin: 0 0 0 auto;
727
+ }
728
+
714
729
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
715
730
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
716
731
  transform: rotate(90deg);
717
- margin-right: auto;
718
- margin-left: unset;
732
+ padding: 8px;
733
+ margin: 0 auto 0 0;
719
734
  }
720
735
 
721
736
  .e-ribbon-menu {
@@ -868,6 +883,12 @@
868
883
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
869
884
  height: auto;
870
885
  }
886
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
887
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
888
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
889
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
890
+ margin-bottom: 0;
891
+ }
871
892
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
872
893
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
873
894
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1082,7 +1103,9 @@
1082
1103
  }
1083
1104
 
1084
1105
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1085
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1106
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1107
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1108
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1086
1109
  margin: 7px 10px;
1087
1110
  }
1088
1111
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1090,6 +1113,18 @@
1090
1113
  margin: 10px;
1091
1114
  padding: 0;
1092
1115
  }
1116
+ .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,
1117
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1118
+ .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,
1119
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1120
+ padding: 10px;
1121
+ }
1122
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1123
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1124
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1125
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1126
+ padding: 10px;
1127
+ }
1093
1128
 
1094
1129
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1095
1130
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/ribbon/fluent-dark.css CHANGED
@@ -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;
@@ -276,6 +273,9 @@
276
273
  height: auto;
277
274
  min-height: auto;
278
275
  }
276
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
277
+ box-shadow: none;
278
+ }
279
279
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
280
280
  padding: 0;
281
281
  }
@@ -285,6 +285,7 @@
285
285
  min-width: auto;
286
286
  width: auto;
287
287
  border-style: solid;
288
+ transform: none;
288
289
  border-width: 1px;
289
290
  border-radius: 2px;
290
291
  z-index: 3;
@@ -295,6 +296,7 @@
295
296
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
296
297
  font-size: 14px;
297
298
  height: auto;
299
+ transform: none;
298
300
  line-height: 14px;
299
301
  padding: 0 5px;
300
302
  width: auto;
@@ -363,6 +365,9 @@
363
365
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
364
366
  overflow-y: hidden;
365
367
  }
368
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
369
+ margin-bottom: 0;
370
+ }
366
371
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
367
372
  padding-top: 1px;
368
373
  height: auto;
@@ -412,6 +417,9 @@
412
417
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
413
418
  left: var(--fileMenuWidth);
414
419
  }
420
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
421
+ padding-right: 30px;
422
+ }
415
423
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
416
424
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
417
425
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -423,6 +431,9 @@
423
431
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
424
432
  right: var(--fileMenuWidth);
425
433
  }
434
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
435
+ padding-left: 30px;
436
+ }
426
437
 
427
438
  .e-ribbon.e-rbn,
428
439
  .e-ribbon-group-overflow-ddb {
@@ -644,6 +655,7 @@
644
655
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
645
656
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
646
657
  border: 1px solid transparent;
658
+ border-radius: 2px;
647
659
  }
648
660
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
649
661
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -762,7 +774,8 @@
762
774
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
763
775
  display: none;
764
776
  }
765
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
777
+ .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-ribbon-template {
766
779
  margin: 3px 5px;
767
780
  }
768
781
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -786,22 +799,24 @@
786
799
  -ms-flex-pack: start;
787
800
  justify-content: flex-start;
788
801
  }
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
802
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
795
803
  padding: 3px 5px;
796
804
  font-weight: 600;
797
805
  line-height: 18px;
798
806
  }
799
807
 
808
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
809
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
810
+ transform: rotate(-90deg);
811
+ padding: 5px;
812
+ margin: 0 0 0 auto;
813
+ }
814
+
800
815
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
801
816
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
802
817
  transform: rotate(90deg);
803
- margin-right: auto;
804
- margin-left: unset;
818
+ padding: 5px;
819
+ margin: 0 auto 0 0;
805
820
  }
806
821
 
807
822
  .e-ribbon-menu {
@@ -954,6 +969,12 @@
954
969
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
955
970
  height: auto;
956
971
  }
972
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
973
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
974
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
975
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
976
+ margin-bottom: 0;
977
+ }
957
978
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
958
979
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
959
980
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1168,7 +1189,9 @@
1168
1189
  }
1169
1190
 
1170
1191
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1171
- .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,
1193
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1194
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1172
1195
  margin: 3px 7px;
1173
1196
  }
1174
1197
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1176,6 +1199,18 @@
1176
1199
  margin: 7px;
1177
1200
  padding: 0;
1178
1201
  }
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
+ .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,
1205
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1206
+ padding: 7px;
1207
+ }
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
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1211
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1212
+ padding: 7px;
1213
+ }
1179
1214
 
1180
1215
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1181
1216
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/ribbon/fluent.css CHANGED
@@ -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;
@@ -276,6 +273,9 @@
276
273
  height: auto;
277
274
  min-height: auto;
278
275
  }
276
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
277
+ box-shadow: none;
278
+ }
279
279
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
280
280
  padding: 0;
281
281
  }
@@ -285,6 +285,7 @@
285
285
  min-width: auto;
286
286
  width: auto;
287
287
  border-style: solid;
288
+ transform: none;
288
289
  border-width: 1px;
289
290
  border-radius: 2px;
290
291
  z-index: 3;
@@ -295,6 +296,7 @@
295
296
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
296
297
  font-size: 14px;
297
298
  height: auto;
299
+ transform: none;
298
300
  line-height: 14px;
299
301
  padding: 0 5px;
300
302
  width: auto;
@@ -363,6 +365,9 @@
363
365
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
364
366
  overflow-y: hidden;
365
367
  }
368
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
369
+ margin-bottom: 0;
370
+ }
366
371
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
367
372
  padding-top: 1px;
368
373
  height: auto;
@@ -412,6 +417,9 @@
412
417
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
413
418
  left: var(--fileMenuWidth);
414
419
  }
420
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
421
+ padding-right: 30px;
422
+ }
415
423
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
416
424
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
417
425
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -423,6 +431,9 @@
423
431
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
424
432
  right: var(--fileMenuWidth);
425
433
  }
434
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
435
+ padding-left: 30px;
436
+ }
426
437
 
427
438
  .e-ribbon.e-rbn,
428
439
  .e-ribbon-group-overflow-ddb {
@@ -644,6 +655,7 @@
644
655
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
645
656
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
646
657
  border: 1px solid transparent;
658
+ border-radius: 2px;
647
659
  }
648
660
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
649
661
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -762,7 +774,8 @@
762
774
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
763
775
  display: none;
764
776
  }
765
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
777
+ .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-ribbon-template {
766
779
  margin: 3px 5px;
767
780
  }
768
781
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -786,22 +799,24 @@
786
799
  -ms-flex-pack: start;
787
800
  justify-content: flex-start;
788
801
  }
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
802
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
795
803
  padding: 3px 5px;
796
804
  font-weight: 600;
797
805
  line-height: 18px;
798
806
  }
799
807
 
808
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
809
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
810
+ transform: rotate(-90deg);
811
+ padding: 5px;
812
+ margin: 0 0 0 auto;
813
+ }
814
+
800
815
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
801
816
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
802
817
  transform: rotate(90deg);
803
- margin-right: auto;
804
- margin-left: unset;
818
+ padding: 5px;
819
+ margin: 0 auto 0 0;
805
820
  }
806
821
 
807
822
  .e-ribbon-menu {
@@ -954,6 +969,12 @@
954
969
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
955
970
  height: auto;
956
971
  }
972
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
973
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
974
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
975
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
976
+ margin-bottom: 0;
977
+ }
957
978
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
958
979
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
959
980
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1168,7 +1189,9 @@
1168
1189
  }
1169
1190
 
1170
1191
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1171
- .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,
1193
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1194
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1172
1195
  margin: 3px 7px;
1173
1196
  }
1174
1197
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1176,6 +1199,18 @@
1176
1199
  margin: 7px;
1177
1200
  padding: 0;
1178
1201
  }
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
+ .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,
1205
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1206
+ padding: 7px;
1207
+ }
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
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1211
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1212
+ padding: 7px;
1213
+ }
1179
1214
 
1180
1215
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1181
1216
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/ribbon/highcontrast-light.css CHANGED
@@ -113,9 +113,6 @@
113
113
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
114
114
  display: none;
115
115
  }
116
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
117
- width: fit-content;
118
- }
119
116
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
120
117
  position: absolute;
121
118
  line-height: 22px;
@@ -199,6 +196,9 @@
199
196
  height: auto;
200
197
  min-height: auto;
201
198
  }
199
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
200
+ box-shadow: none;
201
+ }
202
202
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
203
203
  padding: 0;
204
204
  }
@@ -208,6 +208,7 @@
208
208
  min-width: auto;
209
209
  width: auto;
210
210
  border-style: solid;
211
+ transform: none;
211
212
  border-width: 1px;
212
213
  border-radius: unset;
213
214
  z-index: 3;
@@ -218,6 +219,7 @@
218
219
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
219
220
  font-size: 16px;
220
221
  height: auto;
222
+ transform: none;
221
223
  line-height: 16px;
222
224
  padding: 0 4px;
223
225
  width: auto;
@@ -286,6 +288,9 @@
286
288
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
287
289
  overflow-y: hidden;
288
290
  }
291
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
292
+ margin-bottom: 0;
293
+ }
289
294
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
290
295
  padding-top: 5px;
291
296
  height: auto;
@@ -335,6 +340,9 @@
335
340
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
336
341
  left: var(--fileMenuWidth);
337
342
  }
343
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
344
+ padding-right: 30px;
345
+ }
338
346
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
339
347
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
340
348
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -346,6 +354,9 @@
346
354
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
347
355
  right: var(--fileMenuWidth);
348
356
  }
357
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
358
+ padding-left: 30px;
359
+ }
349
360
 
350
361
  .e-ribbon.e-rbn,
351
362
  .e-ribbon-group-overflow-ddb {
@@ -567,6 +578,7 @@
567
578
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
568
579
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
569
580
  border: 1px solid transparent;
581
+ border-radius: unset;
570
582
  }
571
583
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
572
584
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -685,7 +697,8 @@
685
697
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
686
698
  display: none;
687
699
  }
688
- .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-input-group,
701
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
689
702
  margin: 7px 10px;
690
703
  }
691
704
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -709,22 +722,24 @@
709
722
  -ms-flex-pack: start;
710
723
  justify-content: flex-start;
711
724
  }
712
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
713
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
714
- transform: rotate(-90deg);
715
- margin-left: auto;
716
- }
717
725
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
718
726
  padding: 6px 10px;
719
727
  font-weight: 600;
720
728
  line-height: 16px;
721
729
  }
722
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: 10px;
735
+ margin: 0 0 0 auto;
736
+ }
737
+
723
738
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
724
739
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
725
740
  transform: rotate(90deg);
726
- margin-right: auto;
727
- margin-left: unset;
741
+ padding: 10px;
742
+ margin: 0 auto 0 0;
728
743
  }
729
744
 
730
745
  .e-ribbon-menu {
@@ -877,6 +892,12 @@
877
892
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
878
893
  height: auto;
879
894
  }
895
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
896
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
897
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
898
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
899
+ margin-bottom: 0;
900
+ }
880
901
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
881
902
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
882
903
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1091,7 +1112,9 @@
1091
1112
  }
1092
1113
 
1093
1114
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1094
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1115
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1116
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1117
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1095
1118
  margin: 7px 10px;
1096
1119
  }
1097
1120
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1099,6 +1122,18 @@
1099
1122
  margin: 10px;
1100
1123
  padding: 0;
1101
1124
  }
1125
+ .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,
1126
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1127
+ .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,
1128
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1129
+ padding: 10px;
1130
+ }
1131
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1132
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1133
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1134
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1135
+ padding: 10px;
1136
+ }
1102
1137
 
1103
1138
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1104
1139
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,