@syncfusion/ej2-react-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.
Files changed (39) hide show
  1. package/CHANGELOG.md +3 -2
  2. package/dist/ej2-react-ribbon.min.js +2 -2
  3. package/dist/ej2-react-ribbon.umd.min.js +2 -2
  4. package/dist/ej2-react-ribbon.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-react-ribbon.es2015.js +1 -0
  6. package/dist/es6/ej2-react-ribbon.es2015.js.map +1 -1
  7. package/package.json +8 -8
  8. package/src/ribbon/ribbon.component.d.ts +1 -0
  9. package/src/ribbon/ribbon.component.js +1 -0
  10. package/styles/bootstrap-dark.css +47 -12
  11. package/styles/bootstrap.css +47 -12
  12. package/styles/bootstrap4.css +47 -12
  13. package/styles/bootstrap5-dark.css +47 -12
  14. package/styles/bootstrap5.css +47 -12
  15. package/styles/fabric-dark.css +47 -12
  16. package/styles/fabric.css +47 -12
  17. package/styles/fluent-dark.css +47 -12
  18. package/styles/fluent.css +47 -12
  19. package/styles/highcontrast-light.css +47 -12
  20. package/styles/highcontrast.css +47 -12
  21. package/styles/material-dark.css +47 -12
  22. package/styles/material.css +47 -12
  23. package/styles/ribbon/bootstrap-dark.css +47 -12
  24. package/styles/ribbon/bootstrap.css +47 -12
  25. package/styles/ribbon/bootstrap4.css +47 -12
  26. package/styles/ribbon/bootstrap5-dark.css +47 -12
  27. package/styles/ribbon/bootstrap5.css +47 -12
  28. package/styles/ribbon/fabric-dark.css +47 -12
  29. package/styles/ribbon/fabric.css +47 -12
  30. package/styles/ribbon/fluent-dark.css +47 -12
  31. package/styles/ribbon/fluent.css +47 -12
  32. package/styles/ribbon/highcontrast-light.css +47 -12
  33. package/styles/ribbon/highcontrast.css +47 -12
  34. package/styles/ribbon/material-dark.css +47 -12
  35. package/styles/ribbon/material.css +47 -12
  36. package/styles/ribbon/tailwind-dark.css +47 -12
  37. package/styles/ribbon/tailwind.css +47 -12
  38. package/styles/tailwind-dark.css +47 -12
  39. package/styles/tailwind.css +47 -12
package/styles/bootstrap4.css CHANGED
@@ -185,9 +185,6 @@
185
185
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
186
186
  display: none;
187
187
  }
188
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
189
- width: fit-content;
190
- }
191
188
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
192
189
  position: absolute;
193
190
  line-height: 22px;
@@ -271,6 +268,9 @@
271
268
  height: auto;
272
269
  min-height: auto;
273
270
  }
271
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
272
+ box-shadow: none;
273
+ }
274
274
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
275
275
  padding: 0;
276
276
  }
@@ -280,6 +280,7 @@
280
280
  min-width: auto;
281
281
  width: auto;
282
282
  border-style: solid;
283
+ transform: none;
283
284
  border-width: 1px;
284
285
  border-radius: 2px;
285
286
  z-index: 3;
@@ -290,6 +291,7 @@
290
291
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
291
292
  font-size: 20px;
292
293
  height: auto;
294
+ transform: none;
293
295
  line-height: 20px;
294
296
  padding: 0 2px;
295
297
  width: auto;
@@ -358,6 +360,9 @@
358
360
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
359
361
  overflow-y: hidden;
360
362
  }
363
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
364
+ margin-bottom: 0;
365
+ }
361
366
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
362
367
  padding-top: 2px;
363
368
  height: auto;
@@ -407,6 +412,9 @@
407
412
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
408
413
  left: var(--fileMenuWidth);
409
414
  }
415
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
416
+ padding-right: 30px;
417
+ }
410
418
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
411
419
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
412
420
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -418,6 +426,9 @@
418
426
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
419
427
  right: var(--fileMenuWidth);
