@syncfusion/ej2-ribbon 24.2.8 → 25.1.41

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 (125) hide show
  1. package/CHANGELOG.md +8 -4
  2. package/README.md +3 -0
  3. package/dist/ej2-ribbon.umd.min.js +2 -2
  4. package/dist/ej2-ribbon.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-ribbon.es2015.js +2164 -217
  6. package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
  7. package/dist/es6/ej2-ribbon.es5.js +2293 -226
  8. package/dist/es6/ej2-ribbon.es5.js.map +1 -1
  9. package/dist/global/ej2-ribbon.min.js +2 -2
  10. package/dist/global/ej2-ribbon.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +13 -13
  13. package/src/global.js +1 -1
  14. package/src/ribbon/base/constant.d.ts +8 -0
  15. package/src/ribbon/base/constant.js +8 -0
  16. package/src/ribbon/base/interface.d.ts +114 -1
  17. package/src/ribbon/base/interface.js +4 -0
  18. package/src/ribbon/base/ribbon-model.d.ts +22 -1
  19. package/src/ribbon/base/ribbon.d.ts +70 -5
  20. package/src/ribbon/base/ribbon.js +571 -157
  21. package/src/ribbon/base/utils.d.ts +3 -2
  22. package/src/ribbon/base/utils.js +3 -2
  23. package/src/ribbon/items/index.d.ts +1 -0
  24. package/src/ribbon/items/index.js +1 -0
  25. package/src/ribbon/items/ribbon-colorpicker.js +6 -1
  26. package/src/ribbon/items/ribbon-gallery.d.ts +87 -0
  27. package/src/ribbon/items/ribbon-gallery.js +712 -0
  28. package/src/ribbon/items/ribbon-groupbutton.js +3 -0
  29. package/src/ribbon/models/index.d.ts +8 -0
  30. package/src/ribbon/models/index.js +4 -0
  31. package/src/ribbon/models/ribbon-back-stage-settings-model.d.ts +7 -0
  32. package/src/ribbon/models/ribbon-back-stage-settings.d.ts +6 -0
  33. package/src/ribbon/models/ribbon-back-stage-settings.js +3 -0
  34. package/src/ribbon/models/ribbon-backstage-item-model.d.ts +7 -0
  35. package/src/ribbon/models/ribbon-backstage-item.d.ts +6 -0
  36. package/src/ribbon/models/ribbon-backstage-item.js +3 -0
  37. package/src/ribbon/models/ribbon-contextual-tab-settings-model.d.ts +30 -0
  38. package/src/ribbon/models/ribbon-contextual-tab-settings.d.ts +33 -0
  39. package/src/ribbon/models/ribbon-contextual-tab-settings.js +50 -0
  40. package/src/ribbon/models/ribbon-file-menu-settings-model.d.ts +7 -0
  41. package/src/ribbon/models/ribbon-file-menu-settings.d.ts +6 -0
  42. package/src/ribbon/models/ribbon-file-menu-settings.js +3 -0
  43. package/src/ribbon/models/ribbon-gallery-group-model.d.ts +44 -0
  44. package/src/ribbon/models/ribbon-gallery-group.d.ts +38 -0
  45. package/src/ribbon/models/ribbon-gallery-group.js +47 -0
  46. package/src/ribbon/models/ribbon-gallery-item-model.d.ts +43 -0
  47. package/src/ribbon/models/ribbon-gallery-item.d.ts +38 -0
  48. package/src/ribbon/models/ribbon-gallery-item.js +46 -0
  49. package/src/ribbon/models/ribbon-gallery-settings-model.d.ts +108 -0
  50. package/src/ribbon/models/ribbon-gallery-settings.d.ts +95 -0
  51. package/src/ribbon/models/ribbon-gallery-settings.js +71 -0
  52. package/src/ribbon/models/ribbon-group-button-item-model.d.ts +7 -0
  53. package/src/ribbon/models/ribbon-group-button-item.d.ts +6 -0
  54. package/src/ribbon/models/ribbon-group-button-item.js +3 -0
  55. package/src/ribbon/models/ribbon-group-model.d.ts +14 -0
  56. package/src/ribbon/models/ribbon-group.d.ts +12 -0
  57. package/src/ribbon/models/ribbon-group.js +6 -0
  58. package/src/ribbon/models/ribbon-item-model.d.ts +15 -1
  59. package/src/ribbon/models/ribbon-item.d.ts +13 -0
  60. package/src/ribbon/models/ribbon-item.js +7 -0
  61. package/src/ribbon/models/ribbon-tab-model.d.ts +7 -0
  62. package/src/ribbon/models/ribbon-tab.d.ts +6 -0
  63. package/src/ribbon/models/ribbon-tab.js +3 -0
  64. package/src/ribbon/modules/index.d.ts +2 -0
  65. package/src/ribbon/modules/index.js +2 -0
  66. package/src/ribbon/modules/ribbon-backstage.d.ts +2 -0
  67. package/src/ribbon/modules/ribbon-backstage.js +37 -0
  68. package/src/ribbon/modules/ribbon-contextualtab.d.ts +27 -0
  69. package/src/ribbon/modules/ribbon-contextualtab.js +90 -0
  70. package/src/ribbon/modules/ribbon-filemenu.d.ts +2 -0
  71. package/src/ribbon/modules/ribbon-filemenu.js +19 -0
  72. package/src/ribbon/modules/ribbon-keytip.d.ts +54 -0
  73. package/src/ribbon/modules/ribbon-keytip.js +554 -0
  74. package/styles/bootstrap-dark.css +398 -24
  75. package/styles/bootstrap.css +389 -15
  76. package/styles/bootstrap4.css +398 -24
  77. package/styles/bootstrap5-dark.css +391 -17
  78. package/styles/bootstrap5.css +391 -17
  79. package/styles/fabric-dark.css +388 -14
  80. package/styles/fabric.css +387 -13
  81. package/styles/fluent-dark.css +389 -15
  82. package/styles/fluent.css +389 -15
  83. package/styles/highcontrast-light.css +381 -7
  84. package/styles/highcontrast.css +390 -16
  85. package/styles/material-dark.css +391 -17
  86. package/styles/material.css +391 -17
  87. package/styles/material3-dark.css +389 -15
  88. package/styles/material3.css +389 -15
  89. package/styles/ribbon/_bds-definition.scss +360 -0
  90. package/styles/ribbon/_bootstrap-dark-definition.scss +81 -6
  91. package/styles/ribbon/_bootstrap-definition.scss +81 -6
  92. package/styles/ribbon/_bootstrap4-definition.scss +82 -7
  93. package/styles/ribbon/_bootstrap5-definition.scss +81 -6
  94. package/styles/ribbon/_fabric-dark-definition.scss +78 -3
  95. package/styles/ribbon/_fabric-definition.scss +78 -3
  96. package/styles/ribbon/_fluent-definition.scss +80 -5
  97. package/styles/ribbon/_fusionnew-definition.scss +76 -1
  98. package/styles/ribbon/_highcontrast-definition.scss +80 -5
  99. package/styles/ribbon/_highcontrast-light-definition.scss +76 -1
  100. package/styles/ribbon/_layout.scss +344 -38
  101. package/styles/ribbon/_material-dark-definition.scss +80 -5
  102. package/styles/ribbon/_material-definition.scss +81 -6
  103. package/styles/ribbon/_material3-definition.scss +80 -5
  104. package/styles/ribbon/_tailwind-definition.scss +80 -5
  105. package/styles/ribbon/_theme.scss +71 -0
  106. package/styles/ribbon/bootstrap-dark.css +398 -24
  107. package/styles/ribbon/bootstrap.css +389 -15
  108. package/styles/ribbon/bootstrap4.css +398 -24
  109. package/styles/ribbon/bootstrap5-dark.css +391 -17
  110. package/styles/ribbon/bootstrap5.css +391 -17
  111. package/styles/ribbon/fabric-dark.css +388 -14
  112. package/styles/ribbon/fabric.css +387 -13
  113. package/styles/ribbon/fluent-dark.css +389 -15
  114. package/styles/ribbon/fluent.css +389 -15
  115. package/styles/ribbon/highcontrast-light.css +381 -7
  116. package/styles/ribbon/highcontrast.css +390 -16
  117. package/styles/ribbon/icons/_bds.scss +9 -0
  118. package/styles/ribbon/material-dark.css +391 -17
  119. package/styles/ribbon/material.css +391 -17
  120. package/styles/ribbon/material3-dark.css +389 -15
  121. package/styles/ribbon/material3.css +389 -15
  122. package/styles/ribbon/tailwind-dark.css +390 -16
  123. package/styles/ribbon/tailwind.css +390 -16
  124. package/styles/tailwind-dark.css +390 -16
  125. package/styles/tailwind.css +390 -16
