@syncfusion/ej2-angular-ribbon 21.2.3 → 22.1.34

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 +13 -52
  3. package/styles/bootstrap.css +13 -52
  4. package/styles/bootstrap4.css +13 -52
  5. package/styles/bootstrap5-dark.css +13 -52
  6. package/styles/bootstrap5.css +13 -52
  7. package/styles/fabric-dark.css +13 -52
  8. package/styles/fabric.css +13 -52
  9. package/styles/fluent-dark.css +13 -52
  10. package/styles/fluent.css +13 -52
  11. package/styles/highcontrast-light.css +13 -52
  12. package/styles/highcontrast.css +13 -52
  13. package/styles/material-dark.css +13 -52
  14. package/styles/material.css +13 -52
  15. package/styles/ribbon/_layout.scss +19 -82
  16. package/styles/ribbon/bootstrap-dark.css +13 -52
  17. package/styles/ribbon/bootstrap.css +13 -52
  18. package/styles/ribbon/bootstrap4.css +13 -52
  19. package/styles/ribbon/bootstrap5-dark.css +13 -52
  20. package/styles/ribbon/bootstrap5.css +13 -52
  21. package/styles/ribbon/fabric-dark.css +13 -52
  22. package/styles/ribbon/fabric.css +13 -52
  23. package/styles/ribbon/fluent-dark.css +13 -52
  24. package/styles/ribbon/fluent.css +13 -52
  25. package/styles/ribbon/highcontrast-light.css +13 -52
  26. package/styles/ribbon/highcontrast.css +13 -52
  27. package/styles/ribbon/material-dark.css +13 -52
  28. package/styles/ribbon/material.css +13 -52
  29. package/styles/ribbon/tailwind-dark.css +13 -52
  30. package/styles/ribbon/tailwind.css +13 -52
  31. package/styles/tailwind-dark.css +13 -52
  32. package/styles/tailwind.css +13 -52
package/styles/ribbon/bootstrap5.css CHANGED
@@ -214,6 +214,9 @@
214
214
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
215
215
  display: none;
216
216
  }
217
+ .e-ribbon.e-rbn .e-ribbon-tab .e-item {
218
+ width: fit-content;
219
+ }
217
220
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
218
221
  position: absolute;
219
222
  line-height: 22px;
@@ -297,9 +300,6 @@
297
300
  height: auto;
298
301
  min-height: auto;
299
302
  }
300
- .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
301
- box-shadow: none;
302
- }
303
303
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
304
304
  padding: 0;
305
305
  }
@@ -309,10 +309,9 @@
309
309
  min-width: auto;
310
310
  width: auto;
311
311
  border-style: solid;
312
- transform: none;
313
312
  border-width: 1px;
314
313
  border-radius: 2px;
315
- z-index: 3;
314
+ z-index: 2;
316
315
  }
317
316
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
318
317
  display: none;
@@ -320,7 +319,6 @@
320
319
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
321
320
  font-size: 14px;
322
321
  height: auto;
323
- transform: none;
324
322
  line-height: 14px;
325
323
  padding: 0 5px;
326
324
  width: auto;
@@ -389,9 +387,6 @@
389
387
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
390
388
  overflow-y: hidden;
391
389
  }
392
- .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
393
- margin-bottom: 0;
394
- }
395
390
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
396
391
  padding-top: 1px;
397
392
  height: auto;
@@ -441,9 +436,6 @@
441
436
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
442
437
  left: var(--fileMenuWidth);
443
438
  }
444
- .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
445
- padding-right: 30px;
446
- }
447
439
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
448
440
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
449
441
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -455,9 +447,6 @@
455
447
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
456
448
  right: var(--fileMenuWidth);
457
449
  }
458
- .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
459
- padding-left: 30px;
460
- }
461
450
 
462
451
  .e-ribbon.e-rbn,
463
452
  .e-ribbon-group-overflow-ddb {
@@ -679,7 +668,6 @@
679
668
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
680
669
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
681
670
  border: 1px solid transparent;
682
- border-radius: 4px;
683
671
  }
684
672
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
685
673
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -798,8 +786,7 @@
798
786
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
799
787
  display: none;
800
788
  }
801
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
802
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
789
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
803
790
  margin: 3px 5px;
804
791
  }
