@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
@@ -376,6 +376,21 @@
376
376
  .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 {
377
377
  display: none;
378
378
  }
379
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-item .e-ribbon-gallery-wrapper {
380
+ height: 26px;
381
+ }
382
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
383
+ padding: 2px 0;
384
+ width: 95px;
385
+ margin: 2px;
386
+ max-height: 22px;
387
+ }
388
+ .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 {
389
+ pointer-events: none;
390
+ }
391
+ .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 {
392
+ font-size: 12px;
393
+ }
379
394
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
380
395
  overflow-y: hidden;
381
396
  }
@@ -671,6 +686,28 @@
671
686
  padding: 1px;
672
687
  vertical-align: middle;
673
688
  }
689
+ .e-ribbon.e-rbn .e-ribbon-group-overflow .e-ribbon-gallery-wrapper,
690
+ .e-ribbon.e-rbn .e-ribbon-item .e-ribbon-gallery-wrapper,
691
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow .e-ribbon-gallery-wrapper,
692
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-ribbon-gallery-wrapper {
693
+ height: 60px;
694
+ display: -ms-flexbox;
695
+ display: flex;
696
+ }
697
+ .e-ribbon.e-rbn .e-ribbon-group-overflow .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item,
698
+ .e-ribbon.e-rbn .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item,
699
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item,
700
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
701
+ max-height: 60px;
702
+ }
703
+ .e-ribbon.e-rbn .e-ribbon-group-overflow .e-ribbon-gallery-button,
704
+ .e-ribbon.e-rbn .e-ribbon-item .e-ribbon-gallery-button,
705
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow .e-ribbon-gallery-button,
706
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-ribbon-gallery-button {
707
+ padding: 0;
708
+ border-width: 0 0 0 1px;
709
+ border-radius: 0 4px 4px 0;
710
+ }
674
711
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-hidden,
675
712
  .e-ribbon.e-rbn .e-ribbon-item.e-hidden,
676
713
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-hidden,
@@ -776,6 +813,13 @@
776
813
  min-height: 33%;
777
814
  padding: 2px;
778
815
  }
816
+ .e-ribbon.e-rbn .e-ribbon-item:has(.e-ribbon-gallery-container),
817
+ .e-ribbon-group-overflow-ddb .e-ribbon-item:has(.e-ribbon-gallery-container) {
818
+ padding: 0;
819
+ border-style: solid;
820
+ border-width: 1px;
821
+ border-radius: 4px;
822
+ }
779
823
  .e-ribbon.e-rbn .e-ribbon-item .e-btn-group,
780
824
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-btn-group {
781
825
  box-shadow: none;
@@ -922,9 +966,36 @@
922
966
  padding: 0 0 0 2px;
923
967
  }
924
968
 
969
+ .e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
970
+ min-width: 190px;
971
+ }
925
972
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
926
973
  display: none;
927
974
  }
975
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-ribbon-gallery-container) {
976
+ border: 0;
977
+ }
978
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-input-group) {
979
+ margin: 5px 0;
980
+ }
981
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-dropdown.e-btn {
982
+ padding: 0;
983
+ display: -ms-flexbox;
984
+ display: flex;
985
+ -ms-flex-align: center;
986
+ align-items: center;
987
+ -ms-flex-pack: start;
988
+ justify-content: flex-start;
989
+ width: 100%;
990
+ }
991
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-dropdown.e-btn .e-btn-icon {
992
+ margin: 0;
993
+ }
994
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-wrapper.e-hidden,
995
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-container.e-hidden,
996
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-button.e-hidden {
997
+ display: none;
998
+ }
928
999
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hide-group {
929
1000
  display: none;
930
1001
  }
@@ -937,6 +1008,12 @@
937
1008
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-disabled {
938
1009
  pointer-events: none;
939
1010
  }
1011
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-dropdown-btn .e-caret {
1012
+ font-size: 18px;
1013
+ }
1014
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-input-group {
1015
+ height: 30px;
1016
+ }
940
1017
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
941
1018
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
942
1019
  white-space: nowrap;
