@syncfusion/ej2-vue-ribbon 21.2.3 → 22.1.39

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 (48) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/ej2-vue-ribbon.umd.min.js +2 -2
  3. package/dist/ej2-vue-ribbon.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-vue-ribbon.es2015.js +13 -1
  5. package/dist/es6/ej2-vue-ribbon.es2015.js.map +1 -1
  6. package/dist/es6/ej2-vue-ribbon.es5.js +13 -1
  7. package/dist/es6/ej2-vue-ribbon.es5.js.map +1 -1
  8. package/dist/global/ej2-vue-ribbon.min.js +2 -2
  9. package/package.json +8 -8
  10. package/src/ribbon/ribbon.component.js +13 -1
  11. package/styles/bootstrap-dark.css +27 -0
  12. package/styles/bootstrap.css +27 -0
  13. package/styles/bootstrap4.css +27 -0
  14. package/styles/bootstrap5-dark.css +27 -0
  15. package/styles/bootstrap5.css +27 -0
  16. package/styles/fabric-dark.css +27 -0
  17. package/styles/fabric.css +27 -0
  18. package/styles/fluent-dark.css +27 -0
  19. package/styles/fluent.css +27 -0
  20. package/styles/highcontrast-light.css +27 -0
  21. package/styles/highcontrast.css +31 -4
  22. package/styles/material-dark.css +27 -0
  23. package/styles/material.css +27 -0
  24. package/styles/material3-dark.css +1672 -0
  25. package/styles/material3-dark.scss +2 -0
  26. package/styles/material3.css +1728 -0
  27. package/styles/material3.scss +2 -0
  28. package/styles/ribbon/bootstrap-dark.css +27 -0
  29. package/styles/ribbon/bootstrap.css +27 -0
  30. package/styles/ribbon/bootstrap4.css +27 -0
  31. package/styles/ribbon/bootstrap5-dark.css +27 -0
  32. package/styles/ribbon/bootstrap5.css +27 -0
  33. package/styles/ribbon/fabric-dark.css +27 -0
  34. package/styles/ribbon/fabric.css +27 -0
  35. package/styles/ribbon/fluent-dark.css +27 -0
  36. package/styles/ribbon/fluent.css +27 -0
  37. package/styles/ribbon/highcontrast-light.css +27 -0
  38. package/styles/ribbon/highcontrast.css +31 -4
  39. package/styles/ribbon/material-dark.css +27 -0
  40. package/styles/ribbon/material.css +27 -0
  41. package/styles/ribbon/material3-dark.css +1672 -0
  42. package/styles/ribbon/material3-dark.scss +2 -0
  43. package/styles/ribbon/material3.css +1728 -0
  44. package/styles/ribbon/material3.scss +2 -0
  45. package/styles/ribbon/tailwind-dark.css +27 -0
  46. package/styles/ribbon/tailwind.css +27 -0
  47. package/styles/tailwind-dark.css +27 -0
  48. package/styles/tailwind.css +27 -0
package/styles/ribbon/material3.scss ADDED
@@ -0,0 +1,2 @@
1
+ @import 'ej2-base/styles/material3-definition.scss';
2
+ @import 'ej2-ribbon/styles/ribbon/material3.scss';
package/styles/ribbon/tailwind-dark.css CHANGED
@@ -196,6 +196,7 @@
196
196
  border-width: unset;
197
197
  font-size: 14px;
198
198
  font-weight: 400;
199
+ box-shadow: none;
199
200
  }
200
201
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
201
202
  border-radius: unset;
@@ -333,6 +334,7 @@
333
334
  border: none;
334
335
  height: 26px;
335
336
  margin: auto;
337
+ box-shadow: none;
336
338
  }
337
339
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
338
340
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -472,6 +474,8 @@
472
474
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
473
475
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
474
476
  min-width: auto;
477
+ min-height: auto;
478
+ border-radius: unset;
475
479
  }
476
480
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
477
481
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -555,6 +559,7 @@
555
559
  font-weight: 400;
556
560
  font-size: 12px;
557
561
  text-transform: none;