@@ -295,6 +295,21 @@
295
295
  .e-ribbon.e-rbn.e-ribbon-minimize .e-ribbon-tab .e-content, .e-ribbon.e-rbn.e-ribbon-minimize .e-ribbon-collapse-btn, .e-ribbon.e-rbn.e-ribbon-minimize .e-ribbon-overall-of-btn {
296
296
  display: none;
297
297
  }
298
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-item .e-ribbon-gallery-wrapper {
299
+ height: 30px;
300
+ }
301
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
302
+ padding: 5px 0;
303
+ width: 78px;
304
+ margin: 2px;
305
+ max-height: 26px;
306
+ }
307
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled {
308
+ pointer-events: none;
309
+ }
310
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text {
311
+ font-size: 12px;
312
+ }
298
313
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
299
314
  overflow-y: hidden;
300
315
  }
@@ -590,6 +605,28 @@
590
605
  padding: 1px;
591
606
  vertical-align: middle;
592
607
  }
608
+ .e-ribbon.e-rbn .e-ribbon-group-overflow .e-ribbon-gallery-wrapper,
609
+ .e-ribbon.e-rbn .e-ribbon-item .e-ribbon-gallery-wrapper,
610
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow .e-ribbon-gallery-wrapper,
611
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-ribbon-gallery-wrapper {
612
+ height: 78px;
613
+ display: -ms-flexbox;
614
+ display: flex;
615
+ }
616
+ .e-ribbon.e-rbn .e-ribbon-group-overflow .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item,
617
+ .e-ribbon.e-rbn .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item,
618
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item,
619
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
620
+ max-height: 78px;
621
+ }
622
+ .e-ribbon.e-rbn .e-ribbon-group-overflow .e-ribbon-gallery-button,
623
+ .e-ribbon.e-rbn .e-ribbon-item .e-ribbon-gallery-button,
624
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow .e-ribbon-gallery-button,
625
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-ribbon-gallery-button {
626
+ padding: 0;
627
+ border-width: 0 0 0 1px;
628
+ border-radius: 0 4px 4px 0;
629
+ }
593
630
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-hidden,
594
631
  .e-ribbon.e-rbn .e-ribbon-item.e-hidden,
