@syncfusion/ej2-ribbon 33.2.10 → 34.1.30

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 (294) hide show
  1. package/dist/ej2-ribbon.umd.min.js +2 -2
  2. package/dist/ej2-ribbon.umd.min.js.map +1 -1
  3. package/dist/es6/ej2-ribbon.es2015.js +107 -8
  4. package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
  5. package/dist/es6/ej2-ribbon.es5.js +115 -16
  6. package/dist/es6/ej2-ribbon.es5.js.map +1 -1
  7. package/dist/global/ej2-ribbon.min.js +2 -2
  8. package/dist/global/ej2-ribbon.min.js.map +1 -1
  9. package/dist/global/index.d.ts +1 -1
  10. package/package.json +8 -8
  11. package/src/ribbon/base/ribbon-model.d.ts +1 -1
  12. package/src/ribbon/base/ribbon.js +1 -2
  13. package/src/ribbon/base/utils.js +8 -0
  14. package/src/ribbon/items/ribbon-colorpicker.js +20 -1
  15. package/src/ribbon/items/ribbon-combobox.js +30 -1
  16. package/src/ribbon/items/ribbon-gallery.js +17 -5
  17. package/src/ribbon/items/ribbon-groupbutton.js +18 -6
  18. package/src/ribbon/items/ribbon-splitbutton.js +8 -2
  19. package/src/ribbon/modules/ribbon-filemenu.js +14 -0
  20. package/styles/bds-lite.css +15 -312
  21. package/styles/bds-lite.scss +1 -15
  22. package/styles/bds.css +20 -316
  23. package/styles/bds.scss +2 -16
  24. package/styles/bootstrap-dark-lite.css +6 -74
  25. package/styles/bootstrap-dark-lite.scss +1 -15
  26. package/styles/bootstrap-dark.css +6 -74
  27. package/styles/bootstrap-dark.scss +2 -16
  28. package/styles/bootstrap-lite.css +6 -76
  29. package/styles/bootstrap-lite.scss +1 -15
  30. package/styles/bootstrap.css +6 -76
  31. package/styles/bootstrap.scss +2 -16
  32. package/styles/bootstrap4-lite.css +7 -127
  33. package/styles/bootstrap4-lite.scss +1 -15
  34. package/styles/bootstrap4.css +7 -127
  35. package/styles/bootstrap4.scss +2 -16
  36. package/styles/bootstrap5-dark-lite.css +6 -149
  37. package/styles/bootstrap5-dark-lite.scss +1 -15
  38. package/styles/bootstrap5-dark.css +11 -149
  39. package/styles/bootstrap5-dark.scss +2 -16
  40. package/styles/bootstrap5-lite.css +7 -150
  41. package/styles/bootstrap5-lite.scss +1 -16
  42. package/styles/bootstrap5.3-lite.css +7 -318
  43. package/styles/bootstrap5.3-lite.scss +1 -16
  44. package/styles/bootstrap5.3.css +13 -403
  45. package/styles/bootstrap5.3.scss +2 -17
  46. package/styles/bootstrap5.css +12 -150
  47. package/styles/bootstrap5.scss +2 -17
  48. package/styles/fabric-dark-lite.css +6 -50
  49. package/styles/fabric-dark-lite.scss +1 -16
  50. package/styles/fabric-dark.css +6 -50
  51. package/styles/fabric-dark.scss +2 -17
  52. package/styles/fabric-lite.css +6 -51
  53. package/styles/fabric-lite.scss +1 -16
  54. package/styles/fabric.css +6 -51
  55. package/styles/fabric.scss +2 -17
  56. package/styles/fluent-dark-lite.css +6 -141
  57. package/styles/fluent-dark-lite.scss +1 -16
  58. package/styles/fluent-dark.css +6 -141
  59. package/styles/fluent-dark.scss +2 -17
  60. package/styles/fluent-lite.css +6 -141
  61. package/styles/fluent-lite.scss +1 -16
  62. package/styles/fluent.css +6 -141
  63. package/styles/fluent.scss +2 -17
  64. package/styles/fluent2-lite.css +7 -390
  65. package/styles/fluent2-lite.scss +1 -16
  66. package/styles/fluent2.css +7 -476
  67. package/styles/fluent2.scss +2 -17
  68. package/styles/highcontrast-light-lite.css +6 -71
  69. package/styles/highcontrast-light-lite.scss +1 -16
  70. package/styles/highcontrast-light.css +6 -71
  71. package/styles/highcontrast-light.scss +2 -17
  72. package/styles/highcontrast-lite.css +6 -72
  73. package/styles/highcontrast-lite.scss +1 -16
  74. package/styles/highcontrast.css +6 -72
  75. package/styles/highcontrast.scss +2 -17
  76. package/styles/material-dark-lite.css +7 -211
  77. package/styles/material-dark-lite.scss +1 -16
  78. package/styles/material-dark.css +7 -211
  79. package/styles/material-dark.scss +2 -17
  80. package/styles/material-lite.css +6 -215
  81. package/styles/material-lite.scss +1 -15
  82. package/styles/material.css +6 -215
  83. package/styles/material.scss +2 -16
  84. package/styles/material3-dark-lite.css +7 -358
  85. package/styles/material3-dark-lite.scss +1 -16
  86. package/styles/material3-dark.css +7 -440
  87. package/styles/material3-dark.scss +2 -17
  88. package/styles/material3-lite.css +7 -362
  89. package/styles/material3-lite.scss +1 -16
  90. package/styles/material3.css +7 -446
  91. package/styles/material3.scss +2 -17
  92. package/styles/ribbon/_all.scss +2 -2
  93. package/styles/ribbon/_bds-definition.scss +2 -2
  94. package/styles/ribbon/_bigger.scss +8 -1
  95. package/styles/ribbon/_bootstrap-dark-definition.scss +1 -2
  96. package/styles/ribbon/_bootstrap-definition.scss +2 -2
  97. package/styles/ribbon/_bootstrap4-definition.scss +1 -2
  98. package/styles/ribbon/_bootstrap5-dark-definition.scss +2 -2
  99. package/styles/ribbon/_bootstrap5-definition.scss +2 -2
  100. package/styles/ribbon/_bootstrap5.3-definition.scss +3 -3
  101. package/styles/ribbon/_fabric-dark-definition.scss +2 -2
  102. package/styles/ribbon/_fabric-definition.scss +2 -2
  103. package/styles/ribbon/_fluent-dark-definition.scss +2 -2
  104. package/styles/ribbon/_fluent-definition.scss +2 -2
  105. package/styles/ribbon/_fluent2-definition.scss +2 -2
  106. package/styles/ribbon/_highcontrast-definition.scss +2 -2
  107. package/styles/ribbon/_highcontrast-light-definition.scss +2 -2
  108. package/styles/ribbon/_layout.scss +1 -1
  109. package/styles/ribbon/_material-dark-definition.scss +2 -2
  110. package/styles/ribbon/_material-definition.scss +2 -2
  111. package/styles/ribbon/_material3-dark-definition.scss +2 -2
  112. package/styles/ribbon/_material3-definition.scss +2 -2
  113. package/styles/ribbon/_tailwind-dark-definition.scss +2 -2
  114. package/styles/ribbon/_tailwind-definition.scss +2 -2
  115. package/styles/ribbon/_tailwind3-definition.scss +2 -2
  116. package/styles/ribbon/_theme.scss +1 -1
  117. package/styles/ribbon/_variables.scss +2 -0
  118. package/styles/ribbon/bds.css +20 -316
  119. package/styles/ribbon/bds.scss +2 -17
  120. package/styles/ribbon/bootstrap-dark.css +6 -74
  121. package/styles/ribbon/bootstrap-dark.scss +2 -17
  122. package/styles/ribbon/bootstrap.css +6 -76
  123. package/styles/ribbon/bootstrap.scss +2 -17
  124. package/styles/ribbon/bootstrap4.css +7 -127
  125. package/styles/ribbon/bootstrap4.scss +2 -17
  126. package/styles/ribbon/bootstrap5-dark.css +11 -149
  127. package/styles/ribbon/bootstrap5-dark.scss +2 -17
  128. package/styles/ribbon/bootstrap5.3.css +13 -403
  129. package/styles/ribbon/bootstrap5.3.scss +2 -17
  130. package/styles/ribbon/bootstrap5.css +12 -150
  131. package/styles/ribbon/bootstrap5.scss +2 -17
  132. package/styles/ribbon/fabric-dark.css +6 -50
  133. package/styles/ribbon/fabric-dark.scss +2 -17
  134. package/styles/ribbon/fabric.css +6 -51
  135. package/styles/ribbon/fabric.scss +2 -17
  136. package/styles/ribbon/fluent-dark.css +6 -141
  137. package/styles/ribbon/fluent-dark.scss +2 -17
  138. package/styles/ribbon/fluent.css +6 -141
  139. package/styles/ribbon/fluent.scss +2 -17
  140. package/styles/ribbon/fluent2.css +7 -476
  141. package/styles/ribbon/fluent2.scss +2 -17
  142. package/styles/ribbon/highcontrast-light.css +6 -71
  143. package/styles/ribbon/highcontrast-light.scss +2 -17
  144. package/styles/ribbon/highcontrast.css +6 -72
  145. package/styles/ribbon/highcontrast.scss +2 -17
  146. package/styles/ribbon/icons/_bds.scss +1 -1
  147. package/styles/ribbon/icons/_bootstrap-dark.scss +1 -1
  148. package/styles/ribbon/icons/_bootstrap.scss +1 -1
  149. package/styles/ribbon/icons/_bootstrap4.scss +1 -1
  150. package/styles/ribbon/icons/_bootstrap5.3.scss +1 -1
  151. package/styles/ribbon/icons/_bootstrap5.scss +1 -1
  152. package/styles/ribbon/icons/_fabric-dark.scss +1 -1
  153. package/styles/ribbon/icons/_fabric.scss +1 -1
  154. package/styles/ribbon/icons/_fluent.scss +1 -1
  155. package/styles/ribbon/icons/_fluent2.scss +1 -1
  156. package/styles/ribbon/icons/_fusionnew.scss +1 -1
  157. package/styles/ribbon/icons/_highcontrast.scss +1 -1
  158. package/styles/ribbon/icons/_material-dark.scss +1 -1
  159. package/styles/ribbon/icons/_material.scss +1 -1
  160. package/styles/ribbon/icons/_material3.scss +1 -1
  161. package/styles/ribbon/icons/_tailwind-dark.scss +1 -1
  162. package/styles/ribbon/icons/_tailwind.scss +1 -1
  163. package/styles/ribbon/icons/_tailwind3.scss +1 -1
  164. package/styles/ribbon/material-dark.css +7 -211
  165. package/styles/ribbon/material-dark.scss +2 -17
  166. package/styles/ribbon/material.css +6 -215
  167. package/styles/ribbon/material.scss +2 -17
  168. package/styles/ribbon/material3-dark.css +7 -440
  169. package/styles/ribbon/material3-dark.scss +2 -17
  170. package/styles/ribbon/material3.css +7 -446
  171. package/styles/ribbon/material3.scss +2 -17
  172. package/styles/ribbon/tailwind-dark.css +19 -176
  173. package/styles/ribbon/tailwind-dark.scss +2 -17
  174. package/styles/ribbon/tailwind.css +20 -177
  175. package/styles/ribbon/tailwind.scss +2 -17
  176. package/styles/ribbon/tailwind3.css +15 -376
  177. package/styles/ribbon/tailwind3.scss +2 -17
  178. package/styles/tailwind-dark-lite.css +14 -176
  179. package/styles/tailwind-dark-lite.scss +1 -16
  180. package/styles/tailwind-dark.css +19 -176
  181. package/styles/tailwind-dark.scss +2 -17
  182. package/styles/tailwind-lite.css +15 -177
  183. package/styles/tailwind-lite.scss +1 -16
  184. package/styles/tailwind.css +20 -177
  185. package/styles/tailwind.scss +2 -17
  186. package/styles/tailwind3-lite.css +15 -302
  187. package/styles/tailwind3-lite.scss +1 -16
  188. package/styles/tailwind3.css +15 -376
  189. package/styles/tailwind3.scss +2 -17
  190. package/styles/ribbon/_all.bds.scss +0 -2
  191. package/styles/ribbon/_all.bootstrap-dark.scss +0 -2
  192. package/styles/ribbon/_all.bootstrap.scss +0 -2
  193. package/styles/ribbon/_all.bootstrap4.scss +0 -2
  194. package/styles/ribbon/_all.bootstrap5-dark.scss +0 -2
  195. package/styles/ribbon/_all.bootstrap5.3.scss +0 -2
  196. package/styles/ribbon/_all.bootstrap5.scss +0 -2
  197. package/styles/ribbon/_all.fabric-dark.scss +0 -2
  198. package/styles/ribbon/_all.fabric.scss +0 -2
  199. package/styles/ribbon/_all.fluent-dark.scss +0 -2
  200. package/styles/ribbon/_all.fluent.scss +0 -2
  201. package/styles/ribbon/_all.fluent2.scss +0 -2
  202. package/styles/ribbon/_all.highcontrast-light.scss +0 -2
  203. package/styles/ribbon/_all.highcontrast.scss +0 -2
  204. package/styles/ribbon/_all.material-dark.scss +0 -2
  205. package/styles/ribbon/_all.material.scss +0 -2
  206. package/styles/ribbon/_all.material3-dark.scss +0 -2
  207. package/styles/ribbon/_all.material3.scss +0 -2
  208. package/styles/ribbon/_all.tailwind-dark.scss +0 -2
  209. package/styles/ribbon/_all.tailwind.scss +0 -2
  210. package/styles/ribbon/_all.tailwind3.scss +0 -2
  211. package/styles/ribbon/_bigger.bds.scss +0 -3
  212. package/styles/ribbon/_bigger.bootstrap-dark.scss +0 -3
  213. package/styles/ribbon/_bigger.bootstrap.scss +0 -3
  214. package/styles/ribbon/_bigger.bootstrap4.scss +0 -3
  215. package/styles/ribbon/_bigger.bootstrap5-dark.scss +0 -3
  216. package/styles/ribbon/_bigger.bootstrap5.3.scss +0 -3
  217. package/styles/ribbon/_bigger.bootstrap5.scss +0 -3
  218. package/styles/ribbon/_bigger.fabric-dark.scss +0 -3
  219. package/styles/ribbon/_bigger.fabric.scss +0 -3
  220. package/styles/ribbon/_bigger.fluent-dark.scss +0 -3
  221. package/styles/ribbon/_bigger.fluent.scss +0 -3
  222. package/styles/ribbon/_bigger.fluent2.scss +0 -3
  223. package/styles/ribbon/_bigger.highcontrast-light.scss +0 -3
  224. package/styles/ribbon/_bigger.highcontrast.scss +0 -3
  225. package/styles/ribbon/_bigger.material-dark.scss +0 -3
  226. package/styles/ribbon/_bigger.material.scss +0 -3
  227. package/styles/ribbon/_bigger.material3-dark.scss +0 -3
  228. package/styles/ribbon/_bigger.material3.scss +0 -3
  229. package/styles/ribbon/_bigger.tailwind-dark.scss +0 -3
  230. package/styles/ribbon/_bigger.tailwind.scss +0 -3
  231. package/styles/ribbon/_bigger.tailwind3.scss +0 -3
  232. package/styles/ribbon/_layout.bds.scss +0 -3
  233. package/styles/ribbon/_layout.bootstrap-dark.scss +0 -3
  234. package/styles/ribbon/_layout.bootstrap.scss +0 -3
  235. package/styles/ribbon/_layout.bootstrap4.scss +0 -3
  236. package/styles/ribbon/_layout.bootstrap5-dark.scss +0 -3
  237. package/styles/ribbon/_layout.bootstrap5.3.scss +0 -3
  238. package/styles/ribbon/_layout.bootstrap5.scss +0 -3
  239. package/styles/ribbon/_layout.fabric-dark.scss +0 -3
  240. package/styles/ribbon/_layout.fabric.scss +0 -3
  241. package/styles/ribbon/_layout.fluent-dark.scss +0 -3
  242. package/styles/ribbon/_layout.fluent.scss +0 -3
  243. package/styles/ribbon/_layout.fluent2.scss +0 -3
  244. package/styles/ribbon/_layout.highcontrast-light.scss +0 -3
  245. package/styles/ribbon/_layout.highcontrast.scss +0 -3
  246. package/styles/ribbon/_layout.material-dark.scss +0 -3
  247. package/styles/ribbon/_layout.material.scss +0 -3
  248. package/styles/ribbon/_layout.material3-dark.scss +0 -3
  249. package/styles/ribbon/_layout.material3.scss +0 -3
  250. package/styles/ribbon/_layout.tailwind-dark.scss +0 -3
  251. package/styles/ribbon/_layout.tailwind.scss +0 -3
  252. package/styles/ribbon/_layout.tailwind3.scss +0 -3
  253. package/styles/ribbon/_theme-variables.bds.scss +0 -1
  254. package/styles/ribbon/_theme-variables.bootstrap-dark.scss +0 -1
  255. package/styles/ribbon/_theme-variables.bootstrap.scss +0 -1
  256. package/styles/ribbon/_theme-variables.bootstrap4.scss +0 -1
  257. package/styles/ribbon/_theme-variables.bootstrap5-dark.scss +0 -1
  258. package/styles/ribbon/_theme-variables.bootstrap5.3.scss +0 -1
  259. package/styles/ribbon/_theme-variables.bootstrap5.scss +0 -1
  260. package/styles/ribbon/_theme-variables.fabric-dark.scss +0 -1
  261. package/styles/ribbon/_theme-variables.fabric.scss +0 -1
  262. package/styles/ribbon/_theme-variables.fluent-dark.scss +0 -1
  263. package/styles/ribbon/_theme-variables.fluent.scss +0 -1
  264. package/styles/ribbon/_theme-variables.fluent2.scss +0 -1
  265. package/styles/ribbon/_theme-variables.highcontrast-light.scss +0 -1
  266. package/styles/ribbon/_theme-variables.highcontrast.scss +0 -1
  267. package/styles/ribbon/_theme-variables.material-dark.scss +0 -1
  268. package/styles/ribbon/_theme-variables.material.scss +0 -1
  269. package/styles/ribbon/_theme-variables.material3-dark.scss +0 -1
  270. package/styles/ribbon/_theme-variables.material3.scss +0 -1
  271. package/styles/ribbon/_theme-variables.tailwind-dark.scss +0 -1
  272. package/styles/ribbon/_theme-variables.tailwind.scss +0 -1
  273. package/styles/ribbon/_theme-variables.tailwind3.scss +0 -1
  274. package/styles/ribbon/_theme.bds.scss +0 -4
  275. package/styles/ribbon/_theme.bootstrap-dark.scss +0 -4
  276. package/styles/ribbon/_theme.bootstrap.scss +0 -4
  277. package/styles/ribbon/_theme.bootstrap4.scss +0 -4
  278. package/styles/ribbon/_theme.bootstrap5-dark.scss +0 -4
  279. package/styles/ribbon/_theme.bootstrap5.3.scss +0 -4
  280. package/styles/ribbon/_theme.bootstrap5.scss +0 -4
  281. package/styles/ribbon/_theme.fabric-dark.scss +0 -4
  282. package/styles/ribbon/_theme.fabric.scss +0 -4
  283. package/styles/ribbon/_theme.fluent-dark.scss +0 -4
  284. package/styles/ribbon/_theme.fluent.scss +0 -4
  285. package/styles/ribbon/_theme.fluent2.scss +0 -4
  286. package/styles/ribbon/_theme.highcontrast-light.scss +0 -4
  287. package/styles/ribbon/_theme.highcontrast.scss +0 -4
  288. package/styles/ribbon/_theme.material-dark.scss +0 -4
  289. package/styles/ribbon/_theme.material.scss +0 -4
  290. package/styles/ribbon/_theme.material3-dark.scss +0 -4
  291. package/styles/ribbon/_theme.material3.scss +0 -4
  292. package/styles/ribbon/_theme.tailwind-dark.scss +0 -4
  293. package/styles/ribbon/_theme.tailwind.scss +0 -4
  294. package/styles/ribbon/_theme.tailwind3.scss +0 -4
