@syncfusion/ej2-angular-ribbon 22.1.34 → 22.1.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/license +10 -0
  2. package/package.json +7 -7
  3. package/styles/bootstrap-dark.css +79 -13
  4. package/styles/bootstrap.css +79 -13
  5. package/styles/bootstrap4.css +79 -13
  6. package/styles/bootstrap5-dark.css +79 -13
  7. package/styles/bootstrap5.css +79 -13
  8. package/styles/fabric-dark.css +79 -13
  9. package/styles/fabric.css +79 -13
  10. package/styles/fluent-dark.css +79 -13
  11. package/styles/fluent.css +79 -13
  12. package/styles/highcontrast-light.css +79 -13
  13. package/styles/highcontrast.css +83 -17
  14. package/styles/material-dark.css +79 -13
  15. package/styles/material.css +79 -13
  16. package/styles/material3-dark.css +1672 -0
  17. package/styles/material3-dark.scss +3 -0
  18. package/styles/material3.css +1728 -0
  19. package/styles/material3.scss +3 -0
  20. package/styles/ribbon/_bootstrap-dark-definition.scss +4 -0
  21. package/styles/ribbon/_bootstrap-definition.scss +4 -0
  22. package/styles/ribbon/_bootstrap4-definition.scss +4 -0
  23. package/styles/ribbon/_bootstrap5-definition.scss +4 -0
  24. package/styles/ribbon/_fabric-dark-definition.scss +4 -0
  25. package/styles/ribbon/_fabric-definition.scss +4 -0
  26. package/styles/ribbon/_fluent-definition.scss +4 -0
  27. package/styles/ribbon/_fusionnew-definition.scss +4 -0
  28. package/styles/ribbon/_highcontrast-definition.scss +6 -2
  29. package/styles/ribbon/_highcontrast-light-definition.scss +4 -0
  30. package/styles/ribbon/_layout.scss +110 -19
  31. package/styles/ribbon/_material-dark-definition.scss +4 -0
  32. package/styles/ribbon/_material-definition.scss +4 -0
  33. package/styles/ribbon/_material3-dark-definition.scss +1 -0
  34. package/styles/ribbon/_material3-definition.scss +210 -0
  35. package/styles/ribbon/_tailwind-definition.scss +4 -0
  36. package/styles/ribbon/bootstrap-dark.css +79 -13
  37. package/styles/ribbon/bootstrap.css +79 -13
  38. package/styles/ribbon/bootstrap4.css +79 -13
  39. package/styles/ribbon/bootstrap5-dark.css +79 -13
  40. package/styles/ribbon/bootstrap5.css +79 -13
  41. package/styles/ribbon/fabric-dark.css +79 -13
  42. package/styles/ribbon/fabric.css +79 -13
  43. package/styles/ribbon/fluent-dark.css +79 -13
  44. package/styles/ribbon/fluent.css +79 -13
  45. package/styles/ribbon/highcontrast-light.css +79 -13
  46. package/styles/ribbon/highcontrast.css +83 -17
  47. package/styles/ribbon/icons/_material3-dark.scss +1 -0
  48. package/styles/ribbon/material-dark.css +79 -13
  49. package/styles/ribbon/material.css +79 -13
  50. package/styles/ribbon/material3-dark.css +1672 -0
  51. package/styles/ribbon/material3-dark.scss +18 -0
  52. package/styles/ribbon/material3.css +1728 -0
  53. package/styles/ribbon/material3.scss +18 -0
  54. package/styles/ribbon/tailwind-dark.css +79 -13
  55. package/styles/ribbon/tailwind.css +79 -13
  56. package/styles/tailwind-dark.css +79 -13
  57. package/styles/tailwind.css +79 -13
