@syncfusion/ej2-angular-ribbon 22.1.34-ngcc → 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 (136) hide show
  1. package/esm2020/public_api.mjs +3 -0
  2. package/esm2020/src/index.mjs +9 -0
  3. package/esm2020/src/ribbon/collections.directive.mjs +70 -0
  4. package/esm2020/src/ribbon/groups.directive.mjs +66 -0
  5. package/esm2020/src/ribbon/items.directive.mjs +78 -0
  6. package/esm2020/src/ribbon/ribbon-all.module.mjs +47 -0
  7. package/esm2020/src/ribbon/ribbon.component.mjs +120 -0
  8. package/esm2020/src/ribbon/ribbon.module.mjs +61 -0
  9. package/esm2020/src/ribbon/tabs.directive.mjs +62 -0
  10. package/esm2020/syncfusion-ej2-angular-ribbon.mjs +5 -0
  11. package/fesm2015/syncfusion-ej2-angular-ribbon.mjs +482 -0
  12. package/fesm2015/syncfusion-ej2-angular-ribbon.mjs.map +1 -0
  13. package/fesm2020/syncfusion-ej2-angular-ribbon.mjs +482 -0
  14. package/fesm2020/syncfusion-ej2-angular-ribbon.mjs.map +1 -0
  15. package/package.json +27 -13
  16. package/src/ribbon/collections.directive.d.ts +5 -0
  17. package/src/ribbon/groups.directive.d.ts +5 -0
  18. package/src/ribbon/items.directive.d.ts +5 -0
  19. package/src/ribbon/ribbon-all.module.d.ts +6 -0
  20. package/src/ribbon/ribbon.component.d.ts +3 -0
  21. package/src/ribbon/ribbon.module.d.ts +10 -0
  22. package/src/ribbon/tabs.directive.d.ts +5 -0
  23. package/styles/bootstrap-dark.css +13 -78
  24. package/styles/bootstrap.css +13 -78
  25. package/styles/bootstrap4.css +13 -78
  26. package/styles/bootstrap5-dark.css +13 -78
  27. package/styles/bootstrap5.css +13 -78
  28. package/styles/fabric-dark.css +13 -78
  29. package/styles/fabric.css +13 -78
  30. package/styles/fluent-dark.css +13 -78
  31. package/styles/fluent.css +13 -78
  32. package/styles/highcontrast-light.css +13 -78
  33. package/styles/highcontrast.css +17 -82
  34. package/styles/material-dark.css +13 -78
  35. package/styles/material.css +13 -78
  36. package/styles/ribbon/_all.scss +2 -0
  37. package/styles/ribbon/_bootstrap-dark-definition.scss +206 -0
  38. package/styles/ribbon/_bootstrap-definition.scss +206 -0
  39. package/styles/ribbon/_bootstrap4-definition.scss +206 -0
  40. package/styles/ribbon/_bootstrap5-dark-definition.scss +1 -0
  41. package/styles/ribbon/_bootstrap5-definition.scss +206 -0
  42. package/styles/ribbon/_fabric-dark-definition.scss +206 -0
  43. package/styles/ribbon/_fabric-definition.scss +206 -0
  44. package/styles/ribbon/_fluent-dark-definition.scss +1 -0
  45. package/styles/ribbon/_fluent-definition.scss +206 -0
  46. package/styles/ribbon/_fusionnew-definition.scss +206 -0
  47. package/styles/ribbon/_highcontrast-definition.scss +206 -0
  48. package/styles/ribbon/_highcontrast-light-definition.scss +206 -0
  49. package/styles/ribbon/_layout.scss +1036 -0
  50. package/styles/ribbon/_material-dark-definition.scss +206 -0
  51. package/styles/ribbon/_material-definition.scss +206 -0
  52. package/styles/ribbon/_tailwind-dark-definition.scss +1 -0
  53. package/styles/ribbon/_tailwind-definition.scss +206 -0
  54. package/styles/ribbon/_theme.scss +343 -0
  55. package/styles/ribbon/bootstrap-dark.css +13 -78
  56. package/styles/ribbon/bootstrap-dark.scss +17 -1
  57. package/styles/ribbon/bootstrap.css +13 -78
  58. package/styles/ribbon/bootstrap.scss +17 -1
  59. package/styles/ribbon/bootstrap4.css +13 -78
  60. package/styles/ribbon/bootstrap4.scss +17 -1
  61. package/styles/ribbon/bootstrap5-dark.css +13 -78
  62. package/styles/ribbon/bootstrap5-dark.scss +17 -1
  63. package/styles/ribbon/bootstrap5.css +13 -78
  64. package/styles/ribbon/bootstrap5.scss +17 -1
  65. package/styles/ribbon/fabric-dark.css +13 -78
  66. package/styles/ribbon/fabric-dark.scss +17 -1
  67. package/styles/ribbon/fabric.css +13 -78
  68. package/styles/ribbon/fabric.scss +17 -1
  69. package/styles/ribbon/fluent-dark.css +13 -78
  70. package/styles/ribbon/fluent-dark.scss +17 -1
  71. package/styles/ribbon/fluent.css +13 -78
  72. package/styles/ribbon/fluent.scss +17 -1
  73. package/styles/ribbon/highcontrast-light.css +13 -78
  74. package/styles/ribbon/highcontrast-light.scss +16 -1
  75. package/styles/ribbon/highcontrast.css +17 -82
  76. package/styles/ribbon/highcontrast.scss +17 -1
  77. package/styles/ribbon/icons/_bootstrap-dark.scss +9 -0
  78. package/styles/ribbon/icons/_bootstrap.scss +9 -0
  79. package/styles/ribbon/icons/_bootstrap4.scss +9 -0
  80. package/styles/ribbon/icons/_bootstrap5-dark.scss +1 -0
  81. package/styles/ribbon/icons/_bootstrap5.scss +9 -0
  82. package/styles/ribbon/icons/_fabric-dark.scss +9 -0
  83. package/styles/ribbon/icons/_fabric.scss +9 -0
  84. package/styles/ribbon/icons/_fluent-dark.scss +1 -0
  85. package/styles/ribbon/icons/_fluent.scss +9 -0
  86. package/styles/ribbon/icons/_fusionnew.scss +9 -0
  87. package/styles/ribbon/icons/_highcontrast.scss +9 -0
  88. package/styles/ribbon/icons/_material-dark.scss +9 -0
  89. package/styles/ribbon/icons/_material.scss +9 -0
  90. package/styles/ribbon/icons/_material3.scss +9 -0
  91. package/styles/ribbon/icons/_tailwind-dark.scss +9 -0
  92. package/styles/ribbon/icons/_tailwind.scss +9 -0
  93. package/styles/ribbon/material-dark.css +13 -78
  94. package/styles/ribbon/material-dark.scss +17 -1
  95. package/styles/ribbon/material.css +13 -78
  96. package/styles/ribbon/material.scss +17 -1
  97. package/styles/ribbon/tailwind-dark.css +13 -78
  98. package/styles/ribbon/tailwind-dark.scss +17 -1
  99. package/styles/ribbon/tailwind.css +13 -78
  100. package/styles/ribbon/tailwind.scss +17 -1
  101. package/styles/tailwind-dark.css +13 -78
  102. package/styles/tailwind.css +13 -78
  103. package/syncfusion-ej2-angular-ribbon.d.ts +5 -0
  104. package/@syncfusion/ej2-angular-ribbon.es5.js +0 -566
  105. package/@syncfusion/ej2-angular-ribbon.es5.js.map +0 -1
  106. package/@syncfusion/ej2-angular-ribbon.js +0 -526
  107. package/@syncfusion/ej2-angular-ribbon.js.map +0 -1
  108. package/CHANGELOG.md +0 -21
  109. package/dist/ej2-angular-ribbon.umd.js +0 -710
  110. package/dist/ej2-angular-ribbon.umd.js.map +0 -1
  111. package/dist/ej2-angular-ribbon.umd.min.js +0 -11
  112. package/dist/ej2-angular-ribbon.umd.min.js.map +0 -1
  113. package/ej2-angular-ribbon.d.ts +0 -5
  114. package/ej2-angular-ribbon.metadata.json +0 -1
  115. package/license +0 -10
  116. package/postinstall/tagchange.js +0 -18
  117. package/schematics/collection.json +0 -10
  118. package/schematics/ng-add/index.d.ts +0 -3
  119. package/schematics/ng-add/index.js +0 -9
  120. package/schematics/ng-add/index.ts +0 -10
  121. package/schematics/ng-add/schema.d.ts +0 -13
  122. package/schematics/ng-add/schema.js +0 -2
  123. package/schematics/ng-add/schema.json +0 -34
  124. package/schematics/ng-add/schema.ts +0 -30
  125. package/schematics/tsconfig.json +0 -25
  126. package/schematics/utils/lib-details.d.ts +0 -4
  127. package/schematics/utils/lib-details.js +0 -6
  128. package/schematics/utils/lib-details.ts +0 -4
  129. package/styles/material3-dark.css +0 -1671
  130. package/styles/material3-dark.scss +0 -2
  131. package/styles/material3.css +0 -1727
  132. package/styles/material3.scss +0 -2
  133. package/styles/ribbon/material3-dark.css +0 -1671
  134. package/styles/ribbon/material3-dark.scss +0 -2
  135. package/styles/ribbon/material3.css +0 -1727
  136. package/styles/ribbon/material3.scss +0 -2
