@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/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,
package/styles/ribbon/fluent-dark.css CHANGED
@@ -190,9 +190,6 @@
190
190
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
191
191
  display: none;
192
192
  }
193
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
194
- width: fit-content;
195
- }
196
193
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
197
194
  position: absolute;
198
195
  line-height: 22px;
@@ -276,6 +273,9 @@
276
273
  height: auto;
277
274
  min-height: auto;
278
275
  }
276
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
277
+ box-shadow: none;
278
+ }
279
279
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
280
280
  padding: 0;
281
281
  }
@@ -285,6 +285,7 @@
285
285
  min-width: auto;
286
286
  width: auto;
287
287
  border-style: solid;
288
+ transform: none;
288
289
  border-width: 1px;
289
290
  border-radius: 2px;
290
291
  z-index: 3;
@@ -295,6 +296,7 @@
295
296
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
296
297
  font-size: 14px;
297
298
  height: auto;
299
+ transform: none;
298
300
  line-height: 14px;
299
301
  padding: 0 5px;
300
302
  width: auto;
@@ -363,6 +365,9 @@
363
365
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
364
366
  overflow-y: hidden;
365
367
  }
368
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
369
+ margin-bottom: 0;
370
+ }
366
371
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
367
372
  padding-top: 1px;
368
373
  height: auto;
@@ -412,6 +417,9 @@
412
417
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
413
418
  left: var(--fileMenuWidth);
414
419
  }
420
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
421
+ padding-right: 30px;
422
+ }
415
423
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
416
424
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
417
425
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -423,6 +431,9 @@
423
431
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
424
432
  right: var(--fileMenuWidth);
425
433
  }
434
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
435
+ padding-left: 30px;
436
+ }
426
437
 
427
438
  .e-ribbon.e-rbn,
428
439
  .e-ribbon-group-overflow-ddb {
@@ -644,6 +655,7 @@
644
655
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
645
656
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
646
657
  border: 1px solid transparent;
658
+ border-radius: 2px;
647
659
  }
648
660
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
649
661
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -762,7 +774,8 @@
762
774
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
763
775
  display: none;
764
776
  }
765
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
777
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
778
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
766
779
  margin: 3px 5px;
767
780
  }
768
781
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -786,22 +799,24 @@
786
799
  -ms-flex-pack: start;
787
800
  justify-content: flex-start;
788
801
  }
789
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
790
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
791
- transform: rotate(-90deg);
792
- margin-left: auto;
793
- }
794
802
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
795
803
  padding: 3px 5px;
796
804
  font-weight: 600;
797
805
  line-height: 18px;
798
806
  }
799
807
 
808
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
809
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
810
+ transform: rotate(-90deg);
811
+ padding: 5px;
812
+ margin: 0 0 0 auto;
813
+ }
814
+
800
815
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
801
816
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
802
817
  transform: rotate(90deg);
803
- margin-right: auto;
804
- margin-left: unset;
818
+ padding: 5px;
819
+ margin: 0 auto 0 0;
805
820
  }
806
821
 
807
822
  .e-ribbon-menu {
@@ -954,6 +969,12 @@
954
969
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
955
970
  height: auto;
956
971
  }
972
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
973
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
974
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
975
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
976
+ margin-bottom: 0;
977
+ }
957
978
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
958
979
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
959
980
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1168,7 +1189,9 @@
1168
1189
  }
1169
1190
 
1170
1191
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1171
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1192
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1193
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1194
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1172
1195
  margin: 3px 7px;
1173
1196
  }
1174
1197
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1176,6 +1199,18 @@
1176
1199
  margin: 7px;
1177
1200
  padding: 0;
1178
1201
  }
1202
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1203
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1204
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1205
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1206
+ padding: 7px;
1207
+ }
1208
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1209
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1210
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1211
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1212
+ padding: 7px;
1213
+ }
1179
1214
 