595
632
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-hidden,
@@ -695,6 +732,13 @@
695
732
  min-height: 33%;
696
733
  padding: 2px;
697
734
  }
735
+ .e-ribbon.e-rbn .e-ribbon-item:has(.e-ribbon-gallery-container),
736
+ .e-ribbon-group-overflow-ddb .e-ribbon-item:has(.e-ribbon-gallery-container) {
737
+ padding: 0;
738
+ border-style: solid;
739
+ border-width: 1px;
740
+ border-radius: 4px;
741
+ }
698
742
  .e-ribbon.e-rbn .e-ribbon-item .e-btn-group,
699
743
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-btn-group {
700
744
  box-shadow: none;
@@ -841,9 +885,36 @@
841
885
  padding: 0 0 0 2px;
842
886
  }
843
887
 
888
+ .e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
889
+ min-width: 190px;
890
+ }
844
891
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
845
892
  display: none;
846
893
  }
894
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-ribbon-gallery-container) {
895
+ border: 0;
896
+ }
897
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-input-group) {
898
+ margin: 5px 0;
899
+ }
900
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-dropdown.e-btn {
901
+ padding: 0;
902
+ display: -ms-flexbox;
903
+ display: flex;
904
+ -ms-flex-align: center;
905
+ align-items: center;
906
+ -ms-flex-pack: start;
907
+ justify-content: flex-start;
908
+ width: 100%;
909
+ }
910
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-dropdown.e-btn .e-btn-icon {
911
+ margin: 0;
912
+ }
913
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-wrapper.e-hidden,
914
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-container.e-hidden,
915
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-button.e-hidden {
916
+ display: none;
917
+ }
847
918
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hide-group {
848
919
  display: none;
849
920
  }