package/styles/material-dark.css CHANGED
@@ -1,207 +1,3 @@
1
- .e-dropdownbase .e-list-item .e-list-icon {
2
- -webkit-padding-end: 16px;
3
- padding-inline-end: 16px;
4
- }
5
-
6
- .e-small .e-dropdownbase .e-list-item .e-list-icon {
7
- -webkit-padding-end: 12px;
8
- padding-inline-end: 12px;
9
- }
10
-
11
- .e-ddl.e-control-wrapper .e-ddl-icon::before {
12
- -webkit-transform: rotate(0deg);
13
- transform: rotate(0deg);
14
- -webkit-transition: -webkit-transform 300ms ease;
15
- transition: -webkit-transform 300ms ease;
16
- transition: transform 300ms ease;
17
- transition: transform 300ms ease, -webkit-transform 300ms ease;
18
- }
19
-
20
- .e-popup.e-ddl .e-dropdownbase {
21
- min-height: 26px;
22
- }
23
-
24
- .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
25
- -webkit-transform: rotate(180deg);
26
- transform: rotate(180deg);
27
- -webkit-transition: -webkit-transform 300ms ease;
28
- transition: -webkit-transform 300ms ease;
29
- transition: transform 300ms ease;
30
- transition: transform 300ms ease, -webkit-transform 300ms ease;
31
- }
32
-
33
- .e-dropdownbase .e-list-item.e-active.e-hover {
34
- color: #00b0ff;
35
- }
36
-
37
- .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
38
- .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
39
- .e-input-group:not(.e-disabled) .e-back-icon:active,
40
- .e-input-group:not(.e-disabled) .e-back-icon:hover,
41
- .e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
42
- .e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
43
- background: transparent;
44
- }
45
-
46
- .e-input-group .e-ddl-icon:not(:active)::after {
47
- -webkit-animation: none;
48
- animation: none;
49
- }
50
-
51
- .e-ddl.e-popup {
52
- border: 0;
53
- -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
54
- box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
55
- margin-top: 2px;
56
- }
57
-
58
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
59
- margin: 6px 6px 5px;
60
- min-height: 12px;
61
- min-width: 12px;
62
- padding: 6px;
63
- }
64
-
65
- .e-input-group.e-ddl,
66
- .e-input-group.e-ddl .e-input,
67
- .e-input-group.e-ddl .e-ddl-icon {
68
- background: transparent;
69
- }
70
-
71
- .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
72
- .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
73
- border-bottom-width: 0;
74
- }
75
-
76
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
77
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
78
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
79
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
80
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
81
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
82
- margin: 0;
83
- }
84
-
85
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
86
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
87
- .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
88
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
89
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
90
- .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
91
- padding: 5px 5px 5px 12px;
92
- }
93
-
94
- @-webkit-keyframes hscroll-popup-shadow {
95
- 0% {
96
- border-color: rgba(255, 255, 255, 0.5);
97
- -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
98
- box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
99
- }
100
- 100% {
101
- -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
102
- box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
103
- }
104
- }
105
-
106
- @keyframes hscroll-popup-shadow {
107
- 0% {
108
- border-color: rgba(255, 255, 255, 0.5);
109
- -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
110
- box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
111
- }
112
- 100% {
113
- -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
114
- box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
115
- }
116
- }
117
- @-webkit-keyframes vscroll-popup-shadow {
118
- 0% {
119
- border-color: rgba(255, 255, 255, 0.5);
120
- -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
121
- box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
122
- }
123
- 100% {
124
- -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
125
- box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
126
- }
127
- }
128
- @keyframes vscroll-popup-shadow {
129
- 0% {
130
- border-color: rgba(255, 255, 255, 0.5);
131
- -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
132
- box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
133
- }
134
- 100% {
135
- -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
136
- box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
137
- }
138
- }
139
- @-webkit-keyframes tbar-popup-shadow {
140
- 0% {
141
- border-color: rgba(255, 255, 255, 0.5);
142
- -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
143
- box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
144
- }
145
- 100% {
146
- -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
147
- box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
148
- }
149
- }
150
- @keyframes tbar-popup-shadow {
151
- 0% {
152
- border-color: rgba(255, 255, 255, 0.5);
153
- -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
154
- box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
155
- }
156
- 100% {
157
- -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
158
- box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
159
- }
160
- }
161
- @-webkit-keyframes tbar-alt-popup-shadow {
162
- 0% {
163
- border-color: rgba(0, 0, 0, 0.12);
164
- -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
165
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
166
- }
167
- 100% {
168
- -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
169
- box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
170
- }
171
- }
172
- @keyframes tbar-alt-popup-shadow {
173
- 0% {
174
- border-color: rgba(0, 0, 0, 0.12);
175
- -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
176
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
177
- }
178
- 100% {
179
- -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
180
- box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
181
- }
182
- }
183
- @-webkit-keyframes hscroll-alt-popup-shadow {
184
- 0% {
185
- border-color: rgba(0, 0, 0, 0.12);
186
- -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
187
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
188
- }
189
- 100% {
190
- -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
191
- box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
192
- }
193
- }
194
- @keyframes hscroll-alt-popup-shadow {
195
- 0% {
196
- border-color: rgba(0, 0, 0, 0.12);
197
- -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
198
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
199
- }
200
- 100% {
201
- -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
202
- box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
203
- }
204
- }
205
1
  .e-ribbon .e-drop-icon::before {
206
2
  content: "\e94d";
207
3
  }
