@syncfusion/ej2-angular-ribbon 22.1.34 → 22.1.39-ngcc

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/@syncfusion/ej2-angular-ribbon.es5.js +566 -0
  2. package/@syncfusion/ej2-angular-ribbon.es5.js.map +1 -0
  3. package/@syncfusion/ej2-angular-ribbon.js +526 -0
  4. package/@syncfusion/ej2-angular-ribbon.js.map +1 -0
  5. package/CHANGELOG.md +28 -0
  6. package/dist/ej2-angular-ribbon.umd.js +710 -0
  7. package/dist/ej2-angular-ribbon.umd.js.map +1 -0
  8. package/dist/ej2-angular-ribbon.umd.min.js +11 -0
  9. package/dist/ej2-angular-ribbon.umd.min.js.map +1 -0
  10. package/ej2-angular-ribbon.d.ts +5 -0
  11. package/ej2-angular-ribbon.metadata.json +1 -0
  12. package/license +10 -0
  13. package/package.json +14 -28
  14. package/postinstall/tagchange.js +18 -0
  15. package/schematics/collection.json +10 -0
  16. package/schematics/ng-add/index.d.ts +3 -0
  17. package/schematics/ng-add/index.js +9 -0
  18. package/schematics/ng-add/index.ts +10 -0
  19. package/schematics/ng-add/schema.d.ts +13 -0
  20. package/schematics/ng-add/schema.js +2 -0
  21. package/schematics/ng-add/schema.json +34 -0
  22. package/schematics/ng-add/schema.ts +30 -0
  23. package/schematics/tsconfig.json +25 -0
  24. package/schematics/utils/lib-details.d.ts +4 -0
  25. package/schematics/utils/lib-details.js +6 -0
  26. package/schematics/utils/lib-details.ts +4 -0
  27. package/src/ribbon/collections.directive.d.ts +0 -5
  28. package/src/ribbon/groups.directive.d.ts +0 -5
  29. package/src/ribbon/items.directive.d.ts +0 -5
  30. package/src/ribbon/ribbon-all.module.d.ts +0 -6
  31. package/src/ribbon/ribbon.component.d.ts +0 -3
  32. package/src/ribbon/ribbon.module.d.ts +0 -10
  33. package/src/ribbon/tabs.directive.d.ts +0 -5
  34. package/styles/bootstrap-dark.css +79 -13
  35. package/styles/bootstrap.css +79 -13
  36. package/styles/bootstrap4.css +79 -13
  37. package/styles/bootstrap5-dark.css +79 -13
  38. package/styles/bootstrap5.css +79 -13
  39. package/styles/fabric-dark.css +79 -13
  40. package/styles/fabric.css +79 -13
  41. package/styles/fluent-dark.css +79 -13
  42. package/styles/fluent.css +79 -13
  43. package/styles/highcontrast-light.css +79 -13
  44. package/styles/highcontrast.css +83 -17
  45. package/styles/material-dark.css +79 -13
  46. package/styles/material.css +79 -13
  47. package/styles/material3-dark.css +1672 -0
  48. package/styles/material3-dark.scss +2 -0
  49. package/styles/material3.css +1728 -0
  50. package/styles/material3.scss +2 -0
  51. package/styles/ribbon/bootstrap-dark.css +79 -13
  52. package/styles/ribbon/bootstrap-dark.scss +1 -17
  53. package/styles/ribbon/bootstrap.css +79 -13
  54. package/styles/ribbon/bootstrap.scss +1 -17
  55. package/styles/ribbon/bootstrap4.css +79 -13
  56. package/styles/ribbon/bootstrap4.scss +1 -17
  57. package/styles/ribbon/bootstrap5-dark.css +79 -13
  58. package/styles/ribbon/bootstrap5-dark.scss +1 -17
  59. package/styles/ribbon/bootstrap5.css +79 -13
  60. package/styles/ribbon/bootstrap5.scss +1 -17
  61. package/styles/ribbon/fabric-dark.css +79 -13
  62. package/styles/ribbon/fabric-dark.scss +1 -17
  63. package/styles/ribbon/fabric.css +79 -13
  64. package/styles/ribbon/fabric.scss +1 -17
  65. package/styles/ribbon/fluent-dark.css +79 -13
  66. package/styles/ribbon/fluent-dark.scss +1 -17
  67. package/styles/ribbon/fluent.css +79 -13
  68. package/styles/ribbon/fluent.scss +1 -17
  69. package/styles/ribbon/highcontrast-light.css +79 -13
  70. package/styles/ribbon/highcontrast-light.scss +1 -16
  71. package/styles/ribbon/highcontrast.css +83 -17
  72. package/styles/ribbon/highcontrast.scss +1 -17
  73. package/styles/ribbon/material-dark.css +79 -13
  74. package/styles/ribbon/material-dark.scss +1 -17
  75. package/styles/ribbon/material.css +79 -13
  76. package/styles/ribbon/material.scss +1 -17
  77. package/styles/ribbon/material3-dark.css +1672 -0
  78. package/styles/ribbon/material3-dark.scss +2 -0
  79. package/styles/ribbon/material3.css +1728 -0
  80. package/styles/ribbon/material3.scss +2 -0
  81. package/styles/ribbon/tailwind-dark.css +79 -13
  82. package/styles/ribbon/tailwind-dark.scss +1 -17
  83. package/styles/ribbon/tailwind.css +79 -13
  84. package/styles/ribbon/tailwind.scss +1 -17
  85. package/styles/tailwind-dark.css +79 -13
  86. package/styles/tailwind.css +79 -13
  87. package/esm2020/public_api.mjs +0 -3
  88. package/esm2020/src/index.mjs +0 -9
  89. package/esm2020/src/ribbon/collections.directive.mjs +0 -70
  90. package/esm2020/src/ribbon/groups.directive.mjs +0 -66
  91. package/esm2020/src/ribbon/items.directive.mjs +0 -78
  92. package/esm2020/src/ribbon/ribbon-all.module.mjs +0 -47
  93. package/esm2020/src/ribbon/ribbon.component.mjs +0 -120
  94. package/esm2020/src/ribbon/ribbon.module.mjs +0 -61
  95. package/esm2020/src/ribbon/tabs.directive.mjs +0 -62
  96. package/esm2020/syncfusion-ej2-angular-ribbon.mjs +0 -5
  97. package/fesm2015/syncfusion-ej2-angular-ribbon.mjs +0 -482
  98. package/fesm2015/syncfusion-ej2-angular-ribbon.mjs.map +0 -1
  99. package/fesm2020/syncfusion-ej2-angular-ribbon.mjs +0 -482
  100. package/fesm2020/syncfusion-ej2-angular-ribbon.mjs.map +0 -1
  101. package/styles/ribbon/_all.scss +0 -2
  102. package/styles/ribbon/_bootstrap-dark-definition.scss +0 -206
  103. package/styles/ribbon/_bootstrap-definition.scss +0 -206
  104. package/styles/ribbon/_bootstrap4-definition.scss +0 -206
  105. package/styles/ribbon/_bootstrap5-dark-definition.scss +0 -1
  106. package/styles/ribbon/_bootstrap5-definition.scss +0 -206
  107. package/styles/ribbon/_fabric-dark-definition.scss +0 -206
  108. package/styles/ribbon/_fabric-definition.scss +0 -206
  109. package/styles/ribbon/_fluent-dark-definition.scss +0 -1
  110. package/styles/ribbon/_fluent-definition.scss +0 -206
  111. package/styles/ribbon/_fusionnew-definition.scss +0 -206
  112. package/styles/ribbon/_highcontrast-definition.scss +0 -206
  113. package/styles/ribbon/_highcontrast-light-definition.scss +0 -206
  114. package/styles/ribbon/_layout.scss +0 -1036
  115. package/styles/ribbon/_material-dark-definition.scss +0 -206
  116. package/styles/ribbon/_material-definition.scss +0 -206
  117. package/styles/ribbon/_tailwind-dark-definition.scss +0 -1
  118. package/styles/ribbon/_tailwind-definition.scss +0 -206
  119. package/styles/ribbon/_theme.scss +0 -343
  120. package/styles/ribbon/icons/_bootstrap-dark.scss +0 -9
  121. package/styles/ribbon/icons/_bootstrap.scss +0 -9
  122. package/styles/ribbon/icons/_bootstrap4.scss +0 -9
  123. package/styles/ribbon/icons/_bootstrap5-dark.scss +0 -1
  124. package/styles/ribbon/icons/_bootstrap5.scss +0 -9
  125. package/styles/ribbon/icons/_fabric-dark.scss +0 -9
  126. package/styles/ribbon/icons/_fabric.scss +0 -9
  127. package/styles/ribbon/icons/_fluent-dark.scss +0 -1
  128. package/styles/ribbon/icons/_fluent.scss +0 -9
  129. package/styles/ribbon/icons/_fusionnew.scss +0 -9
  130. package/styles/ribbon/icons/_highcontrast.scss +0 -9
  131. package/styles/ribbon/icons/_material-dark.scss +0 -9
  132. package/styles/ribbon/icons/_material.scss +0 -9
  133. package/styles/ribbon/icons/_material3.scss +0 -9
  134. package/styles/ribbon/icons/_tailwind-dark.scss +0 -9
  135. package/styles/ribbon/icons/_tailwind.scss +0 -9
  136. package/syncfusion-ej2-angular-ribbon.d.ts +0 -5