420
428
  }
429
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
430
+ padding-left: 30px;
431
+ }
421
432
 
422
433
  .e-ribbon.e-rbn,
423
434
  .e-ribbon-group-overflow-ddb {
@@ -639,6 +650,7 @@
639
650
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
640
651
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
641
652
  border: 1px solid transparent;
653
+ border-radius: 4px;
642
654
  }
643
655
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
644
656
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -757,7 +769,8 @@
757
769
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
758
770
  display: none;
759
771
  }
760
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
772
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
773
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
761
774
  margin: 3px 8px;
762
775
  }
763
776
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -781,22 +794,24 @@
781
794
  -ms-flex-pack: start;
782
795
  justify-content: flex-start;
783
796
  }
784
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
785
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
786
- transform: rotate(-90deg);
787
- margin-left: auto;
788
- }
789
797
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
790
798
  padding: 3px 8px;
791
799
  font-weight: 500;
792
800
  line-height: 18px;
793
801
  }
794
802
 
803
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
804
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
805
+ transform: rotate(-90deg);
806
+ padding: 8px;
807
+ margin: 0 0 0 auto;
808
+ }
809
+
795
810
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
796
811
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
797
812
  transform: rotate(90deg);
798
- margin-right: auto;
799
- margin-left: unset;
813
+ padding: 8px;
814
+ margin: 0 auto 0 0;
800
815
  }
801
816
 
802
817
  .e-ribbon-menu {
@@ -949,6 +964,12 @@
949
964
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
950
965
  height: auto;
951
966
  }
967
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
968
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
969
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
970
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
971
+ margin-bottom: 0;
972
+ }
952
973
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
953
974
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
954
975
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1163,7 +1184,9 @@
1163
1184
  }
1164
1185
 
1165
1186
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1166
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1187
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1188
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1189
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1167
1190
  margin: 3px 9px;
1168
1191
  }
1169
1192
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1171,6 +1194,18 @@
1171
1194
  margin: 9px;
1172
1195
  padding: 0;
1173
1196
  }
1197
+ .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,
1198
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1199
+ .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,
1200
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1201
+ padding: 9px;
1202
+ }
1203
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1204
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1205
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1206
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1207
+ padding: 9px;
1208
+ }
1174
1209
 
1175
1210
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1176
1211
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/bootstrap5-dark.css CHANGED
@@ -214,9 +214,6 @@
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
- }
220
217
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
221
218
  position: absolute;
222
219
  line-height: 22px;
@@ -300,6 +297,9 @@
300
297
  height: auto;
301
298
  min-height: auto;
302
299
  }
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,6 +309,7 @@
309
309
  min-width: auto;
310
310
  width: auto;
311
311
  border-style: solid;
312
+ transform: none;
312
313
  border-width: 1px;
313
314
  border-radius: 2px;
314
315
  z-index: 3;
@@ -319,6 +320,7 @@
319
320
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
320
321
  font-size: 14px;
321
322
  height: auto;
323
+ transform: none;
322
324
  line-height: 14px;
323
325
  padding: 0 5px;
324
326
  width: auto;
@@ -387,6 +389,9 @@
387
389
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
388
390
  overflow-y: hidden;
389
391
  }
392
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
393
+ margin-bottom: 0;
394
+ }
390
395
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
391
396
  padding-top: 1px;
392
397
  height: auto;
@@ -436,6 +441,9 @@
436
441
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
437
442
  left: var(--fileMenuWidth);
438
443
  }
444
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
445
+ padding-right: 30px;
446
+ }
439
447
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
440
448
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
441
449
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -447,6 +455,9 @@
447
455
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
448
456
  right: var(--fileMenuWidth);
449
457
  }
458
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
459
+ padding-left: 30px;
460
+ }
450
461
 
451
462
  .e-ribbon.e-rbn,