1180
1215
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1181
1216
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/ribbon/fluent.css CHANGED
@@ -190,9 +190,6 @@
190
190
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
191
191
  display: none;
192
192
  }
193
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
194
- width: fit-content;
195
- }
196
193
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
197
194
  position: absolute;
198
195
  line-height: 22px;
@@ -276,6 +273,9 @@
276
273
  height: auto;
277
274
  min-height: auto;
278
275
  }
276
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
277
+ box-shadow: none;
278
+ }
279
279
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
280
280
  padding: 0;
281
281
  }
@@ -285,6 +285,7 @@
285
285
  min-width: auto;
286
286
  width: auto;
287
287
  border-style: solid;
288
+ transform: none;
288
289
  border-width: 1px;
289
290
  border-radius: 2px;
290
291
  z-index: 3;
@@ -295,6 +296,7 @@
295
296
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
296
297
  font-size: 14px;
297
298
  height: auto;
299
+ transform: none;
298
300
  line-height: 14px;
299
301
  padding: 0 5px;
300
302
  width: auto;
@@ -363,6 +365,9 @@
363
365
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
364
366
  overflow-y: hidden;
365
367
  }
368
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
369
+ margin-bottom: 0;
370
+ }
366
371
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
367
372
  padding-top: 1px;
368
373
  height: auto;
@@ -412,6 +417,9 @@
412
417
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
413
418
  left: var(--fileMenuWidth);
414
419
  }
420
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
421
+ padding-right: 30px;
422
+ }
415
423
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
416
424
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
417
425
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -423,6 +431,9 @@
423
431
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
424
432
  right: var(--fileMenuWidth);
425
433
  }
434
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
435
+ padding-left: 30px;
436
+ }
426
437
 
427
438
  .e-ribbon.e-rbn,
428
439
  .e-ribbon-group-overflow-ddb {
@@ -644,6 +655,7 @@
644
655
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
645
656
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
646
657
  border: 1px solid transparent;
658
+ border-radius: 2px;
647
659
  }
648
660
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
649
661
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -762,7 +774,8 @@
762
774
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
763
775
  display: none;
764
776
  }
765
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
777
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
778
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
766
779
  margin: 3px 5px;
767
780
  }
768
781
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -786,22 +799,24 @@
786
799
  -ms-flex-pack: start;
787
800
  justify-content: flex-start;
788
801
  }
789
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
790
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
791
- transform: rotate(-90deg);
792
- margin-left: auto;
793
- }
794
802
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
795
803
  padding: 3px 5px;
796
804
  font-weight: 600;
797
805
  line-height: 18px;
798
806
  }
799
807
 
808
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
809
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
810
+ transform: rotate(-90deg);
811
+ padding: 5px;
812
+ margin: 0 0 0 auto;
813
+ }
814
+
800
815
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
801
816
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
802
817
  transform: rotate(90deg);
803
- margin-right: auto;
804
- margin-left: unset;
818
+ padding: 5px;
819
+ margin: 0 auto 0 0;
805
820
  }
806
821
 
807
822
  .e-ribbon-menu {
@@ -954,6 +969,12 @@
954
969
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
955
970
  height: auto;
956
971
  }
972
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
973
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
974
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
975
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
976
+ margin-bottom: 0;
977
+ }
957
978
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
958
979
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
959
980
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1168,7 +1189,9 @@
1168
1189
  }
1169
1190
 
1170
1191
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1171
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1192
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1193
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1194
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1172
1195
  margin: 3px 7px;
1173
1196
  }
1174
1197
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1176,6 +1199,18 @@
1176
1199
  margin: 7px;
1177
1200
  padding: 0;
1178
1201
  }
1202
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1203
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1204
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1205
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1206
+ padding: 7px;
1207
+ }
1208
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1209
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1210
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1211
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1212
+ padding: 7px;
1213
+ }
1179
1214
 
1180
1215
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1181
1216
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,