@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/fluent-dark.css CHANGED
@@ -190,6 +190,9 @@
190
190
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
191
191
  display: none;
192
192
  }
193
+ .e-ribbon.e-rbn .e-ribbon-tab .e-item {
194
+ width: fit-content;
195
+ }
193
196
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
194
197
  position: absolute;
195
198
  line-height: 22px;
@@ -198,7 +201,6 @@
198
201
  border-width: unset;
199
202
  font-size: 14px;
200
203
  font-weight: 400;
201
- box-shadow: none;
202
204
  }
203
205
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
204
206
  border-radius: unset;
@@ -274,9 +276,6 @@
274
276
  height: auto;
275
277
  min-height: auto;
276
278
  }
277
- .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
278
- box-shadow: none;
279
- }
280
279
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
281
280
  padding: 0;
282
281
  }
@@ -286,10 +285,9 @@
286
285
  min-width: auto;
287
286
  width: auto;
288
287
  border-style: solid;
289
- transform: none;
290
288
  border-width: 1px;
291
289
  border-radius: 2px;
292
- z-index: 3;
290
+ z-index: 2;
293
291
  }
294
292
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
295
293
  display: none;
@@ -297,7 +295,6 @@
297
295
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
298
296
  font-size: 14px;
299
297
  height: auto;
300
- transform: none;
301
298
  line-height: 14px;
302
299
  padding: 0 5px;
303
300
  width: auto;
@@ -336,7 +333,6 @@
336
333
  border: none;
337
334
  height: 26px;
338
335
  margin: auto;
339
- box-shadow: none;
340
336
  }
341
337
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
342
338
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -367,9 +363,6 @@
367
363
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
368
364
  overflow-y: hidden;
369
365
  }
370
- .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
371
- margin-bottom: 0;
372
- }
373
366
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
374
367
  padding-top: 1px;
375
368
  height: auto;
@@ -419,9 +412,6 @@
419
412
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
420
413
  left: var(--fileMenuWidth);
421
414
  }
422
- .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
423
- padding-right: 30px;
424
- }
425
415
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
426
416
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
427
417
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -433,9 +423,6 @@
433
423
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
434
424
  right: var(--fileMenuWidth);
435
425
  }
436
- .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
437
- padding-left: 30px;
438
- }
439
426
 
440
427
  .e-ribbon.e-rbn,
441
428
  .e-ribbon-group-overflow-ddb {
@@ -476,8 +463,6 @@
476
463
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
477
464
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
478
465
  min-width: auto;
479
- min-height: auto;
480
- border-radius: unset;
481
466
  }
482
467
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
483
468
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -561,7 +546,6 @@
561
546
  font-weight: 400;
562
547
  font-size: 12px;
563
548
  text-transform: none;
564
- box-shadow: none;
565
549
  }
566
550
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
567
551
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -660,7 +644,6 @@
660
644
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
661
645
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
662
646
  border: 1px solid transparent;
663
- border-radius: 2px;
664
647
  }
665
648
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
666
649
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -670,7 +653,6 @@
670
653
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
671
654
  border: 1px solid transparent;
672
655
  border-radius: 2px;
673
- box-shadow: none;
674
656
  }
675
657
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
676
658
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -780,8 +762,7 @@
780
762
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
781
763
  display: none;
782
764
  }
783
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
784
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
765
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
785
766
  margin: 3px 5px;
786
767
  }
787
768
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -805,24 +786,22 @@
805
786
  -ms-flex-pack: start;
806
787
  justify-content: flex-start;
807
788
  }
789
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
790
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
791
+ transform: rotate(-90deg);
792
+ margin-left: auto;
793
+ }
808
794
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
809
795
  padding: 3px 5px;
810
796
  font-weight: 600;
811
797
  line-height: 18px;
812
798
  }
813
799
 