@@ -0,0 +1,2 @@
1
+
2
+ @import 'ribbon/material3.scss';
@@ -130,9 +130,6 @@
130
130
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
131
131
  display: none;
132
132
  }
133
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
134
- width: fit-content;
135
- }
136
133
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
137
134
  position: absolute;
138
135
  line-height: 22px;
@@ -141,6 +138,7 @@
141
138
  border-width: unset;
142
139
  font-size: 14px;
143
140
  font-weight: 400;
141
+ box-shadow: none;
144
142
  }
145
143
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
146
144
  border-radius: unset;
@@ -216,6 +214,9 @@
216
214
  height: auto;
217
215
  min-height: auto;
218
216
  }
217
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
218
+ box-shadow: none;
219
+ }
219
220
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
220
221
  padding: 0;
221
222
  }
@@ -225,9 +226,10 @@
225
226
  min-width: auto;
226
227
  width: auto;
227
228
  border-style: solid;
229
+ transform: none;
228
230
  border-width: 1px;
229
231
  border-radius: 2px;
230
- z-index: 2;
232
+ z-index: 3;
231
233
  }
232
234
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
233
235
  display: none;
@@ -235,6 +237,7 @@
235
237
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
236
238
  font-size: 16px;
237
239
  height: auto;
240
+ transform: none;
238
241
  line-height: 16px;