@@ -945,19 +1022,30 @@
945
1022
  -ms-flex-align: center;
946
1023
  align-items: center;
947
1024
  font-weight: 400;
948
- font-size: 12px;
1025
+ font-size: 14px;
1026
+ }
1027
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-colorpicker-wrapper) {
1028
+ -ms-flex-align: center;
1029
+ align-items: center;
949
1030
  }
950
1031
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
951
1032
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
952
1033
  margin: 3px 5px;
953
1034
  }
1035
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon {
1036
+ font-size: 18px;
1037
+ }
954
1038
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
955
- margin: 5px;
1039
+ margin: 7px 0 7px 12px;
956
1040
  padding: 0;
957
1041
  }
958
1042
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
959
1043
  padding: 0;
960
1044
  width: 100%;
1045
+ height: 32px;
1046
+ }
1047
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1048
+ margin: 0;
961
1049
  }
962
1050
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
963
1051
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
@@ -974,32 +1062,52 @@
974
1062
  justify-content: flex-start;
975
1063
  }
976
1064
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
977
- padding: 3px 5px;
978
- font-weight: 600;
1065
+ padding: 7px 0 7px 12px;
1066
+ font-size: 14px;
1067
+ font-weight: 500;
979
1068
  line-height: 18px;
1069
+ height: 28px;
980
1070
  }
981
1071
 
982
1072
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
983
1073
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
984
- margin-left: 28px;
1074
+ margin-left: 34px;
1075
+ }
1076
+ .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 {
1077
+ padding: 7px 8px 7px 12px;
1078
+ }
1079
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
1080
+ margin-left: 34px;
985
1081
  }
986
1082
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
987
1083
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
988
1084
  transform: rotate(-90deg);
989
- padding: 5px;
1085
+ padding: 0 12px;
990
1086
  margin: 0 0 0 auto;
991
1087
  }
992
1088
 
1089
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
1090
+ padding: 7px 12px 7px 0;
1091
+ }
993
1092
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
994
1093
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
995
- margin-right: 28px;
1094
+ margin-right: 34px;
1095
+ }
1096
+ .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 {
1097
+ padding: 7px 12px 7px 8px;
1098
+ }
1099
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
1100
+ margin-right: 34px;
996
1101
  }
997
1102
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
998
1103
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
999
1104
  transform: rotate(90deg);
1000
- padding: 5px;
1105
+ padding: 0 12px;
1001
1106
  margin: 0 auto 0 0;
1002
1107
  }
1108
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
1109
+ margin: 7px 12px 7px 0;
1110
+ }
1003
1111
 
1004
1112
  .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group:not(.e-icon-btn) {
1005
1113
  -ms-flex-direction: column;
@@ -1013,7 +1121,7 @@
1013
1121
  }
1014
1122
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-ribbon-groupbutton-header {
1015
1123
  padding-bottom: 3px;
1016
- font-weight: 600;
1124
+ font-weight: 500;
1017
1125
  line-height: 18px;
1018
1126
  white-space: nowrap;
1019
1127
  }
@@ -1026,6 +1134,18 @@
1026
1134
  -ms-flex-pack: start;
1027
1135
  justify-content: flex-start;
1028
1136
  }
1137
+ .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 {
1138
+ border-top-right-radius: 4px;
1139
+ border-top-left-radius: 4px;
1140
+ border-bottom-right-radius: 0;
1141
+ border-bottom-left-radius: 0;
1142
+ }
1143
+ .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 {
1144
+ border-top-right-radius: 0;
1145
+ border-top-left-radius: 0;
1146
+ border-bottom-right-radius: 4px;
1147
+ border-bottom-left-radius: 4px;
1148
+ }
1029
1149
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-group {
1030
1150
  box-shadow: none;
1031
1151
  border-radius: 4px;
@@ -1044,7 +1164,7 @@
1044
1164
  padding: 0;
1045
1165
  font-weight: 400;
1046
1166
  font-size: 12px;
1047
- border: none;
1167
+ border: 1px solid #d1d5db;
1048
1168
  text-transform: none;
1049
1169
  }