814
- .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
815
- .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
816
- transform: rotate(-90deg);
817
- padding: 5px;
818
- margin: 0 0 0 auto;
819
- }
820
-
821
800
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
822
801
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
823
802
  transform: rotate(90deg);
824
- padding: 5px;
825
- margin: 0 auto 0 0;
803
+ margin-right: auto;
804
+ margin-left: unset;
826
805
  }
827
806
 
828
807
  .e-ribbon-menu {
@@ -842,17 +821,6 @@
842
821
  padding-left: 26px !important; /* stylelint-disable-line declaration-no-important */
843
822
  }
844
823
 
845
- .e-ribbon-control.e-dropdown-popup ul .e-item {
846
- font-size: 12px;
847
- height: 24px;
848
- -ms-flex-align: center;
849
- align-items: center;
850
- }
851
- .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
852
- font-size: 16px;
853
- line-height: 16px;
854
- }
855
-
856
824
  .e-ribbon-tooltip .e-tip-content {
857
825
  padding: 4px;
858
826
  }
@@ -891,10 +859,6 @@
891
859
  padding-right: 16px;
892
860
  height: 48px;
893
861
  }
894
- .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
895
- .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
896
- min-height: auto;
897
- }
898
862
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
899
863
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
900
864
  height: 48px;
@@ -986,12 +950,6 @@
986
950
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
987
951
  height: auto;
988
952
  }
989
- .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
990
- .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
991
- .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
992
- .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
993
- margin-bottom: 0;
994
- }
995
953
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
996
954
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
997
955
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1206,9 +1164,7 @@
1206
1164
  }
1207
1165
 
1208
1166
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1209
- .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1210
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1211
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1167
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1212
1168
  margin: 3px 7px;
1213
1169
  }
1214
1170
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1216,27 +1172,6 @@
1216
1172
  margin: 7px;
1217
1173
  padding: 0;
1218
1174
  }
1219
- .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,
1220
- .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1221
- .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,
1222
- .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1223
- padding: 7px;
1224
- }
1225
- .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1226
- .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1227
- .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1228
- .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1229
- padding: 7px;
1230
- }
1231
-
1232
- .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1233
- font-size: 14px;
1234
- height: 32px;
1235
- }
1236
- .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1237
- font-size: 20px;
1238
- line-height: 20px;
1239
- }
1240
1175
 
1241
1176
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1242
1177
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/ribbon/fluent-dark.scss CHANGED
@@ -1 +1,17 @@
1
- @import 'ej2-ribbon/styles/ribbon/fluent-dark.scss';
1
+ @import 'ej2-base/styles/fluent-dark-definition.scss';
2
+ @import 'ej2-popups/styles/tooltip/fluent-dark-definition.scss';
3
+ @import 'ej2-buttons/styles/button/fluent-dark-definition.scss';
4
+ @import 'ej2-buttons/styles/check-box/fluent-dark-definition.scss';
5
+ @import 'ej2-splitbuttons/styles/drop-down-button/fluent-dark-definition.scss';
6
+ @import 'ej2-dropdowns/styles/drop-down-base/fluent-dark-definition.scss';
7
+ @import 'ej2-dropdowns/styles/drop-down-list/fluent-dark-definition.scss';
8
+ @import 'ej2-dropdowns/styles/combo-box/fluent-dark-definition.scss';
9
+ @import 'ej2-navigations/styles/h-scroll/fluent-dark-definition.scss';
10
+ @import 'ej2-navigations/styles/v-scroll/fluent-dark-definition.scss';
11
+ @import 'ej2-navigations/styles/context-menu/fluent-dark-definition.scss';
12
+ @import 'ej2-navigations/styles/toolbar/fluent-dark-definition.scss';
13
+ @import 'ej2-navigations/styles/menu/fluent-dark-definition.scss';
14
+ @import 'ej2-navigations/styles/tab/fluent-dark-definition.scss';
15
+ @import 'fluent-dark-definition.scss';
16
+ @import 'icons/fluent-dark.scss';
17
+ @import 'all.scss';
package/styles/ribbon/fluent.css CHANGED
@@ -190,6 +190,9 @@
190
190
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
191
191
  display: none;
