@syncfusion/ej2-vue-ribbon 21.1.35 → 21.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +3 -2
  2. package/dist/ej2-vue-ribbon.umd.min.js +1 -1
  3. package/dist/global/ej2-vue-ribbon.min.js +2 -2
  4. package/package.json +10 -9
  5. package/styles/bootstrap-dark.css +47 -12
  6. package/styles/bootstrap.css +47 -12
  7. package/styles/bootstrap4.css +47 -12
  8. package/styles/bootstrap5-dark.css +47 -12
  9. package/styles/bootstrap5.css +47 -12
  10. package/styles/fabric-dark.css +47 -12
  11. package/styles/fabric.css +47 -12
  12. package/styles/fluent-dark.css +47 -12
  13. package/styles/fluent.css +47 -12
  14. package/styles/highcontrast-light.css +47 -12
  15. package/styles/highcontrast.css +47 -12
  16. package/styles/material-dark.css +47 -12
  17. package/styles/material.css +47 -12
  18. package/styles/ribbon/bootstrap-dark.css +47 -12
  19. package/styles/ribbon/bootstrap.css +47 -12
  20. package/styles/ribbon/bootstrap4.css +47 -12
  21. package/styles/ribbon/bootstrap5-dark.css +47 -12
  22. package/styles/ribbon/bootstrap5.css +47 -12
  23. package/styles/ribbon/fabric-dark.css +47 -12
  24. package/styles/ribbon/fabric.css +47 -12
  25. package/styles/ribbon/fluent-dark.css +47 -12
  26. package/styles/ribbon/fluent.css +47 -12
  27. package/styles/ribbon/highcontrast-light.css +47 -12
  28. package/styles/ribbon/highcontrast.css +47 -12
  29. package/styles/ribbon/material-dark.css +47 -12
  30. package/styles/ribbon/material.css +47 -12
  31. package/styles/ribbon/tailwind-dark.css +47 -12
  32. package/styles/ribbon/tailwind.css +47 -12
  33. package/styles/tailwind-dark.css +47 -12
  34. package/styles/tailwind.css +47 -12
package/styles/ribbon/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/ribbon/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/ribbon/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,
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,