452
463
  .e-ribbon-group-overflow-ddb {
@@ -668,6 +679,7 @@
668
679
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
669
680
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
670
681
  border: 1px solid transparent;
682
+ border-radius: 4px;
671
683
  }
672
684
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
673
685
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -786,7 +798,8 @@
786
798
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
787
799
  display: none;
788
800
  }
789
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
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 {
790
803
  margin: 3px 5px;
791
804
  }
792
805
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -810,22 +823,24 @@
810
823
  -ms-flex-pack: start;
811
824
  justify-content: flex-start;
812
825
  }
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
- }
818
826
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
819
827
  padding: 3px 5px;
820
828
  font-weight: 500;
821
829
  line-height: 18px;
822
830
  }
823
831
 
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
+
824
839
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
825
840
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
826
841
  transform: rotate(90deg);
827
- margin-right: auto;
828
- margin-left: unset;
842
+ padding: 5px;
843
+ margin: 0 auto 0 0;
829
844
  }
830
845
 
831
846
  .e-ribbon-menu {
@@ -978,6 +993,12 @@
978
993
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
979
994
  height: auto;
980
995
  }
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
+ }
981
1002
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
982
1003
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
983
1004
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1192,7 +1213,9 @@
1192
1213
  }
1193
1214
 
1194
1215
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1195
- .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 {
1196
1219
  margin: 3px 7px;
1197
1220
  }
1198
1221
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1200,6 +1223,18 @@
1200
1223
  margin: 7px;
1201
1224
  padding: 0;
1202
1225
  }
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
+ }
1203
1238
 
1204
1239
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1205
1240
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/bootstrap5.css CHANGED
@@ -214,9 +214,6 @@
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
- }
220
217
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
221
218
  position: absolute;
222
219
  line-height: 22px;
@@ -300,6 +297,9 @@
300
297
  height: auto;
301
298
  min-height: auto;
302
299
  }
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,6 +309,7 @@
309
309
  min-width: auto;
310
310
  width: auto;
311
311
  border-style: solid;
312
+ transform: none;
312
313
  border-width: 1px;
313
314
  border-radius: 2px;
314
315
  z-index: 3;
@@ -319,6 +320,7 @@
319
320
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
320
321
  font-size: 14px;
321
322
  height: auto;
323
+ transform: none;
322
324
  line-height: 14px;
323
325
  padding: 0 5px;
324
326
  width: auto;
@@ -387,6 +389,9 @@
387
389
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
388
390
  overflow-y: hidden;
389
391
  }
392
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
393
+ margin-bottom: 0;
394
+ }
390
395
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
391
396
  padding-top: 1px;
392
397
  height: auto;
@@ -436,6 +441,9 @@
436
441
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
437
442
  left: var(--fileMenuWidth);
438
443
  }
444
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
445
+ padding-right: 30px;
446
+ }
439
447
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
440
448
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
441
449
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -447,6 +455,9 @@
447
455
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
448
456
  right: var(--fileMenuWidth);
449
457
  }
458
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
459
+ padding-left: 30px;
460
+ }
450
461
 
451
462
  .e-ribbon.e-rbn,
452
463
  .e-ribbon-group-overflow-ddb {
@@ -668,6 +679,7 @@
668
679
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
669
680
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
670
681
  border: 1px solid transparent;
682
+ border-radius: 4px;
671
683
  }
672
684
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
673
685
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -786,7 +798,8 @@
786
798
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
787
799
  display: none;
788
800
  }
789
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
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 {
790
803
  margin: 3px 5px;
791
804
  }
792
805
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -810,22 +823,24 @@
810
823
  -ms-flex-pack: start;
811
824
  justify-content: flex-start;
812
825
  }
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
- }
818
826
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
819
827
  padding: 3px 5px;
820
828
  font-weight: 500;
821
829
  line-height: 18px;
822
830
  }
823
831
 
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
+
824
839
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
825
840
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
826
841
  transform: rotate(90deg);
827
- margin-right: auto;
828
- margin-left: unset;
842
+ padding: 5px;
843
+ margin: 0 auto 0 0;
829
844
  }
