@syncfusion/ej2-ribbon 24.2.3 → 25.1.35

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 (127) hide show
  1. package/CHANGELOG.md +7 -5
  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 +2053 -138
  6. package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
  7. package/dist/es6/ej2-ribbon.es5.js +2182 -147
  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 +67 -5
  20. package/src/ribbon/base/ribbon.js +459 -77
  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 +390 -16
  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 +79 -4
  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 +390 -16
  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
  126. package/.github/PULL_REQUEST_TEMPLATE/Bug.md +0 -60
  127. package/.github/PULL_REQUEST_TEMPLATE/feature.md +0 -37
@@ -302,6 +302,21 @@
302
302
  .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 {
303
303
  display: none;
304
304
  }
305
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-item .e-ribbon-gallery-wrapper {
306
+ height: 30px;
307
+ }
308
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
309
+ padding: 5px 0;
310
+ width: 78px;
311
+ margin: 2px;
312
+ max-height: 26px;
313
+ }
314
+ .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 {
315
+ pointer-events: none;
316
+ }
317
+ .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 {
318
+ font-size: 12px;
319
+ }
305
320
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
306
321
  overflow-y: hidden;
307
322
  }
@@ -597,6 +612,28 @@
597
612
  padding: 1px;
598
613
  vertical-align: middle;
599
614
  }
615
+ .e-ribbon.e-rbn .e-ribbon-group-overflow .e-ribbon-gallery-wrapper,
616
+ .e-ribbon.e-rbn .e-ribbon-item .e-ribbon-gallery-wrapper,
617
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow .e-ribbon-gallery-wrapper,
618
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-ribbon-gallery-wrapper {
619
+ height: 80px;
620
+ display: -ms-flexbox;
621
+ display: flex;
622
+ }
623
+ .e-ribbon.e-rbn .e-ribbon-group-overflow .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item,
624
+ .e-ribbon.e-rbn .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item,
625
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item,
626
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
627
+ max-height: 80px;
628
+ }
629
+ .e-ribbon.e-rbn .e-ribbon-group-overflow .e-ribbon-gallery-button,
630
+ .e-ribbon.e-rbn .e-ribbon-item .e-ribbon-gallery-button,
631
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow .e-ribbon-gallery-button,
632
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-ribbon-gallery-button {
633
+ padding: 0;
634
+ border-width: 0 0 0 1px;
635
+ border-radius: 0 4px 4px 0;
636
+ }
600
637
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-hidden,
601
638
  .e-ribbon.e-rbn .e-ribbon-item.e-hidden,
602
639
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-hidden,
@@ -702,6 +739,13 @@
702
739
  min-height: 33%;
703
740
  padding: 2px;
704
741
  }
742
+ .e-ribbon.e-rbn .e-ribbon-item:has(.e-ribbon-gallery-container),
743
+ .e-ribbon-group-overflow-ddb .e-ribbon-item:has(.e-ribbon-gallery-container) {
744
+ padding: 0;
745
+ border-style: solid;
746
+ border-width: 1px;
747
+ border-radius: 4px;
748
+ }
705
749
  .e-ribbon.e-rbn .e-ribbon-item .e-btn-group,
706
750
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-btn-group {
707
751
  box-shadow: none;
@@ -848,9 +892,36 @@
848
892
  padding: 0 0 0 2px;
849
893
  }
850
894
 
895
+ .e-ribbon-group-overflow-ddb.e-dropdown-popup {
896
+ min-width: 190px;
897
+ }
851
898
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
852
899
  display: none;
853
900
  }
901
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-ribbon-gallery-container) {
902
+ border: 0;
903
+ }
904
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-input-group) {
905
+ margin: 5px 0;
906
+ }
907
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-dropdown.e-btn {
908
+ padding: 0;
909
+ display: -ms-flexbox;
910
+ display: flex;
911
+ -ms-flex-align: center;
912
+ align-items: center;
913
+ -ms-flex-pack: start;
914
+ justify-content: flex-start;
915
+ width: 100%;
916
+ }
917
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-dropdown.e-btn .e-btn-icon {
918
+ margin: 0;
919
+ }
920
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-wrapper.e-hidden,
921
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-container.e-hidden,
922
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-button.e-hidden {
923
+ display: none;
924
+ }
854
925
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hide-group {
855
926
  display: none;
856
927
  }
@@ -863,6 +934,12 @@
863
934
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-disabled {
864
935
  pointer-events: none;
865
936
  }
937
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-dropdown-btn .e-caret {
938
+ font-size: 14px;
939
+ }
940
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-input-group {
941
+ height: 32px;
942
+ }
866
943
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
867
944
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
868
945
  white-space: nowrap;
@@ -873,17 +950,28 @@
873
950
  font-weight: 400;
874
951
  font-size: 14px;
875
952
  }