239
242
  padding: 0 4px;
240
243
  width: auto;
@@ -273,6 +276,7 @@
273
276
  border: none;
274
277
  height: 32px;
275
278
  margin: auto;
279
+ box-shadow: none;
276
280
  }
277
281
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
278
282
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -303,6 +307,9 @@
303
307
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
304
308
  overflow-y: hidden;
305
309
  }
310
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
311
+ margin-bottom: 0;
312
+ }
306
313
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
307
314
  padding-top: 2px;
308
315
  height: auto;
@@ -352,6 +359,9 @@
352
359
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
353
360
  left: var(--fileMenuWidth);
354
361
  }
362
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
363
+ padding-right: 30px;
364
+ }
355
365
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
356
366
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
357
367
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -363,6 +373,9 @@
363
373
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
364
374
  right: var(--fileMenuWidth);
365
375
  }
376
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
377
+ padding-left: 30px;
378
+ }
366
379
 
367
380
  .e-ribbon.e-rbn,
368
381
  .e-ribbon-group-overflow-ddb {
@@ -403,6 +416,8 @@
403
416
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
404
417
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
405
418
  min-width: auto;
419
+ min-height: auto;
420
+ border-radius: unset;
406
421
  }
407
422
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
408
423
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -486,6 +501,7 @@
486
501
  font-weight: 400;
487
502
  font-size: 12px;
488
503
  text-transform: none;
504
+ box-shadow: none;
489
505
  }
490
506
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
491
507
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -584,6 +600,7 @@
584
600
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
585
601
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
586
602
  border: 1px solid transparent;