830
845
 
831
846
  .e-ribbon-menu {
@@ -978,6 +993,12 @@
978
993
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
979
994
  height: auto;
980
995
  }
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
+ }
981
1002
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
982
1003
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
983
1004
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1192,7 +1213,9 @@
1192
1213
  }
1193
1214
 
1194
1215
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1195
- .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 {
1196
1219
  margin: 3px 7px;
1197
1220
  }
1198
1221
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1200,6 +1223,18 @@
1200
1223
  margin: 7px;
1201
1224
  padding: 0;
1202
1225
  }
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
+ }
1203
1238
 
1204
1239
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1205
1240
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/fabric-dark.css CHANGED
@@ -106,9 +106,6 @@
106
106
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
107
107
  display: none;
108
108
  }
109
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
110
- width: fit-content;
111
- }
112
109
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
113
110
  position: absolute;
114
111
  line-height: 22px;
@@ -192,6 +189,9 @@
192
189
  height: auto;
193
190
  min-height: auto;
194
191
  }
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,6 +201,7 @@
201
201
  min-width: auto;
202
202
  width: auto;
203
203
  border-style: solid;
204
+ transform: none;
204
205
  border-width: 1px;
205
206
  border-radius: unset;
206
207
  z-index: 3;
@@ -211,6 +212,7 @@
211
212
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
212
213
  font-size: 16px;
213
214
  height: auto;
215
+ transform: none;
214
216
  line-height: 16px;
215
217
  padding: 0 4px;
216
218
  width: auto;
@@ -279,6 +281,9 @@
279
281
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
280
282
  overflow-y: hidden;
281
283
  }
284
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
285
+ margin-bottom: 0;
286
+ }
282
287
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
283
288
  padding-top: 2px;
284
289
  height: auto;
@@ -328,6 +333,9 @@
328
333
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
329
334
  left: var(--fileMenuWidth);
330
335
  }
336
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
337
+ padding-right: 30px;
338
+ }
331
339
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
332
340
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
333
341
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -339,6 +347,9 @@
339
347
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
340
348
  right: var(--fileMenuWidth);
341
349
  }
350
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
351
+ padding-left: 30px;
352
+ }
342
353
 
343
354
  .e-ribbon.e-rbn,
344
355
  .e-ribbon-group-overflow-ddb {
@@ -560,6 +571,7 @@
560
571
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
561
572
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
562
573
  border: 1px solid transparent;
574
+ border-radius: unset;
563
575
  }
564
576
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
565
577
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -678,7 +690,8 @@
678
690
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
679
691
  display: none;
680
692
  }
681
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
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 {
682
695
  margin: 7px 8px;
683
696
  }
684
697
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -702,22 +715,24 @@
702
715
  -ms-flex-pack: start;
703
716
  justify-content: flex-start;
704
717
  }
705
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
706
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
707
- transform: rotate(-90deg);
708
- margin-left: auto;
709
- }
710
718
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
711
719
  padding: 6px 8px;
712
720
  font-weight: 600;
713
721
  line-height: 24px;
714
722
  }
715
723
 
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
+
716
731
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
717
732
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
718
733
  transform: rotate(90deg);
719
- margin-right: auto;
720
- margin-left: unset;
734
+ padding: 8px;
735
+ margin: 0 auto 0 0;
721
736
  }
722
737
 
723
738
  .e-ribbon-menu {
@@ -870,6 +885,12 @@
870
885
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
871
886
  height: auto;
872
887
  }
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
+ }
873
894
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
874
895
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
875
896
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1084,7 +1105,9 @@
1084
1105
  }
1085
1106
 
1086
1107
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1087
- .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 {
1088
1111
  margin: 7px 10px;
1089
1112
  }
1090
1113
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1092,6 +1115,18 @@
1092
1115
  margin: 10px;
1093
1116
  padding: 0;
1094
1117
  }
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
+ }
1095
1130
 
1096
1131
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1097
1132
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,