953
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-colorpicker-wrapper) {
954
+ -ms-flex-align: center;
955
+ align-items: center;
956
+ }
876
957
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
877
958
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
878
959
  margin: 7px 10px;
879
960
  }
961
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon {
962
+ font-size: 16px;
963
+ }
880
964
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
881
- margin: 10px;
965
+ margin: 4px;
882
966
  padding: 0;
883
967
  }
884
968
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
885
969
  padding: 0;
886
970
  width: 100%;
971
+ height: 32px;
972
+ }
973
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
974
+ margin: 0;
887
975
  }
888
976
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
889
977
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
@@ -901,31 +989,51 @@
901
989
  }
902
990
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
903
991
  padding: 6px 10px;
992
+ font-size: 14px;
904
993
  font-weight: 600;
905
994
  line-height: 16px;
995
+ height: 26px;
906
996
  }
907
997
 
908
998
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
909
999
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
910
1000
  margin-left: 38px;
911
1001
  }
1002
+ .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 {
1003
+ padding: 8px 8px 8px 12px;
1004
+ }
1005
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
1006
+ margin-left: 38px;
1007
+ }
912
1008
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
913
1009
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
914
1010
  transform: rotate(-90deg);
915
- padding: 10px;
1011
+ padding: 0 9px 12px;
916
1012
  margin: 0 0 0 auto;
917
1013
  }
918
1014
 
1015
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
1016
+ padding: 4px 12px 4px 0;
1017
+ }
919
1018
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
920
1019
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
921
1020
  margin-right: 38px;
922
1021
  }
1022
+ .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 {
1023
+ padding: 8px 12px 8px 8px;
1024
+ }
1025
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
1026
+ margin-right: 38px;
1027
+ }
923
1028
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
924
1029
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
925
1030
  transform: rotate(90deg);
926
- padding: 10px;
1031
+ padding: 12px 9px 0;
927
1032
  margin: 0 auto 0 0;
928
1033
  }
1034
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
1035
+ margin: 4px;
1036
+ }
929
1037
 
930
1038
  .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group:not(.e-icon-btn) {
931
1039
  -ms-flex-direction: column;
@@ -952,6 +1060,18 @@
952
1060
  -ms-flex-pack: start;
953
1061
  justify-content: flex-start;
954
1062
  }
1063
+ .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 {
1064
+ border-top-right-radius: 4px;
1065
+ border-top-left-radius: 4px;
1066
+ border-bottom-right-radius: 0;
1067
+ border-bottom-left-radius: 0;
1068
+ }
1069
+ .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 {
1070
+ border-top-right-radius: 0;
1071
+ border-top-left-radius: 0;
1072
+ border-bottom-right-radius: 4px;
1073
+ border-bottom-left-radius: 4px;
1074
+ }
955
1075
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-group {
956
1076
  box-shadow: none;
957
1077
  border-radius: 0;
@@ -970,7 +1090,7 @@
970
1090
  padding: 0;
971
1091
  font-weight: 400;
972
1092
  font-size: 14px;
973
- border: none;
1093
+ border: 1px solid #fff;
974
1094
  text-transform: none;
975
1095
  }
976
1096
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-group .e-btn.e-ribbon-group-button:not(.e-icon-btn) {
@@ -981,6 +1101,119 @@
981
1101
  box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
982
1102
  }
983
1103
 