@@ -856,6 +927,12 @@
856
927
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-disabled {
857
928
  pointer-events: none;
858
929
  }
930
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-dropdown-btn .e-caret {
931
+ font-size: 14px;
932
+ }
933
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-input-group {
934
+ height: 32px;
935
+ }
859
936
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
860
937
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
861
938
  white-space: nowrap;
@@ -864,19 +941,30 @@
864
941
  -ms-flex-align: center;
865
942
  align-items: center;
866
943
  font-weight: 400;
867
- font-size: 12px;
944
+ font-size: 14px;
945
+ }
946
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-colorpicker-wrapper) {
947
+ -ms-flex-align: center;
948
+ align-items: center;
868
949
  }
869
950
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
870
951
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
871
952
  margin: 7px 8px;
872
953
  }
954
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon {
955
+ font-size: 14px;
956
+ }
873
957
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
874
- margin: 8px;
958
+ margin: 9px 0 9px 12px;
875
959
  padding: 0;
876
960
  }
877
961
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
878
962
  padding: 0;
879
963
  width: 100%;
964
+ height: 32px;
965
+ }
966
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
967
+ margin: 0;
880
968
  }
881
969
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
882
970
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
@@ -893,32 +981,52 @@
893
981
  justify-content: flex-start;
894
982
  }
895
983
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
896
- padding: 6px 8px;
984
+ padding: 6px 0 6px 12px;
985
+ font-size: 14px;
897
986
  font-weight: 600;
898
- line-height: 24px;
987
+ line-height: 18px;
988
+ height: 26px;
899
989
  }
900
990
 
901
991
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
902
992
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
903
993
  margin-left: 34px;
904
994
  }
995
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
996
+ padding: 9px 8px 9px 12px;
997
+ }
998
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
999
+ margin-left: 34px;
1000
+ }
905
1001
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
906
1002
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
907
1003
  transform: rotate(-90deg);
908
- padding: 8px;
1004
+ padding: 0 12px;
909
1005
  margin: 0 0 0 auto;
910
1006
  }
911
1007
 
1008
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
1009
+ padding: 6px 12px 6px 0;
1010
+ }
912
1011
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
913
1012
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
914
1013
  margin-right: 34px;
915
1014
  }
1015
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1016
+ padding: 9px 12px 9px 8px;
1017
+ }
1018
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
1019
+ margin-right: 34px;
1020
+ }
916
1021
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
917
1022
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
918
1023
  transform: rotate(90deg);
919
- padding: 8px;
1024
+ padding: 0 12px;
920
1025
  margin: 0 auto 0 0;
921
1026
  }
1027
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
1028
+ margin: 9px 12px 9px 0;
1029
+ }
922
1030
 