@@ -0,0 +1,18 @@
1
+ @import 'ej2-base/styles/material3-definition.scss';
2
+
3
+ @import 'ej2-popups/styles/tooltip/material3-definition.scss';
4
+ @import 'ej2-buttons/styles/button/material3-definition.scss';
5
+ @import 'ej2-buttons/styles/check-box/material3-definition.scss';
6
+ @import 'ej2-splitbuttons/styles/drop-down-button/material3-definition.scss';
7
+ @import 'ej2-dropdowns/styles/drop-down-base/material3-definition.scss';
8
+ @import 'ej2-dropdowns/styles/drop-down-list/material3-definition.scss';
9
+ @import 'ej2-dropdowns/styles/combo-box/material3-definition.scss';
10
+ @import 'ej2-navigations/styles/h-scroll/material3-definition.scss';
11
+ @import 'ej2-navigations/styles/v-scroll/material3-definition.scss';
12
+ @import 'ej2-navigations/styles/context-menu/material3-definition.scss';
13
+ @import 'ej2-navigations/styles/toolbar/material3-definition.scss';
14
+ @import 'ej2-navigations/styles/menu/material3-definition.scss';
15
+ @import 'ej2-navigations/styles/tab/material3-definition.scss';
16
+ @import 'material3-definition.scss';
17
+ @import 'icons/material3.scss';
18
+ @import 'all.scss';
@@ -188,9 +188,6 @@
188
188
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
189
189
  display: none;
190
190
  }
191
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
192
- width: fit-content;
193
- }
194
191
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
195
192
  position: absolute;
196
193
  line-height: 22px;
@@ -199,6 +196,7 @@
199
196
  border-width: unset;
200
197
  font-size: 14px;
201
198
  font-weight: 400;
199
+ box-shadow: none;
202
200
  }
203
201
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
204
202
  border-radius: unset;
@@ -274,6 +272,9 @@
274
272
  height: auto;
275
273
  min-height: auto;
276
274
  }
275
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
276
+ box-shadow: none;
277
+ }
277
278
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
278
279
  padding: 0;
279
280
  }
@@ -283,9 +284,10 @@
283
284
  min-width: auto;
284
285
  width: auto;
285
286
  border-style: solid;
287
+ transform: none;
286
288
  border-width: 1px;
287
289
  border-radius: 2px;
288
- z-index: 2;
290
+ z-index: 3;
289
291
  }
290
292
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
291
293
  display: none;
@@ -293,6 +295,7 @@
293
295
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
294
296
  font-size: 14px;
295
297
  height: auto;
298
+ transform: none;
296
299
  line-height: 14px;
297
300
  padding: 0 5px;
298
301
  width: auto;
@@ -331,6 +334,7 @@
331
334
  border: none;
332
335
  height: 26px;
333
336
  margin: auto;
337
+ box-shadow: none;
334
338
  }
335
339
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
336
340
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -361,6 +365,9 @@
361
365
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
362
366
  overflow-y: hidden;
363
367
  }
368
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
369
+ margin-bottom: 0;
370
+ }
364
371
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
365
372
  padding-top: 1px;
366
373
  height: auto;
@@ -410,6 +417,9 @@
410
417
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
411
418
  left: var(--fileMenuWidth);
412
419
  }
420
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
421
+ padding-right: 30px;
422
+ }
413
423
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
414
424
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
415
425
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -421,6 +431,9 @@
421
431
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
422
432
  right: var(--fileMenuWidth);
423
433
  }
434
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
435
+ padding-left: 30px;
436
+ }
424
437
 
425
438
  .e-ribbon.e-rbn,
426
439
  .e-ribbon-group-overflow-ddb {
@@ -461,6 +474,8 @@
461
474
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
462
475
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
463
476
  min-width: auto;
477
+ min-height: auto;
478
+ border-radius: unset;
464
479
  }
465
480
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
466
481
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -544,6 +559,7 @@
544
559
  font-weight: 400;
545
560
  font-size: 12px;
546
561
  text-transform: none;
562
+ box-shadow: none;
547
563
  }
548
564
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
549
565
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -642,6 +658,7 @@
642
658
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
643
659
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
644
660
  border: 1px solid transparent;
661
+ border-radius: 4px;
645
662
  }
646
663
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
647
664
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -651,6 +668,7 @@
651
668
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
652
669
  border: 1px solid transparent;
653
670
  border-radius: 4px;
671
+ box-shadow: none;
654
672
  }
655
673
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
656
674
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -760,7 +778,8 @@
760
778
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
761
779
  display: none;
762
780
  }
763
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
781
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
782
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
764
783
  margin: 3px 5px;
765
784
  }
766
785
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -774,6 +793,7 @@
774
793
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
775
794
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
776
795
  line-height: 18px;
796
+ overflow: hidden;
777
797
  }
778
798
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
779
799
  width: inherit;
@@ -784,22 +804,24 @@
784
804
  -ms-flex-pack: start;
785
805
  justify-content: flex-start;
786
806
  }