603
+ border-radius: 2px;
587
604
  }
588
605
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
589
606
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -593,6 +610,7 @@
593
610
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
594
611
  border: 1px solid transparent;
595
612
  border-radius: 2px;
613
+ box-shadow: none;
596
614
  }
597
615
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
598
616
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -702,7 +720,8 @@
702
720
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
703
721
  display: none;
704
722
  }
705
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
723
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
724
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
706
725
  margin: 2px 8px;
707
726
  }
708
727
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -716,6 +735,7 @@
716
735
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
717
736
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
718
737
  line-height: 22px;
738
+ overflow: hidden;
719
739
  }
720
740
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
721
741
  width: inherit;
@@ -726,22 +746,24 @@
726
746
  -ms-flex-pack: start;
727
747
  justify-content: flex-start;
728
748
  }
729
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
730
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
731
- transform: rotate(-90deg);
732
- margin-left: auto;
733
- }
734
749
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
735
750
  padding: 2px 8px;
736
751
  font-weight: 400;
737
752
  line-height: 22px;
738
753
  }
739
754
 
755
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
756
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
757
+ transform: rotate(-90deg);
758
+ padding: 8px;
759
+ margin: 0 0 0 auto;
760
+ }
761
+
740
762
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
741
763
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
742
764
  transform: rotate(90deg);
743
- margin-right: auto;
744
- margin-left: unset;
765
+ padding: 8px;
766
+ margin: 0 auto 0 0;
745
767
  }
746
768
 
747
769
  .e-ribbon-menu {
@@ -761,6 +783,17 @@
761
783
  padding-left: 37px !important; /* stylelint-disable-line declaration-no-important */
762
784
  }
763
785
 
786
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
787
+ font-size: 14px;
788
+ height: 26px;
789
+ -ms-flex-align: center;
790
+ align-items: center;
791
+ }
792
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
793
+ font-size: 16px;
794
+ line-height: 16px;
795
+ }
796
+
764
797
  .e-ribbon-tooltip .e-tip-content {
765
798
  padding: 4px;
766
799
  }
@@ -799,6 +832,10 @@
799
832
  padding-right: 16px;
800
833
  height: 50px;
801
834
  }
835
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
836
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
837
+ min-height: auto;
838
+ }
802
839
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
803
840
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
804
841
  height: 50px;
@@ -890,6 +927,12 @@
890
927
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
891
928
  height: auto;
892
929
  }
930
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
931
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
932
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
933
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
934
+ margin-bottom: 0;
935
+ }
893
936
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
894
937
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
895
938
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1104,7 +1147,9 @@
1104
1147
  }
1105
1148
 
1106
1149
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1107
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1150
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1151
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1152
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1108
1153
  margin: 2px 10px;
1109
1154
  }
1110
1155
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1112,6 +1157,27 @@
1112
1157
  margin: 10px;
1113
1158
  padding: 0;
1114
1159
  }
1160
+ .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,
1161
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1162
+ .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,
1163
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1164
+ padding: 10px;
1165
+ }
1166
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1167
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1168
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1169
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1170
+ padding: 10px;
1171
+ }
1172
+
1173
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1174
+ font-size: 14px;
1175
+ height: 32px;
1176
+ }
1177
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1178
+ font-size: 20px;
1179
+ line-height: 20px;
1180
+ }
1115
1181
 
1116
1182
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1117
1183
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
@@ -1,17 +1 @@
1
- @import 'ej2-base/styles/bootstrap-dark-definition.scss';
2
- @import 'ej2-popups/styles/tooltip/bootstrap-dark-definition.scss';
3
- @import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
4
- @import 'ej2-buttons/styles/check-box/bootstrap-dark-definition.scss';
5
- @import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition.scss';
6
- @import 'ej2-dropdowns/styles/drop-down-base/bootstrap-dark-definition.scss';
7
- @import 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition.scss';
8
- @import 'ej2-dropdowns/styles/combo-box/bootstrap-dark-definition.scss';
9
- @import 'ej2-navigations/styles/h-scroll/bootstrap-dark-definition.scss';
10
- @import 'ej2-navigations/styles/v-scroll/bootstrap-dark-definition.scss';
11
- @import 'ej2-navigations/styles/context-menu/bootstrap-dark-definition.scss';
12
- @import 'ej2-navigations/styles/toolbar/bootstrap-dark-definition.scss';
13
- @import 'ej2-navigations/styles/menu/bootstrap-dark-definition.scss';
14
- @import 'ej2-navigations/styles/tab/bootstrap-dark-definition.scss';
15
- @import 'bootstrap-dark-definition.scss';
16
- @import 'icons/bootstrap-dark.scss';
17
- @import 'all.scss';
1
+ @import 'ej2-ribbon/styles/ribbon/bootstrap-dark.scss';
@@ -135,9 +135,6 @@
135
135
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
136
136
  display: none;