1104
+ .e-ribbon-gallery-popup.e-popup,
1105
+ .e-ribbon-gallery-dropdown.e-popup {
1106
+ border-radius: 4px;
1107
+ padding: 10px;
1108
+ overflow: auto;
1109
+ }
1110
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
1111
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-header {
1112
+ padding: 9px;
1113
+ font-size: 12px;
1114
+ font-weight: 400;
1115
+ line-height: 24px;
1116
+ }
1117
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item,
1118
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item {
1119
+ margin: 4px;
1120
+ height: 54px;
1121
+ width: 73px;
1122
+ }
1123
+
1124
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item {
1125
+ width: 95px;
1126
+ }
1127
+
1128
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container,
1129
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container,
1130
+ .e-ribbon-group-overflow .e-ribbon-gallery-container,
1131
+ .e-ribbon-item .e-ribbon-gallery-container {
1132
+ padding: 0;
1133
+ margin: 0;
1134
+ display: -ms-flexbox;
1135
+ display: flex;
1136
+ -ms-flex-line-pack: distribute;
1137
+ align-content: space-around;
1138
+ }
1139
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item,
1140
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item,
1141
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item,
1142
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item {
1143
+ display: inherit;
1144
+ -ms-flex-align: center;
1145
+ align-items: center;
1146
+ -ms-flex-pack: center;
1147
+ justify-content: center;
1148
+ text-align: center;
1149
+ list-style-type: none;
1150
+ padding: 8px 0;
1151
+ -ms-flex-direction: column;
1152
+ flex-direction: column;
1153
+ cursor: pointer;
1154
+ border-width: 2px;
1155
+ border-style: solid;
1156
+ border-radius: 4px;
1157
+ }
1158
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled,
1159
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled,
1160
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled,
1161
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled {
1162
+ pointer-events: none;
1163
+ }
1164
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden,
1165
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden,
1166
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden,
1167
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden {
1168
+ display: none;
1169
+ }
1170
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text,
1171
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text,
1172
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text,
1173
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text {
1174
+ font-size: 12px;
1175
+ font-weight: 400;
1176
+ line-height: 22px;
1177
+ width: inherit;
1178
+ overflow: hidden;
1179
+ white-space: nowrap;
1180
+ text-overflow: ellipsis;
1181
+ }
1182
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons,
1183
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons,
1184
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons,
1185
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons {
1186
+ font-size: 20px;
1187
+ font-weight: 400;
1188
+ line-height: 20px;
1189
+ padding: 3px;
1190
+ background-size: cover;
1191
+ }
1192
+ .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,
1193
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item:hover,
1194
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected,
1195
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item:hover,
1196
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected,
1197
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item:hover,
1198
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected {
1199
+ border-radius: 4px;
1200
+ }
1201
+
1202
+ .e-ribbon-keytip {
1203
+ min-width: 20px;
1204
+ height: 20px;
1205
+ line-height: 18px;
1206
+ font-size: 14px;
1207
+ }
1208
+ .e-ribbon-keytip.e-popup-open {
1209
+ display: -ms-flexbox;
1210
+ display: flex;
1211
+ -ms-flex-pack: center;
1212
+ justify-content: center;
1213
+ -ms-flex-align: center;
1214
+ align-items: center;
1215
+ }
1216
+
984
1217
  .e-ribbon-menu {
985
1218
  display: block;
986
1219
  }
@@ -1382,6 +1615,37 @@
1382
1615
  border-radius: unset;
1383
1616
  }
1384
1617
 
1618
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header,
1619
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
1620
+ line-height: 20px;
1621
+ height: 36px;
1622
+ font-size: 16px;
1623
+ }
1624
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-dropdown-btn .e-caret,
1625
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-dropdown-btn .e-caret {
1626
+ font-size: 16px;
1627
+ }
1628
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-input-group,
1629
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-input-group {
1630
+ height: 40px;
1631
+ }
1632
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item,
1633
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
1634
+ height: 40px;
1635
+ }
1636
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon,
1637
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon {
1638
+ font-size: 18px;
1639
+ }
1640
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon.e-icon-left,
1641
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon.e-icon-left {
1642
+ margin: 0;
1643
+ }
1644
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-colorpicker-wrapper),
1645
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-colorpicker-wrapper) {
1646
+ -ms-flex-align: center;
1647
+ align-items: center;
1648
+ }
1385
1649
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1386
1650
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label,
1387
1651
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
@@ -1396,20 +1660,36 @@
1396
1660
  }
1397
1661
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
1398
1662
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
1399
- margin: 10px;
1663
+ margin: 8px;
1400
1664
  padding: 0;
1401
1665
  }
1666
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-overflow-header,
1667
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-overflow-header {
1668
+ padding: 8px 0 8px 16px;
1669
+ }
1402
1670
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1403
1671
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label,
1404
1672
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1405
1673
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
1406
1674
  margin-left: 42px;
1407
1675
  }
1676
+ .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,
1677
+ .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 {
1678
+ padding: 10px 12px 10px 16px;
1679
+ }
1680
+ .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,
1681
+ .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 {
1682
+ margin-left: 42px;
1683
+ }
1408
1684
  .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,
1409
1685
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1410
1686
  .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,
1411
1687
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1412
- padding: 10px;
1688
+ padding: 0 12px 12px;
1689
+ }
1690
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-overflow-header,
1691
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-overflow-header {
1692
+ padding: 8px 16px 8px 0;
1413
1693
  }
1414
1694
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1415
1695
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label,
@@ -1417,11 +1697,23 @@
1417
1697
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
1418
1698
  margin-right: 42px;
1419
1699
  }
1700
+ .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,
1701
+ .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 {
1702
+ padding: 10px 16px 10px 12px;
1703
+ }
1704
+ .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,
1705
+ .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 {
1706
+ margin-right: 42px;
1707
+ }
1420
1708
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1421
1709
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1422
1710
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1423
1711
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1424
- padding: 10px;
1712
+ padding: 12px 12px 0;
1713
+ }
1714
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
1715
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
1716
+ margin: 8px;
1425
1717
  }
1426
1718
 
1427
1719
  .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
@@ -1494,9 +1786,30 @@
1494
1786
  padding: 0 10px 0 0;