805
792
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -823,24 +810,22 @@
823
810
  -ms-flex-pack: start;
824
811
  justify-content: flex-start;
825
812
  }
813
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
814
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
815
+ transform: rotate(-90deg);
816
+ margin-left: auto;
817
+ }
826
818
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
827
819
  padding: 3px 5px;
828
820
  font-weight: 500;
829
821
  line-height: 18px;
830
822
  }
831
823
 
832
- .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
833
- .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
834
- transform: rotate(-90deg);
835
- padding: 5px;
836
- margin: 0 0 0 auto;
837
- }
838
-
839
824
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
840
825
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
841
826
  transform: rotate(90deg);
842
- padding: 5px;
843
- margin: 0 auto 0 0;
827
+ margin-right: auto;
828
+ margin-left: unset;
844
829
  }
845
830
 
846
831
  .e-ribbon-menu {
@@ -898,10 +883,6 @@
898
883
  padding-right: 16px;
899
884
  height: 48px;
900
885
  }
901
- .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
902
- .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
903
- min-height: auto;
904
- }
905
886
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
906
887
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
907
888
  height: 48px;
@@ -993,12 +974,6 @@
993
974
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
994
975
  height: auto;
995
976
  }
996
- .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
997
- .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
998
- .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
999
- .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
1000
- margin-bottom: 0;
1001
- }
1002
977
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
1003
978
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
1004
979
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1213,9 +1188,7 @@
1213
1188
  }
1214
1189
 
1215
1190
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1216
- .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1217
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1218
- .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 {
1219
1192
  margin: 3px 7px;
1220
1193
  }
1221
1194
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1223,18 +1196,6 @@
1223
1196
  margin: 7px;
1224
1197
  padding: 0;
1225
1198
  }
1226
- .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,
1227
- .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1228
- .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,
1229
- .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1230
- padding: 7px;
1231
- }
1232
- .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1233
- .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1234
- .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1235
- .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1236
- padding: 7px;
1237
- }
1238
1199
 
1239
1200
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1240
1201
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/ribbon/fabric-dark.css CHANGED
@@ -106,6 +106,9 @@
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
+ }
109
112
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
110
113
  position: absolute;
111
114
  line-height: 22px;
@@ -189,9 +192,6 @@
189
192
  height: auto;
190
193
  min-height: auto;
191
194
  }
192
- .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
193
- box-shadow: none;
194
- }
195
195
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
196
196
  padding: 0;
197
197
  }
@@ -201,10 +201,9 @@
201
201
  min-width: auto;
202
202
  width: auto;
203
203
  border-style: solid;
204
- transform: none;
205
204
  border-width: 1px;
206
205
  border-radius: unset;
207
- z-index: 3;
206
+ z-index: 2;
208
207
  }
209
208
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
210
209
  display: none;
@@ -212,7 +211,6 @@
212
211
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
213
212
  font-size: 16px;
214
213
  height: auto;
215
- transform: none;
216
214
  line-height: 16px;
217
215
  padding: 0 4px;
218
216
  width: auto;
@@ -281,9 +279,6 @@
281
279
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
282
280
  overflow-y: hidden;
283
281
  }
284
- .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
285
- margin-bottom: 0;
286
- }
287
282
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
288
283
  padding-top: 2px;
289
284
  height: auto;
@@ -333,9 +328,6 @@
333
328
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
334
329
  left: var(--fileMenuWidth);
335
330
  }
336
- .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
337
- padding-right: 30px;
338
- }
339
331
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
340
332
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
341
333
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -347,9 +339,6 @@
347
339
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
348
340
  right: var(--fileMenuWidth);
349
341
  }
350
- .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
351
- padding-left: 30px;
352
- }
353
342
 
354
343
  .e-ribbon.e-rbn,
355
344
  .e-ribbon-group-overflow-ddb {
@@ -571,7 +560,6 @@
571
560
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
572
561
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
573
562
  border: 1px solid transparent;
574
- border-radius: unset;
575
563
  }
576
564
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
577
565
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -690,8 +678,7 @@
690
678
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
691
679
  display: none;
692
680
  }
693
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
694
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
681
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
695
682
  margin: 7px 8px;
696
683
  }
697
684
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -715,24 +702,22 @@
715
702
  -ms-flex-pack: start;
716
703
  justify-content: flex-start;