562
+ box-shadow: none;
558
563
  }
559
564
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
560
565
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -663,6 +668,7 @@
663
668
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
664
669
  border: 1px solid transparent;
665
670
  border-radius: 4px;
671
+ box-shadow: none;
666
672
  }
667
673
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
668
674
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -787,6 +793,7 @@
787
793
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
788
794
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
789
795
  line-height: 18px;
796
+ overflow: hidden;
790
797
  }
791
798
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
792
799
  width: inherit;
@@ -834,6 +841,17 @@
834
841
  padding-left: 38px !important; /* stylelint-disable-line declaration-no-important */
835
842
  }
836
843
 
844
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
845
+ font-size: 12px;
846
+ height: 24px;
847
+ -ms-flex-align: center;
848
+ align-items: center;
849
+ }
850
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
851
+ font-size: 16px;
852
+ line-height: 16px;
853
+ }
854
+
837
855
  .e-ribbon-tooltip .e-tip-content {
838
856
  padding: 4px;
839
857
  }
@@ -1210,6 +1228,15 @@
1210
1228
  padding: 7px;
1211
1229
  }
1212
1230
 
1231
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1232
+ font-size: 14px;
1233
+ height: 32px;
1234
+ }
1235
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1236
+ font-size: 20px;
1237
+ line-height: 20px;
1238
+ }
1239
+
1213
1240
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1214
1241
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1215
1242
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,
package/styles/ribbon/tailwind.css CHANGED
@@ -196,6 +196,7 @@
196
196
  border-width: unset;
197
197
  font-size: 14px;
198
198
  font-weight: 400;
199
+ box-shadow: none;
199
200
  }
200
201
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
201
202
  border-radius: unset;
@@ -333,6 +334,7 @@
333
334
  border: none;
334
335
  height: 26px;
335
336
  margin: auto;
337
+ box-shadow: none;
336
338
  }
337
339
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
338
340
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -472,6 +474,8 @@
472
474
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
473
475
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
474
476
  min-width: auto;
477
+ min-height: auto;
478
+ border-radius: unset;
475
479
  }
476
480
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
477
481
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -555,6 +559,7 @@
555
559
  font-weight: 400;
556
560
  font-size: 12px;
557
561
  text-transform: none;
562
+ box-shadow: none;
558
563
  }
559
564
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
560
565
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -663,6 +668,7 @@
663
668
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
664
669
  border: 1px solid transparent;
665
670
  border-radius: 4px;
671
+ box-shadow: none;
666
672
  }
667
673
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
668
674
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -787,6 +793,7 @@
787
793
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
788
794
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
789
795
  line-height: 18px;
796
+ overflow: hidden;
790
797
  }
791
798
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
792
799
  width: inherit;
@@ -834,6 +841,17 @@
834
841
  padding-left: 38px !important; /* stylelint-disable-line declaration-no-important */
835
842
  }
836
843
 
844
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
845
+ font-size: 12px;
846
+ height: 24px;
847
+ -ms-flex-align: center;
848
+ align-items: center;
849
+ }
850
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
851
+ font-size: 16px;
852
+ line-height: 16px;
853
+ }
854
+
837
855
  .e-ribbon-tooltip .e-tip-content {
838
856
  padding: 4px;
839
857
  }
@@ -1210,6 +1228,15 @@
1210
1228
  padding: 7px;
1211
1229
  }
1212
1230
 
1231
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1232
+ font-size: 14px;
1233
+ height: 32px;
1234
+ }
1235
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1236
+ font-size: 20px;
1237
+ line-height: 20px;
1238
+ }
1239
+
1213
1240
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1214
1241
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1215
1242
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,
package/styles/tailwind-dark.css CHANGED
@@ -196,6 +196,7 @@
196
196
  border-width: unset;
197
197
  font-size: 14px;
198
198
  font-weight: 400;
199
+ box-shadow: none;
199
200
  }
200
201
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
201
202
  border-radius: unset;
@@ -333,6 +334,7 @@
333
334
  border: none;
334
335
  height: 26px;
335
336
  margin: auto;