package/styles/ribbon/bootstrap5-dark.css CHANGED
@@ -214,6 +214,9 @@
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
+ }
217
220
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
218
221
  position: absolute;
219
222
  line-height: 22px;
@@ -222,7 +225,6 @@
222
225
  border-width: unset;
223
226
  font-size: 14px;
224
227
  font-weight: 400;
225
- box-shadow: none;
226
228
  }
227
229
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
228
230
  border-radius: unset;
@@ -298,9 +300,6 @@
298
300
  height: auto;
299
301
  min-height: auto;
300
302
  }
301
- .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
302
- box-shadow: none;
303
- }
304
303
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
305
304
  padding: 0;
306
305
  }
@@ -310,10 +309,9 @@
310
309
  min-width: auto;
311
310
  width: auto;
312
311
  border-style: solid;
313
- transform: none;
314
312
  border-width: 1px;
315
313
  border-radius: 2px;
316
- z-index: 3;
314
+ z-index: 2;
317
315
  }
318
316
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
319
317
  display: none;
@@ -321,7 +319,6 @@
321
319
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
322
320
  font-size: 14px;
323
321
  height: auto;
324
- transform: none;
325
322
  line-height: 14px;
326
323
  padding: 0 5px;
327
324
  width: auto;
@@ -360,7 +357,6 @@
360
357
  border: none;