137
137
  }
138
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
139
- width: fit-content;
140
- }
141
138
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
142
139
  position: absolute;
143
140
  line-height: 22px;
@@ -146,6 +143,7 @@
146
143
  border-width: unset;
147
144
  font-size: 14px;
148
145
  font-weight: 400;
146
+ box-shadow: none;
149
147
  }
150
148
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
151
149
  border-radius: unset;
@@ -221,6 +219,9 @@
221
219
  height: auto;
222
220
  min-height: auto;
223
221
  }
222
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
223
+ box-shadow: none;
224
+ }
224
225
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
225
226
  padding: 0;
226
227
  }
@@ -230,9 +231,10 @@
230
231
  min-width: auto;
231
232
  width: auto;
232
233
  border-style: solid;
234
+ transform: none;
233
235
  border-width: 1px;
234
236
  border-radius: 2px;
235
- z-index: 2;
237
+ z-index: 3;
236
238
  }
237
239
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
238
240
  display: none;
@@ -240,6 +242,7 @@
240
242
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
241
243
  font-size: 16px;
242
244
  height: auto;
245
+ transform: none;
243
246
  line-height: 16px;
244
247
  padding: 0 4px;
245
248
  width: auto;
@@ -278,6 +281,7 @@
278
281
  border: none;
279
282
  height: 32px;
280
283
  margin: auto;
284
+ box-shadow: none;
281
285
  }
282
286
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
283
287
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -308,6 +312,9 @@
308
312
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
309
313
  overflow-y: hidden;
310
314
  }
315
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
316
+ margin-bottom: 0;
317
+ }
311
318
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
312
319
  padding-top: 2px;
313
320
  height: auto;
@@ -357,6 +364,9 @@
357
364
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
358
365
  left: var(--fileMenuWidth);
359
366
  }
367
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
368
+ padding-right: 30px;
369
+ }
360
370
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
361
371
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
362
372
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -368,6 +378,9 @@
368
378
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
369
379
  right: var(--fileMenuWidth);
370
380
  }
381
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
382
+ padding-left: 30px;
383
+ }
371
384
 
372
385
  .e-ribbon.e-rbn,
373
386
  .e-ribbon-group-overflow-ddb {
@@ -408,6 +421,8 @@
408
421
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
409
422
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
410
423
  min-width: auto;
424
+ min-height: auto;
425
+ border-radius: unset;
411
426
  }
412
427
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
413
428
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -491,6 +506,7 @@
491
506
  font-weight: 400;
492
507
  font-size: 12px;
493
508
  text-transform: none;
509
+ box-shadow: none;
494
510
  }
495
511
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
496
512
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -589,6 +605,7 @@
589
605
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
590
606
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
591
607
  border: 1px solid transparent;
608
+ border-radius: 4px;
592
609
  }
593
610
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
594
611
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -598,6 +615,7 @@
598
615
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
599
616
  border: 1px solid transparent;
600
617
  border-radius: 4px;
618
+ box-shadow: none;
601
619
  }
602
620
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
603
621
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -707,7 +725,8 @@
707
725
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
708
726
  display: none;
709
727
  }
710
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
728
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
729
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
711
730
  margin: 2px 8px;
712
731
  }
713
732
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -721,6 +740,7 @@
721
740
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
722
741
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
723
742
  line-height: 22px;
743
+ overflow: hidden;
724
744
  }
725
745
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
726
746
  width: inherit;
