@syncfusion/ej2-vue-ribbon 21.2.3 → 22.1.34

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 (47) hide show
  1. package/dist/ej2-vue-ribbon.umd.min.js +2 -2
  2. package/dist/ej2-vue-ribbon.umd.min.js.map +1 -1
  3. package/dist/es6/ej2-vue-ribbon.es2015.js +13 -1
  4. package/dist/es6/ej2-vue-ribbon.es2015.js.map +1 -1
  5. package/dist/es6/ej2-vue-ribbon.es5.js +13 -1
  6. package/dist/es6/ej2-vue-ribbon.es5.js.map +1 -1
  7. package/dist/global/ej2-vue-ribbon.min.js +2 -2
  8. package/package.json +8 -8
  9. package/src/ribbon/ribbon.component.js +13 -1
  10. package/styles/bootstrap-dark.css +26 -0
  11. package/styles/bootstrap.css +26 -0
  12. package/styles/bootstrap4.css +26 -0
  13. package/styles/bootstrap5-dark.css +26 -0
  14. package/styles/bootstrap5.css +26 -0
  15. package/styles/fabric-dark.css +26 -0
  16. package/styles/fabric.css +26 -0
  17. package/styles/fluent-dark.css +26 -0
  18. package/styles/fluent.css +26 -0
  19. package/styles/highcontrast-light.css +26 -0
  20. package/styles/highcontrast.css +30 -4
  21. package/styles/material-dark.css +26 -0
  22. package/styles/material.css +26 -0
  23. package/styles/material3-dark.css +1671 -0
  24. package/styles/material3-dark.scss +2 -0
  25. package/styles/material3.css +1727 -0
  26. package/styles/material3.scss +2 -0
  27. package/styles/ribbon/bootstrap-dark.css +26 -0
  28. package/styles/ribbon/bootstrap.css +26 -0
  29. package/styles/ribbon/bootstrap4.css +26 -0
  30. package/styles/ribbon/bootstrap5-dark.css +26 -0
  31. package/styles/ribbon/bootstrap5.css +26 -0
  32. package/styles/ribbon/fabric-dark.css +26 -0
  33. package/styles/ribbon/fabric.css +26 -0
  34. package/styles/ribbon/fluent-dark.css +26 -0
  35. package/styles/ribbon/fluent.css +26 -0
  36. package/styles/ribbon/highcontrast-light.css +26 -0
  37. package/styles/ribbon/highcontrast.css +30 -4
  38. package/styles/ribbon/material-dark.css +26 -0
  39. package/styles/ribbon/material.css +26 -0
  40. package/styles/ribbon/material3-dark.css +1671 -0
  41. package/styles/ribbon/material3-dark.scss +2 -0
  42. package/styles/ribbon/material3.css +1727 -0
  43. package/styles/ribbon/material3.scss +2 -0
  44. package/styles/ribbon/tailwind-dark.css +26 -0
  45. package/styles/ribbon/tailwind.css +26 -0
  46. package/styles/tailwind-dark.css +26 -0
  47. package/styles/tailwind.css +26 -0
package/styles/ribbon/highcontrast-light.css CHANGED
@@ -121,6 +121,7 @@
121
121
  border-width: 0 0 1px 0;
122
122
  font-size: 14px;
123
123
  font-weight: 400;
124
+ box-shadow: none;
124
125
  }
125
126
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
126
127
  border-radius: unset;
@@ -258,6 +259,7 @@
258
259
  border: 2px solid;
259
260
  height: 40px;
260
261
  margin: auto;
262
+ box-shadow: none;
261
263
  }
262
264
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
263
265
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -397,6 +399,8 @@
397
399
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
398
400
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
399
401
  min-width: auto;
402
+ min-height: auto;
403
+ border-radius: unset;
400
404
  }
401
405
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
402
406
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -480,6 +484,7 @@
480
484
  font-weight: 400;
481
485
  font-size: 14px;
482
486
  text-transform: none;
487
+ box-shadow: none;
483
488
  }
484
489
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
485
490
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -588,6 +593,7 @@
588
593
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
589
594
  border: 1px solid transparent;
590
595
  border-radius: unset;
596
+ box-shadow: none;
591
597
  }
592
598
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
593
599
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -759,6 +765,17 @@
759
765
  padding-left: 30px !important; /* stylelint-disable-line declaration-no-important */
760
766
  }
761
767
 