1050
1170
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-group .e-btn.e-ribbon-group-button:not(.e-icon-btn) {
@@ -1055,6 +1175,119 @@
1055
1175
  box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
1056
1176
  }
1057
1177
 
1178
+ .e-ribbon-gallery-popup.e-popup,
1179
+ .e-ribbon-gallery-dropdown.e-popup {
1180
+ border-radius: 4px;
1181
+ padding: 0 12px 12px;
1182
+ overflow: auto;
1183
+ }
1184
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
1185
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-header {
1186
+ padding: 8px 0 4px;
1187
+ font-size: 14px;
1188
+ font-weight: 500;
1189
+ line-height: 22px;
1190
+ }
1191
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item,
1192
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item {
1193
+ margin: 4px;
1194
+ height: 54px;
1195
+ width: 73px;
1196
+ }
1197
+
1198
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item {
1199
+ width: 95px;
1200
+ }
1201
+
1202
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container,
1203
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container,
1204
+ .e-ribbon-group-overflow .e-ribbon-gallery-container,
1205
+ .e-ribbon-item .e-ribbon-gallery-container {
1206
+ padding: 0;
1207
+ margin: 0;
1208
+ display: -ms-flexbox;
1209
+ display: flex;
1210
+ -ms-flex-line-pack: distribute;
1211
+ align-content: space-around;
1212
+ }
1213
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item,
1214
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item,
1215
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item,
1216
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item {
1217
+ display: inherit;
1218
+ -ms-flex-align: center;
1219
+ align-items: center;
1220
+ -ms-flex-pack: center;
1221
+ justify-content: center;
1222
+ text-align: center;
1223
+ list-style-type: none;
1224
+ padding: 5px 0;
1225
+ -ms-flex-direction: column;
1226
+ flex-direction: column;
1227
+ cursor: pointer;
1228
+ border-width: 2px;
1229
+ border-style: solid;
1230
+ border-radius: 4px;
1231
+ }
1232
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled,
1233
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled,
1234
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled,
1235
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled {
1236
+ pointer-events: none;
1237
+ }
1238
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden,
1239
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden,
1240
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden,
1241
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden {
1242
+ display: none;
1243
+ }
1244
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text,
1245
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text,
1246
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text,
1247
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text {
1248
+ font-size: 14px;
1249
+ font-weight: 400;
1250
+ line-height: 22px;
1251
+ width: inherit;
1252
+ overflow: hidden;
1253
+ white-space: nowrap;
1254
+ text-overflow: ellipsis;
1255
+ }
1256
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons,
1257
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons,
1258
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons,
1259
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons {
1260
+ font-size: 20px;
1261
+ font-weight: 400;
1262
+ line-height: 20px;
1263
+ padding: 3px;
1264
+ background-size: cover;
1265
+ }
1266
+ .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,
1267
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item:hover,
1268
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected,
1269
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item:hover,
1270
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected,
1271
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item:hover,
1272
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected {
1273
+ border-radius: 4px;
1274
+ }
1275
+
1276
+ .e-ribbon-keytip {
1277
+ min-width: 20px;
1278
+ height: 20px;
1279
+ line-height: 18px;
1280
+ font-size: 14px;
1281
+ }
1282
+ .e-ribbon-keytip.e-popup-open {
1283
+ display: -ms-flexbox;
1284
+ display: flex;
1285
+ -ms-flex-pack: center;
1286
+ justify-content: center;
1287
+ -ms-flex-align: center;
1288
+ align-items: center;
1289
+ }
1290
+
1058
1291
  .e-ribbon-menu {
1059
1292
  display: block;
1060
1293
  }
@@ -1456,11 +1689,42 @@
1456
1689
  border-radius: 2px;