923
1031
  .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group:not(.e-icon-btn) {
924
1032
  -ms-flex-direction: column;
@@ -933,7 +1041,7 @@
933
1041
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-ribbon-groupbutton-header {
934
1042
  padding-bottom: 6px;
935
1043
  font-weight: 600;
936
- line-height: 24px;
1044
+ line-height: 18px;
937
1045
  white-space: nowrap;
938
1046
  }
939
1047
  .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group .e-btn.e-ribbon-group-button:not(.e-icon-btn) {
@@ -945,6 +1053,18 @@
945
1053
  -ms-flex-pack: start;
946
1054
  justify-content: flex-start;
947
1055
  }
1056
+ .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group:has(.e-ribbon-group-button-content) .e-btn.e-ribbon-group-button:first-of-type {
1057
+ border-top-right-radius: 4px;
1058
+ border-top-left-radius: 4px;
1059
+ border-bottom-right-radius: 0;
1060
+ border-bottom-left-radius: 0;
1061
+ }
1062
+ .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group:has(.e-ribbon-group-button-content) .e-btn.e-ribbon-group-button:last-of-type {
1063
+ border-top-right-radius: 0;
1064
+ border-top-left-radius: 0;
1065
+ border-bottom-right-radius: 4px;
1066
+ border-bottom-left-radius: 4px;
1067
+ }
948
1068
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-group {
949
1069
  box-shadow: none;
950
1070
  border-radius: unset;
@@ -963,7 +1083,7 @@
963
1083
  padding: 0;
964
1084
  font-weight: 400;
965
1085
  font-size: 12px;
966
- border: none;
1086
+ border: 1px solid #9a9a9a;
967
1087
  text-transform: none;
968
1088
  }
969
1089
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-group .e-btn.e-ribbon-group-button:not(.e-icon-btn) {
@@ -974,6 +1094,119 @@
974
1094
  box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
975
1095
  }
976
1096
 
1097
+ .e-ribbon-gallery-popup.e-popup,
1098
+ .e-ribbon-gallery-dropdown.e-popup {
1099
+ border-radius: 4px;
1100
+ padding: 0 12px 12px;
1101
+ overflow: auto;
1102
+ }
1103
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
1104
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-header {
1105
+ padding: 8px 0 10px;
1106
+ font-size: 14px;
1107
+ font-weight: 600;
1108
+ line-height: 22px;
1109
+ }
1110
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item,
1111
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item {
1112
+ margin: 4px;
1113
+ height: 54px;
1114
+ width: 73px;
1115
+ }
1116
+
1117
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item {
1118
+ width: 95px;
1119
+ }
1120
+
1121
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container,
1122
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container,
1123
+ .e-ribbon-group-overflow .e-ribbon-gallery-container,
1124
+ .e-ribbon-item .e-ribbon-gallery-container {
1125
+ padding: 0;
1126
+ margin: 0;
1127
+ display: -ms-flexbox;
1128
+ display: flex;
1129
+ -ms-flex-line-pack: distribute;
1130
+ align-content: space-around;
1131
+ }
1132
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item,
1133
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item,
1134
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item,
1135
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item {
1136
+ display: inherit;
1137
+ -ms-flex-align: center;
1138
+ align-items: center;
1139
+ -ms-flex-pack: center;
1140
+ justify-content: center;
1141
+ text-align: center;
1142
+ list-style-type: none;
1143
+ padding: 5px 0;
1144
+ -ms-flex-direction: column;
1145
+ flex-direction: column;
1146
+ cursor: pointer;
1147
+ border-width: 2px;
1148
+ border-style: solid;
1149
+ border-radius: 4px;
1150
+ }
1151
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled,
1152
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled,
1153
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled,
1154
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled {
1155
+ pointer-events: none;
1156
+ }
1157
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden,
1158
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden,
1159
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden,
1160
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden {
1161
+ display: none;
1162
+ }
1163
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text,
1164
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text,
1165
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text,
1166
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text {
1167
+ font-size: 14px;
1168
+ font-weight: 400;
1169
+ line-height: 22px;
1170
+ width: inherit;
1171
+ overflow: hidden;
1172
+ white-space: nowrap;
1173
+ text-overflow: ellipsis;
1174
+ }
1175
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons,
1176
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons,
1177
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons,
1178
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons {
1179
+ font-size: 20px;
1180
+ font-weight: 400;
1181
+ line-height: 20px;
1182
+ padding: 3px;
1183
+ background-size: cover;
1184
+ }
1185
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item:hover, .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected,
1186
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item:hover,
1187
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected,
1188
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item:hover,
1189
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected,
1190
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item:hover,
1191
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected {
1192
+ border-radius: 4px;
1193
+ }
1194
+
1195
+ .e-ribbon-keytip {
1196
+ min-width: 20px;
1197
+ height: 20px;
1198
+ line-height: 18px;
1199
+ font-size: 14px;
1200
+ }
1201
+ .e-ribbon-keytip.e-popup-open {
1202
+ display: -ms-flexbox;
1203
+ display: flex;
1204
+ -ms-flex-pack: center;
1205
+ justify-content: center;
1206
+ -ms-flex-align: center;
1207
+ align-items: center;
1208
+ }
1209
+
977
1210
  .e-ribbon-menu {
978
1211
  display: block;
979
1212
  }
@@ -1375,11 +1608,42 @@
1375
1608
  border-radius: unset;
1376
1609
  }
