@progress/kendo-theme-fluent 5.7.0

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 (427) hide show
  1. package/LICENSE.md +17 -0
  2. package/README.md +72 -0
  3. package/dist/all.scss +7 -0
  4. package/package.json +54 -0
  5. package/scss/action-buttons/_layout.scss +54 -0
  6. package/scss/action-buttons/_theme.scss +14 -0
  7. package/scss/action-buttons/_variables.scss +24 -0
  8. package/scss/action-buttons/index.scss +26 -0
  9. package/scss/action-sheet/_layout.scss +233 -0
  10. package/scss/action-sheet/_theme.scss +89 -0
  11. package/scss/action-sheet/_variables.scss +163 -0
  12. package/scss/action-sheet/index.scss +27 -0
  13. package/scss/all.scss +4 -0
  14. package/scss/appbar/_layout.scss +119 -0
  15. package/scss/appbar/_theme.scss +40 -0
  16. package/scss/appbar/_variables.scss +106 -0
  17. package/scss/appbar/index.scss +25 -0
  18. package/scss/autocomplete/_layout.scss +4 -0
  19. package/scss/autocomplete/_theme.scss +4 -0
  20. package/scss/autocomplete/_variables.scss +1 -0
  21. package/scss/autocomplete/index.scss +28 -0
  22. package/scss/avatar/_layout.scss +77 -0
  23. package/scss/avatar/_theme.scss +20 -0
  24. package/scss/avatar/_variables.scss +105 -0
  25. package/scss/avatar/index.scss +25 -0
  26. package/scss/badge/_layout.scss +155 -0
  27. package/scss/badge/_theme.scss +31 -0
  28. package/scss/badge/_variables.scss +159 -0
  29. package/scss/badge/index.scss +23 -0
  30. package/scss/bottom-navigation/_layout.scss +130 -0
  31. package/scss/bottom-navigation/_theme.scss +92 -0
  32. package/scss/bottom-navigation/_variables.scss +178 -0
  33. package/scss/bottom-navigation/index.scss +25 -0
  34. package/scss/breadcrumb/_layout.scss +132 -0
  35. package/scss/breadcrumb/_theme.scss +134 -0
  36. package/scss/breadcrumb/_variables.scss +170 -0
  37. package/scss/breadcrumb/index.scss +26 -0
  38. package/scss/button/_layout.scss +329 -0
  39. package/scss/button/_theme.scss +155 -0
  40. package/scss/button/_variables.scss +392 -0
  41. package/scss/button/index.scss +25 -0
  42. package/scss/calendar/_layout.scss +456 -0
  43. package/scss/calendar/_theme.scss +203 -0
  44. package/scss/calendar/_variables.scss +267 -0
  45. package/scss/calendar/index.scss +25 -0
  46. package/scss/captcha/_layout.scss +63 -0
  47. package/scss/captcha/_theme.scss +15 -0
  48. package/scss/captcha/_variables.scss +45 -0
  49. package/scss/captcha/index.scss +29 -0
  50. package/scss/card/_layout.scss +364 -0
  51. package/scss/card/_theme.scss +116 -0
  52. package/scss/card/_variables.scss +170 -0
  53. package/scss/card/index.scss +29 -0
  54. package/scss/checkbox/_layout.scss +248 -0
  55. package/scss/checkbox/_theme.scss +142 -0
  56. package/scss/checkbox/_variables.scss +234 -0
  57. package/scss/checkbox/index.scss +25 -0
  58. package/scss/chip/_layout.scss +156 -0
  59. package/scss/chip/_theme.scss +97 -0
  60. package/scss/chip/_variables.scss +210 -0
  61. package/scss/chip/index.scss +26 -0
  62. package/scss/color-preview/_layout.scss +78 -0
  63. package/scss/color-preview/_theme.scss +32 -0
  64. package/scss/color-preview/_variables.scss +36 -0
  65. package/scss/color-preview/index.scss +25 -0
  66. package/scss/coloreditor/_layout.scss +82 -0
  67. package/scss/coloreditor/_theme.scss +27 -0
  68. package/scss/coloreditor/_variables.scss +75 -0
  69. package/scss/coloreditor/index.scss +29 -0
  70. package/scss/colorgradient/_layout.scss +184 -0
  71. package/scss/colorgradient/_theme.scss +118 -0
  72. package/scss/colorgradient/_variables.scss +149 -0
  73. package/scss/colorgradient/index.scss +29 -0
  74. package/scss/colorpalette/_layout.scss +60 -0
  75. package/scss/colorpalette/_theme.scss +53 -0
  76. package/scss/colorpalette/_variables.scss +48 -0
  77. package/scss/colorpalette/index.scss +23 -0
  78. package/scss/colorpicker/_layout.scss +15 -0
  79. package/scss/colorpicker/_theme.scss +5 -0
  80. package/scss/colorpicker/_variables.scss +1 -0
  81. package/scss/colorpicker/index.scss +29 -0
  82. package/scss/combobox/_layout.scss +4 -0
  83. package/scss/combobox/_theme.scss +4 -0
  84. package/scss/combobox/_variables.scss +1 -0
  85. package/scss/combobox/index.scss +28 -0
  86. package/scss/core/_index.scss +33 -0
  87. package/scss/core/_layout.scss +13 -0
  88. package/scss/core/_theme.scss +9 -0
  89. package/scss/core/_variables.scss +132 -0
  90. package/scss/core/color-system/_index.scss +3 -0
  91. package/scss/core/color-system/_palettes.scss +316 -0
  92. package/scss/core/color-system/_variables.scss +169 -0
  93. package/scss/core/color-system/utils/_functions.scss +67 -0
  94. package/scss/core/color-system/utils/_index.scss +2 -0
  95. package/scss/core/color-system/utils/_mixins.scss +9 -0
  96. package/scss/core/functions/_index.scss +3 -0
  97. package/scss/core/functions/_strings.scss +35 -0
  98. package/scss/core/helpers/_animations.scss +708 -0
  99. package/scss/core/helpers/_asp-fallback.scss +4 -0
  100. package/scss/core/helpers/_base.scss +146 -0
  101. package/scss/core/helpers/_extra.scss +22 -0
  102. package/scss/core/helpers/_index.scss +11 -0
  103. package/scss/core/helpers/_layout.scss +64 -0
  104. package/scss/core/helpers/_loading.scss +120 -0
  105. package/scss/core/helpers/_normalize.scss +11 -0
  106. package/scss/core/helpers/_reset.scss +19 -0
  107. package/scss/core/helpers/_resizing.scss +120 -0
  108. package/scss/core/helpers/_selection.scss +27 -0
  109. package/scss/core/helpers/_spacer.scss +13 -0
  110. package/scss/core/mixins/_border-radius.scss +60 -0
  111. package/scss/core/mixins/_box-shadow.scss +7 -0
  112. package/scss/core/mixins/_decoration.scss +27 -0
  113. package/scss/core/mixins/_disabled.scss +10 -0
  114. package/scss/core/mixins/_hide-scrollbar.scss +13 -0
  115. package/scss/core/mixins/_index.scss +6 -0
  116. package/scss/core/mixins/_typography.scss +17 -0
  117. package/scss/core/module-system/_components.scss +144 -0
  118. package/scss/core/module-system/index.scss +38 -0
  119. package/scss/dataviz/_layout.scss +474 -0
  120. package/scss/dataviz/_theme.scss +150 -0
  121. package/scss/dataviz/_variables.scss +242 -0
  122. package/scss/dataviz/index.scss +27 -0
  123. package/scss/dateinput/_layout.scss +4 -0
  124. package/scss/dateinput/_theme.scss +4 -0
  125. package/scss/dateinput/_variables.scss +1 -0
  126. package/scss/dateinput/index.scss +24 -0
  127. package/scss/datepicker/_layout.scss +4 -0
  128. package/scss/datepicker/_theme.scss +4 -0
  129. package/scss/datepicker/_variables.scss +1 -0
  130. package/scss/datepicker/index.scss +28 -0
  131. package/scss/daterangepicker/_layout.scss +39 -0
  132. package/scss/daterangepicker/_theme.scss +28 -0
  133. package/scss/daterangepicker/_variables.scss +5 -0
  134. package/scss/daterangepicker/index.scss +28 -0
  135. package/scss/datetimepicker/_layout.scss +60 -0
  136. package/scss/datetimepicker/_theme.scss +4 -0
  137. package/scss/datetimepicker/_variables.scss +3 -0
  138. package/scss/datetimepicker/index.scss +30 -0
  139. package/scss/dialog/_layout.scss +71 -0
  140. package/scss/dialog/_theme.scss +21 -0
  141. package/scss/dialog/_variables.scss +46 -0
  142. package/scss/dialog/index.scss +25 -0
  143. package/scss/draggable/_layout.scss +66 -0
  144. package/scss/draggable/_theme.scss +21 -0
  145. package/scss/draggable/_variables.scss +72 -0
  146. package/scss/draggable/index.scss +23 -0
  147. package/scss/drawer/_layout.scss +271 -0
  148. package/scss/drawer/_theme.scss +94 -0
  149. package/scss/drawer/_variables.scss +132 -0
  150. package/scss/drawer/index.scss +26 -0
  151. package/scss/dropdowngrid/_layout.scss +13 -0
  152. package/scss/dropdowngrid/_theme.scss +5 -0
  153. package/scss/dropdowngrid/_variables.scss +1 -0
  154. package/scss/dropdowngrid/index.scss +33 -0
  155. package/scss/dropdownlist/_layout.scss +36 -0
  156. package/scss/dropdownlist/_theme.scss +9 -0
  157. package/scss/dropdownlist/_variables.scss +1 -0
  158. package/scss/dropdownlist/index.scss +29 -0
  159. package/scss/dropdowntree/_layout.scss +22 -0
  160. package/scss/dropdowntree/_theme.scss +6 -0
  161. package/scss/dropdowntree/_variables.scss +5 -0
  162. package/scss/dropdowntree/index.scss +28 -0
  163. package/scss/dropzone/_layout.scss +49 -0
  164. package/scss/dropzone/_theme.scss +35 -0
  165. package/scss/dropzone/_variables.scss +75 -0
  166. package/scss/dropzone/index.scss +25 -0
  167. package/scss/editor/_layout.scss +688 -0
  168. package/scss/editor/_theme.scss +101 -0
  169. package/scss/editor/_variables.scss +81 -0
  170. package/scss/editor/index.scss +32 -0
  171. package/scss/expansion-panel/_layout.scss +83 -0
  172. package/scss/expansion-panel/_theme.scss +69 -0
  173. package/scss/expansion-panel/_variables.scss +99 -0
  174. package/scss/expansion-panel/index.scss +24 -0
  175. package/scss/fab/_layout.scss +173 -0
  176. package/scss/fab/_theme.scss +201 -0
  177. package/scss/fab/_variables.scss +180 -0
  178. package/scss/fab/index.scss +28 -0
  179. package/scss/filemanager/_layout.scss +248 -0
  180. package/scss/filemanager/_theme.scss +110 -0
  181. package/scss/filemanager/_variables.scss +185 -0
  182. package/scss/filemanager/index.scss +35 -0
  183. package/scss/filter/_layout.scss +93 -0
  184. package/scss/filter/_theme.scss +25 -0
  185. package/scss/filter/_variables.scss +35 -0
  186. package/scss/filter/index.scss +31 -0
  187. package/scss/floating-label/_layout.scss +94 -0
  188. package/scss/floating-label/_theme.scss +31 -0
  189. package/scss/floating-label/_variables.scss +67 -0
  190. package/scss/floating-label/index.scss +24 -0
  191. package/scss/forms/_layout.scss +326 -0
  192. package/scss/forms/_theme.scss +44 -0
  193. package/scss/forms/_variables.scss +143 -0
  194. package/scss/forms/index.scss +30 -0
  195. package/scss/grid/_layout.scss +1268 -0
  196. package/scss/grid/_theme.scss +488 -0
  197. package/scss/grid/_variables.scss +476 -0
  198. package/scss/grid/index.scss +45 -0
  199. package/scss/icon/_layout.scss +60 -0
  200. package/scss/icon/_theme.scss +1 -0
  201. package/scss/icon/_variables.scss +18 -0
  202. package/scss/icon/index.scss +23 -0
  203. package/scss/imageeditor/_layout.scss +160 -0
  204. package/scss/imageeditor/_theme.scss +49 -0
  205. package/scss/imageeditor/_variables.scss +108 -0
  206. package/scss/imageeditor/index.scss +28 -0
  207. package/scss/index.scss +320 -0
  208. package/scss/input/_layout.scss +441 -0
  209. package/scss/input/_theme.scss +202 -0
  210. package/scss/input/_variables.scss +612 -0
  211. package/scss/input/index.scss +26 -0
  212. package/scss/list/_layout.scss +255 -0
  213. package/scss/list/_theme.scss +104 -0
  214. package/scss/list/_variables.scss +273 -0
  215. package/scss/list/index.scss +26 -0
  216. package/scss/listbox/_layout.scss +119 -0
  217. package/scss/listbox/_theme.scss +19 -0
  218. package/scss/listbox/_variables.scss +45 -0
  219. package/scss/listbox/index.scss +28 -0
  220. package/scss/listgroup/_layout.scss +189 -0
  221. package/scss/listgroup/_theme.scss +14 -0
  222. package/scss/listgroup/_variables.scss +36 -0
  223. package/scss/listgroup/index.scss +25 -0
  224. package/scss/listview/_layout.scss +149 -0
  225. package/scss/listview/_theme.scss +50 -0
  226. package/scss/listview/_variables.scss +91 -0
  227. package/scss/listview/index.scss +27 -0
  228. package/scss/loader/_layout.scss +458 -0
  229. package/scss/loader/_theme.scss +18 -0
  230. package/scss/loader/_variables.scss +143 -0
  231. package/scss/loader/index.scss +25 -0
  232. package/scss/map/_index.scss +26 -0
  233. package/scss/map/_layout.scss +134 -0
  234. package/scss/map/_theme.scss +32 -0
  235. package/scss/map/_variables.scss +88 -0
  236. package/scss/maskedtextbox/_layout.scss +6 -0
  237. package/scss/maskedtextbox/_theme.scss +6 -0
  238. package/scss/maskedtextbox/_variables.scss +1 -0
  239. package/scss/maskedtextbox/index.scss +26 -0
  240. package/scss/mediaplayer/_layout.scss +102 -0
  241. package/scss/mediaplayer/_theme.scss +29 -0
  242. package/scss/mediaplayer/_variables.scss +46 -0
  243. package/scss/mediaplayer/index.scss +27 -0
  244. package/scss/menu/_layout.scss +343 -0
  245. package/scss/menu/_theme.scss +97 -0
  246. package/scss/menu/_variables.scss +255 -0
  247. package/scss/menu/index.scss +29 -0
  248. package/scss/menu-button/_layout.scss +20 -0
  249. package/scss/menu-button/_theme.scss +1 -0
  250. package/scss/menu-button/_variables.scss +1 -0
  251. package/scss/menu-button/index.scss +26 -0
  252. package/scss/messagebox/_layout.scss +22 -0
  253. package/scss/messagebox/_theme.scss +44 -0
  254. package/scss/messagebox/_variables.scss +40 -0
  255. package/scss/messagebox/index.scss +23 -0
  256. package/scss/multiselect/_layout.scss +6 -0
  257. package/scss/multiselect/_theme.scss +6 -0
  258. package/scss/multiselect/_variables.scss +1 -0
  259. package/scss/multiselect/index.scss +31 -0
  260. package/scss/notification/_layout.scss +73 -0
  261. package/scss/notification/_theme.scss +55 -0
  262. package/scss/notification/_variables.scss +102 -0
  263. package/scss/notification/index.scss +26 -0
  264. package/scss/numerictextbox/_layout.scss +10 -0
  265. package/scss/numerictextbox/_theme.scss +6 -0
  266. package/scss/numerictextbox/_variables.scss +1 -0
  267. package/scss/numerictextbox/index.scss +27 -0
  268. package/scss/orgchart/_layout.scss +121 -0
  269. package/scss/orgchart/_theme.scss +60 -0
  270. package/scss/orgchart/_variables.scss +152 -0
  271. package/scss/orgchart/index.scss +34 -0
  272. package/scss/overlay/_layout.scss +15 -0
  273. package/scss/overlay/_theme.scss +14 -0
  274. package/scss/overlay/_variables.scss +12 -0
  275. package/scss/overlay/index.scss +23 -0
  276. package/scss/pager/_layout.scss +240 -0
  277. package/scss/pager/_theme.scss +130 -0
  278. package/scss/pager/_variables.scss +194 -0
  279. package/scss/pager/index.scss +29 -0
  280. package/scss/panelbar/_layout.scss +152 -0
  281. package/scss/panelbar/_theme.scss +245 -0
  282. package/scss/panelbar/_variables.scss +235 -0
  283. package/scss/panelbar/index.scss +26 -0
  284. package/scss/popover/_layout.scss +101 -0
  285. package/scss/popover/_theme.scss +41 -0
  286. package/scss/popover/_variables.scss +90 -0
  287. package/scss/popover/index.scss +27 -0
  288. package/scss/popup/_layout.scss +53 -0
  289. package/scss/popup/_theme.scss +14 -0
  290. package/scss/popup/_variables.scss +42 -0
  291. package/scss/popup/index.scss +23 -0
  292. package/scss/progressbar/_layout.scss +279 -0
  293. package/scss/progressbar/_theme.scss +93 -0
  294. package/scss/progressbar/_variables.scss +114 -0
  295. package/scss/progressbar/index.scss +23 -0
  296. package/scss/radio/_layout.scss +277 -0
  297. package/scss/radio/_theme.scss +125 -0
  298. package/scss/radio/_variables.scss +203 -0
  299. package/scss/radio/index.scss +26 -0
  300. package/scss/rating/_layout.scss +98 -0
  301. package/scss/rating/_theme.scss +46 -0
  302. package/scss/rating/_variables.scss +50 -0
  303. package/scss/rating/index.scss +25 -0
  304. package/scss/responsivepanel/_layout.scss +51 -0
  305. package/scss/responsivepanel/_theme.scss +5 -0
  306. package/scss/responsivepanel/_variables.scss +1 -0
  307. package/scss/responsivepanel/index.scss +25 -0
  308. package/scss/ripple/_layout.scss +53 -0
  309. package/scss/ripple/_theme.scss +5 -0
  310. package/scss/ripple/_variables.scss +1 -0
  311. package/scss/ripple/index.scss +23 -0
  312. package/scss/scheduler/_layout.scss +979 -0
  313. package/scss/scheduler/_theme.scss +249 -0
  314. package/scss/scheduler/_variables.scss +260 -0
  315. package/scss/scheduler/index.scss +34 -0
  316. package/scss/scroller/_layout.scss +84 -0
  317. package/scss/scroller/_theme.scss +8 -0
  318. package/scss/scroller/_variables.scss +1 -0
  319. package/scss/scroller/index.scss +23 -0
  320. package/scss/searchbox/_layout.scss +22 -0
  321. package/scss/searchbox/_theme.scss +9 -0
  322. package/scss/searchbox/_variables.scss +5 -0
  323. package/scss/searchbox/index.scss +27 -0
  324. package/scss/signature/_layout.scss +68 -0
  325. package/scss/signature/_theme.scss +13 -0
  326. package/scss/signature/_variables.scss +73 -0
  327. package/scss/signature/index.scss +26 -0
  328. package/scss/skeleton/_layout.scss +76 -0
  329. package/scss/skeleton/_theme.scss +22 -0
  330. package/scss/skeleton/_variables.scss +22 -0
  331. package/scss/skeleton/index.scss +23 -0
  332. package/scss/slider/_layout.scss +392 -0
  333. package/scss/slider/_theme.scss +76 -0
  334. package/scss/slider/_variables.scss +136 -0
  335. package/scss/slider/index.scss +27 -0
  336. package/scss/split-button/_layout.scss +58 -0
  337. package/scss/split-button/_theme.scss +5 -0
  338. package/scss/split-button/_variables.scss +24 -0
  339. package/scss/split-button/index.scss +26 -0
  340. package/scss/splitter/_layout.scss +208 -0
  341. package/scss/splitter/_theme.scss +36 -0
  342. package/scss/splitter/_variables.scss +66 -0
  343. package/scss/splitter/index.scss +25 -0
  344. package/scss/stepper/_layout.scss +251 -0
  345. package/scss/stepper/_theme.scss +189 -0
  346. package/scss/stepper/_variables.scss +200 -0
  347. package/scss/stepper/index.scss +26 -0
  348. package/scss/switch/_layout.scss +164 -0
  349. package/scss/switch/_theme.scss +171 -0
  350. package/scss/switch/_variables.scss +173 -0
  351. package/scss/switch/index.scss +23 -0
  352. package/scss/table/_layout.scss +289 -0
  353. package/scss/table/_theme.scss +106 -0
  354. package/scss/table/_variables.scss +169 -0
  355. package/scss/table/index.scss +30 -0
  356. package/scss/tabstrip/_layout.scss +428 -0
  357. package/scss/tabstrip/_theme.scss +102 -0
  358. package/scss/tabstrip/_variables.scss +145 -0
  359. package/scss/tabstrip/index.scss +27 -0
  360. package/scss/taskboard/_layout.scss +205 -0
  361. package/scss/taskboard/_theme.scss +83 -0
  362. package/scss/taskboard/_variables.scss +207 -0
  363. package/scss/taskboard/index.scss +31 -0
  364. package/scss/textarea/_layout.scss +6 -0
  365. package/scss/textarea/_theme.scss +6 -0
  366. package/scss/textarea/_variables.scss +0 -0
  367. package/scss/textarea/index.scss +25 -0
  368. package/scss/textbox/_layout.scss +6 -0
  369. package/scss/textbox/_theme.scss +6 -0
  370. package/scss/textbox/_variables.scss +1 -0
  371. package/scss/textbox/index.scss +25 -0
  372. package/scss/tilelayout/_layout.scss +39 -0
  373. package/scss/tilelayout/_theme.scss +18 -0
  374. package/scss/tilelayout/_variables.scss +24 -0
  375. package/scss/tilelayout/index.scss +25 -0
  376. package/scss/timepicker/_layout.scss +6 -0
  377. package/scss/timepicker/_theme.scss +6 -0
  378. package/scss/timepicker/_variables.scss +1 -0
  379. package/scss/timepicker/index.scss +28 -0
  380. package/scss/timeselector/_layout.scss +237 -0
  381. package/scss/timeselector/_theme.scss +66 -0
  382. package/scss/timeselector/_variables.scss +130 -0
  383. package/scss/timeselector/index.scss +27 -0
  384. package/scss/toolbar/_layout.scss +214 -0
  385. package/scss/toolbar/_theme.scss +66 -0
  386. package/scss/toolbar/_variables.scss +40 -0
  387. package/scss/toolbar/index.scss +28 -0
  388. package/scss/tooltip/_layout.scss +108 -0
  389. package/scss/tooltip/_theme.scss +42 -0
  390. package/scss/tooltip/_variables.scss +98 -0
  391. package/scss/tooltip/index.scss +26 -0
  392. package/scss/treelist/_layout.scss +92 -0
  393. package/scss/treelist/_theme.scss +14 -0
  394. package/scss/treelist/_variables.scss +9 -0
  395. package/scss/treelist/index.scss +26 -0
  396. package/scss/treeview/_layout.scss +160 -0
  397. package/scss/treeview/_theme.scss +102 -0
  398. package/scss/treeview/_variables.scss +164 -0
  399. package/scss/treeview/index.scss +26 -0
  400. package/scss/typography/_layout.scss +110 -0
  401. package/scss/typography/_theme.scss +15 -0
  402. package/scss/typography/_variables.scss +126 -0
  403. package/scss/typography/index.scss +23 -0
  404. package/scss/upload/_layout.scss +275 -0
  405. package/scss/upload/_theme.scss +111 -0
  406. package/scss/upload/_variables.scss +107 -0
  407. package/scss/upload/index.scss +29 -0
  408. package/scss/utils/_layout.scss +7 -0
  409. package/scss/utils/_theme.scss +1 -0
  410. package/scss/utils/_variables.scss +13 -0
  411. package/scss/utils/index.scss +23 -0
  412. package/scss/validator/_layout.scss +19 -0
  413. package/scss/validator/_theme.scss +5 -0
  414. package/scss/validator/_variables.scss +1 -0
  415. package/scss/validator/index.scss +26 -0
  416. package/scss/virtual-scroller/_layout.scss +37 -0
  417. package/scss/virtual-scroller/_theme.scss +5 -0
  418. package/scss/virtual-scroller/_variables.scss +1 -0
  419. package/scss/virtual-scroller/index.scss +23 -0
  420. package/scss/window/_layout.scss +162 -0
  421. package/scss/window/_theme.scss +31 -0
  422. package/scss/window/_variables.scss +107 -0
  423. package/scss/window/index.scss +28 -0
  424. package/scss/wizard/_layout.scss +128 -0
  425. package/scss/wizard/_theme.scss +21 -0
  426. package/scss/wizard/_variables.scss +54 -0
  427. package/scss/wizard/index.scss +27 -0