717
704
  }
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
+ }
718
710
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
719
711
  padding: 6px 8px;
720
712
  font-weight: 600;
721
713
  line-height: 24px;
722
714
  }
723
715
 
724
- .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
725
- .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
726
- transform: rotate(-90deg);
727
- padding: 8px;
728
- margin: 0 0 0 auto;
729
- }
730
-
731
716
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
732
717
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
733
718
  transform: rotate(90deg);
734
- padding: 8px;
735
- margin: 0 auto 0 0;
719
+ margin-right: auto;
720
+ margin-left: unset;
736
721
  }
737
722
 
738
723
  .e-ribbon-menu {
@@ -790,10 +775,6 @@
790
775
  padding-right: 16px;
791
776
  height: 50px;
792
777
  }
793
- .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
794
- .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
795
- min-height: auto;
796
- }
797
778
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
798
779
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
799
780
  height: 50px;
@@ -885,12 +866,6 @@
885
866
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
886
867
  height: auto;
887
868
  }
888
- .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
889
- .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
890
- .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
891
- .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
892
- margin-bottom: 0;
893
- }
894
869
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
895
870
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
896
871
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1105,9 +1080,7 @@
1105
1080
  }
1106
1081
 
1107
1082
  .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,
1109
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1110
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1083
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1111
1084
  margin: 7px 10px;
1112
1085
  }
1113
1086
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1115,18 +1088,6 @@
1115
1088
  margin: 10px;
1116
1089
  padding: 0;
1117
1090
  }
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
- .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,
1121
- .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1122
- padding: 10px;
1123
- }
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
- .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1127
- .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1128
- padding: 10px;
1129
- }
1130
1091
 
1131
1092
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1132
1093
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/ribbon/fabric.css CHANGED
@@ -104,6 +104,9 @@
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
+ }
107
110
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
108
111
  position: absolute;
109
112
  line-height: 22px;
@@ -187,9 +190,6 @@
187
190
  height: auto;
188
191
  min-height: auto;
189
192
  }
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,10 +199,9 @@
199
199
  min-width: auto;
200
200
  width: auto;
201
201
  border-style: solid;
202
- transform: none;
203
202
  border-width: 1px;
204
203
  border-radius: unset;
205
- z-index: 3;
204
+ z-index: 2;
206
205
  }
207
206
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
208
207
  display: none;
@@ -210,7 +209,6 @@
210
209
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
211
210
  font-size: 16px;
212
211
  height: auto;
213
- transform: none;
214
212
  line-height: 16px;
215
213
  padding: 0 4px;
216
214
  width: auto;
@@ -279,9 +277,6 @@
279
277
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
280
278
  overflow-y: hidden;
281
279
  }
282
- .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
283
- margin-bottom: 0;
284
- }
285
280
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
286
281
  padding-top: 4px;
287
282
  height: auto;
@@ -331,9 +326,6 @@
331
326
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
332
327
  left: var(--fileMenuWidth);
333
328
  }
334
- .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
335
- padding-right: 30px;
336
- }
337
329
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
338
330
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
339
331
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -345,9 +337,6 @@
345
337
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
346
338
  right: var(--fileMenuWidth);
347
339
  }
348
- .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
349
- padding-left: 30px;
350
- }
351
340
 
352
341
  .e-ribbon.e-rbn,
353
342
  .e-ribbon-group-overflow-ddb {
@@ -569,7 +558,6 @@
569
558
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
570
559
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
571
560
  border: 1px solid transparent;
572
- border-radius: unset;
573
561
  }
574
562
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
575
563
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -688,8 +676,7 @@
688
676
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
689
677
  display: none;
690
678
  }
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 {
679
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
693
680
  margin: 7px 8px;
694
681
  }
695
682
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -713,24 +700,22 @@
713
700
  -ms-flex-pack: start;
714
701
  justify-content: flex-start;
715
702
  }
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
+ }
716
708
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
717
709
  padding: 6px 8px;
718
710
  font-weight: 600;
719
711
  line-height: 24px;
720
712
  }
721
713
 
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
-
729
714
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
730
715
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
731
716
  transform: rotate(90deg);
732
- padding: 8px;
733
- margin: 0 auto 0 0;
717
+ margin-right: auto;
718
+ margin-left: unset;
734
719
  }
735
720
 