1377
1610
 
1611
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header,
1612
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
1613
+ line-height: 22px;
1614
+ height: 32px;
1615
+ font-size: 16px;
1616
+ }
1617
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-dropdown-btn .e-caret,
1618
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-dropdown-btn .e-caret {
1619
+ font-size: 18px;
1620
+ }
1621
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-input-group,
1622
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-input-group {
1623
+ height: 40px;
1624
+ }
1625
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item,
1626
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
1627
+ height: 40px;
1628
+ }
1629
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon,
1630
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon {
1631
+ font-size: 18px;
1632
+ }
1633
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon.e-icon-left,
1634
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon.e-icon-left {
1635
+ margin: 0;
1636
+ }
1637
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-colorpicker-wrapper),
1638
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-colorpicker-wrapper) {
1639
+ -ms-flex-align: center;
1640
+ align-items: center;
1641
+ }
1378
1642
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1379
1643
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label,
1380
1644
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1381
1645
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
1382
- font-size: 14px;
1646
+ font-size: 18px;
1383
1647
  }
1384
1648
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1385
1649
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
@@ -1389,32 +1653,60 @@
1389
1653
  }
1390
1654
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
1391
1655
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
1392
- margin: 10px;
1656
+ margin: 11px 0 11px 16px;
1393
1657
  padding: 0;
1394
1658
  }
1659
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-overflow-header,
1660
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-overflow-header {
1661
+ padding: 7px 0 7px 16px;
1662
+ }
1395
1663
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1396
1664
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label,
1397
1665
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1398
1666
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
1399
- margin-left: 42px;
1667
+ margin-left: 46px;
1668
+ }
1669
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left,
1670
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1671
+ padding: 11px 12px 11px 16px;
1672
+ }
1673
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper,
1674
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
1675
+ margin-left: 46px;
1400
1676
  }
1401
1677
  .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,
1402
1678
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1403
1679
  .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,
1404
1680
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1405
- padding: 10px;
1681
+ padding: 0 12px;
1682
+ }
1683
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-overflow-header,
1684
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-overflow-header {
1685
+ padding: 7px 16px 7px 0;
1406
1686
  }
1407
1687
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1408
1688
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label,
1409
1689
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1410
1690
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
1411
- margin-right: 42px;
1691
+ margin-right: 46px;
1692
+ }
1693
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left,
1694
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1695
+ padding: 11px 16px 11px 12px;
1696
+ }
1697
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper,
1698
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
1699
+ margin-right: 46px;
1412
1700
  }
1413
1701
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1414
1702
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1415
1703
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1416
1704
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1417
- padding: 10px;
1705
+ padding: 0 12px;
1706
+ }
1707
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
1708
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
1709
+ margin: 11px 16px 11px 0;
1418
1710
  }
1419
1711
 
1420
1712
  .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
@@ -1487,9 +1779,30 @@
1487
1779
  padding: 0 10px 0 0;
1488
1780
  }
1489
1781
 
1782
+ .e-bigger.e-ribbon-gallery-popup.e-popup,
1783
+ .e-bigger .e-ribbon-gallery-popup.e-popup,
1784
+ .e-bigger.e-ribbon-gallery-dropdown.e-popup,
1785
+ .e-bigger .e-ribbon-gallery-dropdown.e-popup {
1786
+ padding: 0 16px 16px;
1787
+ }
1788
+ .e-bigger.e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
1789
+ .e-bigger .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
1790
+ .e-bigger.e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-header,
1791
+ .e-bigger .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-header {
1792
+ padding-bottom: 9px 0 13px;
1793
+ font-size: 16px;
1794
+ line-height: 24px;
1795
+ }
1796
+
1490
1797
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1491
1798
  border-color: unset;