1495
1787
  }
1496
1788
 
1789
+ .e-bigger.e-ribbon-gallery-popup.e-popup,
1790
+ .e-bigger .e-ribbon-gallery-popup.e-popup,
1791
+ .e-bigger.e-ribbon-gallery-dropdown.e-popup,
1792
+ .e-bigger .e-ribbon-gallery-dropdown.e-popup {
1793
+ padding: 14px;
1794
+ }
1795
+ .e-bigger.e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
1796
+ .e-bigger .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
1797
+ .e-bigger.e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-header,
1798
+ .e-bigger .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-header {
1799
+ padding-bottom: 6px;
1800
+ font-size: 14px;
1801
+ line-height: 20px;
1802
+ }
1803
+
1497
1804
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1498
1805
  border-color: #757575;
1499
1806
  }
1807
+ .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab {
1808
+ background: #fff;
1809
+ }
1810
+ .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab .e-tab-wrap .e-tab-text {
1811
+ color: #400074;
1812
+ }
1500
1813
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text {
1501
1814
  color: #000;
1502
1815
  }
@@ -1679,6 +1992,10 @@
1679
1992
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper.e-vertical:hover .e-split-btn:disabled {
1680
1993
  border-color: transparent;
1681
1994
  }
1995
+ .e-ribbon.e-rbn .e-ribbon-item:has(.e-ribbon-gallery-container),
1996
+ .e-ribbon-group-overflow-ddb .e-ribbon-item:has(.e-ribbon-gallery-container) {
1997
+ border-color: #fff;
1998
+ }
1682
1999
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:not(.e-ribbon-file-menu),
1683
2000
  .e-ribbon.e-rbn .e-ribbon-item .e-btn-group .e-btn.e-ribbon-group-button,
1684
2001
  .e-ribbon.e-rbn .e-ribbon-item .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
@@ -2084,6 +2401,58 @@
2084
2401
  background: transparent;
2085
2402
  }
2086
2403
 
2404
+ .e-ribbon-gallery-item {
2405
+ background: #ecf;
2406
+ border-color: transparent;
2407
+ }
2408
+ .e-ribbon-gallery-item:hover {
2409
+ background: unset;
2410
+ }
2411
+ .e-ribbon-gallery-item.e-ribbon-gallery-selected {
2412
+ background: #ecf;
2413
+ }
2414
+ .e-ribbon-gallery-item.e-ribbon-gallery-selected .e-ribbon-gallery-text {
2415
+ color: #000;
2416
+ }
2417
+ .e-ribbon-gallery-item.e-ribbon-gallery-selected .e-ribbon-gallery-icons {
2418
+ color: #000;
2419
+ }
2420
+ .e-ribbon-gallery-item.e-disabled {
2421
+ background: #fff;
2422
+ }
2423
+ .e-ribbon-gallery-item.e-disabled .e-ribbon-gallery-text {
2424
+ color: #000;
2425
+ }
2426
+ .e-ribbon-gallery-item.e-disabled .e-ribbon-gallery-icons {
2427
+ color: #000;
2428
+ }
2429
+ .e-ribbon-gallery-item:focus, .e-ribbon-gallery-item:focus-visible {
2430
+ border-color: #fff;
2431
+ }
2432
+ .e-ribbon-gallery-item .e-ribbon-gallery-text {
2433
+ color: #000;
2434
+ }
2435
+ .e-ribbon-gallery-item .e-ribbon-gallery-icons {
2436
+ color: #000;
2437
+ }
2438
+
2439
+ .e-ribbon-gallery-button {
2440
+ border-color: #fff;
2441
+ }
2442
+ .e-ribbon-gallery-button.e-gallery-button-active {
2443
+ background: #ecf;
2444
+ }
2445
+
2446
+ .e-ribbon-gallery-popup.e-popup,
2447
+ .e-dropdown-popup.e-ribbon-gallery-dropdown {
2448
+ background: #fff;
2449
+ box-shadow: 0 6px 12px rgba(255, 255, 255, 0.175);
2450
+ }
2451
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
2452
+ .e-dropdown-popup.e-ribbon-gallery-dropdown .e-ribbon-gallery-header {
2453
+ color: #000;
2454
+ }
2455
+
2087
2456
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-icon {
2088
2457
  color: #000;
2089
2458
  }
@@ -2128,6 +2497,11 @@
2128
2497
  color: #fff;
2129
2498
  }
2130
2499
 
2500
+ .e-ribbon-keytip {
2501
+ background-color: #000;
2502
+ color: #fff;
2503
+ }
2504
+
2131
2505
  .e-ribbon-menu.e-menu-wrapper:not(.e-menu-popup), .e-ribbon-menu.e-menu-container:not(.e-menu-popup) {
2132
2506
  background: #fff;
2133
2507
  }