@syncfusion/ej2-navigations 21.2.9 → 22.1.34

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 (343) hide show
  1. package/.eslintrc.json +1 -0
  2. package/CHANGELOG.md +9 -0
  3. package/dist/ej2-navigations.min.js +2 -2
  4. package/dist/ej2-navigations.umd.min.js +2 -2
  5. package/dist/ej2-navigations.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-navigations.es2015.js +288 -93
  7. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  8. package/dist/es6/ej2-navigations.es5.js +292 -94
  9. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  10. package/dist/global/ej2-navigations.min.js +2 -2
  11. package/dist/global/ej2-navigations.min.js.map +1 -1
  12. package/dist/global/index.d.ts +1 -1
  13. package/package.json +11 -11
  14. package/src/accordion/accordion-model.d.ts +4 -2
  15. package/src/accordion/accordion.d.ts +4 -2
  16. package/src/accordion/accordion.js +1 -1
  17. package/src/breadcrumb/breadcrumb-model.d.ts +4 -2
  18. package/src/breadcrumb/breadcrumb.d.ts +4 -2
  19. package/src/carousel/carousel-model.d.ts +37 -8
  20. package/src/carousel/carousel.d.ts +69 -6
  21. package/src/carousel/carousel.js +287 -89
  22. package/src/common/menu-base-model.d.ts +2 -1
  23. package/src/common/menu-base.d.ts +2 -1
  24. package/src/common/menu-base.js +2 -2
  25. package/src/menu/menu-model.d.ts +3 -2
  26. package/src/menu/menu.d.ts +2 -1
  27. package/src/menu/menu.js +1 -1
  28. package/src/sidebar/sidebar.d.ts +12 -26
  29. package/src/tab/tab-model.d.ts +3 -2
  30. package/src/tab/tab.d.ts +3 -2
  31. package/src/toolbar/toolbar-model.d.ts +3 -1
  32. package/src/toolbar/toolbar.d.ts +3 -1
  33. package/src/treeview/treeview-model.d.ts +4 -1
  34. package/src/treeview/treeview.d.ts +17 -31
  35. package/src/treeview/treeview.js +1 -1
  36. package/styles/accordion/_bootstrap-dark-definition.scss +3 -1
  37. package/styles/accordion/_bootstrap-definition.scss +3 -1
  38. package/styles/accordion/_bootstrap4-definition.scss +2 -0
  39. package/styles/accordion/_bootstrap5-definition.scss +3 -1
  40. package/styles/accordion/_fabric-dark-definition.scss +2 -0
  41. package/styles/accordion/_fabric-definition.scss +2 -0
  42. package/styles/accordion/_fluent-definition.scss +2 -0
  43. package/styles/accordion/_fusionnew-definition.scss +2 -0
  44. package/styles/accordion/_highcontrast-definition.scss +2 -0
  45. package/styles/accordion/_highcontrast-light-definition.scss +2 -0
  46. package/styles/accordion/_layout.scss +9 -0
  47. package/styles/accordion/_material-dark-definition.scss +2 -0
  48. package/styles/accordion/_material-definition.scss +2 -0
  49. package/styles/accordion/_material3-dark-definition.scss +1 -0
  50. package/styles/accordion/_material3-definition.scss +182 -0
  51. package/styles/accordion/_tailwind-definition.scss +2 -0
  52. package/styles/accordion/_theme.scss +9 -0
  53. package/styles/accordion/bootstrap-dark.css +11 -1
  54. package/styles/accordion/bootstrap.css +11 -1
  55. package/styles/accordion/bootstrap4.css +10 -0
  56. package/styles/accordion/bootstrap5-dark.css +11 -1
  57. package/styles/accordion/bootstrap5.css +11 -1
  58. package/styles/accordion/fabric-dark.css +10 -0
  59. package/styles/accordion/fabric.css +10 -0
  60. package/styles/accordion/fluent-dark.css +10 -0
  61. package/styles/accordion/fluent.css +10 -0
  62. package/styles/accordion/highcontrast-light.css +10 -0
  63. package/styles/accordion/highcontrast.css +10 -0
  64. package/styles/accordion/icons/_material3-dark.scss +1 -0
  65. package/styles/accordion/material-dark.css +10 -0
  66. package/styles/accordion/material.css +10 -0
  67. package/styles/accordion/material3-dark.css +596 -0
  68. package/styles/accordion/material3-dark.scss +5 -0
  69. package/styles/accordion/material3.css +652 -0
  70. package/styles/accordion/material3.scss +5 -0
  71. package/styles/accordion/tailwind-dark.css +10 -0
  72. package/styles/accordion/tailwind.css +10 -0
  73. package/styles/appbar/_layout.scss +6 -1
  74. package/styles/appbar/_material3-dark-definition.scss +1 -0
  75. package/styles/appbar/_material3-definition.scss +8 -0
  76. package/styles/appbar/_theme.scss +12 -2
  77. package/styles/appbar/bootstrap-dark.css +7 -3
  78. package/styles/appbar/bootstrap.css +7 -3
  79. package/styles/appbar/bootstrap4.css +7 -3
  80. package/styles/appbar/bootstrap5-dark.css +7 -3
  81. package/styles/appbar/bootstrap5.css +7 -3
  82. package/styles/appbar/fabric-dark.css +7 -3
  83. package/styles/appbar/fabric.css +7 -3
  84. package/styles/appbar/fluent-dark.css +7 -3
  85. package/styles/appbar/fluent.css +7 -3
  86. package/styles/appbar/highcontrast-light.css +7 -3
  87. package/styles/appbar/highcontrast.css +7 -3
  88. package/styles/appbar/material-dark.css +7 -3
  89. package/styles/appbar/material.css +7 -3
  90. package/styles/appbar/material3-dark.css +307 -0
  91. package/styles/appbar/material3-dark.scss +4 -0
  92. package/styles/appbar/material3.css +363 -0
  93. package/styles/appbar/material3.scss +4 -0
  94. package/styles/appbar/tailwind-dark.css +7 -3
  95. package/styles/appbar/tailwind.css +7 -3
  96. package/styles/bootstrap-dark.css +185 -126
  97. package/styles/bootstrap.css +185 -126
  98. package/styles/bootstrap4.css +183 -124
  99. package/styles/bootstrap5-dark.css +179 -120
  100. package/styles/bootstrap5.css +179 -120
  101. package/styles/breadcrumb/_material3-dark-definition.scss +1 -0
  102. package/styles/breadcrumb/_material3-definition.scss +60 -0
  103. package/styles/breadcrumb/_theme.scss +13 -11
  104. package/styles/breadcrumb/bootstrap-dark.css +9 -9
  105. package/styles/breadcrumb/bootstrap.css +9 -9
  106. package/styles/breadcrumb/bootstrap4.css +9 -9
  107. package/styles/breadcrumb/bootstrap5-dark.css +8 -8
  108. package/styles/breadcrumb/bootstrap5.css +8 -8
  109. package/styles/breadcrumb/fabric-dark.css +7 -7
  110. package/styles/breadcrumb/fabric.css +7 -7
  111. package/styles/breadcrumb/fluent-dark.css +5 -5
  112. package/styles/breadcrumb/fluent.css +5 -5
  113. package/styles/breadcrumb/highcontrast-light.css +7 -7
  114. package/styles/breadcrumb/highcontrast.css +7 -7
  115. package/styles/breadcrumb/icons/_material3-dark.scss +1 -0
  116. package/styles/breadcrumb/icons/_material3.scss +0 -11
  117. package/styles/breadcrumb/material-dark.css +9 -9
  118. package/styles/breadcrumb/material.css +9 -9
  119. package/styles/breadcrumb/material3-dark.css +424 -0
  120. package/styles/breadcrumb/material3-dark.scss +5 -0
  121. package/styles/breadcrumb/material3.css +480 -0
  122. package/styles/breadcrumb/material3.scss +5 -0
  123. package/styles/breadcrumb/tailwind-dark.css +8 -8
  124. package/styles/breadcrumb/tailwind.css +8 -8
  125. package/styles/carousel/_bootstrap-dark-definition.scss +5 -0
  126. package/styles/carousel/_bootstrap-definition.scss +5 -0
  127. package/styles/carousel/_bootstrap4-definition.scss +5 -0
  128. package/styles/carousel/_bootstrap5-definition.scss +5 -0
  129. package/styles/carousel/_fabric-dark-definition.scss +5 -0
  130. package/styles/carousel/_fabric-definition.scss +5 -0
  131. package/styles/carousel/_fluent-definition.scss +5 -0
  132. package/styles/carousel/_fusionnew-definition.scss +5 -0
  133. package/styles/carousel/_highcontrast-definition.scss +5 -0
  134. package/styles/carousel/_highcontrast-light-definition.scss +5 -0
  135. package/styles/carousel/_layout.scss +96 -67
  136. package/styles/carousel/_material-dark-definition.scss +5 -0
  137. package/styles/carousel/_material-definition.scss +5 -0
  138. package/styles/carousel/_material3-dark-definition.scss +1 -0
  139. package/styles/carousel/_material3-definition.scss +28 -0
  140. package/styles/carousel/_tailwind-definition.scss +5 -0
  141. package/styles/carousel/_theme.scss +49 -20
  142. package/styles/carousel/bootstrap-dark.css +101 -62
  143. package/styles/carousel/bootstrap.css +101 -62
  144. package/styles/carousel/bootstrap4.css +101 -62
  145. package/styles/carousel/bootstrap5-dark.css +101 -62
  146. package/styles/carousel/bootstrap5.css +101 -62
  147. package/styles/carousel/fabric-dark.css +101 -62
  148. package/styles/carousel/fabric.css +101 -62
  149. package/styles/carousel/fluent-dark.css +101 -62
  150. package/styles/carousel/fluent.css +101 -62
  151. package/styles/carousel/highcontrast-light.css +101 -62
  152. package/styles/carousel/highcontrast.css +101 -62
  153. package/styles/carousel/icons/_material3-dark.scss +1 -0
  154. package/styles/carousel/material-dark.css +101 -62
  155. package/styles/carousel/material.css +101 -62
  156. package/styles/carousel/material3-dark.css +359 -0
  157. package/styles/carousel/material3-dark.scss +6 -0
  158. package/styles/carousel/material3.css +415 -0
  159. package/styles/carousel/material3.scss +6 -0
  160. package/styles/carousel/tailwind-dark.css +101 -62
  161. package/styles/carousel/tailwind.css +101 -62
  162. package/styles/context-menu/_layout.scss +2 -2
  163. package/styles/context-menu/_material3-dark-definition.scss +1 -0
  164. package/styles/context-menu/_material3-definition.scss +52 -0
  165. package/styles/context-menu/_theme.scss +6 -1
  166. package/styles/context-menu/icons/_material3-dark.scss +1 -0
  167. package/styles/context-menu/material3-dark.css +435 -0
  168. package/styles/context-menu/material3-dark.scss +8 -0
  169. package/styles/context-menu/material3.css +491 -0
  170. package/styles/context-menu/material3.scss +8 -0
  171. package/styles/fabric-dark.css +186 -127
  172. package/styles/fabric.css +185 -126
  173. package/styles/fluent-dark.css +179 -120
  174. package/styles/fluent.css +179 -120
  175. package/styles/h-scroll/_material3-dark-definition.scss +1 -0
  176. package/styles/h-scroll/_material3-definition.scss +83 -0
  177. package/styles/h-scroll/icons/_material3-dark.scss +1 -0
  178. package/styles/h-scroll/material3-dark.css +336 -0
  179. package/styles/h-scroll/material3-dark.scss +5 -0
  180. package/styles/h-scroll/material3.css +392 -0
  181. package/styles/h-scroll/material3.scss +5 -0
  182. package/styles/highcontrast-light.css +178 -119
  183. package/styles/highcontrast.css +182 -123
  184. package/styles/material-dark.css +189 -130
  185. package/styles/material.css +188 -129
  186. package/styles/material3-dark.css +10343 -0
  187. package/styles/material3-dark.scss +15 -0
  188. package/styles/material3.css +10399 -0
  189. package/styles/material3.scss +15 -0
  190. package/styles/menu/_layout.scss +7 -0
  191. package/styles/menu/_material3-dark-definition.scss +1 -0
  192. package/styles/menu/_material3-definition.scss +67 -0
  193. package/styles/menu/_theme.scss +5 -2
  194. package/styles/menu/bootstrap-dark.css +4 -0
  195. package/styles/menu/bootstrap.css +4 -0
  196. package/styles/menu/bootstrap4.css +4 -0
  197. package/styles/menu/bootstrap5-dark.css +4 -0
  198. package/styles/menu/bootstrap5.css +4 -0
  199. package/styles/menu/fabric-dark.css +4 -0
  200. package/styles/menu/fabric.css +4 -0
  201. package/styles/menu/fluent-dark.css +4 -0
  202. package/styles/menu/fluent.css +4 -0
  203. package/styles/menu/highcontrast-light.css +4 -0
  204. package/styles/menu/highcontrast.css +4 -0
  205. package/styles/menu/icons/_material3-dark.scss +1 -0
  206. package/styles/menu/material-dark.css +4 -0
  207. package/styles/menu/material.css +4 -0
  208. package/styles/menu/material3-dark.css +1162 -0
  209. package/styles/menu/material3-dark.scss +9 -0
  210. package/styles/menu/material3.css +1218 -0
  211. package/styles/menu/material3.scss +9 -0
  212. package/styles/menu/tailwind-dark.css +4 -0
  213. package/styles/menu/tailwind.css +4 -0
  214. package/styles/pager/_bootstrap-dark-definition.scss +9 -5
  215. package/styles/pager/_bootstrap-definition.scss +9 -5
  216. package/styles/pager/_bootstrap4-definition.scss +8 -4
  217. package/styles/pager/_bootstrap5-definition.scss +4 -0
  218. package/styles/pager/_fabric-dark-definition.scss +10 -6
  219. package/styles/pager/_fabric-definition.scss +10 -6
  220. package/styles/pager/_fluent-definition.scss +8 -4
  221. package/styles/pager/_fusionnew-definition.scss +4 -0
  222. package/styles/pager/_highcontrast-definition.scss +8 -4
  223. package/styles/pager/_highcontrast-light-definition.scss +4 -0
  224. package/styles/pager/_layout.scss +63 -48
  225. package/styles/pager/_material-dark-definition.scss +12 -8
  226. package/styles/pager/_material-definition.scss +11 -7
  227. package/styles/pager/_material3-dark-definition.scss +1 -0
  228. package/styles/pager/_material3-definition.scss +150 -0
  229. package/styles/pager/_tailwind-definition.scss +9 -5
  230. package/styles/pager/_theme.scss +12 -5
  231. package/styles/pager/bootstrap-dark.css +15 -43
  232. package/styles/pager/bootstrap.css +15 -43
  233. package/styles/pager/bootstrap4.css +14 -42
  234. package/styles/pager/bootstrap5-dark.css +10 -38
  235. package/styles/pager/bootstrap5.css +10 -38
  236. package/styles/pager/fabric-dark.css +17 -45
  237. package/styles/pager/fabric.css +16 -44
  238. package/styles/pager/fluent-dark.css +14 -42
  239. package/styles/pager/fluent.css +14 -42
  240. package/styles/pager/highcontrast-light.css +10 -38
  241. package/styles/pager/highcontrast.css +14 -42
  242. package/styles/pager/icons/_material3-dark.scss +1 -0
  243. package/styles/pager/icons/_material3.scss +4 -4
  244. package/styles/pager/material-dark.css +18 -46
  245. package/styles/pager/material.css +17 -45
  246. package/styles/pager/material3-dark.css +765 -0
  247. package/styles/pager/material3-dark.scss +5 -0
  248. package/styles/pager/material3.css +821 -0
  249. package/styles/pager/material3.scss +5 -0
  250. package/styles/pager/tailwind-dark.css +15 -43
  251. package/styles/pager/tailwind.css +15 -43
  252. package/styles/sidebar/_material3-dark-definition.scss +1 -0
  253. package/styles/sidebar/_material3-definition.scss +7 -0
  254. package/styles/sidebar/material3-dark.css +204 -0
  255. package/styles/sidebar/material3-dark.scss +4 -0
  256. package/styles/sidebar/material3.css +260 -0
  257. package/styles/sidebar/material3.scss +4 -0
  258. package/styles/tab/_bootstrap-dark-definition.scss +4 -0
  259. package/styles/tab/_bootstrap-definition.scss +4 -0
  260. package/styles/tab/_bootstrap4-definition.scss +4 -0
  261. package/styles/tab/_bootstrap5-definition.scss +4 -0
  262. package/styles/tab/_fabric-dark-definition.scss +4 -0
  263. package/styles/tab/_fabric-definition.scss +4 -0
  264. package/styles/tab/_fluent-definition.scss +4 -0
  265. package/styles/tab/_fusionnew-definition.scss +4 -0
  266. package/styles/tab/_highcontrast-definition.scss +4 -0
  267. package/styles/tab/_highcontrast-light-definition.scss +4 -0
  268. package/styles/tab/_layout.scss +37 -13
  269. package/styles/tab/_material-dark-definition.scss +4 -0
  270. package/styles/tab/_material-definition.scss +4 -0
  271. package/styles/tab/_material3-dark-definition.scss +1 -0
  272. package/styles/tab/_material3-definition.scss +661 -0
  273. package/styles/tab/_tailwind-definition.scss +4 -0
  274. package/styles/tab/_theme.scss +44 -1
  275. package/styles/tab/bootstrap-dark.css +30 -7
  276. package/styles/tab/bootstrap.css +30 -7
  277. package/styles/tab/bootstrap4.css +30 -7
  278. package/styles/tab/bootstrap5-dark.css +30 -7
  279. package/styles/tab/bootstrap5.css +30 -7
  280. package/styles/tab/fabric-dark.css +30 -7
  281. package/styles/tab/fabric.css +30 -7
  282. package/styles/tab/fluent-dark.css +30 -7
  283. package/styles/tab/fluent.css +30 -7
  284. package/styles/tab/highcontrast-light.css +30 -7
  285. package/styles/tab/highcontrast.css +30 -7
  286. package/styles/tab/icons/_material3-dark.scss +1 -0
  287. package/styles/tab/material-dark.css +30 -7
  288. package/styles/tab/material.css +30 -7
  289. package/styles/tab/material3-dark.css +4109 -0
  290. package/styles/tab/material3-dark.scss +6 -0
  291. package/styles/tab/material3.css +4165 -0
  292. package/styles/tab/material3.scss +6 -0
  293. package/styles/tab/tailwind-dark.css +29 -6
  294. package/styles/tab/tailwind.css +29 -6
  295. package/styles/tailwind-dark.css +185 -126
  296. package/styles/tailwind.css +185 -126
  297. package/styles/toolbar/_fabric-dark-definition.scss +3 -3
  298. package/styles/toolbar/_fabric-definition.scss +3 -3
  299. package/styles/toolbar/_highcontrast-definition.scss +1 -1
  300. package/styles/toolbar/_highcontrast-light-definition.scss +1 -1
  301. package/styles/toolbar/_layout.scss +8 -0
  302. package/styles/toolbar/_material-dark-definition.scss +3 -3
  303. package/styles/toolbar/_material-definition.scss +3 -3
  304. package/styles/toolbar/_material3-dark-definition.scss +1 -0
  305. package/styles/toolbar/_material3-definition.scss +220 -0
  306. package/styles/toolbar/_tailwind-definition.scss +3 -3
  307. package/styles/toolbar/_theme.scss +2 -1
  308. package/styles/toolbar/bootstrap-dark.css +8 -1
  309. package/styles/toolbar/bootstrap.css +8 -1
  310. package/styles/toolbar/bootstrap4.css +8 -1
  311. package/styles/toolbar/bootstrap5-dark.css +8 -1
  312. package/styles/toolbar/bootstrap5.css +8 -1
  313. package/styles/toolbar/fabric-dark.css +10 -3
  314. package/styles/toolbar/fabric.css +10 -3
  315. package/styles/toolbar/fluent-dark.css +8 -1
  316. package/styles/toolbar/fluent.css +8 -1
  317. package/styles/toolbar/highcontrast-light.css +9 -2
  318. package/styles/toolbar/highcontrast.css +9 -2
  319. package/styles/toolbar/icons/_material3-dark.scss +1 -0
  320. package/styles/toolbar/material-dark.css +10 -3
  321. package/styles/toolbar/material.css +10 -3
  322. package/styles/toolbar/material3-dark.css +1145 -0
  323. package/styles/toolbar/material3-dark.scss +9 -0
  324. package/styles/toolbar/material3.css +1201 -0
  325. package/styles/toolbar/material3.scss +9 -0
  326. package/styles/toolbar/tailwind-dark.css +11 -4
  327. package/styles/toolbar/tailwind.css +11 -4
  328. package/styles/treeview/_layout.scss +15 -2
  329. package/styles/treeview/_material3-dark-definition.scss +1 -0
  330. package/styles/treeview/_material3-definition.scss +121 -0
  331. package/styles/treeview/icons/_material3-dark.scss +1 -0
  332. package/styles/treeview/icons/_material3.scss +1 -1
  333. package/styles/treeview/material3-dark.css +903 -0
  334. package/styles/treeview/material3-dark.scss +7 -0
  335. package/styles/treeview/material3.css +959 -0
  336. package/styles/treeview/material3.scss +7 -0
  337. package/styles/v-scroll/_material3-dark-definition.scss +1 -0
  338. package/styles/v-scroll/_material3-definition.scss +49 -0
  339. package/styles/v-scroll/icons/_material3-dark.scss +1 -0
  340. package/styles/v-scroll/material3-dark.css +258 -0
  341. package/styles/v-scroll/material3-dark.scss +5 -0
  342. package/styles/v-scroll/material3.css +314 -0
  343. package/styles/v-scroll/material3.scss +5 -0
