@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/tailwind-dark.css CHANGED
@@ -188,9 +188,6 @@
188
188
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
189
189
  display: none;
190
190
  }
191
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
192
- width: fit-content;
193
- }
194
191
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
195
192
  position: absolute;
196
193
  line-height: 22px;
@@ -274,6 +271,9 @@
274
271
  height: auto;
275
272
  min-height: auto;
276
273
  }
274
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
275
+ box-shadow: none;
276
+ }
277
277
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
278
278
  padding: 0;
279
279
  }
@@ -283,6 +283,7 @@
283
283
  min-width: auto;
284
284
  width: auto;
285
285
  border-style: solid;
286
+ transform: none;
286
287
  border-width: 1px;
287
288
  border-radius: 2px;
288
289
  z-index: 3;
@@ -293,6 +294,7 @@
293
294
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
294
295
  font-size: 14px;
295
296
  height: auto;
297
+ transform: none;
296
298
  line-height: 14px;
297
299
  padding: 0 5px;
298
300
  width: auto;
@@ -361,6 +363,9 @@
361
363
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
362
364
  overflow-y: hidden;
363
365
  }
366
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
367
+ margin-bottom: 0;
368
+ }
364
369
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
365
370
  padding-top: 1px;
366
371
  height: auto;
@@ -410,6 +415,9 @@
410
415
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
411
416
  left: var(--fileMenuWidth);
412
417
  }
418
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
419
+ padding-right: 30px;
420
+ }
413
421
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
414
422
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
415
423
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -421,6 +429,9 @@
421
429
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
422
430
  right: var(--fileMenuWidth);
423
431
  }
432
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
433
+ padding-left: 30px;
434
+ }
424
435
 
425
436
  .e-ribbon.e-rbn,
426
437
  .e-ribbon-group-overflow-ddb {
@@ -642,6 +653,7 @@
642
653
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
643
654
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
644
655
  border: 1px solid transparent;
656
+ border-radius: 4px;
645
657
  }
646
658
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
647
659
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -760,7 +772,8 @@
760
772
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
761
773
  display: none;
762
774
  }
763
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
775
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
776
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
764
777
  margin: 3px 5px;
765
778
  }
766
779
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -784,22 +797,24 @@
784
797
  -ms-flex-pack: start;
785
798
  justify-content: flex-start;
786
799
  }
787
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
788
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
789
- transform: rotate(-90deg);
790
- margin-left: auto;
791
- }
792
800
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
793
801
  padding: 3px 5px;
794
802
  font-weight: 600;
795
803
  line-height: 18px;
796
804
  }
797
805
 
806
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
807
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
808
+ transform: rotate(-90deg);
809
+ padding: 5px;
810
+ margin: 0 0 0 auto;
811
+ }
812
+
798
813
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
799
814
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
800
815
  transform: rotate(90deg);
801
- margin-right: auto;
802
- margin-left: unset;
816
+ padding: 5px;
817
+ margin: 0 auto 0 0;
803
818
  }
804
819
 
805
820
  .e-ribbon-menu {
@@ -952,6 +967,12 @@
952
967
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
953
968
  height: auto;
954
969
  }
970
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
971
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
972
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
973
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
974
+ margin-bottom: 0;
975
+ }
955
976
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
956
977
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
957
978
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1166,7 +1187,9 @@
1166
1187
  }
1167
1188
 
1168
1189
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1169
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1190
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1191
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1192
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1170
1193
  margin: 3px 7px;
1171
1194
  }
1172
1195
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1174,6 +1197,18 @@
1174
1197
  margin: 7px;
1175
1198
  padding: 0;
1176
1199
  }
1200
+ .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,
1201
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
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
+ padding: 7px;
1205
+ }
1206
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1207
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
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
+ padding: 7px;
1211
+ }
1177
1212
 
1178
1213
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1179
1214
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/tailwind.css CHANGED
@@ -188,9 +188,6 @@
188
188
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
189
189
  display: none;
190
190
  }
191
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
192
- width: fit-content;
193
- }
194
191
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
195
192
  position: absolute;
196
193
  line-height: 22px;
@@ -274,6 +271,9 @@
274
271
  height: auto;
275
272
  min-height: auto;
276
273
  }
274
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
275
+ box-shadow: none;
276
+ }
277
277
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
278
278
  padding: 0;
279
279
  }
@@ -283,6 +283,7 @@
283
283
  min-width: auto;
284
284
  width: auto;
285
285
  border-style: solid;
286
+ transform: none;
286
287
  border-width: 1px;
287
288
  border-radius: 2px;
288
289
  z-index: 3;
@@ -293,6 +294,7 @@
293
294
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
294
295
  font-size: 14px;
295
296
  height: auto;
297
+ transform: none;
296
298
  line-height: 14px;
297
299
  padding: 0 5px;
298
300
  width: auto;
@@ -361,6 +363,9 @@
361
363
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
362
364
  overflow-y: hidden;
363
365
  }
366
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
367
+ margin-bottom: 0;
368
+ }
364
369
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
365
370
  padding-top: 1px;
366
371
  height: auto;
@@ -410,6 +415,9 @@
410
415
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
411
416
  left: var(--fileMenuWidth);
412
417
  }
418
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
419
+ padding-right: 30px;
420
+ }
413
421
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
414
422
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
415
423
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -421,6 +429,9 @@
421
429
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
422
430
  right: var(--fileMenuWidth);
423
431
  }
432
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
433
+ padding-left: 30px;
434
+ }
424
435
 
425
436
  .e-ribbon.e-rbn,
426
437
  .e-ribbon-group-overflow-ddb {
@@ -642,6 +653,7 @@
642
653
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
643
654
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
644
655
  border: 1px solid transparent;
656
+ border-radius: 4px;
645
657
  }
646
658
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
647
659
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -760,7 +772,8 @@
760
772
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
761
773
  display: none;
762
774
  }
763
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
775
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
776
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
764
777
  margin: 3px 5px;
765
778
  }
766
779
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -784,22 +797,24 @@
784
797
  -ms-flex-pack: start;
785
798
  justify-content: flex-start;
786
799
  }
787
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
788
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
789
- transform: rotate(-90deg);
790
- margin-left: auto;
791
- }
792
800
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
793
801
  padding: 3px 5px;
794
802
  font-weight: 600;
795
803
  line-height: 18px;
796
804
  }
797
805
 
806
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
807
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
808
+ transform: rotate(-90deg);
809
+ padding: 5px;
810
+ margin: 0 0 0 auto;
811
+ }
812
+
798
813
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
799
814
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
800
815
  transform: rotate(90deg);
801
- margin-right: auto;
802
- margin-left: unset;
816
+ padding: 5px;
817
+ margin: 0 auto 0 0;
803
818
  }
804
819
 
805
820
  .e-ribbon-menu {
@@ -952,6 +967,12 @@
952
967
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
953
968
  height: auto;
954
969
  }
970
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
971
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
972
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
973
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
974
+ margin-bottom: 0;
975
+ }
955
976
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
956
977
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
957
978
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1166,7 +1187,9 @@
1166
1187
  }
1167
1188
 
1168
1189
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1169
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1190
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1191
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1192
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1170
1193
  margin: 3px 7px;
1171
1194
  }
1172
1195
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1174,6 +1197,18 @@
1174
1197
  margin: 7px;
1175
1198
  padding: 0;
1176
1199
  }
1200
+ .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,
1201
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
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
+ padding: 7px;
1205
+ }
1206
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1207
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
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
+ padding: 7px;
1211
+ }
1177
1212
 
1178
1213
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1179
1214
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,