787
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
788
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
789
- transform: rotate(-90deg);
790
- margin-left: auto;
791
- }
792
807
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
793
808
  padding: 3px 5px;
794
809
  font-weight: 600;
795
810
  line-height: 18px;
796
811
  }
797
812
 
813
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
814
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
815
+ transform: rotate(-90deg);
816
+ padding: 5px;
817
+ margin: 0 0 0 auto;
818
+ }
819
+
798
820
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
799
821
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
800
822
  transform: rotate(90deg);
801
- margin-right: auto;
802
- margin-left: unset;
823
+ padding: 5px;
824
+ margin: 0 auto 0 0;
803
825
  }
804
826
 
805
827
  .e-ribbon-menu {
@@ -819,6 +841,17 @@
819
841
  padding-left: 38px !important; /* stylelint-disable-line declaration-no-important */
820
842
  }
821
843
 
844
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
845
+ font-size: 12px;
846
+ height: 24px;
847
+ -ms-flex-align: center;
848
+ align-items: center;
849
+ }
850
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
851
+ font-size: 16px;
852
+ line-height: 16px;
853
+ }
854
+
822
855
  .e-ribbon-tooltip .e-tip-content {
823
856
  padding: 4px;
824
857
  }
@@ -857,6 +890,10 @@
857
890
  padding-right: 16px;
858
891
  height: 48px;
859
892
  }
893
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
894
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
895
+ min-height: auto;
896
+ }
860
897
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
861
898
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
862
899
  height: 48px;
@@ -948,6 +985,12 @@
948
985
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
949
986
  height: auto;
950
987
  }
988
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
989
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
990
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
991
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
992
+ margin-bottom: 0;
993
+ }
951
994
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
952
995
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
953
996
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1162,7 +1205,9 @@
1162
1205
  }
1163
1206
 
1164
1207
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1165
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1208
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1209
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1210
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1166
1211
  margin: 3px 7px;
1167
1212
  }
1168
1213
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1170,6 +1215,27 @@
1170
1215
  margin: 7px;
1171
1216
  padding: 0;
1172
1217
  }
1218
+ .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,
1219
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1220
+ .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,
1221
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1222
+ padding: 7px;
1223
+ }
1224
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1225
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1226
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1227
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1228
+ padding: 7px;
1229
+ }
1230
+
1231
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1232
+ font-size: 14px;
1233
+ height: 32px;
1234
+ }
1235
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1236
+ font-size: 20px;
1237
+ line-height: 20px;
1238
+ }
1173
1239
 
1174
1240
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1175
1241
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
@@ -188,9 +188,6 @@
188
188
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
189
189
  display: none;
190
190
  }
191
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
192
- width: fit-content;
193
- }
194
191
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
195
192
  position: absolute;
196
193
  line-height: 22px;
@@ -199,6 +196,7 @@
199
196
  border-width: unset;
200
197
  font-size: 14px;
201
198
  font-weight: 400;
199
+ box-shadow: none;
202
200
  }
203
201
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
204
202
  border-radius: unset;
@@ -274,6 +272,9 @@
274
272
  height: auto;
275
273
  min-height: auto;
276
274
  }
275
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
276
+ box-shadow: none;
277
+ }
277
278
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
278
279
  padding: 0;
279
280
  }
@@ -283,9 +284,10 @@
283
284
  min-width: auto;
284
285
  width: auto;
285
286
  border-style: solid;
287
+ transform: none;
286
288
  border-width: 1px;
287
289
  border-radius: 2px;
288
- z-index: 2;
290
+ z-index: 3;
289
291
  }
290
292
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
291
293
  display: none;
@@ -293,6 +295,7 @@
293
295
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
294
296
  font-size: 14px;
295
297
  height: auto;
298
+ transform: none;
296
299
  line-height: 14px;
297
300
  padding: 0 5px;
298
301
  width: auto;
@@ -331,6 +334,7 @@
331
334
  border: none;
332
335
  height: 26px;
333
336
  margin: auto;
337
+ box-shadow: none;
334
338
  }
335
339
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
336
340
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -361,6 +365,9 @@
361
365
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
362
366
  overflow-y: hidden;
363
367
  }
368
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
369
+ margin-bottom: 0;
370
+ }
364
371
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
365
372
  padding-top: 1px;
366
373
  height: auto;
@@ -410,6 +417,9 @@
410
417
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
411
418
  left: var(--fileMenuWidth);