1457
1690
  }
1458
1691
 
1692
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header,
1693
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
1694
+ line-height: 20px;
1695
+ height: 30px;
1696
+ font-size: 16px;
1697
+ }
1698
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-dropdown-btn .e-caret,
1699
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-dropdown-btn .e-caret {
1700
+ font-size: 18px;
1701
+ }
1702
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-input-group,
1703
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-input-group {
1704
+ height: 38px;
1705
+ }
1706
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item,
1707
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
1708
+ height: 36px;
1709
+ }
1710
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon,
1711
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon {
1712
+ font-size: 18px;
1713
+ }
1714
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon.e-icon-left,
1715
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon.e-icon-left {
1716
+ margin: 0;
1717
+ }
1718
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-colorpicker-wrapper),
1719
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-colorpicker-wrapper) {
1720
+ -ms-flex-align: center;
1721
+ align-items: center;
1722
+ }
1459
1723
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1460
1724
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label,
1461
1725
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1462
1726
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
1463
- font-size: 14px;
1727
+ font-size: 16px;
1464
1728
  }
1465
1729
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1466
1730
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
@@ -1470,32 +1734,60 @@
1470
1734
  }
1471
1735
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
1472
1736
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
1473
- margin: 7px;
1737
+ margin: 9px 0 9px 16px;
1474
1738
  padding: 0;
1475
1739
  }
1740
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-overflow-header,
1741
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-overflow-header {
1742
+ padding: 6px 0 6px 16px;
1743
+ }
1476
1744
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1477
1745
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label,
1478
1746
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1479
1747
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
1480
- margin-left: 36px;
1748
+ margin-left: 46px;
1749
+ }
1750
+ .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,
1751
+ .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 {
1752
+ padding: 9px 12px 9px 16px;
1753
+ }
1754
+ .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,
1755
+ .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 {
1756
+ margin-left: 46px;
1481
1757
  }
1482
1758
  .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,
1483
1759
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1484
1760
  .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,
1485
1761
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1486
- padding: 7px;
1762
+ padding: 0 12px;
1763
+ }
1764
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-overflow-header,
1765
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-overflow-header {
1766
+ padding: 6px 16px 6px 0;
1487
1767
  }
1488
1768
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1489
1769
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label,
1490
1770
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1491
1771
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
1492
- margin-right: 36px;
1772
+ margin-right: 46px;
1773
+ }
1774
+ .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,
1775
+ .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 {
1776
+ padding: 9px 16px 9px 12px;
1777
+ }
1778
+ .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,
1779
+ .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 {
1780
+ margin-right: 46px;
1493
1781
  }
1494
1782
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1495
1783
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1496
1784
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1497
1785
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1498
- padding: 7px;
1786
+ padding: 0 12px;
1787
+ }
1788
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
1789
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
1790
+ margin: 9px 16px 9px 0;
1499
1791
  }
1500
1792
 
1501
1793
  .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
@@ -1568,9 +1860,30 @@
1568
1860
  padding: 0 7px 0 0;
1569
1861
  }
1570
1862
 
1863
+ .e-bigger.e-ribbon-gallery-popup.e-popup,
1864
+ .e-bigger .e-ribbon-gallery-popup.e-popup,
1865
+ .e-bigger.e-ribbon-gallery-dropdown.e-popup,
1866
+ .e-bigger .e-ribbon-gallery-dropdown.e-popup {
1867
+ padding: 0 16px 16px;
1868
+ }
1869
+ .e-bigger.e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
1870
+ .e-bigger .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
1871
+ .e-bigger.e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-header,
1872
+ .e-bigger .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-header {
1873
+ padding-bottom: 12px 0 8px;
1874
+ font-size: 16px;
1875
+ line-height: 24px;
1876
+ }
1877
+
1571
1878
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1572
1879
  border-color: unset;
1573
1880
  }