package/scss/panelbar/_layout.scss ADDED
@@ -0,0 +1,152 @@
1
+ @use "_variables.scss" as *;
2
+ @use "../core/color-system" as *;
3
+ @use "../core/variables" as *;
4
+
5
+ @mixin kendo-panelbar--layout() {
6
+
7
+ .k-panelbar {
8
+ margin: 0;
9
+ padding: 0;
10
+ border-width: var( --kendo-panelbar-border-width, #{$kendo-panelbar-border-width} );
11
+ border-style: var( --kendo-panelbar-border-style, #{$kendo-panelbar-border-style} );
12
+ box-sizing: border-box;
13
+ outline: 0;
14
+ font-family: var( --kendo-panelbar-font-family, #{$kendo-panelbar-font-family} );
15
+ font-size: var( --kendo-panelbar-font-size, #{$kendo-panelbar-font-size} );
16
+ line-height: var( --kendo-panelbar-line-height, #{$kendo-panelbar-line-height} );
17
+ list-style: none;
18
+ display: block;
19
+ -webkit-touch-callout: none;
20
+ -webkit-tap-highlight-color: $rgba-transparent;
21
+
22
+ *,
23
+ *::before,
24
+ *::after {
25
+ box-sizing: border-box;
26
+ }
27
+
28
+
29
+ // Root
30
+ > .k-item,
31
+ > .k-panelbar-header {
32
+ // TODO
33
+ border-width: 0;
34
+ border-style: var( --kendo-panelbar-item-border-style, #{$kendo-panelbar-item-border-style} );
35
+ border-color: inherit;
36
+ display: block;
37
+
38
+ > .k-link {
39
+ padding-inline-start: var( --kendo-panelbar-header-padding-x-start, #{$kendo-panelbar-header-padding-x-start} );
40
+ padding-inline-end: var( --kendo-panelbar-header-padding-x-end, #{$kendo-panelbar-header-padding-x-end} );
41
+ padding-block: var( --kendo-panelbar-header-padding-y, #{$kendo-panelbar-header-padding-y} );
42
+ color: inherit;
43
+ background: none;
44
+ text-decoration: none;
45
+ display: flex;
46
+ flex-flow: row nowrap;
47
+ gap: var( --kendo-icon-spacing, .5rem );
48
+ align-items: center;
49
+ align-content: center;
50
+ position: relative;
51
+ user-select: none;
52
+ cursor: default;
53
+ transition: var( --kendo-transition, none );
54
+
55
+ &.k-selected {
56
+ font-weight: var( --kendo-font-weight-bold, #{$kendo-font-weight-bold} );
57
+
58
+ &:before {
59
+ content: '';
60
+ width: 2px;
61
+ height: 100%;
62
+ position: absolute;
63
+ inset-inline-start: 0;
64
+ }
65
+ }
66
+ }
67
+ }
68
+
69
+ > .k-item + .k-item,
70
+ > .k-panelbar-header + .k-panelbar-header {
71
+ border-top-width: var( --kendo-panelbar-item-border-width, #{$kendo-panelbar-item-border-width} );
72
+ }
73
+
74
+ // Absolute positioning should be applied only if the icon is a first child
75
+ .k-panelbar-item-icon:first-child {
76
+ position: absolute;
77
+ inset-inline-start: var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} );
78
+ }
79
+
80
+
81
+ // Sub
82
+ .k-group,
83
+ .k-panelbar-group {
84
+ margin: 0;
85
+ padding: 0;
86
+ border-width: 0;
87
+ border-color: inherit;
88
+ color: inherit;
89
+ background-color: transparent;
90
+ list-style: none;
91
+ }
92
+
93
+ .k-group > .k-item,
94
+ .k-panelbar-group > .k-panelbar-item {
95
+ display: block;
96
+
97
+ > .k-link {
98
+ padding-inline-start: var( --kendo-panelbar-item-padding-x-start, #{$kendo-panelbar-item-padding-x-start} );
99
+ padding-inline-end: var( --kendo-panelbar-item-padding-x-end, #{$kendo-panelbar-item-padding-x-end} );
100
+ padding-block: var( --kendo-panelbar-item-padding-y, #{$kendo-panelbar-item-padding-y} );
101
+ color: inherit;
102
+ text-decoration: none;
103
+ display: flex;
104
+ flex-flow: row nowrap;
105
+ gap: var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} );
106
+ align-items: center;
107
+ align-content: center;
108
+ position: relative;
109
+ user-select: none;
110
+ cursor: default;
111
+ transition: var( --kendo-transition, #{$kendo-transition} );
112
+
113
+ &.k-selected {
114
+ font-weight: var( --kendo-font-weight-bold, #{$kendo-font-weight-bold} );
115
+
116
+ &:before {
117
+ content: '';
118
+ width: 2px;
119
+ height: 100%;
120
+ position: absolute;
121
+ inset-inline-start: 0;
122
+ }
123
+ }
124
+ }
125
+
126
+ // Hierarchy items
127
+ @for $i from 1 through $kendo-panelbar-item-level-count {
128
+ &.k-level-#{$i} {
129
+ .k-link {
130
+ padding-inline-start: calc( var( --kendo-panelbar-item-padding-x-start, #{$kendo-panelbar-item-padding-x-start} ) + calc( var( --kendo-padding-x-lg, #{$kendo-padding-x-lg} ) * #{$i} ));
131
+ }
132
+
133
+ .k-panelbar-item-icon:first-child {
134
+ inset-inline-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) + calc( var( --kendo-padding-x-lg, #{$kendo-padding-x-lg} ) * #{$i} ));
135
+ }
136
+ }
137
+ }
138
+ }
139
+
140
+ // Panelbar content
141
+ .k-panelbar-content {
142
+ display: flow-root;
143
+ }
144
+
145
+ // Toggle icon
146
+ .k-panelbar-expand,
147
+ .k-panelbar-collapse,
148
+ .k-panelbar-toggle {
149
+ margin-inline-start: auto;
150
+ }
151
+ }
152
+ }
package/scss/panelbar/_theme.scss ADDED
@@ -0,0 +1,245 @@
1
+ @use "_variables.scss" as *;
2
+ @use "../core/mixins" as *;
3
+
4
+ @mixin kendo-panelbar--theme() {
5
+ .k-panelbar {
6
+ @include fill(
7
+ var( --kendo-panelbar-text, #{$kendo-panelbar-text} ),
8
+ var( --kendo-panelbar-bg, #{$kendo-panelbar-bg} ),
9
+ var( --kendo-panelbar-border, #{$kendo-panelbar-border} )
10
+ );
11
+
12
+
13
+ // Root
14
+ > .k-item,
15
+ > .k-panelbar-header {
16
+
17
+ &.k-expanded.k-level-0 > .k-link {
18
+ --INTERNAL--kendo-panelbar-header-text: var( --kendo-panelbar-header-expanded-text, #{$kendo-panelbar-header-expanded-text} );
19
+ --INTERNAL--kendo-panelbar-header-bg: var( --kendo-panelbar-header-expanded-bg, #{$kendo-panelbar-header-expanded-bg} );
20
+ --INTERNAL--kendo-panelbar-header-border: var( --kendo-panelbar-header-expanded-bg, #{$kendo-panelbar-header-expanded-bg} );
21
+
22
+ // Hover
23
+ &:hover,
24
+ &.k-hover {
25
+ --INTERNAL--kendo-panelbar-header-text: var( --kendo-panelbar-header-hovered-text, #{$kendo-panelbar-header-hovered-text} );
26
+ --INTERNAL--kendo-panelbar-header-bg: var( --kendo-panelbar-header-hovered-bg, #{$kendo-panelbar-header-hovered-bg} );
27
+ --INTERNAL--kendo-panelbar-header-border: var( --kendo-panelbar-header-hovered-border, #{$kendo-panelbar-header-hovered-border} );
28
+ }
29
+
30
+ &.k-selected {
31
+ --INTERNAL--kendo-panelbar-header-text: var( --kendo-panelbar-header-selected-text, #{$kendo-panelbar-header-selected-text} );
32
+ --INTERNAL--kendo-panelbar-header-bg: var( --kendo-panelbar-header-selected-bg, #{$kendo-panelbar-header-selected-bg} );
33
+ --INTERNAL--kendo-panelbar-header-border: var( --kendo-panelbar-header-selected-border, #{$kendo-panelbar-header-selected-border} );
34
+ }
35
+ }
36
+
37
+ // Normal
38
+ > .k-link {
39
+ --INTERNAL--kendo-panelbar-header-text: var( --kendo-panelbar-header-text, #{$kendo-panelbar-header-text} );
40
+ --INTERNAL--kendo-panelbar-header-bg: var( --kendo-panelbar-header-bg, #{$kendo-panelbar-header-bg} );
41
+ --INTERNAL--kendo-panelbar-header-border: var( --kendo-panelbar-header-border, #{$kendo-panelbar-header-border} );
42
+
43
+ @include fill(
44
+ var( --INTERNAL--kendo-panelbar-header-text, inherit ),
45
+ var( --INTERNAL--kendo-panelbar-header-bg, inherit ),
46
+ var( --INTERNAL--kendo-panelbar-header-border, inherit )
47
+ );
48
+
49
+ .k-icon,
50
+ .k-panelbar-item-icon {
51
+ color: var( --kendo-panelbar-text, #{$kendo-panelbar-text} );
52
+ }
53
+
54
+ // Hover
55
+ &:hover,
56
+ &.k-hover {
57
+ --INTERNAL--kendo-panelbar-header-text: var( --kendo-panelbar-header-hovered-text, #{$kendo-panelbar-header-hovered-text} );
58
+ --INTERNAL--kendo-panelbar-header-bg: var( --kendo-panelbar-header-hovered-bg, #{$kendo-panelbar-header-hovered-bg} );
59
+ --INTERNAL--kendo-panelbar-header-border: var( --kendo-panelbar-header-hovered-border, #{$kendo-panelbar-header-hovered-border} );
60
+ }
61
+
62
+ // Focus
63
+ &:focus,
64
+ &.k-focus {
65
+ --INTERNAL--kendo-panelbar-header-text: var( --kendo-panelbar-header-focused-text, #{$kendo-panelbar-header-focused-text} );
66
+ --INTERNAL--kendo-panelbar-header-bg: var( --kendo-panelbar-header-focused-bg, #{$kendo-panelbar-header-focused-bg} );
67
+ --INTERNAL--kendo-panelbar-header-border: var( --kendo-panelbar-header-focused-border, #{$kendo-panelbar-header-focused-border} );
68
+
69
+ box-shadow: var( --kendo-panelbar-header-focused-shadow, #{$kendo-panelbar-header-focused-shadow} );
70
+
71
+ // Focus & Hover
72
+ &:hover,
73
+ &.k-hover {
74
+ --INTERNAL--kendo-panelbar-header-text: var( --kendo-panelbar-header-hovered-focused-text, #{$kendo-panelbar-header-hovered-focused-text} );
75
+ --INTERNAL--kendo-panelbar-header-bg: var( --kendo-panelbar-header-hovered-focused-bg, #{$kendo-panelbar-header-hovered-focused-bg} );
76
+ --INTERNAL--kendo-panelbar-header-border: var( --kendo-panelbar-header-hovered-focused-border, #{$kendo-panelbar-header-hovered-focused-border} );
77
+ }
78
+ }
79
+
80
+ // Selected
81
+ &.k-selected {
82
+ --INTERNAL--kendo-panelbar-header-text: var( --kendo-panelbar-header-selected-text, #{$kendo-panelbar-header-selected-text} );
83
+ --INTERNAL--kendo-panelbar-header-bg: var( --kendo-panelbar-header-selected-bg, #{$kendo-panelbar-header-selected-bg} );
84
+ --INTERNAL--kendo-panelbar-header-border: var( --kendo-panelbar-header-selected-border, #{$kendo-panelbar-header-selected-border} );
85
+
86
+ .k-icon,
87
+ .k-panelbar-item-icon {
88
+ color: inherit;
89
+ }
90
+
91
+ &:before {
92
+ background-color: var( --kendo-panelbar-selected-marker, #{$kendo-panelbar-selected-marker} );
93
+ }
94
+
95
+ // Selected Hover
96
+ &:hover,
97
+ &.k-hover {
98
+ --INTERNAL--kendo-panelbar-header-text: var( --kendo-panelbar-header-selected-hovered-text, #{$kendo-panelbar-header-selected-hovered-text} );
99
+ --INTERNAL--kendo-panelbar-header-bg: var( --kendo-panelbar-header-selected-hovered-bg, #{$kendo-panelbar-header-selected-hovered-bg} );
100
+ --INTERNAL--kendo-panelbar-header-border: var( --kendo-panelbar-header-selected-hovered-border, #{$kendo-panelbar-header-selected-hovered-border} );
101
+ }
102
+
103
+ // Selected Focus
104
+ &:focus,
105
+ &.k-focus {
106
+ --INTERNAL--kendo-panelbar-header-text: var( --kendo-panelbar-header-selected-focused-text, #{$kendo-panelbar-header-selected-focused-text} );
107
+ --INTERNAL--kendo-panelbar-header-bg: var( --kendo-panelbar-header-selected-focused-bg, #{$kendo-panelbar-header-selected-focused-bg} );
108
+ --INTERNAL--kendo-panelbar-header-border: var( --kendo-panelbar-header-selected-focused-border, #{$kendo-panelbar-header-selected-focused-border} );
109
+
110
+ // Selected Focus & Hover
111
+ &:hover,
112
+ &.k-hover {
113
+ --INTERNAL--kendo-panelbar-header-text: var( --kendo-panelbar-header-selected-hovered-focused-text, #{$kendo-panelbar-header-selected-hovered-focused-text} );
114
+ --INTERNAL--kendo-panelbar-header-bg: var( --kendo-panelbar-header-selected-hovered-focused-bg, #{$kendo-panelbar-header-selected-hovered-focused-bg} );
115
+ --INTERNAL--kendo-panelbar-header-border: var( --kendo-panelbar-header-selected-hovered-focused-border, #{$kendo-panelbar-header-selected-hovered-focused-border} );
116
+ }
117
+ }
118
+ }
119
+
120
+ &:disabled,
121
+ &.k-disabled {
122
+ --INTERNAL--kendo-panelbar-header-text: var( --kendo-disabled-text, inherit );
123
+
124
+ .k-icon,
125
+ .k-panelbar-item-icon {
126
+ color: inherit;
127
+ }
128
+ }
129
+ }
130
+
131
+ &:disabled,
132
+ &.k-disabled {
133
+ background-color: transparent;
134
+
135
+ > .k-link {
136
+ --INTERNAL--kendo-panelbar-header-text: var( --kendo-disabled-text, inherit );
137
+ }
138
+
139
+ .k-icon,
140
+ .k-panelbar-item-icon {
141
+ color: inherit;
142
+ }
143
+ }
144
+ }
145
+
146
+
147
+ // Sub
148
+
149
+ .k-group > .k-item,
150
+ .k-panelbar-group > .k-panelbar-item {
151
+
152
+ > .k-link {
153
+
154
+ @include fill(
155
+ var( --INTERNAL--kendo-panelbar-item-text, inherit ),
156
+ var( --INTERNAL--kendo-panelbar-item-bg, inherit ),
157
+ var( --INTERNAL--kendo-panelbar-item-border, inherit )
158
+ );
159
+
160
+ .k-icon,
161
+ .k-panelbar-item-icon {
162
+ color: var( --kendo-panelbar-text, #{$kendo-panelbar-text} );
163
+ }
164
+
165
+ &:hover,
166
+ &.k-hover {
167
+ --INTERNAL--kendo-panelbar-item-text: var( --kendo-panelbar-item-hovered-text, #{$kendo-panelbar-item-hovered-text} );
168
+ --INTERNAL--kendo-panelbar-item-bg: var( --kendo-panelbar-item-hovered-bg, #{$kendo-panelbar-item-hovered-bg} );
169
+ --INTERNAL--kendo-panelbar-item-border: var( --kendo-panelbar-item-hovered-border, #{$kendo-panelbar-item-hovered-border} );
170
+ }
171
+
172
+ &:focus,
173
+ &.k-focus {
174
+ --INTERNAL--kendo-panelbar-item-text: var( --kendo-panelbar-item-focused-text, #{$kendo-panelbar-item-focused-text} );
175
+ --INTERNAL--kendo-panelbar-item-bg: var( --kendo-panelbar-item-focused-bg, #{$kendo-panelbar-item-focused-bg} );
176
+ --INTERNAL--kendo-panelbar-item-border: var( --kendo-panelbar-item-focused-border, #{$kendo-panelbar-item-focused-border} );
177
+
178
+ box-shadow: var( --kendo-panelbar-item-focused-shadow, #{$kendo-panelbar-item-focused-shadow} );
179
+
180
+ &:hover,
181
+ &.k-hover {
182
+ --INTERNAL--kendo-panelbar-item-text: var( --kendo-panelbar-item-hovered-focused-text, #{$kendo-panelbar-item-hovered-focused-text} );
183
+ --INTERNAL--kendo-panelbar-item-bg: var( --kendo-panelbar-item-hovered-focused-bg, #{$kendo-panelbar-item-hovered-focused-bg} );
184
+ --INTERNAL--kendo-panelbar-item-border: var( --kendo-panelbar-item-hovered-focused-border, #{$kendo-panelbar-item-hovered-focused-border} );
185
+ }
186
+ }
187
+
188
+ &.k-selected {
189
+ --INTERNAL--kendo-panelbar-item-text: var( --kendo-panelbar-item-selected-text, #{$kendo-panelbar-item-selected-text} );
190
+ --INTERNAL--kendo-panelbar-item-bg: var( --kendo-panelbar-item-selected-bg, #{$kendo-panelbar-item-selected-bg} );
191
+ --INTERNAL--kendo-panelbar-item-border: var( --kendo-panelbar-item-selected-border, #{$kendo-panelbar-item-selected-border} );
192
+
193
+ &:before {
194
+ background-color: var( --kendo-panelbar-selected-marker, #{$kendo-panelbar-selected-marker} );
195
+ }
196
+
197
+ &:hover,
198
+ &.k-hover {
199
+ --INTERNAL--kendo-panelbar-item-text: var( --kendo-panelbar-item-selected-hovered-text, #{$kendo-panelbar-item-selected-hovered-text} );
200
+ --INTERNAL--kendo-panelbar-item-bg: var( --kendo-panelbar-item-selected-hovered-bg, #{$kendo-panelbar-item-selected-hovered-bg} );
201
+ --INTERNAL--kendo-panelbar-item-border: var( --kendo-panelbar-item-selected-hovered-border, #{$kendo-panelbar-item-selected-hovered-border} );
202
+ }
203
+
204
+ &:focus,
205
+ &.k-focus {
206
+ --INTERNAL--kendo-panelbar-item-text: var( --kendo-panelbar-item-selected-focused-text, #{$kendo-panelbar-item-selected-focused-text} );
207
+ --INTERNAL--kendo-panelbar-item-bg: var( --kendo-panelbar-item-selected-focused-bg, #{$kendo-panelbar-item-selected-focused-bg} );
208
+ --INTERNAL--kendo-panelbar-item-border: var( --kendo-panelbar-item-selected-focused-border, #{$kendo-panelbar-item-selected-focused-border} );
209
+
210
+ // Selected Focus & Hover
211
+ &:hover,
212
+ &.k-hover {
213
+ --INTERNAL--kendo-panelbar-item-text: var( --kendo-panelbar-item-selected-hovered-focused-text, #{$kendo-panelbar-item-selected-hovered-focused-text} );
214
+ --INTERNAL--kendo-panelbar-item-bg: var( --kendo-panelbar-item-selected-hovered-focused-bg, #{$kendo-panelbar-item-selected-hovered-focused-bg} );
215
+ --INTERNAL--kendo-panelbar-item-border: var( --kendo-panelbar-item-selected-hovered-focused-border, #{$kendo-panelbar-item-selected-hovered-focused-border} );
216
+ }
217
+ }
218
+ }
219
+
220
+ &.k-disabled {
221
+ --INTERNAL--kendo-panelbar-item-text: var( --kendo-disabled-text, inherit );
222
+
223
+ .k-icon,
224
+ .k-panelbar-item-icon {
225
+ color: inherit;
226
+ }
227
+ }
228
+ }
229
+
230
+ &:disabled,
231
+ &.k-disabled {
232
+ background-color: transparent;
233
+
234
+ > .k-link {
235
+ --INTERNAL--kendo-panelbar-item-text: var( --kendo-disabled-text, inherit );
236
+ }
237
+
238
+ .k-icon,
239
+ .k-panelbar-item-icon {
240
+ color: inherit;
241
+ }
242
+ }
243
+ }
244
+ }
245
+ }
package/scss/panelbar/_variables.scss ADDED
@@ -0,0 +1,235 @@
1
+ @use "../core/color-system" as *;
2
+ @use "../core/variables" as *;
3
+ @use "../list/variables" as *;
4
+
5
+ /// Horizontal padding of the panelbar.
6
+ /// @group panelbar
7
+ $kendo-panelbar-padding-x: 0px !default;
8
+ /// Vertical padding of the panelbar.
9
+ /// @group panelbar
10
+ $kendo-panelbar-padding-y: 0px !default;
11
+ /// Font family of the panelbar.
12
+ /// @group panelbar
13
+ $kendo-panelbar-font-family: var( --kendo-font-family, inherit ) !default;
14
+ /// Font size of the panelbar.
15
+ /// @group panelbar
16
+ $kendo-panelbar-font-size: var( --kendo-font-size, inherit ) !default;
17
+ /// Line height of the panelbar.
18
+ /// @group panelbar
19
+ $kendo-panelbar-line-height: var( --kendo-line-height, inherit ) !default;
20
+ /// Width of the border around the panelbar.
21
+ /// @group panelbar
22
+ $kendo-panelbar-border-width: 1px !default;
23
+ /// Border style around the the panelbar.
24
+ /// @group panelbar
25
+ $kendo-panelbar-border-style: solid !default;
26
+
27
+ /// Width of the border around the panelbar items.
28
+ /// @group panelbar
29
+ $kendo-panelbar-item-border-width: 0 !default;
30
+ /// Style of the border around the panelbar items.
31
+ /// @group panelbar
32
+ $kendo-panelbar-item-border-style: solid !default;
33
+
34
+ /// Spacing around the icon of the panelbar items.
35
+ /// @group panelbar
36
+ $kendo-panelbar-icon-spacing: map-get( $kendo-spacing, 2 ) !default;
37
+
38
+ /// Horizontal padding of the panelbar header.
39
+ /// @group panelbar
40
+ $kendo-panelbar-header-padding-x-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) ) !default;
41
+ $kendo-panelbar-header-padding-x-end: map-get( $kendo-spacing, 2) !default;
42
+ /// Vertical padding of the panelbar header.
43
+ /// @group panelbar
44
+ $kendo-panelbar-header-padding-y: map-get( $kendo-spacing, 3 ) !default;
45
+
46
+ /// Horizontal padding of the panelbar items.
47
+ /// @group panelbar
48
+ $kendo-panelbar-item-padding-x-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) ) !default;
49
+ $kendo-panelbar-item-padding-x-end: map-get( $kendo-spacing, 2) !default;
50
+ /// Vertical padding of the panelbar items.
51
+ /// @group panelbar
52
+ $kendo-panelbar-item-padding-y: map-get( $kendo-spacing, 3 ) !default;
53
+
54
+ /// Maximum nesting of the panelbar items.
55
+ /// @group panelbar
56
+ $kendo-panelbar-item-level-count: 4 !default;
57
+
58
+ /// Background color of the panelbar.
59
+ /// @group panelbar
60
+ $kendo-panelbar-bg: var( --kendo-component-bg, initial ) !default;
61
+ /// Text color of the panelbar.
62
+ /// @group panelbar
63
+ $kendo-panelbar-text: var( --kendo-component-text, initial ) !default;
64
+ /// Border color of the panelbar.
65
+ /// @group panelbar
66
+ $kendo-panelbar-border: var( --kendo-component-border, initial ) !default;
67
+
68
+ /// Background color of the panelbar header.
69
+ /// @group panelbar
70
+ $kendo-panelbar-header-bg: var( --kendo-panelbar-bg, #{$kendo-panelbar-bg} ) !default;
71
+ /// Text color of the panelbar header.
72
+ /// @group panelbar
73
+ $kendo-panelbar-header-text: var( --kendo-panelbar-text, #{$kendo-panelbar-text} ) !default;
74
+ /// Border color of the panelbar header.
75
+ /// @group panelbar
76
+ $kendo-panelbar-header-border: inherit !default;
77
+
78
+ /// Background color of the panelbar header when hovered.
79
+ /// @group panelbar
80
+ $kendo-panelbar-header-hovered-bg: var( --kendo-hover-bg, inherit ) !default;
81
+ /// Text color of the panelbar header when hovered.
82
+ /// @group panelbar
83
+ $kendo-panelbar-header-hovered-text: get-theme-color-var( primary-110 ) !default;
84
+ /// Border color of the panelbar header when hovered.
85
+ /// @group panelbar
86
+ $kendo-panelbar-header-hovered-border: inherit !default;
87
+
88
+ /// Background color of the panelbar header when focused.
89
+ /// @group panelbar
90
+ $kendo-panelbar-header-focused-bg: inherit !default;
91
+ /// Text color of the panelbar header when focused.
92
+ /// @group panelbar
93
+ $kendo-panelbar-header-focused-text: inherit !default;
94
+ /// Border color of the panelbar header when focused.
95
+ /// @group panelbar
96
+ $kendo-panelbar-header-focused-border: inherit !default;
97
+ /// Shadow of the panelbar header when focused.
98
+ /// @group panelbar
99
+ $kendo-panelbar-header-focused-shadow: $kendo-list-item-focus-shadow !default;
100
+
101
+ /// Background color of the panelbar header when focused and hovered.
102
+ /// @group panelbar
103
+ $kendo-panelbar-header-hovered-focused-bg: $kendo-panelbar-header-hovered-bg !default;
104
+ /// Text color of the panelbar header when focused and hovered.
105
+ /// @group panelbar
106
+ $kendo-panelbar-header-hovered-focused-text: $kendo-panelbar-header-hovered-text !default;
107
+ /// Border color of the panelbar header when focused and hovered.
108
+ /// @group panelbar
109
+ $kendo-panelbar-header-hovered-focused-border: null !default;
110
+
111
+ /// Background color of the panelbar header when selected.
112
+ /// @group panelbar
113
+ $kendo-panelbar-header-selected-bg: var( --kendo-selected-bg, inherit ) !default;
114
+ /// Text color of the panelbar header when selected.
115
+ /// @group panelbar
116
+ $kendo-panelbar-header-selected-text: $black !default;
117
+ /// Border color of the panelbar header when selected.
118
+ /// @group panelbar
119
+ $kendo-panelbar-header-selected-border: inherit !default;
120
+ /// Color of the marker of the panelbar header when selected.
121
+ /// @group panelbar
122
+ $kendo-panelbar-selected-marker: get-theme-color-var( primary-100 ) !default;
123
+
124
+ /// Background color of the panelbar header when selected and hovered.
125
+ /// @group panelbar
126
+ $kendo-panelbar-header-selected-hovered-bg: $kendo-panelbar-header-selected-bg default;
127
+ /// Text color of the panelbar header when selected and hovered.
128
+ /// @group panelbar
129
+ $kendo-panelbar-header-selected-hovered-text: $kendo-panelbar-header-hovered-text !default;
130
+ /// Border color of the panelbar header when selected and hovered.
131
+ /// @group panelbar
132
+ $kendo-panelbar-header-selected-hovered-border: inherit !default;
133
+
134
+ /// Background color of the panelbar header when selected and focused.
135
+ /// @group panelbar
136
+ $kendo-panelbar-header-selected-focused-bg: $kendo-panelbar-header-selected-bg !default;
137
+ /// Text color of the panelbar header when selected and focused.
138
+ /// @group panelbar
139
+ $kendo-panelbar-header-selected-focused-text: $kendo-panelbar-header-selected-text !default;
140
+ /// Border color of the panelbar header when selected and focused.
141
+ /// @group panelbar
142
+ $kendo-panelbar-header-selected-focused-border: inherit !default;
143
+
144
+ /// Background color of the panelbar header when selected, focused and hovered.
145
+ /// @group panelbar
146
+ $kendo-panelbar-header-selected-hovered-focused-bg: $kendo-panelbar-header-selected-hovered-bg !default;
147
+ /// Text color of the panelbar header when selected, focused and hovered.
148
+ /// @group panelbar
149
+ $kendo-panelbar-header-selected-hovered-focused-text: $kendo-panelbar-header-selected-hovered-text !default;
150
+ /// Border color of the panelbar header when selected, focused and hovered.
151
+ /// @group panelbar
152
+ $kendo-panelbar-header-selected-hovered-focused-border: inherit !default;
153
+
154
+ /// Background color of the panelbar header when expanded.
155
+ /// @group panelbar
156
+ $kendo-panelbar-header-expanded-bg: inherit !default;
157
+ /// Text color of the panelbar header when expanded.
158
+ /// @group panelbar
159
+ $kendo-panelbar-header-expanded-text: inherit !default;
160
+ /// Border color of the panelbar header when expanded.
161
+ /// @group panelbar
162
+ $kendo-panelbar-header-expanded-border: inherit !default;
163
+
164
+ /// Background color of the panelbar item when hovered.
165
+ /// @group panelbar
166
+ $kendo-panelbar-item-hovered-bg: var( --kendo-hover-bg, inherit ) !default;
167
+ /// Text color of the panelbar item when hovered.
168
+ /// @group panelbar
169
+ $kendo-panelbar-item-hovered-text: get-theme-color-var( primary-110 ) !default;
170
+ /// Border color of the panelbar item when hovered.
171
+ /// @group panelbar
172
+ $kendo-panelbar-item-hovered-border: inherit !default;
173
+
174
+ /// Background color of the panelbar item when focused.
175
+ /// @group panelbar
176
+ $kendo-panelbar-item-focused-bg: inherit !default;
177
+ /// Text color of the panelbar item when focused.
178
+ /// @group panelbar
179
+ $kendo-panelbar-item-focused-text: inherit !default;
180
+ /// Border color of the panelbar item when focused.
181
+ /// @group panelbar
182
+ $kendo-panelbar-item-focused-border: inherit !default;
183
+ /// Box shadow of the panelbar item when focused.
184
+ /// @group panelbar
185
+ $kendo-panelbar-item-focused-shadow: $kendo-list-item-focus-shadow !default;
186
+
187
+ /// Background color of the panelbar item when focused and hovered.
188
+ /// @group panelbar
189
+ $kendo-panelbar-item-hovered-focused-bg: $kendo-panelbar-item-hovered-bg !default;
190
+ /// Text color of the panelbar item when focused and hovered.
191
+ /// @group panelbar
192
+ $kendo-panelbar-item-hovered-focused-text: $kendo-panelbar-item-hovered-text !default;
193
+ /// Border color of the panelbar item when focused and hovered.
194
+ /// @group panelbar
195
+ $kendo-panelbar-item-hovered-focused-border: inherit !default;
196
+
197
+ /// Background color of the panelbar item when selected.
198
+ /// @group panelbar
199
+ $kendo-panelbar-item-selected-bg: var( --kendo-selected-bg, inherit ) !default;
200
+ /// Text color of the panelbar item when selected.
201
+ /// @group panelbar
202
+ $kendo-panelbar-item-selected-text: $black !default;
203
+ /// Border color of the panelbar item when selected.
204
+ /// @group panelbar
205
+ $kendo-panelbar-item-selected-border: inherit !default;
206
+
207
+ /// Background color of the panelbar item when selected and hovered.
208
+ /// @group panelbar
209
+ $kendo-panelbar-item-selected-hovered-bg: $kendo-panelbar-item-selected-bg !default;
210
+ /// Text color of the panelbar item when selected and hovered.
211
+ /// @group panelbar
212
+ $kendo-panelbar-item-selected-hovered-text: $kendo-panelbar-item-hovered-text !default;
213
+ /// Border color of the panelbar item when selected and hovered.
214
+ /// @group panelbar
215
+ $kendo-panelbar-item-selected-hovered-border: inherit !default;
216
+
217
+ /// Background color of the panelbar item when selected and focused.
218
+ /// @group panelbar
219
+ $kendo-panelbar-item-selected-focused-bg: $kendo-panelbar-item-selected-bg !default;
220
+ /// Text color of the panelbar item when selected and focused.
221
+ /// @group panelbar
222
+ $kendo-panelbar-item-selected-focused-text: $kendo-panelbar-item-selected-text !default;
223
+ /// Border color of the panelbar item when selected and focused.
224
+ /// @group panelbar
225
+ $kendo-panelbar-item-selected-focused-border: inherit !default;
226
+
227
+ /// Background color of the panelbar item when selected, focused and hovered.
228
+ /// @group panelbar
229
+ $kendo-panelbar-item-selected-hovered-focused-bg: $kendo-panelbar-item-selected-hovered-bg !default;
230
+ /// Text color of the panelbar item when selected, focused and hovered.
231
+ /// @group panelbar
232
+ $kendo-panelbar-item-selected-hovered-focused-text: $kendo-panelbar-item-selected-hovered-text !default;
233
+ /// Border color of the panelbar item when selected, focused and hovered.
234
+ /// @group panelbar
235
+ $kendo-panelbar-item-selected-hovered-focused-border: inherit !default;
package/scss/panelbar/index.scss ADDED
@@ -0,0 +1,26 @@
1
+ // Module meta
2
+ $_kendo-module-meta: (
3
+ name: "panelbar",
4
+ dependencies: (
5
+ "icon",
6
+ "list"
7
+ )
8
+ );
9
+
10
+
11
+ // Component
12
+ @forward "_variables.scss";
13
+ @use "_layout.scss" as *;
14
+ @use "_theme.scss" as *;
15
+
16
+ // Register
17
+ @use "../core/module-system/" as module;
18
+ @include module.register( $_kendo-module-meta... );
19
+
20
+ // Expose
21
+ @mixin styles() {
22
+ @include module.render( "panelbar" ) {
23
+ @include kendo-panelbar--layout();
24
+ @include kendo-panelbar--theme();
25
+ }
26
+ }