@@ -731,22 +751,24 @@
731
751
  -ms-flex-pack: start;
732
752
  justify-content: flex-start;
733
753
  }
734
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
735
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
736
- transform: rotate(-90deg);
737
- margin-left: auto;
738
- }
739
754
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
740
755
  padding: 2px 8px;
741
756
  font-weight: 400;
742
757
  line-height: 22px;
743
758
  }
744
759
 
760
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
761
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
762
+ transform: rotate(-90deg);
763
+ padding: 8px;
764
+ margin: 0 0 0 auto;
765
+ }
766
+
745
767
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
746
768
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
747
769
  transform: rotate(90deg);
748
- margin-right: auto;
749
- margin-left: unset;
770
+ padding: 8px;
771
+ margin: 0 auto 0 0;
750
772
  }
751
773
 
752
774
  .e-ribbon-menu {
@@ -766,6 +788,17 @@
766
788
  padding-left: 34px !important; /* stylelint-disable-line declaration-no-important */
767
789
  }
768
790
 
791
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
792
+ font-size: 14px;
793
+ height: 26px;
794
+ -ms-flex-align: center;
795
+ align-items: center;
796
+ }
797
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
798
+ font-size: 16px;
799
+ line-height: 16px;
800
+ }
801
+
769
802
  .e-ribbon-tooltip .e-tip-content {
770
803
  padding: 4px;
771
804
  }
@@ -804,6 +837,10 @@
804
837
  padding-right: 16px;
805
838
  height: 52px;
806
839
  }
840
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
841
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
842
+ min-height: auto;
843
+ }
807
844
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
808
845
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
809
846
  height: 52px;
@@ -895,6 +932,12 @@
895
932
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
896
933
  height: auto;
897
934
  }
935
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
936
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
937
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
938
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
939
+ margin-bottom: 0;
940
+ }
898
941
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
899
942
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
900
943
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1109,7 +1152,9 @@
1109
1152
  }
1110
1153
 
1111
1154
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1112
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1155
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1156
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1157
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1113
1158
  margin: 2px 10px;
1114
1159
  }
1115
1160
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1117,6 +1162,27 @@
1117
1162
  margin: 10px;
1118
1163
  padding: 0;
1119
1164
  }
1165
+ .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,
1166
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1167
+ .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,
1168
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1169
+ padding: 10px;
1170
+ }
1171
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1172
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1173
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1174
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1175
+ padding: 10px;
1176
+ }
1177
+
1178
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1179
+ font-size: 14px;
1180
+ height: 32px;
1181
+ }
1182
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1183
+ font-size: 20px;
1184
+ line-height: 20px;
1185
+ }
1120
1186
 
1121
1187
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1122
1188
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
@@ -1,17 +1 @@
1
- @import 'ej2-base/styles/bootstrap-definition.scss';
2
- @import 'ej2-popups/styles/tooltip/bootstrap-definition.scss';
3
- @import 'ej2-buttons/styles/button/bootstrap-definition.scss';
4
- @import 'ej2-buttons/styles/check-box/bootstrap-definition.scss';
5
- @import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-definition.scss';
6
- @import 'ej2-dropdowns/styles/drop-down-base/bootstrap-definition.scss';
7
- @import 'ej2-dropdowns/styles/drop-down-list/bootstrap-definition.scss';
8
- @import 'ej2-dropdowns/styles/combo-box/bootstrap-definition.scss';
9
- @import 'ej2-navigations/styles/h-scroll/bootstrap-definition.scss';
10
- @import 'ej2-navigations/styles/v-scroll/bootstrap-definition.scss';
11
- @import 'ej2-navigations/styles/context-menu/bootstrap-definition.scss';
12
- @import 'ej2-navigations/styles/toolbar/bootstrap-definition.scss';
13
- @import 'ej2-navigations/styles/menu/bootstrap-definition.scss';
14
- @import 'ej2-navigations/styles/tab/bootstrap-definition.scss';
15
- @import 'bootstrap-definition.scss';
16
- @import 'icons/bootstrap.scss';
17
- @import 'all.scss';
1
+ @import 'ej2-ribbon/styles/ribbon/bootstrap.scss';