@@ -2307,32 +2103,32 @@
2307
2103
  color: #fff;
2308
2104
  background: #424242;
2309
2105
  }
2106
+ .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:hover .e-btn-icon, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:focus .e-btn-icon {
2107
+ color: rgba(255, 255, 255, 0.64);
2108
+ }
2310
2109
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:hover, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:focus {
2311
2110
  background: rgba(255, 255, 255, 0.12);
2312
2111
  }
2313
- .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:hover .e-btn-icon, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:focus .e-btn-icon {
2112
+ .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button:hover .e-btn-icon, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button:focus .e-btn-icon {
2314
2113
  color: rgba(255, 255, 255, 0.64);
2315
2114
  }
2316
2115
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button:hover, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button:focus {
2317
2116
  background: rgba(255, 255, 255, 0.12);
2318
2117
  color: white;
2319
2118
  }
2320
- .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button:hover .e-btn-icon, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button:focus .e-btn-icon {
2321
- color: rgba(255, 255, 255, 0.64);
2119
+ .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn.e-active .e-btn-icon {
2120
+ color: #fff;
2322
2121
  }
2323
2122
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn.e-active {
2324
2123
  background: rgba(255, 255, 255, 0.16);
2325
2124
  }
2326
- .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn.e-active .e-btn-icon {
2125
+ .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-active .e-btn-icon {
2327
2126
  color: #fff;
2328
2127
  }
2329
2128
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-active {
2330
2129
  background: rgba(255, 255, 255, 0.16);
2331
2130
  color: white;
2332
2131
  }
2333
- .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-active .e-btn-icon {
2334
- color: #fff;
2335
- }
2336
2132
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:active .e-btn-icon, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button:active .e-btn-icon {
2337
2133
  color: #fff;
2338
2134
  }
package/styles/material-dark.scss CHANGED
@@ -1,19 +1,4 @@
1
- @use 'ej2-base/styles/definition/material-dark' as *;
2
- @use 'ej2-popups/styles/tooltip/material-dark-definition' as *;
3
- @use 'ej2-buttons/styles/button/material-dark-definition' as *;
4
- @use 'ej2-buttons/styles/check-box/material-dark-definition' as *;
5
- @use 'ej2-splitbuttons/styles/drop-down-button/material-dark-definition' as *;
6
- @use 'ej2-dropdowns/styles/drop-down-base/material-dark-definition' as *;
7
- @use 'ej2-dropdowns/styles/drop-down-list/material-dark-definition' as *;
8
- @use 'ej2-dropdowns/styles/combo-box/material-dark-definition' as *;
9
- @use 'ej2-navigations/styles/h-scroll/material-dark-definition' as *;
10
- @use 'ej2-navigations/styles/v-scroll/material-dark-definition' as *;
11
- @use 'ej2-navigations/styles/context-menu/material-dark-definition' as *;
12
- @use 'ej2-navigations/styles/toolbar/material-dark-definition' as *;
13
- @use 'ej2-navigations/styles/menu/material-dark-definition' as *;
14
- @use 'ej2-navigations/styles/tab/material-dark-definition' as *;
15
- @use 'ej2-inputs/styles/color-picker/material-dark-definition' as *;
16
1
  @use 'ribbon/material-dark-definition' as *;
17
2
  @use 'ribbon/icons/material-dark' as *;
18
- @use 'ribbon/all.material-dark' as *;
19
- @use 'ribbon/bigger.material-dark' as *;
3
+ @use 'ribbon/all' as *;
4
+ @use 'ribbon/bigger' as *;
package/styles/material-lite.css CHANGED
@@ -1,212 +1,3 @@
1
- .e-dropdownbase .e-list-item .e-list-icon {
2
- -webkit-padding-end: 16px;
3
- padding-inline-end: 16px;
4
- }
5
-
6
- .e-small .e-dropdownbase .e-list-item .e-list-icon {
7
- -webkit-padding-end: 12px;
8
- padding-inline-end: 12px;
9
- }
10
-
11
- .e-ddl.e-control-wrapper .e-ddl-icon::before {
12
- -webkit-transform: rotate(0deg);
13
- transform: rotate(0deg);
14
- -webkit-transition: -webkit-transform 300ms ease;
15
- transition: -webkit-transform 300ms ease;
16
- transition: transform 300ms ease;
17
- transition: transform 300ms ease, -webkit-transform 300ms ease;
18
- }
19
-
20
- .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
21
- -webkit-transform: rotate(180deg);
22
- transform: rotate(180deg);
23
- -webkit-transition: -webkit-transform 300ms ease;
24
- transition: -webkit-transform 300ms ease;
25
- transition: transform 300ms ease;
26
- transition: transform 300ms ease, -webkit-transform 300ms ease;
27
- }
28
-
29
- .e-dropdownbase .e-list-item.e-active.e-hover {
30
- color: #e3165b;
31
- }
32
-
33
- .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
34
- .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
35
- .e-input-group:not(.e-disabled) .e-back-icon:active,
36
- .e-input-group:not(.e-disabled) .e-back-icon:hover,
37
- .e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
38
- .e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
39
- background: transparent;
40
- }
41
-
42
- .e-input-group .e-ddl-icon:not(:active)::after {
43
- -webkit-animation: none;
44
- animation: none;
45
- }
46
-
47
- .e-ddl.e-popup {
48
- border: 0;
49
- -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
50
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
51
- margin-top: 2px;
52
- }
53
-
54
- .e-popup.e-ddl .e-dropdownbase {
55
- min-height: 26px;
56
- }
57
-
58
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
59
- margin: 6px 6px 5px;
60
- min-height: 12px;
61
- min-width: 12px;
62
- padding: 6px;
63
- }
64
-
65
- .e-input-group.e-ddl,
66
- .e-input-group.e-ddl .e-input,
67
- .e-input-group.e-ddl .e-ddl-icon {
68
- background: transparent;
69
- }
70
-
71
- .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
72
- .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
73
- border-bottom-width: 0;
74
- }
75
-
76
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
77
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
78
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
79
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
80
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
81
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
82
- margin: 0;
83
- }
84
-
85
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
86
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
87
- .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
88
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
89
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
90
- .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
91
- padding: 5px 5px 5px 12px;
92
- }
93
-
94
- .e-ddl.e-popup.e-outline .e-filter-parent {
95
- padding: 4px 8px;
96
- }
97
-
98
- /*! component's theme wise override definitions and variables */
99
- @-webkit-keyframes hscroll-popup-shadow {
100
- 0% {
101
- border-color: rgba(255, 255, 255, 0.5);
102
- -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
103
- box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
104
- }
105
- 100% {
106
- -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
107
- box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
108
- }
109
- }
110
- @keyframes hscroll-popup-shadow {
111
- 0% {
112
- border-color: rgba(255, 255, 255, 0.5);
113
- -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
114
- box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
115
- }
116
- 100% {
117
- -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
118
- box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
119
- }
120
- }
121
- /*! component's theme wise override definitions and variables */
122
- @-webkit-keyframes vscroll-popup-shadow {
123
- 0% {
124
- border-color: rgba(255, 255, 255, 0.5);
125
- -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
126
- box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
127
- }
128
- 100% {
129
- -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
130
- box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
131
- }
132
- }
133
- @keyframes vscroll-popup-shadow {
134
- 0% {
135
- border-color: rgba(255, 255, 255, 0.5);
136
- -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
137
- box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
138
- }
139
- 100% {
140
- -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
141
- box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
142
- }
143
- }
144
- @-webkit-keyframes tbar-popup-shadow {
145
- 0% {
146
- border-color: rgba(255, 255, 255, 0.5);
147
- -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
148
- box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
149
- }
150
- 100% {
151
- -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
152
- box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
153
- }
154
- }
155
- @keyframes tbar-popup-shadow {
156
- 0% {
157
- border-color: rgba(255, 255, 255, 0.5);
158
- -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
159
- box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
160
- }
161
- 100% {
162
- -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
163
- box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
164
- }
165
- }
166
- @-webkit-keyframes tbar-alt-popup-shadow {
167
- 0% {
168
- border-color: rgba(0, 0, 0, 0.12);
169
- -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
170
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
171
- }
172
- 100% {
173
- -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
174
- box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
175
- }
176
- }
177
- @keyframes tbar-alt-popup-shadow {
178
- 0% {
179
- border-color: rgba(0, 0, 0, 0.12);
180
- -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
181
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
182
- }
183
- 100% {
184
- -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
185
- box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
186
- }
187
- }
188
- @-webkit-keyframes hscroll-alt-popup-shadow {
189
- 0% {
190
- border-color: rgba(0, 0, 0, 0.12);
191
- -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
192
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
193
- }
194
- 100% {
195
- -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
196
- box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
197
- }
198
- }
199
- @keyframes hscroll-alt-popup-shadow {
200
- 0% {
201
- border-color: rgba(0, 0, 0, 0.12);
202
- -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
203
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
204
- }
205
- 100% {
206
- -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
207
- box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
208
- }
209
- }
210
1
  .e-ribbon .e-drop-icon::before {
211
2
  content: "\e94d";
212
3
  }