1881
+ .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab {
1882
+ background: transparent;
1883
+ }
1884
+ .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab .e-tab-wrap .e-tab-text {
1885
+ color: #4f46e5;
1886
+ }
1574
1887
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text {
1575
1888
  color: #111827;
1576
1889
  }
@@ -1753,6 +2066,10 @@
1753
2066
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper.e-vertical:hover .e-split-btn:disabled {
1754
2067
  border-color: transparent;
1755
2068
  }
2069
+ .e-ribbon.e-rbn .e-ribbon-item:has(.e-ribbon-gallery-container),
2070
+ .e-ribbon-group-overflow-ddb .e-ribbon-item:has(.e-ribbon-gallery-container) {
2071
+ border-color: #d1d5db;
2072
+ }
1756
2073
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:not(.e-ribbon-file-menu),
1757
2074
  .e-ribbon.e-rbn .e-ribbon-item .e-btn-group .e-btn.e-ribbon-group-button,
1758
2075
  .e-ribbon.e-rbn .e-ribbon-item .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
@@ -2158,6 +2475,58 @@
2158
2475
  background: transparent;
2159
2476
  }
2160
2477
 
2478
+ .e-ribbon-gallery-item {
2479
+ background: transparent;
2480
+ border-color: transparent;
2481
+ }
2482
+ .e-ribbon-gallery-item:hover {
2483
+ background: #f3f4f6;
2484
+ }
2485
+ .e-ribbon-gallery-item.e-ribbon-gallery-selected {
2486
+ background: #e5e7eb;
2487
+ }
2488
+ .e-ribbon-gallery-item.e-ribbon-gallery-selected .e-ribbon-gallery-text {
2489
+ color: #111827;
2490
+ }
2491
+ .e-ribbon-gallery-item.e-ribbon-gallery-selected .e-ribbon-gallery-icons {
2492
+ color: #6b7280;
2493
+ }
2494
+ .e-ribbon-gallery-item.e-disabled {
2495
+ background: transparent;
2496
+ }
2497
+ .e-ribbon-gallery-item.e-disabled .e-ribbon-gallery-text {
2498
+ color: #9ca3af;
2499
+ }
2500
+ .e-ribbon-gallery-item.e-disabled .e-ribbon-gallery-icons {
2501
+ color: #d1d5db;
2502
+ }
2503
+ .e-ribbon-gallery-item:focus, .e-ribbon-gallery-item:focus-visible {
2504
+ border-color: #fff;
2505
+ }
2506
+ .e-ribbon-gallery-item .e-ribbon-gallery-text {
2507
+ color: #111827;
2508
+ }
2509
+ .e-ribbon-gallery-item .e-ribbon-gallery-icons {
2510
+ color: #6b7280;
2511
+ }
2512
+
2513
+ .e-ribbon-gallery-button {
2514
+ border-color: #d1d5db;
2515
+ }
2516
+ .e-ribbon-gallery-button.e-gallery-button-active {
2517
+ background: #e5e7eb;
2518
+ }
2519
+
2520
+ .e-ribbon-gallery-popup.e-popup,
2521
+ .e-dropdown-popup.e-ribbon-gallery-dropdown {
2522
+ background: #fff;
2523
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
2524
+ }
2525
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
2526
+ .e-dropdown-popup.e-ribbon-gallery-dropdown .e-ribbon-gallery-header {
2527
+ color: #111827;
2528
+ }
2529
+
2161
2530
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-icon {
2162
2531
  color: #6b7280;
2163
2532
  }
@@ -2202,6 +2571,11 @@
2202
2571
  color: #111827;
2203
2572
  }
2204
2573
 
2574
+ .e-ribbon-keytip {
2575
+ background-color: #111827;
2576
+ color: #f9fafb;
2577
+ }
2578
+
2205
2579
  .e-ribbon-menu.e-menu-wrapper:not(.e-menu-popup), .e-ribbon-menu.e-menu-container:not(.e-menu-popup) {
2206
2580
  background: #fff;
2207
2581
  }