192
192
  }
193
+ .e-ribbon.e-rbn .e-ribbon-tab .e-item {
194
+ width: fit-content;
195
+ }
193
196
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
194
197
  position: absolute;
195
198
  line-height: 22px;
@@ -198,7 +201,6 @@
198
201
  border-width: unset;
199
202
  font-size: 14px;
200
203
  font-weight: 400;
201
- box-shadow: none;
202
204
  }
203
205
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
204
206
  border-radius: unset;
@@ -274,9 +276,6 @@
274
276
  height: auto;
275
277
  min-height: auto;
276
278
  }
277
- .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
278
- box-shadow: none;
279
- }
280
279
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
281
280
  padding: 0;
282
281
  }
@@ -286,10 +285,9 @@
286
285
  min-width: auto;
287
286
  width: auto;
288
287
  border-style: solid;
289
- transform: none;
290
288
  border-width: 1px;
291
289
  border-radius: 2px;
292
- z-index: 3;
290
+ z-index: 2;
293
291
  }
294
292
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
295
293
  display: none;
@@ -297,7 +295,6 @@
297
295
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
298
296
  font-size: 14px;
299
297
  height: auto;
300
- transform: none;
301
298
  line-height: 14px;
302
299
  padding: 0 5px;
303
300
  width: auto;
@@ -336,7 +333,6 @@
336
333
  border: none;
337
334
  height: 26px;
338
335
  margin: auto;
339
- box-shadow: none;
340
336
  }
341
337
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
342
338
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -367,9 +363,6 @@
367
363
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
368
364
  overflow-y: hidden;
369
365
  }
370
- .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
371
- margin-bottom: 0;
372
- }
373
366
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
374
367
  padding-top: 1px;
375
368
  height: auto;
@@ -419,9 +412,6 @@
419
412
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
420
413
  left: var(--fileMenuWidth);
421
414
  }
422
- .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
423
- padding-right: 30px;
424
- }
425
415
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
426
416
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
427
417
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -433,9 +423,6 @@
433
423
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
434
424
  right: var(--fileMenuWidth);
435
425
  }
436
- .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
437
- padding-left: 30px;
438
- }
439
426
 
440
427
  .e-ribbon.e-rbn,
441
428
  .e-ribbon-group-overflow-ddb {
@@ -476,8 +463,6 @@
476
463
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
477
464
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
478
465
  min-width: auto;
479
- min-height: auto;
480
- border-radius: unset;
481
466
  }
482
467
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
483
468
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -561,7 +546,6 @@
561
546
  font-weight: 400;
562
547
  font-size: 12px;
563
548
  text-transform: none;
564
- box-shadow: none;
565
549
  }
566
550
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
567
551
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -660,7 +644,6 @@
660
644
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
661
645
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
662
646
  border: 1px solid transparent;
663
- border-radius: 2px;
664
647
  }
665
648
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
666
649
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -670,7 +653,6 @@
670
653
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
671
654
  border: 1px solid transparent;
672
655
  border-radius: 2px;
673
- box-shadow: none;
674
656
  }
675
657
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
676
658
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -780,8 +762,7 @@
780
762
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
781
763
  display: none;
782
764
  }
783
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
784
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
765
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
785
766
  margin: 3px 5px;
786
767
  }
787
768
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -805,24 +786,22 @@
805
786
  -ms-flex-pack: start;
806
787
  justify-content: flex-start;
807
788
  }
789
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
790
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
791
+ transform: rotate(-90deg);
792
+ margin-left: auto;
793
+ }
808
794
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
809
795
  padding: 3px 5px;
810
796
  font-weight: 600;
811
797
  line-height: 18px;
812
798
  }
813
799
 