@@ -2313,32 +2104,32 @@
2313
2104
  color: rgba(0, 0, 0, 0.87);
2314
2105
  background: #fff;
2315
2106
  }
2107
+ .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:hover .e-btn-icon, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:focus .e-btn-icon {
2108
+ color: rgba(0, 0, 0, 0.54);
2109
+ }
2316
2110
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:hover, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:focus {
2317
2111
  background: rgba(0, 0, 0, 0.12);
2318
2112
  }
2319
- .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:hover .e-btn-icon, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:focus .e-btn-icon {
2113
+ .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button:hover .e-btn-icon, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button:focus .e-btn-icon {
2320
2114
  color: rgba(0, 0, 0, 0.54);
2321
2115
  }
2322
2116
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button:hover, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button:focus {
2323
2117
  background: rgba(0, 0, 0, 0.12);
2324
2118
  color: rgba(0, 0, 0, 0.84);
2325
2119
  }
2326
- .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button:hover .e-btn-icon, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button:focus .e-btn-icon {
2120
+ .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn.e-active .e-btn-icon {
2327
2121
  color: rgba(0, 0, 0, 0.54);
2328
2122
  }
2329
2123
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn.e-active {
2330
2124
  background: rgba(0, 0, 0, 0.16);
2331
2125
  }
2332
- .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn.e-active .e-btn-icon {
2126
+ .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-active .e-btn-icon {
2333
2127
  color: rgba(0, 0, 0, 0.54);
2334
2128
  }
2335
2129
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-active {
2336
2130
  background: rgba(0, 0, 0, 0.16);
2337
2131
  color: rgba(0, 0, 0, 0.84);
2338
2132
  }
2339
- .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-active .e-btn-icon {
2340
- color: rgba(0, 0, 0, 0.54);
2341
- }
2342
2133
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:active .e-btn-icon, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button:active .e-btn-icon {
2343
2134
  color: rgba(0, 0, 0, 0.54);
2344
2135
  }
package/styles/material-lite.scss CHANGED
@@ -1,17 +1,3 @@
1
- @use 'ej2-popups/styles/tooltip/material-definition' as *;
2
- @use 'ej2-buttons/styles/button/material-definition' as *;
3
- @use 'ej2-buttons/styles/check-box/material-definition' as *;
4
- @use 'ej2-splitbuttons/styles/drop-down-button/material-definition' as *;
5
- @use 'ej2-dropdowns/styles/drop-down-base/material-definition' as *;
6
- @use 'ej2-dropdowns/styles/drop-down-list/material-definition' as *;
7
- @use 'ej2-dropdowns/styles/combo-box/material-definition' as *;
8
- @use 'ej2-navigations/styles/h-scroll/material-definition' as *;
9
- @use 'ej2-navigations/styles/v-scroll/material-definition' as *;
10
- @use 'ej2-navigations/styles/context-menu/material-definition' as *;
11
- @use 'ej2-navigations/styles/toolbar/material-definition' as *;
12
- @use 'ej2-navigations/styles/menu/material-definition' as *;
13
- @use 'ej2-navigations/styles/tab/material-definition' as *;
14
- @use 'ej2-inputs/styles/color-picker/material-definition' as *;
15
1
  @use 'ribbon/material-definition' as *;
16
2
  @use 'ribbon/icons/material' as *;
17
- @use 'ribbon/all.material' as *;
3
+ @use 'ribbon/all' as *;