361
358
  height: 26px;
362
359
  margin: auto;
363
- box-shadow: none;
364
360
  }
365
361
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
366
362
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -391,9 +387,6 @@
391
387
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
392
388
  overflow-y: hidden;
393
389
  }
394
- .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
395
- margin-bottom: 0;
396
- }
397
390
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
398
391
  padding-top: 1px;
399
392
  height: auto;
@@ -443,9 +436,6 @@
443
436
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
444
437
  left: var(--fileMenuWidth);
445
438
  }
446
- .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
447
- padding-right: 30px;
448
- }
449
439
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
450
440
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
451
441
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -457,9 +447,6 @@
457
447
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
458
448
  right: var(--fileMenuWidth);
459
449
  }
460
- .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
461
- padding-left: 30px;
462
- }
463
450
 
464
451
  .e-ribbon.e-rbn,
465
452
  .e-ribbon-group-overflow-ddb {
@@ -500,8 +487,6 @@
500
487
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
501
488
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
502
489
  min-width: auto;
503
- min-height: auto;
504
- border-radius: unset;
505
490
  }
506
491
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
507
492
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -585,7 +570,6 @@
585
570
  font-weight: 400;
586
571
  font-size: 12px;
587
572
  text-transform: none;
588
- box-shadow: none;
589
573
  }
590
574
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
591
575
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -684,7 +668,6 @@
684
668
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
685
669
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
686
670
  border: 1px solid transparent;
687
- border-radius: 4px;
688
671
  }