768
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
769
+ font-size: 16px;
770
+ height: 36px;
771
+ -ms-flex-align: center;
772
+ align-items: center;
773
+ }
774
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
775
+ font-size: 16px;
776
+ line-height: 16px;
777
+ }
778
+
762
779
  .e-ribbon-tooltip .e-tip-content {
763
780
  padding: 4px;
764
781
  }
@@ -1135,6 +1152,15 @@
1135
1152
  padding: 10px;
1136
1153
  }
1137
1154
 
1155
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1156
+ font-size: 16px;
1157
+ height: 45px;
1158
+ }
1159
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1160
+ font-size: 20px;
1161
+ line-height: 20px;
1162
+ }
1163
+
1138
1164
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1139
1165
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1140
1166
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,
package/styles/ribbon/highcontrast.css CHANGED
@@ -130,6 +130,7 @@
130
130
  border-width: 0 0 1px 0;
131
131
  font-size: 14px;
132
132
  font-weight: 400;
133
+ box-shadow: none;
133
134
  }
134
135
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
135
136
  border-radius: unset;
@@ -243,7 +244,7 @@
243
244
  height: 40px;
244
245
  }
245
246
  .e-ribbon.e-rbn .e-content {
246
- width: calc(100% - 20px);
247
+ width: calc(100% - 25px);
247
248
  }
248
249
  .e-ribbon.e-rbn .e-ribbon-collapse-btn {
249
250
  bottom: 0;
@@ -257,7 +258,7 @@
257
258
  transform: rotate(180deg);
258
259
  }
259
260
  .e-ribbon.e-rbn.e-ribbon-overflow .e-content {
260
- width: calc(100% - 20px - 40px);
261
+ width: calc(100% - 25px - 40px);
261
262
  }
262
263
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn,
263
264
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn {
@@ -267,6 +268,7 @@
267
268
  border: 2px solid;
268
269
  height: 40px;
269
270
  margin: auto;
271
+ box-shadow: none;
270
272
  }
271
273
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
272
274
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -406,6 +408,8 @@
406
408
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
407
409
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
408
410
  min-width: auto;
411
+ min-height: auto;
412
+ border-radius: unset;
409
413
  }
410
414
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
411
415
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -489,6 +493,7 @@
489
493
  font-weight: 400;
490
494
  font-size: 14px;
491
495
  text-transform: none;
496
+ box-shadow: none;
492
497
  }
493
498
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
494
499
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -597,6 +602,7 @@
597
602
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
598
603
  border: 1px solid transparent;
599
604
  border-radius: unset;
605
+ box-shadow: none;
600
606
  }
601
607
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
602
608
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -768,6 +774,17 @@
768
774
  padding-left: 30px !important; /* stylelint-disable-line declaration-no-important */
769
775
  }
770
776
 
777
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
778
+ font-size: 16px;
779
+ height: 36px;
780
+ -ms-flex-align: center;
781
+ align-items: center;
782
+ }
783
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
784
+ font-size: 16px;
785
+ line-height: 16px;
786
+ }
787
+
771
788
  .e-ribbon-tooltip .e-tip-content {
772
789
  padding: 4px;
773
790
  }
@@ -836,7 +853,7 @@
836
853
  }
837
854
  .e-bigger.e-ribbon.e-rbn.e-ribbon-collapsible .e-content,
838
855
  .e-bigger .e-ribbon.e-rbn.e-ribbon-collapsible .e-content {
839
- width: calc(100% - 24px);
856
+ width: calc(100% - 28px);
840
857
  }
841
858
  .e-bigger.e-ribbon.e-rbn.e-ribbon-collapsible .e-ribbon-collapse-btn,
842
859
  .e-bigger .e-ribbon.e-rbn.e-ribbon-collapsible .e-ribbon-collapse-btn {
@@ -846,7 +863,7 @@
846
863
  }
847
864
  .e-bigger.e-ribbon.e-rbn.e-ribbon-collapsible.e-ribbon-overflow .e-content,
848
865
  .e-bigger .e-ribbon.e-rbn.e-ribbon-collapsible.e-ribbon-overflow .e-content {
849
- width: calc(100% - 24px - 40px);
866
+ width: calc(100% - 28px - 40px);
850
867
  }
851
868
  .e-bigger.e-ribbon.e-rbn.e-ribbon-collapsible.e-ribbon-overflow .e-ribbon-group-of-btn,
852
869
  .e-bigger.e-ribbon.e-rbn.e-ribbon-collapsible.e-ribbon-overflow .e-ribbon-overall-of-btn,