337
+ box-shadow: none;
336
338
  }
337
339
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
338
340
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -472,6 +474,8 @@
472
474
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
473
475
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
474
476
  min-width: auto;
477
+ min-height: auto;
478
+ border-radius: unset;
475
479
  }
476
480
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
477
481
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -555,6 +559,7 @@
555
559
  font-weight: 400;
556
560
  font-size: 12px;
557
561
  text-transform: none;
562
+ box-shadow: none;
558
563
  }
559
564
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
560
565
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -663,6 +668,7 @@
663
668
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
664
669
  border: 1px solid transparent;
665
670
  border-radius: 4px;
671
+ box-shadow: none;
666
672
  }
667
673
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
668
674
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -787,6 +793,7 @@
787
793
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
788
794
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
789
795
  line-height: 18px;
796
+ overflow: hidden;
790
797
  }
791
798
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
792
799
  width: inherit;
@@ -834,6 +841,17 @@
834
841
  padding-left: 38px !important; /* stylelint-disable-line declaration-no-important */
835
842
  }
836
843
 
844
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
845
+ font-size: 12px;
846
+ height: 24px;
847
+ -ms-flex-align: center;
848
+ align-items: center;
849
+ }
850
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
851
+ font-size: 16px;
852
+ line-height: 16px;
853
+ }
854
+
837
855
  .e-ribbon-tooltip .e-tip-content {
838
856
  padding: 4px;
839
857
  }
@@ -1210,6 +1228,15 @@
1210
1228
  padding: 7px;
1211
1229
  }
1212
1230
 
1231
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1232
+ font-size: 14px;
1233
+ height: 32px;
1234
+ }
1235
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1236
+ font-size: 20px;
1237
+ line-height: 20px;
1238
+ }
1239
+
1213
1240
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1214
1241
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1215
1242
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,
package/styles/tailwind.css CHANGED
@@ -196,6 +196,7 @@
196
196
  border-width: unset;
197
197
  font-size: 14px;
198
198
  font-weight: 400;
199
+ box-shadow: none;
199
200
  }
200
201
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
201
202
  border-radius: unset;
@@ -333,6 +334,7 @@
333
334
  border: none;
334
335
  height: 26px;
335
336
  margin: auto;
337
+ box-shadow: none;
336
338
  }
337
339
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
338
340
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -472,6 +474,8 @@
472
474
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
473
475
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
474
476
  min-width: auto;
477
+ min-height: auto;
478
+ border-radius: unset;
475
479
  }
476
480
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
477
481
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -555,6 +559,7 @@
555
559
  font-weight: 400;
556
560
  font-size: 12px;
557
561
  text-transform: none;
562
+ box-shadow: none;
558
563
  }
559
564
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
560
565
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -663,6 +668,7 @@
663
668
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
664
669
  border: 1px solid transparent;
665
670
  border-radius: 4px;
671
+ box-shadow: none;
666
672
  }
667
673
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
668
674
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -787,6 +793,7 @@
787
793
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
788
794
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
789
795
  line-height: 18px;
796
+ overflow: hidden;
790
797
  }
791
798
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
792
799
  width: inherit;
@@ -834,6 +841,17 @@
834
841
  padding-left: 38px !important; /* stylelint-disable-line declaration-no-important */
835
842
  }
836
843
 
844
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
845
+ font-size: 12px;
846
+ height: 24px;
847
+ -ms-flex-align: center;
848
+ align-items: center;
849
+ }
850
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
851
+ font-size: 16px;
852
+ line-height: 16px;
853
+ }
854
+
837
855
  .e-ribbon-tooltip .e-tip-content {
838
856
  padding: 4px;
839
857
  }
@@ -1210,6 +1228,15 @@
1210
1228
  padding: 7px;
1211
1229
  }
1212
1230
 
1231
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1232
+ font-size: 14px;
1233
+ height: 32px;
1234
+ }
1235
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1236
+ font-size: 20px;
1237
+ line-height: 20px;
1238
+ }
1239
+
1213
1240
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1214
1241
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1215
1242
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,