689
672
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
690
673
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -694,7 +677,6 @@
694
677
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
695
678
  border: 1px solid transparent;
696
679
  border-radius: 4px;
697
- box-shadow: none;
698
680
  }
699
681
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
700
682
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -804,8 +786,7 @@
804
786
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
805
787
  display: none;
806
788
  }
807
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
808
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
789
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
809
790
  margin: 3px 5px;
810
791
  }
811
792
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -829,24 +810,22 @@
829
810
  -ms-flex-pack: start;
830
811
  justify-content: flex-start;
831
812
  }
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
+ }
832
818
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
833
819
  padding: 3px 5px;
834
820
  font-weight: 500;
835
821
  line-height: 18px;
836
822
  }
837
823
 
838
- .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
839
- .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
840
- transform: rotate(-90deg);
841
- padding: 5px;
842
- margin: 0 0 0 auto;
843
- }
844
-
845
824
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
846
825
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
847
826
  transform: rotate(90deg);
848
- padding: 5px;
849
- margin: 0 auto 0 0;
827
+ margin-right: auto;
828
+ margin-left: unset;
850
829
  }
851
830
 
852
831
  .e-ribbon-menu {
@@ -866,17 +845,6 @@
866
845
  padding-left: 38px !important; /* stylelint-disable-line declaration-no-important */
867
846
  }
868
847
 
869
- .e-ribbon-control.e-dropdown-popup ul .e-item {
870
- font-size: 12px;
871
- height: 24px;
872
- -ms-flex-align: center;
873
- align-items: center;
874
- }
875
- .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
876
- font-size: 16px;
877
- line-height: 16px;
878
- }
879
-
880
848
  .e-ribbon-tooltip .e-tip-content {
881
849
  padding: 4px;
882
850
  }
@@ -915,10 +883,6 @@
915
883
  padding-right: 16px;
916
884
  height: 48px;
917
885
  }
918
- .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
919
- .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
920
- min-height: auto;
921
- }
922
886
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
923
887
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
924
888
  height: 48px;
@@ -1010,12 +974,6 @@
1010
974
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
1011
975
  height: auto;
1012
976
  }
1013
- .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1014
- .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1015
- .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
1016
- .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
1017
- margin-bottom: 0;
1018
- }
1019
977
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
1020
978
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
1021
979
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1230,9 +1188,7 @@
1230
1188
  }
1231
1189
 
1232
1190
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1233
- .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1234
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1235
- .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 {
1236
1192
  margin: 3px 7px;
1237
1193
  }
1238
1194
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1240,27 +1196,6 @@
1240
1196
  margin: 7px;
1241
1197
  padding: 0;
1242
1198
  }
1243
- .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,
1244
- .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1245
- .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,
1246
- .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1247
- padding: 7px;
1248
- }
1249
- .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1250
- .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1251
- .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1252
- .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1253
- padding: 7px;
1254
- }
1255
-
1256
- .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1257
- font-size: 14px;
1258
- height: 32px;
1259
- }
1260
- .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1261
- font-size: 20px;
1262
- line-height: 20px;
1263
- }
1264
1199
 
1265
1200
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1266
1201
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/ribbon/bootstrap5-dark.scss CHANGED
@@ -1 +1,17 @@
1
- @import 'ej2-ribbon/styles/ribbon/bootstrap5-dark.scss';
1
+ @import 'ej2-base/styles/bootstrap5-dark-definition.scss';
2
+ @import 'ej2-popups/styles/tooltip/bootstrap5-dark-definition.scss';
3
+ @import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
4
+ @import 'ej2-buttons/styles/check-box/bootstrap5-dark-definition.scss';
5
+ @import 'ej2-splitbuttons/styles/drop-down-button/bootstrap5-dark-definition.scss';
6
+ @import 'ej2-dropdowns/styles/drop-down-base/bootstrap5-dark-definition.scss';
7
+ @import 'ej2-dropdowns/styles/drop-down-list/bootstrap5-dark-definition.scss';
8
+ @import 'ej2-dropdowns/styles/combo-box/bootstrap5-dark-definition.scss';
9
+ @import 'ej2-navigations/styles/h-scroll/bootstrap5-dark-definition.scss';
10
+ @import 'ej2-navigations/styles/v-scroll/bootstrap5-dark-definition.scss';
11
+ @import 'ej2-navigations/styles/context-menu/bootstrap5-dark-definition.scss';
12
+ @import 'ej2-navigations/styles/toolbar/bootstrap5-dark-definition.scss';
13
+ @import 'ej2-navigations/styles/menu/bootstrap5-dark-definition.scss';
14
+ @import 'ej2-navigations/styles/tab/bootstrap5-dark-definition.scss';
15
+ @import 'bootstrap5-dark-definition.scss';
16
+ @import 'icons/bootstrap5-dark.scss';
17
+ @import 'all.scss';
package/styles/ribbon/bootstrap5.css CHANGED
@@ -214,6 +214,9 @@
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
+ }
217
220
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
218
221
  position: absolute;