@@ -1144,6 +1161,15 @@
1144
1161
  padding: 10px;
1145
1162
  }
1146
1163
 
1164
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1165
+ font-size: 16px;
1166
+ height: 45px;
1167
+ }
1168
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1169
+ font-size: 20px;
1170
+ line-height: 20px;
1171
+ }
1172
+
1147
1173
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1148
1174
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1149
1175
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,
package/styles/ribbon/material-dark.css CHANGED
@@ -184,6 +184,7 @@
184
184
  border-width: 0 0 1px 0;
185
185
  font-size: 14px;
186
186
  font-weight: 400;
187
+ box-shadow: none;
187
188
  }
188
189
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
189
190
  border-radius: unset;
@@ -321,6 +322,7 @@
321
322
  border: none;
322
323
  height: 32px;
323
324
  margin: auto;
325
+ box-shadow: none;
324
326
  }
325
327
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
326
328
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -460,6 +462,8 @@
460
462
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
461
463
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
462
464
  min-width: auto;
465
+ min-height: auto;
466
+ border-radius: unset;
463
467
  }
464
468
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
465
469
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -543,6 +547,7 @@
543
547
  font-weight: 400;
544
548
  font-size: 12px;
545
549
  text-transform: none;
550
+ box-shadow: none;
546
551
  }
547
552
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
548
553
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -651,6 +656,7 @@
651
656
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
652
657
  border: 1px solid transparent;
653
658
  border-radius: unset;
659
+ box-shadow: none;
654
660
  }
655
661
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
656
662
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -822,6 +828,17 @@
822
828
  padding-left: 34px !important; /* stylelint-disable-line declaration-no-important */
823
829
  }
824
830
 
831
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
832
+ font-size: 14px;
833
+ height: 36px;
834
+ -ms-flex-align: center;
835
+ align-items: center;
836
+ }
837
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
838
+ font-size: 16px;
839
+ line-height: 16px;
840
+ }
841
+
825
842
  .e-ribbon-tooltip .e-tip-content {
826
843
  padding: 4px;
827
844
  }
@@ -1198,6 +1215,15 @@
1198
1215
  padding: 8px;
1199
1216
  }
1200
1217
 
1218
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1219
+ font-size: 16px;
1220
+ height: 48px;
1221
+ }
1222
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1223
+ font-size: 20px;
1224
+ line-height: 20px;
1225
+ }
1226
+
1201
1227
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1202
1228
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1203
1229
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,
package/styles/ribbon/material.css CHANGED
@@ -217,6 +217,7 @@
217
217
  border-width: 0 0 1px 0;
218
218
  font-size: 14px;
219
219
  font-weight: 400;
220
+ box-shadow: none;
220
221
  }
221
222
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
222
223
  border-radius: unset;
@@ -354,6 +355,7 @@
354
355
  border: none;
355
356
  height: 32px;
356
357
  margin: auto;
358
+ box-shadow: none;
357
359
  }
358
360
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
359
361
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -493,6 +495,8 @@
493
495
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
494
496
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
495
497
  min-width: auto;
498
+ min-height: auto;
499
+ border-radius: unset;
496
500
  }
497
501
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
498
502
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -576,6 +580,7 @@
576
580
  font-weight: 400;
577
581
  font-size: 12px;
578
582
  text-transform: none;
583
+ box-shadow: none;
579
584
  }
580
585
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
581
586
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -684,6 +689,7 @@
684
689
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
685
690
  border: 1px solid transparent;
686
691
  border-radius: unset;
692
+ box-shadow: none;
687
693
  }
688
694
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
689
695
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -855,6 +861,17 @@
855
861
  padding-left: 34px !important; /* stylelint-disable-line declaration-no-important */
856
862
  }
857
863
 
864
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
865
+ font-size: 14px;
866
+ height: 36px;
867
+ -ms-flex-align: center;
868
+ align-items: center;
869
+ }
870
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
871
+ font-size: 16px;
872
+ line-height: 16px;
873
+ }
874
+
858
875
  .e-ribbon-tooltip .e-tip-content {
859
876
  padding: 4px;
860
877
  }
@@ -1231,6 +1248,15 @@
1231
1248
  padding: 8px;
1232
1249
  }
1233
1250
 
1251
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1252
+ font-size: 16px;
1253
+ height: 48px;
1254
+ }
1255
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1256
+ font-size: 20px;
1257
+ line-height: 20px;
1258
+ }
1259
+
1234
1260
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1235
1261
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1236
1262
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,