814
- .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
815
- .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
816
- transform: rotate(-90deg);
817
- padding: 5px;
818
- margin: 0 0 0 auto;
819
- }
820
-
821
800
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
822
801
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
823
802
  transform: rotate(90deg);
824
- padding: 5px;
825
- margin: 0 auto 0 0;
803
+ margin-right: auto;
804
+ margin-left: unset;
826
805
  }
827
806
 
828
807
  .e-ribbon-menu {
@@ -842,17 +821,6 @@
842
821
  padding-left: 26px !important; /* stylelint-disable-line declaration-no-important */
843
822
  }
844
823
 
845
- .e-ribbon-control.e-dropdown-popup ul .e-item {
846
- font-size: 12px;
847
- height: 24px;
848
- -ms-flex-align: center;
849
- align-items: center;
850
- }
851
- .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
852
- font-size: 16px;
853
- line-height: 16px;
854
- }
855
-
856
824
  .e-ribbon-tooltip .e-tip-content {
857
825
  padding: 4px;
858
826
  }
@@ -891,10 +859,6 @@
891
859
  padding-right: 16px;
892
860
  height: 48px;
893
861
  }
894
- .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
895
- .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
896
- min-height: auto;
897
- }
898
862
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
899
863
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
900
864
  height: 48px;
@@ -986,12 +950,6 @@
986
950
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
987
951
  height: auto;
988
952
  }
989
- .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
990
- .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
991
- .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
992
- .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
993
- margin-bottom: 0;
994
- }
995
953
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
996
954
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
997
955
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1206,9 +1164,7 @@
1206
1164
  }
1207
1165
 
1208
1166
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1209
- .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1210
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1211
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1167
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1212
1168
  margin: 3px 7px;
1213
1169
  }
1214
1170
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1216,27 +1172,6 @@
1216
1172
  margin: 7px;
1217
1173
  padding: 0;
1218
1174
  }
1219
- .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,
1220
- .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1221
- .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,
1222
- .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1223
- padding: 7px;
1224
- }
1225
- .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1226
- .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1227
- .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1228
- .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1229
- padding: 7px;
1230
- }
1231
-
1232
- .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1233
- font-size: 14px;
1234
- height: 32px;
1235
- }
1236
- .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1237
- font-size: 20px;
1238
- line-height: 20px;
1239
- }
1240
1175
 
1241
1176
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1242
1177
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
package/styles/ribbon/fluent.scss CHANGED
@@ -1 +1,17 @@
1
- @import 'ej2-ribbon/styles/ribbon/fluent.scss';
1
+ @import 'ej2-base/styles/fluent-definition.scss';
2
+ @import 'ej2-popups/styles/tooltip/fluent-definition.scss';
3
+ @import 'ej2-buttons/styles/button/fluent-definition.scss';
4
+ @import 'ej2-buttons/styles/check-box/fluent-definition.scss';
5
+ @import 'ej2-splitbuttons/styles/drop-down-button/fluent-definition.scss';
6
+ @import 'ej2-dropdowns/styles/drop-down-base/fluent-definition.scss';
7
+ @import 'ej2-dropdowns/styles/drop-down-list/fluent-definition.scss';
8
+ @import 'ej2-dropdowns/styles/combo-box/fluent-definition.scss';
9
+ @import 'ej2-navigations/styles/h-scroll/fluent-definition.scss';
10
+ @import 'ej2-navigations/styles/v-scroll/fluent-definition.scss';
11
+ @import 'ej2-navigations/styles/context-menu/fluent-definition.scss';
12
+ @import 'ej2-navigations/styles/toolbar/fluent-definition.scss';
13
+ @import 'ej2-navigations/styles/menu/fluent-definition.scss';
14
+ @import 'ej2-navigations/styles/tab/fluent-definition.scss';
15
+ @import 'fluent-definition.scss';
16
+ @import 'icons/fluent.scss';
17
+ @import 'all.scss';