219
222
  line-height: 22px;
@@ -222,7 +225,6 @@
222
225
  border-width: unset;
223
226
  font-size: 14px;
224
227
  font-weight: 400;
225
- box-shadow: none;
226
228
  }
227
229
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
228
230
  border-radius: unset;
@@ -298,9 +300,6 @@
298
300
  height: auto;
299
301
  min-height: auto;
300
302
  }
301
- .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
302
- box-shadow: none;
303
- }
304
303
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
305
304
  padding: 0;
306
305
  }
@@ -310,10 +309,9 @@
310
309
  min-width: auto;
311
310
  width: auto;
312
311
  border-style: solid;
313
- transform: none;
314
312
  border-width: 1px;
315
313
  border-radius: 2px;
316
- z-index: 3;
314
+ z-index: 2;
317
315
  }
318
316
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
319
317
  display: none;
@@ -321,7 +319,6 @@
321
319
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
322
320
  font-size: 14px;
323
321
  height: auto;
324
- transform: none;
325
322
  line-height: 14px;
326
323
  padding: 0 5px;
327
324
  width: auto;
@@ -360,7 +357,6 @@
360
357
  border: none;
361
358
  height: 26px;
362
359
  margin: auto;
363
- box-shadow: none;
364
360
  }
365
361
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
366
362
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -391,9 +387,6 @@
391
387
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
392
388
  overflow-y: hidden;
393
389
  }
394
- .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
395
- margin-bottom: 0;
396
- }
397
390
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
398
391
  padding-top: 1px;
399
392
  height: auto;
@@ -443,9 +436,6 @@
443
436
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
444
437
  left: var(--fileMenuWidth);
445
438
  }
446
- .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
447
- padding-right: 30px;
448
- }
449
439
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
450
440
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
451
441
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -457,9 +447,6 @@
457
447
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
458
448
  right: var(--fileMenuWidth);
459
449
  }
460
- .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
461
- padding-left: 30px;
462
- }
463
450
 
464
451
  .e-ribbon.e-rbn,
465
452
  .e-ribbon-group-overflow-ddb {
@@ -500,8 +487,6 @@
500
487
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
501
488
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
502
489
  min-width: auto;
503
- min-height: auto;
504
- border-radius: unset;
505
490
  }
506
491
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
507
492
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -585,7 +570,6 @@
585
570
  font-weight: 400;
586
571
  font-size: 12px;
587
572
  text-transform: none;
588
- box-shadow: none;
589
573
  }
590
574
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
591
575
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -684,7 +668,6 @@
684
668
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
685
669
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
686
670
  border: 1px solid transparent;
687
- border-radius: 4px;
688
671
  }
689
672
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
690
673
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -694,7 +677,6 @@
694
677
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
695
678
  border: 1px solid transparent;
696
679
  border-radius: 4px;
697
- box-shadow: none;
698
680
  }
699
681
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
700
682
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -804,8 +786,7 @@
804
786
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
805
787
  display: none;
806
788
  }
807
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
808
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
789
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
809
790
  margin: 3px 5px;
810
791
  }
811
792
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -829,24 +810,22 @@
829
810
  -ms-flex-pack: start;
830
811
  justify-content: flex-start;
831
812
  }
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
+ }
832
818
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
833
819
  padding: 3px 5px;