@@ -0,0 +1,1145 @@
1
+ @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
+ :root {
3
+ --color-sf-black: 0, 0, 0;
4
+ --color-sf-white: 255, 255, 255;
5
+ --color-sf-primary: 208, 188, 255;
6
+ --color-sf-primary-container: 79, 55, 139;
7
+ --color-sf-secondary: 204, 194, 220;
8
+ --color-sf-secondary-container: 74, 68, 88;
9
+ --color-sf-tertiary: 239, 184, 200;
10
+ --color-sf-tertiary-container: 99, 59, 72;
11
+ --color-sf-surface: 28, 27, 31;
12
+ --color-sf-surface-variant: 73, 69, 79;
13
+ --color-sf-background: var(--color-sf-surface);
14
+ --color-sf-on-primary: 55, 30, 115;
15
+ --color-sf-on-primary-container: 234, 221, 255;
16
+ --color-sf-on-secondary: 51, 45, 65;
17
+ --color-sf-on-secondary-container: 232, 222, 248;
18
+ --color-sf-on-tertiary: 73, 37, 50;
19
+ --color-sf-on-tertiary-containe: 255, 216, 228;
20
+ --color-sf-on-surface: 230, 225, 229;
21
+ --color-sf-on-surface-variant: 202, 196, 208;
22
+ --color-sf-on-background: 230, 225, 229;
23
+ --color-sf-outline: 147, 143, 153;
24
+ --color-sf-outline-variant: 68, 71, 70;
25
+ --color-sf-shadow: 0, 0, 0;
26
+ --color-sf-surface-tint-color: 208, 188, 255;
27
+ --color-sf-inverse-surface: 230, 225, 229;
28
+ --color-sf-inverse-on-surface: 49, 48, 51;
29
+ --color-sf-inverse-primary: 103, 80, 164;
30
+ --color-sf-scrim: 0, 0, 0;
31
+ --color-sf-error: 242, 184, 181;
32
+ --color-sf-error-container: 140, 29, 24;
33
+ --color-sf-on-error: 96, 20, 16;
34
+ --color-sf-on-error-container: 249, 222, 220;
35
+ --color-sf-success: 83, 202, 23;
36
+ --color-sf-success-container: 22, 62, 2;
37
+ --color-sf-on-success: 13, 39, 0;
38
+ --color-sf-on-success-container: 183, 250, 150;
39
+ --color-sf-info: 71, 172, 251;
40
+ --color-sf-info-container: 0, 67, 120;
41
+ --color-sf-on-info: 0, 51, 91;
42
+ --color-sf-on-info-container: 173, 219, 255;
43
+ --color-sf-warning: 245, 180, 130;
44
+ --color-sf-warning-container: 123, 65, 0;
45
+ --color-sf-on-warning: 99, 52, 0;
46
+ --color-sf-on-warning-container: 255, 220, 193;
47
+ --color-sf-spreadsheet-gridline: 231, 224, 236;
48
+ --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
49
+ --color-sf-success-text: 0, 0, 0;
50
+ --color-sf-warning-text: 0, 0, 0;
51
+ --color-sf-info-text: 0, 0, 0;
52
+ --color-sf-danger-text: 0, 0, 0;
53
+ --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
54
+ --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
55
+ }
56
+
57
+ /*! component's theme wise override definitions and variables */
58
+ @keyframes hscroll-popup-shadow {
59
+ 0% {
60
+ border-color: rgba(255, 255, 255, 0.5);
61
+ box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
62
+ }
63
+ 100% {
64
+ box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
65
+ }
66
+ }
67
+ /*! component's theme wise override definitions and variables */ /* stylelint-disable-line no-empty-source */ /*! Toolbar's material3 theme wise override definitions and variables */
68
+ /* stylelint-disable */
69
+ /*! toolbar icons */
70
+ .e-toolbar .e-popup-down-icon::before {
71
+ content: "\e729";
72
+ line-height: normal;
73
+ }
74
+ .e-toolbar .e-popup-up-icon::before {
75
+ content: "\e776";
76
+ line-height: normal;
77
+ }
78
+
79
+ /*! toolbar layout */
80
+ /* stylelint-disable property-no-vendor-prefix */
81
+ .e-bigger .e-toolbar,
82
+ .e-toolbar.e-bigger {
83
+ height: 56px;
84
+ min-height: 56px;
85
+ }
86
+ .e-bigger .e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child,
87
+ .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child,
88
+ .e-toolbar.e-bigger .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child,
89
+ .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
90
+ margin-left: 12px;
91
+ }
92
+ .e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
93
+ .e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
94
+ .e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
95
+ .e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
96
+ margin-right: 12px;
97
+ }
98
+ .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
99
+ .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
100
+ margin-right: 12px;
101
+ }
102
+ .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item:last-child,
103
+ .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item:last-child {
104
+ margin-right: 12px;
105
+ }
106
+ .e-bigger .e-toolbar .e-toolbar-items.e-toolbar-multirow,
107
+ .e-toolbar.e-bigger .e-toolbar-items.e-toolbar-multirow {
108
+ margin-left: 12px;
109
+ margin-right: 12px;
110
+ }
111
+ .e-bigger .e-toolbar .e-toolbar-items.e-toolbar-multirow .e-toolbar-item:not(.e-separator),
112
+ .e-toolbar.e-bigger .e-toolbar-items.e-toolbar-multirow .e-toolbar-item:not(.e-separator) {
113
+ margin: 0;
114
+ }
115
+ .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus, .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover, .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
116
+ .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
117
+ .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
118
+ .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active,
119
+ .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
120
+ .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
121
+ .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
122
+ .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
123
+ .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
124
+ .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
125
+ padding: 0 8px;
126
+ }
127
+ .e-bigger .e-toolbar .e-toolbar-item,
128
+ .e-toolbar.e-bigger .e-toolbar-item {
129
+ min-height: 56px;
130
+ }
131
+ .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn,
132
+ .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-control,
133
+ .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn,
134
+ .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control {
135
+ min-height: 40px;
136
+ min-width: 40px;
137
+ padding: 0 8px;
138
+ line-height: 24px;
139
+ }
140
+ .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text,
141
+ .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-tbar-btn-text,
142
+ .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text,
143
+ .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-tbar-btn-text {
144
+ padding: 4px;
145
+ font-size: 14px;
146
+ }
147
+ .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-icons,
148
+ .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-icons,
149
+ .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn .e-icons,
150
+ .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-icons {
151
+ font-size: 24px;
152
+ }
153
+ .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
154
+ .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-icons.e-btn-icon,
155
+ .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
156
+ .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-icons.e-btn-icon {
157
+ font-size: 20px;
158
+ line-height: 24px;
159
+ }
160
+ .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
161
+ .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon,
162
+ .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
163
+ .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon {
164
+ padding: 4px;
165
+ }
166
+ .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon,
167
+ .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon,
168
+ .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon,
169
+ .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
170
+ padding: 4px;
171
+ }
172
+ .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
173
+ .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
174
+ min-width: 40px;
175
+ padding: 8px 4px 8px 4px;
176
+ }
177
+ .e-bigger .e-toolbar .e-toolbar-item.e-separator,
178
+ .e-toolbar.e-bigger .e-toolbar-item.e-separator {
179
+ height: 24px;
180
+ margin: 8px 4px 8px 4px;
181
+ min-height: 24px;
182
+ }
183
+ .e-bigger .e-toolbar .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
184
+ .e-bigger .e-toolbar .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon,
185
+ .e-toolbar.e-bigger .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
186
+ .e-toolbar.e-bigger .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon {
187
+ padding: 4px 6px 3px 6px;
188
+ }
189
+ .e-bigger .e-toolbar .e-hor-nav,
190
+ .e-toolbar.e-bigger .e-hor-nav {
191
+ min-height: 56px;
192
+ min-width: 46px;
193
+ }
194
+ .e-bigger .e-toolbar.e-vertical .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
195
+ .e-toolbar.e-bigger.e-vertical .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
196
+ margin-left: 0;
197
+ }
198
+ .e-bigger .e-toolbar.e-vertical .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child,
199
+ .e-toolbar.e-bigger.e-vertical .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
200
+ margin-right: 0;
201
+ }
202
+ .e-bigger .e-toolbar.e-vertical .e-toolbar-item:not(.e-separator),
203
+ .e-toolbar.e-bigger.e-vertical .e-toolbar-item:not(.e-separator) {
204
+ min-height: 38px;
205
+ }
206
+ .e-bigger .e-toolbar.e-vertical .e-toolbar-item.e-separator,
207
+ .e-toolbar.e-bigger.e-vertical .e-toolbar-item.e-separator {
208
+ height: auto;
209
+ margin: 8px 4px 8px 4px;
210
+ min-height: auto;
211
+ }
212
+ .e-bigger .e-toolbar.e-vertical .e-hor-nav,
213
+ .e-toolbar.e-bigger.e-vertical .e-hor-nav {
214
+ min-height: 40px;
215
+ min-width: 50px;
216
+ }
217
+ .e-bigger .e-toolbar .e-toolbar-pop .e-toolbar-item,
218
+ .e-toolbar.e-bigger .e-toolbar-pop .e-toolbar-item {
219
+ height: 40px;
220
+ }
221
+ .e-bigger .e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator),
222
+ .e-toolbar.e-bigger .e-toolbar-pop .e-toolbar-item:not(.e-separator) {
223
+ min-width: 48px;
224
+ padding: 0;
225
+ min-height: 40px;
226
+ }
227
+ .e-bigger .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn,
228
+ .e-toolbar.e-bigger .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
229
+ min-height: 40px;
230
+ padding: 8px 16px;
231
+ min-width: 100%;
232
+ }
233
+ .e-bigger .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
234
+ .e-toolbar.e-bigger .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
235
+ margin-left: 0;
236
+ padding: 0 8px 0 0;
237
+ font-size: 16px;
238
+ }
239
+ .e-bigger .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text,
240
+ .e-toolbar.e-bigger .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
241
+ padding: 0 0 0 8px;
242
+ font-size: 16px;
243
+ }
244
+ .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended,
245
+ .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended {
246
+ min-height: 56px;
247
+ padding-bottom: 0;
248
+ padding-left: 12px;
249
+ padding-right: 12px;
250
+ padding-top: 0;
251
+ }
252
+ .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
253
+ .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item {
254
+ min-height: 56px;
255
+ }
256
+ .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn,
257
+ .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control,
258
+ .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn,
259
+ .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
260
+ min-height: 40px;
261
+ min-width: 40px;
262
+ padding: 0 8px;
263
+ }
264
+ .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text,
265
+ .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-tbar-btn-text,
266
+ .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text,
267
+ .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-tbar-btn-text {
268
+ padding: 4px;
269
+ }
270
+ .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover, .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus, .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active,
271
+ .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
272
+ .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
273
+ .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:active,
274
+ .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover,
275
+ .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus,
276
+ .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active,
277
+ .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
278
+ .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
279
+ .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
280
+ padding: 0 8px;
281
+ }
282
+ .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item:not(.e-separator),
283
+ .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item:not(.e-separator) {
284
+ min-width: 40px;
285
+ padding: 8px 4px 8px 4px;
286
+ }
287
+ .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator,
288
+ .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
289
+ height: 24px;
290
+ margin: 8px 4px 8px 4px;
291
+ min-height: 24px;
292
+ }
293
+ .e-bigger .e-toolbar.e-extended-toolbar.e-tbar-extended,
294
+ .e-toolbar.e-bigger.e-extended-toolbar.e-tbar-extended {
295
+ border-bottom: 0;
296
+ border-bottom-left-radius: 0;
297
+ border-bottom-right-radius: 0;
298
+ }
299
+ .e-bigger .e-toolbar.e-extended-toolbar.e-tbar-extended .e-toolbar-extended,
300
+ .e-toolbar.e-bigger.e-extended-toolbar.e-tbar-extended .e-toolbar-extended {
301
+ border-top: 0;
302
+ border-top-left-radius: 0;
303
+ border-top-right-radius: 0;
304
+ }
305
+ .e-bigger .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
306
+ .e-toolbar.e-bigger.e-rtl .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
307
+ padding: 4px;
308
+ }
309
+ .e-bigger .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-icon-right,
310
+ .e-toolbar.e-bigger.e-rtl .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-icon-right {
311
+ padding: 4px;
312
+ }
313
+ .e-bigger .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text,
314
+ .e-toolbar.e-bigger.e-rtl .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
315
+ padding: 4px;
316
+ }
317
+ .e-bigger .e-toolbar.e-rtl .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
318
+ .e-toolbar.e-bigger.e-rtl .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
319
+ margin-left: 12px;
320
+ margin-right: initial;
321
+ }
322
+ .e-bigger .e-toolbar.e-rtl .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-center .e-toolbar-item,
323
+ .e-toolbar.e-bigger.e-rtl .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-center .e-toolbar-item {
324
+ margin: 0;
325
+ }
326
+ .e-bigger .e-toolbar.e-rtl .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item,
327
+ .e-toolbar.e-bigger.e-rtl .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item {
328
+ margin: 0;
329
+ }
330
+ .e-bigger .e-toolbar.e-rtl .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item:last-child,
331
+ .e-toolbar.e-bigger.e-rtl .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item:last-child {
332
+ margin-left: 12px;
333
+ margin-right: 0;
334
+ }
335
+ .e-bigger .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
336
+ .e-toolbar.e-bigger.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
337
+ margin-left: 0;
338
+ margin-right: 12px;
339
+ }
340
+ .e-bigger .e-toolbar.e-extended-toolbar.e-rtl .e-toolbar-extended,
341
+ .e-toolbar.e-bigger.e-extended-toolbar.e-rtl .e-toolbar-extended {
342
+ padding-right: 12px;
343
+ }
344
+
345
+ .e-toolbar {
346
+ border-radius: 0;
347
+ display: block;
348
+ height: 48px;
349
+ min-height: 48px;
350
+ position: relative;
351
+ -webkit-user-select: none;
352
+ -ms-user-select: none;
353
+ user-select: none;
354
+ white-space: nowrap;
355
+ overflow: hidden;
356
+ }
357
+ .e-toolbar .e-blazor-toolbar-items {
358
+ position: absolute;
359
+ top: -9999px;
360
+ visibility: hidden;
361
+ }
362
+ .e-toolbar.e-control[class*=e-toolbar] {
363
+ box-sizing: content-box;
364
+ }
365
+ .e-toolbar.e-corner {
366
+ border-radius: 1px;
367
+ }
368
+ .e-toolbar.e-hidden {
369
+ display: none;
370
+ }
371
+ .e-toolbar .e-toolbar-items {
372
+ border-radius: 0 0 0 0;
373
+ display: -ms-inline-flexbox;
374
+ display: inline-flex;
375
+ height: 100%;
376
+ vertical-align: middle;
377
+ -ms-flex-align: center;
378
+ align-items: center;
379
+ }
380
+ .e-toolbar .e-toolbar-items.e-toolbar-multirow {
381
+ margin-bottom: 1px;
382
+ margin-left: 8px;
383
+ margin-right: 8px;
384
+ white-space: normal;
385
+ -ms-flex-wrap: wrap;
386
+ flex-wrap: wrap;
387
+ }
388
+ .e-toolbar .e-toolbar-items.e-toolbar-multirow .e-toolbar-item:not(.e-separator) {
389
+ margin: 0;
390
+ }
391
+ .e-toolbar .e-toolbar-items.e-toolbar-multirow .e-toolbar-item.e-separator.e-multirow-separator, .e-toolbar .e-toolbar-items.e-toolbar-multirow .e-toolbar-item.e-separator.e-hidden {
392
+ display: none;
393
+ }
394
+ .e-toolbar .e-toolbar-items.e-multirow-pos .e-toolbar-left,
395
+ .e-toolbar .e-toolbar-items.e-multirow-pos .e-toolbar-center,
396
+ .e-toolbar .e-toolbar-items.e-multirow-pos .e-toolbar-right {
397
+ display: inline;
398
+ }
399
+ .e-toolbar .e-toolbar-items.e-tbar-pos {
400
+ display: block;
401
+ }
402
+ .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left,
403
+ .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-center,
404
+ .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right {
405
+ display: table;
406
+ height: 100%;
407
+ top: 0;
408
+ }
409
+ .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right,
410
+ .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
411
+ position: absolute;
412
+ }
413
+ .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right {
414
+ right: 0;
415
+ }
416
+ .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
417
+ left: 0;
418
+ }
419
+ .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-center {
420
+ margin: 0 auto;
421
+ }
422
+ .e-toolbar .e-toolbar-items .e-toolbar-left,
423
+ .e-toolbar .e-toolbar-items .e-toolbar-center,
424
+ .e-toolbar .e-toolbar-items .e-toolbar-right {
425
+ display: inline-block;
426
+ }
427
+ .e-toolbar .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child, .e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
428
+ margin-left: 8px;
429
+ }
430
+ .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
431
+ .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
432
+ margin-right: 8px;
433
+ }
434
+ .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content {
435
+ -ms-touch-action: pan-y pinch-zoom;
436
+ touch-action: pan-y pinch-zoom;
437
+ }
438
+ .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
439
+ margin-right: 8px;
440
+ }
441
+ .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-center .e-toolbar-item {
442
+ margin: 0;
443
+ }
444
+ .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item {
445
+ margin: 0;
446
+ }
447
+ .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item:last-child {
448
+ margin-right: 8px;
449
+ }
450
+ .e-toolbar .e-toolbar-item {
451
+ -ms-flex-line-pack: center;
452
+ align-content: center;
453
+ -ms-flex-align: center;
454
+ align-items: center;
455
+ cursor: pointer;
456
+ display: -ms-inline-flexbox;
457
+ display: inline-flex;
458
+ min-height: 32px;
459
+ vertical-align: middle;
460
+ width: auto;
461
+ }
462
+ .e-toolbar .e-toolbar-item .e-tbar-btn {
463
+ display: -ms-flexbox;
464
+ display: flex;
465
+ -ms-flex-align: center;
466
+ align-items: center;
467
+ vertical-align: middle;
468
+ -ms-flex-pack: center;
469
+ justify-content: center;
470
+ margin: 0;
471
+ min-height: 32px;
472
+ min-width: 32px;
473
+ padding: 0 7px;
474
+ border-radius: 4px;
475
+ line-height: 22px;
476
+ border: none;
477
+ cursor: pointer;
478
+ font-size: 18px;
479
+ font-weight: 400;
480
+ overflow: hidden;
481
+ text-align: center;
482
+ text-decoration: none;
483
+ text-transform: none;
484
+ }
485
+ .e-toolbar .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
486
+ padding: 4px;
487
+ }
488
+ .e-toolbar .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon.e-icon-right {
489
+ padding: 4px;
490
+ }
491
+ .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon {
492
+ margin: 0;
493
+ min-width: 18px;
494
+ width: auto;
495
+ font-size: 18px;
496
+ line-height: 18px;
497
+ }
498
+ .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-toolbar .e-toolbar-item .e-tbar-btn:focus, .e-toolbar .e-toolbar-item .e-tbar-btn:active {
499
+ padding: 0 7px;
500
+ }
501
+ .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
502
+ outline: 0;
503
+ }
504
+ .e-toolbar .e-toolbar-item .e-tbar-btn div {
505
+ vertical-align: middle;
506
+ }
507
+ .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
508
+ font-size: 14px;
509
+ padding: 4px;
510
+ }
511
+ .e-toolbar .e-toolbar-item:not(.e-separator) {
512
+ height: inherit;
513
+ min-width: 32px;
514
+ padding: 8px 4px 8px 4px;
515
+ }
516
+ .e-toolbar .e-toolbar-item.e-separator {
517
+ margin: 8px 4px 8px 4px;
518
+ min-height: 20px;
519
+ min-width: 1px;
520
+ height: 20px;
521
+ }
522
+ .e-toolbar .e-toolbar-item.e-separator + .e-separator, .e-toolbar .e-toolbar-item.e-separator:last-of-type, .e-toolbar .e-toolbar-item.e-separator:first-of-type {
523
+ display: none;
524
+ }
525
+ .e-toolbar .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
526
+ padding: 4px 4px 5px 4px;
527
+ }
528
+ .e-toolbar .e-toolbar-item > * {
529
+ text-overflow: ellipsis;
530
+ }
531
+ .e-toolbar .e-toolbar-item.e-hidden {
532
+ display: none;
533
+ }
534
+ .e-toolbar .e-toolbar-item input[type=checkbox] {
535
+ height: auto;
536
+ }
537
+ .e-toolbar.e-vertical {
538
+ display: -ms-flexbox;
539
+ display: flex;
540
+ -ms-flex-direction: column;
541
+ flex-direction: column;
542
+ }
543
+ .e-toolbar.e-vertical .e-toolbar-items .e-vscroll-bar .e-vscroll-content {
544
+ -ms-touch-action: pan-x pinch-zoom;
545
+ touch-action: pan-x pinch-zoom;
546
+ }
547
+ .e-toolbar.e-vertical .e-toolbar-items.e-tbar-pos .e-toolbar-left,
548
+ .e-toolbar.e-vertical .e-toolbar-items.e-tbar-pos .e-toolbar-center,
549
+ .e-toolbar.e-vertical .e-toolbar-items.e-tbar-pos .e-toolbar-right {
550
+ height: auto;
551
+ }
552
+ .e-toolbar.e-vertical .e-toolbar-items.e-tbar-pos .e-toolbar-left {
553
+ left: auto;
554
+ right: auto;
555
+ top: 0;
556
+ }
557
+ .e-toolbar.e-vertical .e-toolbar-items.e-tbar-pos .e-toolbar-right {
558
+ bottom: 0;
559
+ left: auto;
560
+ right: auto;
561
+ }
562
+ .e-toolbar.e-vertical .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
563
+ margin-left: 0;
564
+ }
565
+ .e-toolbar.e-vertical .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
566
+ margin-right: 0;
567
+ }
568
+ .e-toolbar.e-vertical .e-toolbar-items .e-toolbar-item {
569
+ display: -ms-flexbox;
570
+ display: flex;
571
+ height: auto;
572
+ }
573
+ .e-toolbar.e-vertical .e-toolbar-items .e-toolbar-item:not(.e-separator) {
574
+ min-width: 33px;
575
+ }
576
+ .e-toolbar.e-vertical .e-toolbar-items .e-toolbar-item.e-separator {
577
+ height: auto;
578
+ margin: 8px 4px 8px 4px;
579
+ min-height: auto;
580
+ }
581
+ .e-toolbar.e-vertical .e-hor-nav {
582
+ bottom: 0;
583
+ height: auto;
584
+ left: 0;
585
+ min-height: 40px;
586
+ min-width: 50px;
587
+ right: auto;
588
+ top: auto;
589
+ width: auto;
590
+ }
591
+ .e-toolbar.e-vertical.e-rtl.e-tbar-pos .e-toolbar-left {
592
+ bottom: 0;
593
+ top: auto;
594
+ }
595
+ .e-toolbar.e-vertical.e-rtl.e-tbar-pos .e-toolbar-right {
596
+ bottom: auto;
597
+ top: 0;
598
+ }
599
+ .e-toolbar .e-hor-nav {
600
+ -ms-flex-align: center;
601
+ align-items: center;
602
+ border-radius: 0 0 0 0;
603
+ cursor: pointer;
604
+ display: -ms-flexbox;
605
+ display: flex;
606
+ height: 100%;
607
+ min-height: 48px;
608
+ overflow: hidden;
609
+ position: absolute;
610
+ right: 0;
611
+ top: 0;
612
+ width: 40px;
613
+ }
614
+ .e-toolbar .e-hor-nav.e-ie-align {
615
+ display: table;
616
+ }
617
+ .e-toolbar .e-popup-down-icon.e-icons,
618
+ .e-toolbar .e-popup-up-icon.e-icons {
619
+ color: rgba(var(--color-sf-on-surface-variant));
620
+ display: -ms-flexbox;
621
+ display: flex;
622
+ text-align: center;
623
+ vertical-align: middle;
624
+ -ms-flex-align: center;
625
+ align-items: center;
626
+ -ms-flex-pack: center;
627
+ justify-content: center;
628
+ width: 100%;
629
+ font-size: 14px;
630
+ }
631
+ .e-toolbar.e-toolpop {
632
+ overflow: visible;
633
+ }
634
+ .e-toolbar.e-toolpop .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn-text {
635
+ display: none;
636
+ }
637
+ .e-toolbar .e-toolbar-pop {
638
+ border-radius: 4px;
639
+ overflow: hidden;
640
+ padding: 0;
641
+ position: absolute;
642
+ }
643
+ .e-toolbar .e-toolbar-pop .e-toolbar-item {
644
+ display: -ms-flexbox;
645
+ display: flex;
646
+ height: 32px;
647
+ -ms-flex-pack: center;
648
+ justify-content: center;
649
+ min-height: 32px;
650
+ }
651
+ .e-toolbar .e-toolbar-pop .e-toolbar-item.e-toolbar-popup.e-hidden {
652
+ display: none;
653
+ }
654
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
655
+ min-height: 32px;
656
+ min-width: 100%;
657
+ padding: 5px 12px;
658
+ border: none;
659
+ border-radius: 4px;
660
+ -ms-flex-pack: start;
661
+ justify-content: flex-start;
662
+ }
663
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
664
+ margin: 0;
665
+ padding: 0 8px 0 0;
666
+ width: auto;
667
+ }
668
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
669
+ padding: 0 0 0 8px;
670
+ }
671
+ .e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator) {
672
+ min-width: 34px;
673
+ padding: 0;
674
+ }
675
+ .e-toolbar .e-toolbar-pop .e-toolbar-item > * {
676
+ height: 100%;
677
+ min-width: 100%;
678
+ text-overflow: ellipsis;
679
+ }
680
+ .e-toolbar .e-toolbar-pop .e-toolbar-item.e-tbtn-align .e-btn.e-control .e-icons.e-btn-icon {
681
+ min-width: 100%;
682
+ }
683
+ .e-toolbar .e-toolbar-pop .e-toolbar-text .e-tbar-btn-text {
684
+ display: none;
685
+ }
686
+ .e-toolbar .e-toolbar-pop .e-toolbar-popup,
687
+ .e-toolbar .e-toolbar-pop .e-toolpopup {
688
+ text-align: center;
689
+ }
690
+ .e-toolbar.e-extended-toolbar {
691
+ overflow: visible;
692
+ }
693
+ .e-toolbar.e-extended-toolbar.e-tbar-extended {
694
+ border-bottom: 0;
695
+ border-bottom-left-radius: 0;
696
+ border-bottom-right-radius: 0;
697
+ }
698
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended {
699
+ border-top: 0;
700
+ border-top-left-radius: 0;
701
+ border-top-right-radius: 0;
702
+ min-height: 48px;
703
+ padding-bottom: 0;
704
+ padding-left: 8px;
705
+ padding-right: 8px;
706
+ padding-top: 0;
707
+ margin-left: -1px;
708
+ box-shadow: none;
709
+ display: inline;
710
+ white-space: normal;
711
+ }
712
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item {
713
+ display: -ms-inline-flexbox;
714
+ display: inline-flex;
715
+ min-height: 32px;
716
+ }
717
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn,
718
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
719
+ min-height: 32px;
720
+ min-width: 32px;
721
+ padding: 0 7px;
722
+ }
723
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text,
724
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-tbar-btn-text {
725
+ padding: 4px;
726
+ font-size: 14px;
727
+ }
728
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon:not(.e-toolbar-pop),
729
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-icons.e-btn-icon:not(.e-toolbar-pop) {
730
+ display: -ms-flexbox;
731
+ display: flex;
732
+ -ms-flex-align: center;
733
+ align-items: center;
734
+ vertical-align: middle;
735
+ -ms-flex-pack: center;
736
+ justify-content: center;
737
+ padding: 0;
738
+ font-size: 18px;
739
+ }
740
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon:not(.e-toolbar-pop),
741
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon:not(.e-toolbar-pop) {
742
+ padding: 4px;
743
+ }
744
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon:not(.e-toolbar-pop),
745
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon:not(.e-toolbar-pop) {
746
+ padding: 4px;
747
+ }
748
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover, .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus, .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active,
749
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
750
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
751
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
752
+ padding: 0 7px;
753
+ }
754
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item:not(.e-separator) {
755
+ min-width: 32px;
756
+ padding: 8px 4px 8px 4px;
757
+ }
758
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
759
+ min-height: 18px;
760
+ }
761
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator.e-extended-separator {
762
+ display: none;
763
+ }
764
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-toolbar-text .e-tbar-btn-text {
765
+ display: none;
766
+ }
767
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-popup-close {
768
+ display: none;
769
+ }
770
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-popup-open {
771
+ display: inline;
772
+ }
773
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop {
774
+ width: inherit;
775
+ }
776
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item .e-tbar-btn {
777
+ cursor: pointer;
778
+ font-size: 18px;
779
+ overflow: hidden;
780
+ padding: 0 7px;
781
+ }
782
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon {
783
+ font-size: 14px;
784
+ }
785
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item:not(.e-separator) {
786
+ height: auto;
787
+ }
788
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item > * {
789
+ -ms-flex-item-align: center;
790
+ -ms-grid-row-align: center;
791
+ align-self: center;
792
+ text-overflow: ellipsis;
793
+ }
794
+ .e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn-text {
795
+ display: none;
796
+ }
797
+ .e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-separator:last-of-type {
798
+ display: -ms-inline-flexbox;
799
+ display: inline-flex;
800
+ }
801
+ .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
802
+ display: table;
803
+ }
804
+ .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
805
+ padding: 4px;
806
+ }
807
+ .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon.e-icon-right {
808
+ padding: 4px;
809
+ }
810
+ .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
811
+ padding: 4px;
812
+ }
813
+ .e-toolbar.e-rtl .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
814
+ margin-left: 8px;
815
+ margin-right: initial;
816
+ }
817
+ .e-toolbar.e-rtl .e-hscroll-bar .e-hscroll-content .e-toolbar-center .e-toolbar-item {
818
+ margin: 0;
819
+ }
820
+ .e-toolbar.e-rtl .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item {
821
+ margin: 0;
822
+ }
823
+ .e-toolbar.e-rtl .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item:last-child {
824
+ margin-right: 8px;
825
+ }
826
+ .e-toolbar.e-rtl .e-toolbar-items.e-tbar-pos .e-toolbar-left {
827
+ left: auto;
828
+ right: 0;
829
+ }
830
+ .e-toolbar.e-rtl .e-toolbar-items.e-tbar-pos .e-toolbar-right {
831
+ left: 0;
832
+ right: auto;
833
+ }
834
+ .e-toolbar.e-rtl .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
835
+ margin-left: 0;
836
+ }
837
+ .e-toolbar.e-rtl .e-toolbar-items .e-toolbar-left .e-toolbar-item:last-child {
838
+ margin-left: 8px;
839
+ }
840
+ .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
841
+ margin-left: 0;
842
+ margin-right: 8px;
843
+ }
844
+ .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
845
+ .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
846
+ margin-right: 0;
847
+ }
848
+ .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:first-child,
849
+ .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:first-child {
850
+ margin-right: 8px;
851
+ }
852
+ .e-toolbar.e-rtl .e-hor-nav {
853
+ left: 0;
854
+ right: auto;
855
+ border-radius: 0 0 0 0;
856
+ }
857
+ .e-toolbar.e-toolpop.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-center .e-toolbar-item {
858
+ margin: 0;
859
+ }
860
+ .e-toolbar.e-toolpop.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-right .e-toolbar-item {
861
+ margin: 0;
862
+ }
863
+ .e-toolbar.e-toolpop.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-right .e-toolbar-item:last-child {
864
+ margin: 0;
865
+ margin-left: 8px;
866
+ }
867
+ .e-toolbar.e-extended-toolbar.e-rtl .e-hor-nav {
868
+ left: 0;
869
+ right: auto;
870
+ }
871
+ .e-toolbar.e-extended-toolbar.e-rtl .e-toolbar-extended {
872
+ padding-right: 8px;
873
+ margin-left: 0;
874
+ }
875
+ .e-toolbar.e-extended-toolbar.e-rtl .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn .e-icon-left {
876
+ padding-left: 0;
877
+ }
878
+
879
+ /*! toolbar theme */
880
+ /* stylelint-disable property-no-vendor-prefix */
881
+ .e-toolbar {
882
+ -webkit-tap-highlight-color: rgba(var(--color-sf-on-surface), 0.04);
883
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
884
+ border: 0 solid rgba(var(--color-sf-outline-variant));
885
+ box-shadow: none;
886
+ }
887
+ .e-toolbar .e-toolbar-items {
888
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
889
+ }
890
+ .e-toolbar .e-toolbar-item .e-tbar-btn {
891
+ background: transparent;
892
+ box-shadow: none;
893
+ color: rgba(var(--color-sf-on-surface-variant));
894
+ border: none;
895
+ }
896
+ .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
897
+ color: rgba(var(--color-sf-on-surface-variant));
898
+ }
899
+ .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
900
+ color: rgba(var(--color-sf-on-surface-variant));
901
+ }
902
+ .e-toolbar .e-toolbar-item .e-tbar-btn.e-flat.e-active {
903
+ background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface));
904
+ box-shadow: none;
905
+ }
906
+ .e-toolbar .e-toolbar-item .e-tbar-btn.e-flat.e-active .e-tbar-btn-text {
907
+ color: rgba(var(--color-sf-on-primary-container));
908
+ }
909
+ .e-toolbar .e-toolbar-item .e-tbar-btn.e-flat.e-active:focus {
910
+ box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary), 0.5);
911
+ }
912
+ .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
913
+ background: rgba(var(--color-sf-on-surface), 0.04);
914
+ border-radius: 4px;
915
+ color: rgba(var(--color-sf-on-surface-variant));
916
+ border-color: rgba(var(--color-sf-on-surface-variant));
917
+ border-style: solid;
918
+ border-width: 0;
919
+ box-shadow: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
920
+ }
921
+ .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
922
+ color: rgba(var(--color-sf-on-surface-variant));
923
+ }
924
+ .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
925
+ color: rgba(var(--color-sf-on-surface-variant));
926
+ }
927
+ .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
928
+ background: rgba(var(--color-sf-on-surface), 0.05);
929
+ border-color: rgba(var(--color-sf-outline-variant));
930
+ border-style: solid;
931
+ border-width: 0;
932
+ border-radius: 4px;
933
+ color: rgba(var(--color-sf-on-surface-variant));
934
+ }
935
+ .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons {
936
+ color: rgba(var(--color-sf-on-surface-variant));
937
+ }
938
+ .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text {
939
+ color: rgba(var(--color-sf-on-surface-variant));
940
+ }
941
+ .e-toolbar .e-toolbar-item .e-tbar-btn:hover:active .e-icons {
942
+ color: rgba(var(--color-sf-on-primary-container));
943
+ }
944
+ .e-toolbar .e-toolbar-item .e-tbar-btn:hover:active .e-tbar-btn-text {
945
+ color: rgba(var(--color-sf-on-primary-container));
946
+ }
947
+ .e-toolbar .e-toolbar-item .e-tbar-btn:active {
948
+ background: rgba(var(--color-sf-primary-container));
949
+ border-color: rgba(var(--color-sf-outline-variant));
950
+ border-style: solid;
951
+ border-width: 0;
952
+ border-radius: 4px;
953
+ box-shadow: none;
954
+ color: rgba(var(--color-sf-on-primary-container));
955
+ }
956
+ .e-toolbar .e-toolbar-item .e-tbar-btn:active .e-icons {
957
+ color: rgba(var(--color-sf-on-primary-container));
958
+ }
959
+ .e-toolbar .e-toolbar-item .e-tbar-btn:active .e-tbar-btn-text {
960
+ color: rgba(var(--color-sf-on-primary-container));
961
+ }
962
+ .e-toolbar .e-toolbar-item.e-separator {
963
+ border: solid rgba(var(--color-sf-outline-variant));
964
+ border-width: 0 1px 0 0;
965
+ }
966
+ .e-toolbar .e-toolbar-item.e-overlay {
967
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
968
+ opacity: 0.38;
969
+ color: rgba(var(--color-sf-on-surface-variant));
970
+ }
971
+ .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
972
+ color: rgba(var(--color-sf-on-surface-variant));
973
+ }
974
+ .e-toolbar .e-toolbar-item.e-overlay .e-icons {
975
+ color: rgba(var(--color-sf-on-surface-variant));
976
+ }
977
+ .e-toolbar.e-vertical .e-hor-nav {
978
+ border: solid rgba(var(--color-sf-outline-variant));
979
+ border-width: 1px 0 0 0;
980
+ }
981
+ .e-toolbar.e-vertical.e-rtl .e-hor-nav {
982
+ border: solid rgba(var(--color-sf-outline-variant));
983
+ border-width: 0 0 1px 0;
984
+ }
985
+ .e-toolbar.e-vertical .e-toolbar-items .e-toolbar-item.e-separator {
986
+ border-width: 0 0 1px 0;
987
+ }
988
+ .e-toolbar .e-hor-nav {
989
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
990
+ border: solid rgba(var(--color-sf-outline-variant));
991
+ border-width: 0 0 0 1px;
992
+ }
993
+ .e-toolbar .e-hor-nav::after {
994
+ content: "";
995
+ }
996
+ .e-toolbar .e-hor-nav.e-nav-active:active, .e-toolbar .e-hor-nav.e-nav-active:focus, .e-toolbar .e-hor-nav.e-nav-active:hover {
997
+ border-bottom-right-radius: 0;
998
+ }
999
+ .e-toolbar .e-hor-nav:active {
1000
+ border: 0;
1001
+ box-shadow: none;
1002
+ color: rgba(var(--color-sf-on-primary-container));
1003
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1004
+ }
1005
+ .e-toolbar .e-hor-nav:active .e-icons {
1006
+ color: rgba(var(--color-sf-on-surface-variant));
1007
+ }
1008
+ .e-toolbar .e-hor-nav:active::after {
1009
+ content: "";
1010
+ }
1011
+ .e-toolbar .e-hor-nav:hover {
1012
+ background: rgba(var(--color-sf-on-surface), 0.05);
1013
+ border-left: 1px solid rgba(var(--color-sf-outline-variant));
1014
+ color: rgba(var(--color-sf-on-primary-container));
1015
+ }
1016
+ .e-toolbar .e-hor-nav:hover .e-icons {
1017
+ color: rgba(var(--color-sf-on-surface-variant));
1018
+ }
1019
+ .e-toolbar .e-hor-nav:hover:not(.e-nav-active) {
1020
+ border-color: rgba(var(--color-sf-outline-variant));
1021
+ border-style: solid;
1022
+ border-width: 0 0 0 1px;
1023
+ }
1024
+ .e-toolbar .e-hor-nav:hover:active {
1025
+ background: rgba(var(--color-sf-on-surface), 0.05);
1026
+ border-color: rgba(var(--color-sf-outline-variant));
1027
+ border-style: solid;
1028
+ border-width: 0;
1029
+ }
1030
+ .e-toolbar .e-hor-nav:focus {
1031
+ background: rgba(var(--color-sf-on-surface), 0.05);
1032
+ color: rgba(var(--color-sf-on-primary));
1033
+ border-color: rgba(var(--color-sf-outline-variant));
1034
+ border-style: solid;
1035
+ border-width: 0 0 0 1px;
1036
+ }
1037
+ .e-toolbar .e-hor-nav:focus .e-icons {
1038
+ color: rgba(var(--color-sf-on-surface-variant));
1039
+ }
1040
+ .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
1041
+ .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
1042
+ background: rgba(var(--color-sf-on-surface), 0.08);
1043
+ box-shadow: none;
1044
+ border-color: rgba(var(--color-sf-on-surface), 0.08);
1045
+ border-style: solid;
1046
+ border-width: 0;
1047
+ }
1048
+ .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:focus,
1049
+ .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav):focus {
1050
+ border-color: rgba(var(--color-sf-on-surface), 0.08);
1051
+ border-style: solid;
1052
+ border-width: 0;
1053
+ }
1054
+ .e-toolbar.e-toolpop .e-hor-nav.e-nav-active .e-icons,
1055
+ .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) .e-icons {
1056
+ color: rgba(var(--color-sf-on-primary-container));
1057
+ }
1058
+ .e-toolbar.e-toolpop .e-hor-nav.e-nav-active .e-icons:active,
1059
+ .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) .e-icons:active {
1060
+ color: rgba(var(--color-sf-on-primary-container));
1061
+ }
1062
+ .e-toolbar .e-toolbar-pop {
1063
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
1064
+ border: 0 solid rgba(var(--color-sf-outline-variant));
1065
+ box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
1066
+ }
1067
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn {
1068
+ background: transparent;
1069
+ }
1070
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:hover {
1071
+ background: rgba(var(--color-sf-on-surface), 0.05);
1072
+ box-shadow: none;
1073
+ border-color: rgba(var(--color-sf-outline-variant));
1074
+ border-style: solid;
1075
+ border-width: 0;
1076
+ }
1077
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:active {
1078
+ background: transparent;
1079
+ box-shadow: none;
1080
+ border-color: rgba(var(--color-sf-outline-variant));
1081
+ border-style: solid;
1082
+ border-width: 0;
1083
+ }
1084
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus {
1085
+ background: rgba(var(--color-sf-on-surface), 0.04);
1086
+ box-shadow: none;
1087
+ border-color: rgba(var(--color-sf-on-surface-variant));
1088
+ border-style: solid;
1089
+ border-width: 0;
1090
+ }
1091
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-btn:focus {
1092
+ outline: 0;
1093
+ }
1094
+ .e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator) {
1095
+ background: transparent;
1096
+ }
1097
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn {
1098
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1099
+ box-shadow: none;
1100
+ border: none;
1101
+ }
1102
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
1103
+ background: rgba(var(--color-sf-on-surface), 0.04);
1104
+ border-radius: 4px;
1105
+ border-color: rgba(var(--color-sf-on-surface-variant));
1106
+ border-style: solid;
1107
+ border-width: 0;
1108
+ box-shadow: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
1109
+ }
1110
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
1111
+ background: rgba(var(--color-sf-on-surface), 0.05);
1112
+ border-radius: 4px;
1113
+ border-color: rgba(var(--color-sf-outline-variant));
1114
+ border-style: solid;
1115
+ border-width: 0;
1116
+ }
1117
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
1118
+ background: rgba(var(--color-sf-on-surface), 0.08);
1119
+ border-radius: 4px;
1120
+ box-shadow: none;
1121
+ border-color: rgba(var(--color-sf-outline-variant));
1122
+ border-style: solid;
1123
+ border-width: 0;
1124
+ }
1125
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
1126
+ border: solid rgba(var(--color-sf-outline-variant));
1127
+ border-width: 0 1px 0 0;
1128
+ }
1129
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-overlay {
1130
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1131
+ }
1132
+ .e-toolbar.e-extended-toolbar .e-toolbar-pop {
1133
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1134
+ }
1135
+ .e-toolbar.e-rtl .e-hor-nav {
1136
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1137
+ border: solid rgba(var(--color-sf-outline-variant));
1138
+ border-width: 0 1px 0 0;
1139
+ }
1140
+ .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
1141
+ background: rgba(var(--color-sf-on-surface), 0.05);
1142
+ color: rgba(var(--color-sf-on-surface-variant));
1143
+ border: solid rgba(var(--color-sf-outline-variant));
1144
+ border-width: 0 1px 0 0;
1145
+ }