1492
1799
  }
1800
+ .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab {
1801
+ background: #333232;
1802
+ }
1803
+ .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab .e-tab-wrap .e-tab-text {
1804
+ color: #38a9ff;
1805
+ }
1493
1806
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text {
1494
1807
  color: #dadada;
1495
1808
  }
@@ -1672,6 +1985,10 @@
1672
1985
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper.e-vertical:hover .e-split-btn:disabled {
1673
1986
  border-color: transparent;
1674
1987
  }
1988
+ .e-ribbon.e-rbn .e-ribbon-item:has(.e-ribbon-gallery-container),
1989
+ .e-ribbon-group-overflow-ddb .e-ribbon-item:has(.e-ribbon-gallery-container) {
1990
+ border-color: #414040;
1991
+ }
1675
1992
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:not(.e-ribbon-file-menu),
1676
1993
  .e-ribbon.e-rbn .e-ribbon-item .e-btn-group .e-btn.e-ribbon-group-button,
1677
1994
  .e-ribbon.e-rbn .e-ribbon-item .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
@@ -2077,6 +2394,58 @@
2077
2394
  background: transparent;
2078
2395
  }
2079
2396
 
2397
+ .e-ribbon-gallery-item {
2398
+ background: #201f1f;
2399
+ border-color: transparent;
2400
+ }
2401
+ .e-ribbon-gallery-item:hover {
2402
+ background: #514f4f;
2403
+ }
2404
+ .e-ribbon-gallery-item.e-ribbon-gallery-selected {
2405
+ background: #6f6c6c;
2406
+ }
2407
+ .e-ribbon-gallery-item.e-ribbon-gallery-selected .e-ribbon-gallery-text {
2408
+ color: #dadada;
2409
+ }
2410
+ .e-ribbon-gallery-item.e-ribbon-gallery-selected .e-ribbon-gallery-icons {
2411
+ color: #dadada;
2412
+ }
2413
+ .e-ribbon-gallery-item.e-disabled {
2414
+ background: #201f1f;
2415
+ }
2416
+ .e-ribbon-gallery-item.e-disabled .e-ribbon-gallery-text {
2417
+ color: #9a9a9a;
2418
+ }
2419
+ .e-ribbon-gallery-item.e-disabled .e-ribbon-gallery-icons {
2420
+ color: #9a9a9a;
2421
+ }
2422
+ .e-ribbon-gallery-item:focus, .e-ribbon-gallery-item:focus-visible {
2423
+ border-color: #414040;
2424
+ }
2425
+ .e-ribbon-gallery-item .e-ribbon-gallery-text {
2426
+ color: #dadada;
2427
+ }
2428
+ .e-ribbon-gallery-item .e-ribbon-gallery-icons {
2429
+ color: #dadada;
2430
+ }
2431
+
2432
+ .e-ribbon-gallery-button {
2433
+ border-color: #414040;
2434
+ }
2435
+ .e-ribbon-gallery-button.e-gallery-button-active {
2436
+ background: #6f6c6c;
2437
+ }
2438
+
2439
+ .e-ribbon-gallery-popup.e-popup,
2440
+ .e-dropdown-popup.e-ribbon-gallery-dropdown {
2441
+ background: #201f1f;
2442
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
2443
+ }
2444
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
2445
+ .e-dropdown-popup.e-ribbon-gallery-dropdown .e-ribbon-gallery-header {
2446
+ color: #dadada;
2447
+ }
2448
+
2080
2449
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-icon {
2081
2450
  color: #dadada;
2082
2451
  }
@@ -2121,6 +2490,11 @@
2121
2490
  color: #000;
2122
2491
  }
2123
2492
 
2493
+ .e-ribbon-keytip {
2494
+ background-color: #f8f8f8;
2495
+ color: #201f1f;
2496
+ }
2497
+
2124
2498
  .e-ribbon-menu.e-menu-wrapper:not(.e-menu-popup), .e-ribbon-menu.e-menu-container:not(.e-menu-popup) {
2125
2499
  background: #282727;
2126
2500
  }