834
820
  font-weight: 500;
835
821
  line-height: 18px;
836
822
  }
837
823
 
838
- .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
839
- .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
840
- transform: rotate(-90deg);
841
- padding: 5px;
842
- margin: 0 0 0 auto;
843
- }
844
-
845
824
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
846
825
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
847
826
  transform: rotate(90deg);
848
- padding: 5px;
849
- margin: 0 auto 0 0;
827
+ margin-right: auto;
828
+ margin-left: unset;
850
829
  }
851
830
 
852
831
  .e-ribbon-menu {
@@ -866,17 +845,6 @@
866
845
  padding-left: 38px !important; /* stylelint-disable-line declaration-no-important */
867
846
  }
868
847
 
869
- .e-ribbon-control.e-dropdown-popup ul .e-item {
870
- font-size: 12px;
871
- height: 24px;
872
- -ms-flex-align: center;
873
- align-items: center;
874
- }
875
- .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
876
- font-size: 16px;
877
- line-height: 16px;
878
- }
879
-
880
848
  .e-ribbon-tooltip .e-tip-content {
881
849
  padding: 4px;
882
850
  }
@@ -915,10 +883,6 @@
915
883
  padding-right: 16px;
916
884
  height: 48px;
917
885
  }
918
- .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
919
- .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
920
- min-height: auto;
921
- }
922
886
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
923
887
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
924
888
  height: 48px;
@@ -1010,12 +974,6 @@
1010
974
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
1011
975
  height: auto;
1012
976
  }
1013
- .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1014
- .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1015
- .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
1016
- .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
1017
- margin-bottom: 0;
1018
- }
1019
977
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
1020
978
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
1021
979
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1230,9 +1188,7 @@
1230
1188
  }
1231
1189
 
1232
1190
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1233
- .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1234
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1235
- .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 {
1236
1192
  margin: 3px 7px;
1237
1193
  }
1238
1194
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1240,27 +1196,6 @@
1240
1196
  margin: 7px;
1241
1197
  padding: 0;
1242
1198
  }
1243
- .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,
1244
- .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1245
- .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,
1246
- .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1247
- padding: 7px;
1248
- }
1249
- .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1250
- .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1251
- .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1252
- .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1253
- padding: 7px;
1254
- }
1255
-
1256
- .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1257
- font-size: 14px;
1258
- height: 32px;
1259
- }
1260
- .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1261
- font-size: 20px;
1262
- line-height: 20px;
1263
- }
1264
1199
 
1265
1200
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1266
1201
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/ribbon/bootstrap5.scss CHANGED
@@ -1 +1,17 @@
1
- @import 'ej2-ribbon/styles/ribbon/bootstrap5.scss';
1
+ @import 'ej2-base/styles/bootstrap5-definition.scss';
2
+ @import 'ej2-popups/styles/tooltip/bootstrap5-definition.scss';
3
+ @import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
4
+ @import 'ej2-buttons/styles/check-box/bootstrap5-definition.scss';
5
+ @import 'ej2-splitbuttons/styles/drop-down-button/bootstrap5-definition.scss';
6
+ @import 'ej2-dropdowns/styles/drop-down-base/bootstrap5-definition.scss';
7
+ @import 'ej2-dropdowns/styles/drop-down-list/bootstrap5-definition.scss';
8
+ @import 'ej2-dropdowns/styles/combo-box/bootstrap5-definition.scss';
9
+ @import 'ej2-navigations/styles/h-scroll/bootstrap5-definition.scss';
10
+ @import 'ej2-navigations/styles/v-scroll/bootstrap5-definition.scss';
11
+ @import 'ej2-navigations/styles/context-menu/bootstrap5-definition.scss';
12
+ @import 'ej2-navigations/styles/toolbar/bootstrap5-definition.scss';
13
+ @import 'ej2-navigations/styles/menu/bootstrap5-definition.scss';
14
+ @import 'ej2-navigations/styles/tab/bootstrap5-definition.scss';
15
+ @import 'bootstrap5-definition.scss';
16
+ @import 'icons/bootstrap5.scss';
17
+ @import 'all.scss';