412
419
  }
420
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
421
+ padding-right: 30px;
422
+ }
413
423
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
414
424
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
415
425
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -421,6 +431,9 @@
421
431
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
422
432
  right: var(--fileMenuWidth);
423
433
  }
434
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
435
+ padding-left: 30px;
436
+ }
424
437
 
425
438
  .e-ribbon.e-rbn,
426
439
  .e-ribbon-group-overflow-ddb {
@@ -461,6 +474,8 @@
461
474
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
462
475
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
463
476
  min-width: auto;
477
+ min-height: auto;
478
+ border-radius: unset;
464
479
  }
465
480
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
466
481
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -544,6 +559,7 @@
544
559
  font-weight: 400;
545
560
  font-size: 12px;
546
561
  text-transform: none;
562
+ box-shadow: none;
547
563
  }
548
564
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
549
565
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -642,6 +658,7 @@
642
658
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
643
659
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
644
660
  border: 1px solid transparent;
661
+ border-radius: 4px;
645
662
  }
646
663
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
647
664
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -651,6 +668,7 @@
651
668
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
652
669
  border: 1px solid transparent;
653
670
  border-radius: 4px;
671
+ box-shadow: none;
654
672
  }
655
673
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
656
674
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -760,7 +778,8 @@
760
778
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
761
779
  display: none;
762
780
  }
763
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
781
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
782
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
764
783
  margin: 3px 5px;
765
784
  }
766
785
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -774,6 +793,7 @@
774
793
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
775
794
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
776
795
  line-height: 18px;
796
+ overflow: hidden;
777
797
  }
778
798
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
779
799
  width: inherit;
@@ -784,22 +804,24 @@
784
804
  -ms-flex-pack: start;
785
805
  justify-content: flex-start;
786
806
  }
787
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
788
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
789
- transform: rotate(-90deg);
790
- margin-left: auto;
791
- }
792
807
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
793
808
  padding: 3px 5px;
794
809
  font-weight: 600;
795
810
  line-height: 18px;
796
811
  }
797
812
 
813
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
814
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
815
+ transform: rotate(-90deg);
816
+ padding: 5px;
817
+ margin: 0 0 0 auto;
818
+ }
819
+
798
820
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
799
821
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
800
822
  transform: rotate(90deg);
801
- margin-right: auto;
802
- margin-left: unset;
823
+ padding: 5px;
824
+ margin: 0 auto 0 0;
803
825
  }
804
826
 
805
827
  .e-ribbon-menu {
@@ -819,6 +841,17 @@
819
841
  padding-left: 38px !important; /* stylelint-disable-line declaration-no-important */
820
842
  }
821
843
 
844
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
845
+ font-size: 12px;
846
+ height: 24px;
847
+ -ms-flex-align: center;
848
+ align-items: center;
849
+ }
850
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
851
+ font-size: 16px;
852
+ line-height: 16px;
853
+ }
854
+
822
855
  .e-ribbon-tooltip .e-tip-content {
823
856
  padding: 4px;
824
857
  }
@@ -857,6 +890,10 @@
857
890
  padding-right: 16px;
858
891
  height: 48px;
859
892
  }
893
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
894
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
895
+ min-height: auto;
896
+ }
860
897
  .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
861
898
  .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
862
899
  height: 48px;
@@ -948,6 +985,12 @@
948
985
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
949
986
  height: auto;
950
987
  }
988
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
989
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
990
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
991
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
992
+ margin-bottom: 0;
993
+ }
951
994
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
952
995
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
953
996
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1162,7 +1205,9 @@
1162
1205
  }
1163
1206
 
1164
1207
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1165
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1208
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1209
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1210
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1166
1211
  margin: 3px 7px;
1167
1212
  }
1168
1213
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1170,6 +1215,27 @@
1170
1215
  margin: 7px;
1171
1216
  padding: 0;
1172
1217
  }
1218
+ .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,
1219
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1220
+ .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,
1221
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1222
+ padding: 7px;
1223
+ }
1224
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1225
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1226
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1227
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1228
+ padding: 7px;
1229
+ }
1230
+
1231
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1232
+ font-size: 14px;
1233
+ height: 32px;
1234
+ }
1235
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1236
+ font-size: 20px;
1237
+ line-height: 20px;
1238
+ }
1173
1239
 
1174
1240
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1175
1241
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,