736
721
  .e-ribbon-menu {
@@ -788,10 +773,6 @@
788
773
  padding-right: 16px;
789
774
  height: 50px;
790
775
  }
791
- .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
792
- .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
793
- min-height: auto;
794
- }
795
776
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
796
777
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
797
778
  height: 50px;
@@ -883,12 +864,6 @@
883
864
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
884
865
  height: auto;
885
866
  }
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
- }
892
867
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
893
868
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
894
869
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1103,9 +1078,7 @@
1103
1078
  }
1104
1079
 
1105
1080
  .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 {
1081
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1109
1082
  margin: 7px 10px;
1110
1083
  }
1111
1084
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1113,18 +1086,6 @@
1113
1086
  margin: 10px;
1114
1087
  padding: 0;
1115
1088
  }
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
- }
1128
1089
 
1129
1090
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1130
1091
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/ribbon/fluent-dark.css CHANGED
@@ -190,6 +190,9 @@
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
+ }
193
196
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
194
197
  position: absolute;
195
198
  line-height: 22px;
@@ -273,9 +276,6 @@
273
276
  height: auto;
274
277
  min-height: auto;
275
278
  }
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,10 +285,9 @@
285
285
  min-width: auto;
286
286
  width: auto;
287
287
  border-style: solid;
288
- transform: none;
289
288
  border-width: 1px;
290
289
  border-radius: 2px;
291
- z-index: 3;
290
+ z-index: 2;
292
291
  }
293
292
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
294
293
  display: none;
@@ -296,7 +295,6 @@
296
295
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
297
296
  font-size: 14px;
298
297
  height: auto;
299
- transform: none;
300
298
  line-height: 14px;
301
299
  padding: 0 5px;
302
300
  width: auto;
@@ -365,9 +363,6 @@
365
363
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
366
364
  overflow-y: hidden;
367
365
  }
368
- .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
369
- margin-bottom: 0;
370
- }
371
366
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
372
367
  padding-top: 1px;
373
368
  height: auto;
@@ -417,9 +412,6 @@
417
412
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
418
413
  left: var(--fileMenuWidth);
419
414
  }
420
- .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
421
- padding-right: 30px;
422
- }
423
415
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
424
416
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
425
417
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -431,9 +423,6 @@
431
423
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
432
424
  right: var(--fileMenuWidth);
433
425
  }
434
- .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
435
- padding-left: 30px;
436
- }
437
426
 
438
427
  .e-ribbon.e-rbn,
439
428
  .e-ribbon-group-overflow-ddb {
@@ -655,7 +644,6 @@
655
644
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
656
645
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
657
646
  border: 1px solid transparent;
658
- border-radius: 2px;
659
647
  }
660
648
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
661
649
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -774,8 +762,7 @@
774
762
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
775
763
  display: none;
776
764
  }
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 {
765
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
779
766
  margin: 3px 5px;
780
767
  }
781
768
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -799,24 +786,22 @@
799
786
  -ms-flex-pack: start;
800
787
  justify-content: flex-start;
801
788
  }
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
+ }
802
794
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
803
795
  padding: 3px 5px;
804
796
  font-weight: 600;
805
797
  line-height: 18px;
806
798
  }
807
799
 
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
-
815
800
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
816
801
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
817
802
  transform: rotate(90deg);
818
- padding: 5px;
819
- margin: 0 auto 0 0;
803
+ margin-right: auto;
804
+ margin-left: unset;
820
805
  }
821
806
 
822
807
  .e-ribbon-menu {
@@ -874,10 +859,6 @@
874
859
  padding-right: 16px;
875
860
  height: 48px;
876
861
  }
877
- .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
878
- .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
879
- min-height: auto;
880
- }
881
862
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
882
863
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
883
864
  height: 48px;
@@ -969,12 +950,6 @@
969
950
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
970
951
  height: auto;
971
952
  }
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
- }
978
953
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
979
954
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
980
955
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1189,9 +1164,7 @@
1189
1164
  }
1190
1165
 
1191
1166
  .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 {
1167
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1195
1168
  margin: 3px 7px;
1196
1169
  }
1197
1170
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1199,18 +1172,6 @@
1199
1172
  margin: 7px;
1200
1173
  padding: 0;
1201
1174
  }
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
- }
1214
1175
 
1215
1176
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1216
1177
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,