@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0-dev.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 (340) hide show
  1. package/dist/all.css +1 -1
  2. package/dist/fluent-main-dark.css +1 -1
  3. package/dist/fluent-main.css +1 -1
  4. package/dist/meta/sassdoc-data.json +24099 -27323
  5. package/dist/meta/sassdoc-raw-data.json +8421 -7718
  6. package/dist/meta/variables.json +7880 -8036
  7. package/lib/swatches/all.json +1 -1
  8. package/lib/swatches/fluent-main-dark.json +1 -1
  9. package/lib/swatches/fluent-main.json +1 -1
  10. package/package.json +4 -4
  11. package/scss/action-buttons/_layout.scss +2 -55
  12. package/scss/action-buttons/_theme.scss +2 -11
  13. package/scss/action-buttons/_variables.scss +17 -7
  14. package/scss/action-sheet/_layout.scss +11 -399
  15. package/scss/action-sheet/_theme.scss +14 -69
  16. package/scss/action-sheet/_variables.scss +129 -66
  17. package/scss/adaptive/_index.scss +0 -3
  18. package/scss/adaptive/_layout.scss +2 -457
  19. package/scss/adaptive/_theme.scss +2 -75
  20. package/scss/adaptive/_variables.scss +39 -18
  21. package/scss/appbar/_layout.scss +2 -114
  22. package/scss/appbar/_theme.scss +9 -20
  23. package/scss/appbar/_variables.scss +38 -71
  24. package/scss/avatar/_layout.scss +2 -73
  25. package/scss/avatar/_theme.scss +2 -16
  26. package/scss/avatar/_variables.scss +24 -82
  27. package/scss/badge/_layout.scss +3 -146
  28. package/scss/badge/_theme.scss +8 -21
  29. package/scss/badge/_variables.scss +41 -88
  30. package/scss/bottom-navigation/_layout.scss +5 -108
  31. package/scss/bottom-navigation/_theme.scss +73 -74
  32. package/scss/bottom-navigation/_variables.scss +58 -117
  33. package/scss/breadcrumb/_layout.scss +8 -132
  34. package/scss/breadcrumb/_theme.scss +15 -71
  35. package/scss/breadcrumb/_variables.scss +133 -71
  36. package/scss/button/_layout.scss +18 -182
  37. package/scss/button/_theme.scss +132 -113
  38. package/scss/button/_variables.scss +156 -301
  39. package/scss/calendar/_layout.scss +27 -383
  40. package/scss/calendar/_theme.scss +55 -127
  41. package/scss/calendar/_variables.scss +185 -100
  42. package/scss/captcha/_layout.scss +2 -59
  43. package/scss/captcha/_theme.scss +2 -9
  44. package/scss/captcha/_variables.scss +25 -9
  45. package/scss/card/_layout.scss +9 -314
  46. package/scss/card/_theme.scss +3 -103
  47. package/scss/card/_variables.scss +110 -60
  48. package/scss/chart-wizard/_layout.scss +2 -38
  49. package/scss/chart-wizard/_theme.scss +2 -28
  50. package/scss/chart-wizard/_variables.scss +25 -11
  51. package/scss/chat/_index.scss +0 -3
  52. package/scss/chat/_layout.scss +26 -450
  53. package/scss/chat/_theme.scss +9 -80
  54. package/scss/chat/_variables.scss +143 -71
  55. package/scss/checkbox/_layout.scss +14 -191
  56. package/scss/checkbox/_theme.scss +11 -100
  57. package/scss/checkbox/_variables.scss +165 -78
  58. package/scss/chip/_layout.scss +11 -137
  59. package/scss/chip/_theme.scss +56 -57
  60. package/scss/chip/_variables.scss +99 -94
  61. package/scss/color-preview/_layout.scss +4 -64
  62. package/scss/color-preview/_theme.scss +2 -27
  63. package/scss/color-preview/_variables.scss +23 -9
  64. package/scss/coloreditor/_layout.scss +21 -109
  65. package/scss/coloreditor/_theme.scss +3 -24
  66. package/scss/coloreditor/_variables.scss +92 -57
  67. package/scss/colorgradient/_layout.scss +12 -196
  68. package/scss/colorgradient/_theme.scss +27 -65
  69. package/scss/colorgradient/_variables.scss +134 -76
  70. package/scss/colorpalette/_layout.scss +6 -40
  71. package/scss/colorpalette/_theme.scss +10 -20
  72. package/scss/colorpalette/_variables.scss +39 -21
  73. package/scss/colorpicker/_layout.scss +2 -11
  74. package/scss/colorpicker/_theme.scss +2 -1
  75. package/scss/column-menu/_layout.scss +5 -56
  76. package/scss/column-menu/_theme.scss +1 -24
  77. package/scss/column-menu/_variables.scss +38 -17
  78. package/scss/combobox/_layout.scss +4 -2
  79. package/scss/combobox/_theme.scss +4 -2
  80. package/scss/core/functions/index.import.scss +1 -0
  81. package/scss/dataviz/_layout.scss +6 -543
  82. package/scss/dataviz/_theme.scss +12 -76
  83. package/scss/dataviz/_variables.scss +152 -33
  84. package/scss/daterangepicker/_layout.scss +2 -37
  85. package/scss/daterangepicker/_theme.scss +16 -7
  86. package/scss/daterangepicker/_variables.scss +9 -0
  87. package/scss/datetimepicker/_layout.scss +3 -41
  88. package/scss/datetimepicker/_theme.scss +3 -2
  89. package/scss/datetimepicker/_variables.scss +5 -1
  90. package/scss/dialog/_layout.scss +8 -53
  91. package/scss/dialog/_theme.scss +5 -25
  92. package/scss/dialog/_variables.scss +31 -60
  93. package/scss/dock-manager/_layout.scss +9 -193
  94. package/scss/dock-manager/_theme.scss +6 -28
  95. package/scss/dock-manager/_variables.scss +74 -36
  96. package/scss/draggable/_layout.scss +13 -59
  97. package/scss/draggable/_theme.scss +10 -15
  98. package/scss/draggable/_variables.scss +45 -23
  99. package/scss/drawer/_layout.scss +7 -198
  100. package/scss/drawer/_theme.scss +25 -52
  101. package/scss/drawer/_variables.scss +73 -45
  102. package/scss/dropdowngrid/_layout.scss +3 -11
  103. package/scss/dropdowngrid/_theme.scss +3 -3
  104. package/scss/dropdownlist/_layout.scss +4 -28
  105. package/scss/dropdownlist/_theme.scss +3 -7
  106. package/scss/dropdowntree/_layout.scss +2 -35
  107. package/scss/dropdowntree/_theme.scss +3 -4
  108. package/scss/dropdowntree/_variables.scss +4 -3
  109. package/scss/dropzone/_layout.scss +7 -31
  110. package/scss/dropzone/_theme.scss +2 -30
  111. package/scss/dropzone/_variables.scss +43 -21
  112. package/scss/editor/_layout.scss +3 -588
  113. package/scss/editor/_theme.scss +12 -78
  114. package/scss/editor/_variables.scss +45 -26
  115. package/scss/expansion-panel/_layout.scss +22 -57
  116. package/scss/expansion-panel/_theme.scss +13 -36
  117. package/scss/expansion-panel/_variables.scss +49 -28
  118. package/scss/fab/_layout.scss +11 -134
  119. package/scss/fab/_theme.scss +37 -126
  120. package/scss/fab/_variables.scss +104 -56
  121. package/scss/filemanager/_layout.scss +2 -240
  122. package/scss/filemanager/_theme.scss +8 -89
  123. package/scss/filemanager/_variables.scss +109 -56
  124. package/scss/filter/_layout.scss +8 -71
  125. package/scss/filter/_theme.scss +5 -14
  126. package/scss/filter/_variables.scss +20 -10
  127. package/scss/floating-label/_layout.scss +3 -75
  128. package/scss/floating-label/_theme.scss +4 -20
  129. package/scss/floating-label/_variables.scss +35 -17
  130. package/scss/forms/_layout.scss +5 -302
  131. package/scss/forms/_theme.scss +5 -24
  132. package/scss/forms/_variables.scss +73 -39
  133. package/scss/gantt/_layout.scss +5 -801
  134. package/scss/gantt/_theme.scss +17 -236
  135. package/scss/gantt/_variables.scss +142 -73
  136. package/scss/grid/_layout.scss +60 -1276
  137. package/scss/grid/_theme.scss +35 -343
  138. package/scss/grid/_variables.scss +306 -183
  139. package/scss/gridlayout/_layout.scss +1 -6
  140. package/scss/gridlayout/_theme.scss +1 -6
  141. package/scss/icons/_layout.scss +4 -33
  142. package/scss/icons/_theme.scss +7 -1
  143. package/scss/icons/_variables.scss +35 -9
  144. package/scss/imageeditor/_layout.scss +2 -152
  145. package/scss/imageeditor/_theme.scss +5 -42
  146. package/scss/imageeditor/_variables.scss +66 -32
  147. package/scss/index.scss +2 -1
  148. package/scss/input/_layout.scss +36 -468
  149. package/scss/input/_theme.scss +52 -128
  150. package/scss/input/_variables.scss +153 -208
  151. package/scss/list/_layout.scss +3 -252
  152. package/scss/list/_theme.scss +10 -81
  153. package/scss/list/_variables.scss +176 -92
  154. package/scss/listbox/_layout.scss +2 -80
  155. package/scss/listbox/_theme.scss +5 -8
  156. package/scss/listbox/_variables.scss +28 -13
  157. package/scss/listgroup/_layout.scss +2 -174
  158. package/scss/listgroup/_theme.scss +2 -8
  159. package/scss/listgroup/_variables.scss +23 -10
  160. package/scss/listview/_layout.scss +6 -133
  161. package/scss/listview/_theme.scss +8 -37
  162. package/scss/listview/_variables.scss +66 -39
  163. package/scss/loader/_layout.scss +15 -572
  164. package/scss/loader/_theme.scss +2 -14
  165. package/scss/loader/_variables.scss +90 -92
  166. package/scss/map/_layout.scss +7 -121
  167. package/scss/map/_theme.scss +5 -17
  168. package/scss/map/_variables.scss +40 -22
  169. package/scss/maskedtextbox/_layout.scss +3 -3
  170. package/scss/maskedtextbox/_theme.scss +3 -3
  171. package/scss/mediaplayer/_layout.scss +5 -72
  172. package/scss/mediaplayer/_theme.scss +5 -15
  173. package/scss/mediaplayer/_variables.scss +27 -14
  174. package/scss/menu/_layout.scss +25 -267
  175. package/scss/menu/_theme.scss +14 -73
  176. package/scss/menu/_variables.scss +135 -76
  177. package/scss/menu-button/_layout.scss +9 -14
  178. package/scss/menu-button/_theme.scss +5 -1
  179. package/scss/menu-button/_variables.scss +10 -0
  180. package/scss/messagebox/_layout.scss +2 -18
  181. package/scss/messagebox/_theme.scss +4 -19
  182. package/scss/messagebox/_variables.scss +33 -37
  183. package/scss/multiselect/_layout.scss +3 -4
  184. package/scss/multiselect/_theme.scss +3 -4
  185. package/scss/no-data/_layout.scss +2 -17
  186. package/scss/no-data/_theme.scss +2 -5
  187. package/scss/no-data/_variables.scss +7 -2
  188. package/scss/notification/_functions.scss +17 -0
  189. package/scss/notification/_layout.scss +2 -68
  190. package/scss/notification/_theme.scss +4 -28
  191. package/scss/notification/_variables.scss +50 -91
  192. package/scss/numerictextbox/_layout.scss +3 -7
  193. package/scss/numerictextbox/_theme.scss +3 -3
  194. package/scss/orgchart/_layout.scss +8 -99
  195. package/scss/orgchart/_theme.scss +4 -45
  196. package/scss/orgchart/_variables.scss +87 -45
  197. package/scss/otp/_layout.scss +1 -34
  198. package/scss/otp/_theme.scss +1 -7
  199. package/scss/otp/_variables.scss +25 -12
  200. package/scss/overlay/_layout.scss +2 -11
  201. package/scss/overlay/_theme.scss +4 -3
  202. package/scss/overlay/_variables.scss +7 -3
  203. package/scss/pager/_layout.scss +11 -145
  204. package/scss/pager/_theme.scss +7 -15
  205. package/scss/pager/_variables.scss +49 -26
  206. package/scss/panel/_layout.scss +2 -24
  207. package/scss/panel/_theme.scss +10 -13
  208. package/scss/panel/_variables.scss +23 -10
  209. package/scss/panelbar/_layout.scss +17 -95
  210. package/scss/panelbar/_theme.scss +15 -164
  211. package/scss/panelbar/_variables.scss +134 -68
  212. package/scss/pdf-viewer/_layout.scss +3 -327
  213. package/scss/pdf-viewer/_theme.scss +2 -80
  214. package/scss/pdf-viewer/_variables.scss +75 -36
  215. package/scss/pivotgrid/_index.scss +0 -6
  216. package/scss/pivotgrid/_layout.scss +44 -579
  217. package/scss/pivotgrid/_theme.scss +5 -192
  218. package/scss/pivotgrid/_variables.scss +144 -70
  219. package/scss/popover/_layout.scss +6 -73
  220. package/scss/popover/_theme.scss +2 -36
  221. package/scss/popover/_variables.scss +54 -27
  222. package/scss/popup/_layout.scss +5 -70
  223. package/scss/popup/_theme.scss +2 -9
  224. package/scss/popup/_variables.scss +25 -12
  225. package/scss/progressbar/_layout.scss +10 -196
  226. package/scss/progressbar/_theme.scss +11 -46
  227. package/scss/progressbar/_variables.scss +57 -34
  228. package/scss/prompt/_layout.scss +2 -75
  229. package/scss/prompt/_theme.scss +2 -35
  230. package/scss/prompt/_variables.scss +43 -20
  231. package/scss/radio/_layout.scss +12 -178
  232. package/scss/radio/_theme.scss +7 -75
  233. package/scss/radio/_variables.scss +72 -36
  234. package/scss/rating/_layout.scss +11 -57
  235. package/scss/rating/_theme.scss +8 -6
  236. package/scss/rating/_variables.scss +21 -13
  237. package/scss/responsivepanel/_layout.scss +2 -45
  238. package/scss/responsivepanel/_theme.scss +3 -3
  239. package/scss/ripple/_layout.scss +2 -50
  240. package/scss/ripple/_theme.scss +2 -2
  241. package/scss/scheduler/_layout.scss +11 -773
  242. package/scss/scheduler/_theme.scss +32 -167
  243. package/scss/scheduler/_variables.scss +149 -77
  244. package/scss/scroller/_layout.scss +2 -80
  245. package/scss/scroller/_theme.scss +2 -5
  246. package/scss/scrollview/_layout.scss +2 -159
  247. package/scss/scrollview/_theme.scss +11 -35
  248. package/scss/scrollview/_variables.scss +52 -29
  249. package/scss/searchbox/_layout.scss +2 -0
  250. package/scss/searchbox/_theme.scss +4 -1
  251. package/scss/searchbox/_variables.scss +1 -1
  252. package/scss/signature/_layout.scss +3 -67
  253. package/scss/signature/_theme.scss +3 -8
  254. package/scss/signature/_variables.scss +46 -25
  255. package/scss/skeleton/_layout.scss +2 -79
  256. package/scss/skeleton/_theme.scss +2 -17
  257. package/scss/skeleton/_variables.scss +15 -6
  258. package/scss/slider/_layout.scss +18 -203
  259. package/scss/slider/_theme.scss +31 -40
  260. package/scss/slider/_variables.scss +58 -41
  261. package/scss/speech-to-text-button/_layout.scss +1 -9
  262. package/scss/speech-to-text-button/_theme.scss +1 -3
  263. package/scss/split-button/_layout.scss +22 -18
  264. package/scss/split-button/_theme.scss +2 -1
  265. package/scss/split-button/_variables.scss +18 -9
  266. package/scss/splitter/_layout.scss +8 -171
  267. package/scss/splitter/_theme.scss +2 -31
  268. package/scss/splitter/_variables.scss +42 -20
  269. package/scss/spreadsheet/_layout.scss +50 -724
  270. package/scss/spreadsheet/_theme.scss +14 -182
  271. package/scss/spreadsheet/_variables.scss +172 -99
  272. package/scss/stacklayout/_layout.scss +1 -5
  273. package/scss/stacklayout/_theme.scss +1 -5
  274. package/scss/stepper/_layout.scss +9 -255
  275. package/scss/stepper/_theme.scss +4 -186
  276. package/scss/stepper/_variables.scss +125 -60
  277. package/scss/suggestion/_layout.scss +2 -38
  278. package/scss/suggestion/_theme.scss +3 -66
  279. package/scss/suggestion/_variables.scss +42 -19
  280. package/scss/switch/_layout.scss +2 -138
  281. package/scss/switch/_theme.scss +2 -136
  282. package/scss/switch/_variables.scss +99 -49
  283. package/scss/table/_layout.scss +6 -249
  284. package/scss/table/_theme.scss +9 -95
  285. package/scss/table/_variables.scss +100 -64
  286. package/scss/tabstrip/_layout.scss +2 -421
  287. package/scss/tabstrip/_theme.scss +12 -123
  288. package/scss/tabstrip/_variables.scss +113 -61
  289. package/scss/taskboard/_layout.scss +28 -178
  290. package/scss/taskboard/_theme.scss +20 -55
  291. package/scss/taskboard/_variables.scss +122 -63
  292. package/scss/textarea/_layout.scss +3 -6
  293. package/scss/textarea/_theme.scss +3 -4
  294. package/scss/textbox/_layout.scss +3 -4
  295. package/scss/textbox/_theme.scss +3 -4
  296. package/scss/tilelayout/_layout.scss +2 -36
  297. package/scss/tilelayout/_theme.scss +13 -10
  298. package/scss/tilelayout/_variables.scss +19 -8
  299. package/scss/time-marker/_layout.scss +2 -15
  300. package/scss/time-marker/_theme.scss +2 -17
  301. package/scss/time-marker/_variables.scss +7 -2
  302. package/scss/timedurationpicker/_layout.scss +3 -4
  303. package/scss/timedurationpicker/_theme.scss +3 -4
  304. package/scss/timeline/_layout.scss +8 -423
  305. package/scss/timeline/_theme.scss +11 -34
  306. package/scss/timeline/_variables.scss +108 -61
  307. package/scss/timepicker/_layout.scss +7 -3
  308. package/scss/timepicker/_theme.scss +3 -4
  309. package/scss/timeselector/_layout.scss +3 -223
  310. package/scss/timeselector/_theme.scss +5 -55
  311. package/scss/timeselector/_variables.scss +84 -41
  312. package/scss/toolbar/_layout.scss +11 -296
  313. package/scss/toolbar/_theme.scss +3 -167
  314. package/scss/toolbar/_variables.scss +65 -32
  315. package/scss/tooltip/_functions.scss +17 -0
  316. package/scss/tooltip/_layout.scss +13 -74
  317. package/scss/tooltip/_theme.scss +17 -23
  318. package/scss/tooltip/_variables.scss +50 -72
  319. package/scss/treelist/_layout.scss +3 -82
  320. package/scss/treelist/_theme.scss +4 -6
  321. package/scss/treelist/_variables.scss +7 -2
  322. package/scss/treeview/_layout.scss +8 -137
  323. package/scss/treeview/_theme.scss +20 -65
  324. package/scss/treeview/_variables.scss +88 -48
  325. package/scss/typography/_layout.scss +3 -113
  326. package/scss/typography/_theme.scss +2 -17
  327. package/scss/typography/_variables.scss +84 -3
  328. package/scss/upload/_layout.scss +7 -219
  329. package/scss/upload/_theme.scss +4 -90
  330. package/scss/upload/_variables.scss +66 -29
  331. package/scss/validator/_layout.scss +2 -16
  332. package/scss/validator/_theme.scss +2 -2
  333. package/scss/virtual-scroller/_layout.scss +2 -34
  334. package/scss/virtual-scroller/_theme.scss +2 -2
  335. package/scss/window/_layout.scss +9 -141
  336. package/scss/window/_theme.scss +7 -35
  337. package/scss/window/_variables.scss +65 -70
  338. package/scss/wizard/_layout.scss +8 -95
  339. package/scss/wizard/_theme.scss +4 -7
  340. package/scss/wizard/_variables.scss +24 -11
package/scss/list/_variables.scss CHANGED
@@ -3,143 +3,140 @@
3
3
 
4
4
  /// The font family of the List components.
5
5
  /// @group list
6
- $kendo-list-font-family: var( --kendo-font-family, inherit) !default;
6
+ $kendo-list-font-family: var( --kendo-list-font-family, var(--kendo-font-family, inherit) ) !default;
7
7
 
8
8
  /// The font size of the List component.
9
9
  /// @group list
10
- $kendo-list-sm-font-size: var( --kendo-font-size, inherit ) !default;
11
- $kendo-list-md-font-size: var( --kendo-font-size, inherit ) !default;
12
- $kendo-list-lg-font-size: var( --kendo-font-size, inherit ) !default;
10
+ $kendo-list-sm-font-size: var( --kendo-list-sm-font-size, var(--kendo-font-size, inherit) ) !default;
11
+ $kendo-list-md-font-size: var( --kendo-list-md-font-size, var(--kendo-font-size, inherit) ) !default;
12
+ $kendo-list-lg-font-size: var( --kendo-list-lg-font-size, var(--kendo-font-size, inherit) ) !default;
13
13
 
14
14
  /// The line height of the List component.
15
15
  /// @group list
16
- $kendo-list-sm-line-height: var( --kendo-line-height, normal ) !default;
17
- $kendo-list-md-line-height: var( --kendo-line-height, normal ) !default;
18
- $kendo-list-lg-line-height: var( --kendo-line-height, normal ) !default;
16
+ $kendo-list-sm-line-height: var( --kendo-list-sm-line-height, var(--kendo-line-height, normal) ) !default;
17
+ $kendo-list-md-line-height: var( --kendo-list-md-line-height, var(--kendo-line-height, normal) ) !default;
18
+ $kendo-list-lg-line-height: var( --kendo-list-lg-line-height, var(--kendo-line-height, normal) ) !default;
19
19
 
20
20
  /// The horizontal padding of the List header.
21
21
  /// @group list
22
- $kendo-list-sm-header-padding-x: k-spacing(2) !default;
23
- $kendo-list-md-header-padding-x: k-spacing(2) !default;
24
- $kendo-list-lg-header-padding-x: k-spacing(2) !default;
22
+ $kendo-list-sm-header-padding-x: var( --kendo-list-sm-header-padding-x, #{k-spacing(2)} ) !default;
23
+ $kendo-list-md-header-padding-x: var( --kendo-list-md-header-padding-x, #{k-spacing(2)} ) !default;
24
+ $kendo-list-lg-header-padding-x: var( --kendo-list-lg-header-padding-x, #{k-spacing(2)} ) !default;
25
25
 
26
26
  /// The vertical padding of the List header.
27
27
  /// @group list
28
- $kendo-list-sm-header-padding-y: k-spacing(1.5) !default;
29
- $kendo-list-md-header-padding-y: k-spacing(2) !default;
30
- $kendo-list-lg-header-padding-y: k-spacing(2.5) !default;
28
+ $kendo-list-sm-header-padding-y: var( --kendo-list-sm-header-padding-y, #{k-spacing(1.5)} ) !default;
29
+ $kendo-list-md-header-padding-y: var( --kendo-list-md-header-padding-y, #{k-spacing(2)} ) !default;
30
+ $kendo-list-lg-header-padding-y: var( --kendo-list-lg-header-padding-y, #{k-spacing(2.5)} ) !default;
31
31
 
32
32
  /// The border width of the List header.
33
33
  /// @group list
34
- $kendo-list-header-border-width: 0 !default;
34
+ $kendo-list-header-border-width: var( --kendo-list-header-border-width, 0 ) !default;
35
35
 
36
36
  /// The font size of the List header.
37
37
  /// @group list
38
- $kendo-list-sm-header-font-size: var( --kendo-font-size, inherit ) !default;
39
- $kendo-list-md-header-font-size: var( --kendo-font-size, inherit ) !default;
40
- $kendo-list-lg-header-font-size: var( --kendo-font-size, inherit ) !default;
38
+ $kendo-list-sm-header-font-size: var( --kendo-list-sm-header-font-size, var(--kendo-font-size, inherit) ) !default;
39
+ $kendo-list-md-header-font-size: var( --kendo-list-md-header-font-size, var(--kendo-font-size, inherit) ) !default;
40
+ $kendo-list-lg-header-font-size: var( --kendo-list-lg-header-font-size, var(--kendo-font-size, inherit) ) !default;
41
41
 
42
42
  /// The line height of the List header.
43
43
  /// @group list
44
- $kendo-list-sm-header-line-height: var( --kendo-line-height, normal ) !default;
45
- $kendo-list-md-header-line-height: var( --kendo-line-height, normal ) !default;
46
- $kendo-list-lg-header-line-height: var( --kendo-line-height, normal ) !default;
44
+ $kendo-list-sm-header-line-height: var( --kendo-list-sm-header-line-height, var(--kendo-line-height, normal) ) !default;
45
+ $kendo-list-md-header-line-height: var( --kendo-list-md-header-line-height, var(--kendo-line-height, normal) ) !default;
46
+ $kendo-list-lg-header-line-height: var( --kendo-list-lg-header-line-height, var(--kendo-line-height, normal) ) !default;
47
47
 
48
48
  /// The font weight of the List header.
49
49
  /// @group list
50
- $kendo-list-header-font-weight: var( --kendo-font-weight-bold, normal ) !default;
51
-
50
+ $kendo-list-header-font-weight: var( --kendo-list-header-font-weight, var(--kendo-font-weight-bold, normal) ) !default;
52
51
  /// The horizontal padding of the List filter, when no size is set.
53
52
  /// @group list
54
- $kendo-list-filter-padding-x: k-spacing(2) !default;
55
- $kendo-list-sm-filter-padding-x: $kendo-list-filter-padding-x !default;
56
- $kendo-list-md-filter-padding-x: $kendo-list-filter-padding-x !default;
57
- $kendo-list-lg-filter-padding-x: $kendo-list-filter-padding-x !default;
53
+ $kendo-list-sm-filter-padding-x: var( --kendo-list-sm-filter-padding-x, #{k-spacing(2)} ) !default;
54
+ $kendo-list-md-filter-padding-x: var( --kendo-list-md-filter-padding-x, #{k-spacing(2)} ) !default;
55
+ $kendo-list-lg-filter-padding-x: var( --kendo-list-lg-filter-padding-x, #{k-spacing(2)} ) !default;
58
56
 
59
57
  /// The vertical padding of the List filter, when no size is set.
60
58
  /// @group list
61
- $kendo-list-filter-padding-y: $kendo-list-filter-padding-x !default;
62
- $kendo-list-sm-filter-padding-y: $kendo-list-filter-padding-x !default;
63
- $kendo-list-md-filter-padding-y: $kendo-list-filter-padding-x !default;
64
- $kendo-list-lg-filter-padding-y: $kendo-list-filter-padding-x !default;
59
+ $kendo-list-sm-filter-padding-y: var( --kendo-list-sm-filter-padding-y, #{k-spacing(2)} ) !default;
60
+ $kendo-list-md-filter-padding-y: var( --kendo-list-md-filter-padding-y, #{k-spacing(2)} ) !default;
61
+ $kendo-list-lg-filter-padding-y: var( --kendo-list-lg-filter-padding-y, #{k-spacing(2)} ) !default;
65
62
 
66
63
  /// The horizontal padding of the List items.
67
64
  /// @group list
68
- $kendo-list-sm-item-padding-x: k-spacing(2) !default;
69
- $kendo-list-md-item-padding-x: k-spacing(2) !default;
70
- $kendo-list-lg-item-padding-x: k-spacing(2) !default;
65
+ $kendo-list-sm-item-padding-x: var( --kendo-list-sm-item-padding-x, #{k-spacing(2)} ) !default;
66
+ $kendo-list-md-item-padding-x: var( --kendo-list-md-item-padding-x, #{k-spacing(2)} ) !default;
67
+ $kendo-list-lg-item-padding-x: var( --kendo-list-lg-item-padding-x, #{k-spacing(2)} ) !default;
71
68
 
72
69
  /// The vertical padding of the List items.
73
70
  /// @group list
74
- $kendo-list-sm-item-padding-y: k-spacing(1.5) !default;
75
- $kendo-list-md-item-padding-y: k-spacing(2) !default;
76
- $kendo-list-lg-item-padding-y: k-spacing(2.5) !default;
71
+ $kendo-list-sm-item-padding-y: var( --kendo-list-sm-item-padding-y, #{k-spacing(1.5)} ) !default;
72
+ $kendo-list-md-item-padding-y: var( --kendo-list-md-item-padding-y, #{k-spacing(2)} ) !default;
73
+ $kendo-list-lg-item-padding-y: var( --kendo-list-lg-item-padding-y, #{k-spacing(2.5)} ) !default;
77
74
 
78
75
  /// The font size of the List items.
79
76
  /// @group list
80
- $kendo-list-sm-item-font-size: var( --kendo-font-size, inherit ) !default;
81
- $kendo-list-md-item-font-size: var( --kendo-font-size, inherit ) !default;
82
- $kendo-list-lg-item-font-size: var( --kendo-font-size, inherit ) !default;
77
+ $kendo-list-sm-item-font-size: var( --kendo-list-sm-item-font-size, var(--kendo-font-size, inherit) ) !default;
78
+ $kendo-list-md-item-font-size: var( --kendo-list-md-item-font-size, var(--kendo-font-size, inherit) ) !default;
79
+ $kendo-list-lg-item-font-size: var( --kendo-list-lg-item-font-size, var(--kendo-font-size, inherit) ) !default;
83
80
 
84
81
  /// The line height of the List items.
85
82
  /// @group list
86
- $kendo-list-sm-item-line-height: var( --kendo-line-height, normal ) !default;
87
- $kendo-list-md-item-line-height: var( --kendo-line-height, normal ) !default;
88
- $kendo-list-lg-item-line-height: var( --kendo-line-height, normal ) !default;
83
+ $kendo-list-sm-item-line-height: var( --kendo-list-sm-item-line-height, var(--kendo-line-height, normal) ) !default;
84
+ $kendo-list-md-item-line-height: var( --kendo-list-md-item-line-height, var(--kendo-line-height, normal) ) !default;
85
+ $kendo-list-lg-item-line-height: var( --kendo-list-lg-item-line-height, var(--kendo-line-height, normal) ) !default;
89
86
 
90
87
  /// The font size of the List item group label.
91
88
  /// @group list
92
- $kendo-list-item-group-label-sm-font-size: var( --kendo-font-size-xs, inherit ) !default;
93
- $kendo-list-item-group-label-md-font-size: var( --kendo-font-size-xs, inherit ) !default;
94
- $kendo-list-item-group-label-lg-font-size: var( --kendo-font-size-xs, inherit ) !default;
89
+ $kendo-list-item-group-label-sm-font-size: var( --kendo-list-item-group-label-sm-font-size, var(--kendo-font-size-xs, inherit) ) !default;
90
+ $kendo-list-item-group-label-md-font-size: var( --kendo-list-item-group-label-md-font-size, var(--kendo-font-size-xs, inherit) ) !default;
91
+ $kendo-list-item-group-label-lg-font-size: var( --kendo-list-item-group-label-lg-font-size, var(--kendo-font-size-xs, inherit) ) !default;
95
92
 
96
93
  /// The horizontal padding of the List group items.
97
94
  /// @group list
98
- $kendo-list-sm-group-item-padding-x: k-spacing(2) !default;
99
- $kendo-list-md-group-item-padding-x: k-spacing(2) !default;
100
- $kendo-list-lg-group-item-padding-x: k-spacing(2) !default;
95
+ $kendo-list-sm-group-item-padding-x: var( --kendo-list-sm-group-item-padding-x, #{k-spacing(2)} ) !default;
96
+ $kendo-list-md-group-item-padding-x: var( --kendo-list-md-group-item-padding-x, #{k-spacing(2)} ) !default;
97
+ $kendo-list-lg-group-item-padding-x: var( --kendo-list-lg-group-item-padding-x, #{k-spacing(2)} ) !default;
101
98
 
102
99
  /// The vertical padding of the List group items.
103
100
  /// @group list
104
- $kendo-list-sm-group-item-padding-y: k-spacing(1.5) !default;
105
- $kendo-list-md-group-item-padding-y: k-spacing(2) !default;
106
- $kendo-list-lg-group-item-padding-y: k-spacing(2.5) !default;
101
+ $kendo-list-sm-group-item-padding-y: var( --kendo-list-sm-group-item-padding-y, #{k-spacing(1.5)} ) !default;
102
+ $kendo-list-md-group-item-padding-y: var( --kendo-list-md-group-item-padding-y, #{k-spacing(2)} ) !default;
103
+ $kendo-list-lg-group-item-padding-y: var( --kendo-list-lg-group-item-padding-y, #{k-spacing(2.5)} ) !default;
107
104
 
108
105
  /// The horizontal padding of the List item group label.
109
106
  /// @group list
110
- $kendo-list-item-group-label-sm-padding-x: k-spacing(0.5) !default;
111
- $kendo-list-item-group-label-md-padding-x: k-spacing(1) !default;
112
- $kendo-list-item-group-label-lg-padding-x: k-spacing(1.5) !default;
107
+ $kendo-list-item-group-label-sm-padding-x: var( --kendo-list-item-group-label-sm-padding-x, #{k-spacing(0.5)} ) !default;
108
+ $kendo-list-item-group-label-md-padding-x: var( --kendo-list-item-group-label-md-padding-x, #{k-spacing(1)} ) !default;
109
+ $kendo-list-item-group-label-lg-padding-x: var( --kendo-list-item-group-label-lg-padding-x, #{k-spacing(1.5)} ) !default;
113
110
 
114
111
  /// The vertical padding of the List item group label.
115
112
  /// @group list
116
- $kendo-list-item-group-label-sm-padding-y: k-spacing(0.5) !default;
117
- $kendo-list-item-group-label-md-padding-y: k-spacing(1) !default;
118
- $kendo-list-item-group-label-lg-padding-y: k-spacing(1.5) !default;
113
+ $kendo-list-item-group-label-sm-padding-y: var( --kendo-list-item-group-label-sm-padding-y, #{k-spacing(0.5)} ) !default;
114
+ $kendo-list-item-group-label-md-padding-y: var( --kendo-list-item-group-label-md-padding-y, #{k-spacing(1)} ) !default;
115
+ $kendo-list-item-group-label-lg-padding-y: var( --kendo-list-item-group-label-lg-padding-y, #{k-spacing(1.5)} ) !default;
119
116
 
120
117
  /// The border width of the List group items.
121
118
  /// @group list
122
- $kendo-list-group-item-border-width: 1px 0 0 !default;
119
+ $kendo-list-group-item-border-width: var( --kendo-list-group-item-border-width, 1px 0 0 ) !default;
123
120
 
124
121
  /// The font size of the List group items.
125
122
  /// @group list
126
- $kendo-list-sm-group-item-font-size: var( --kendo-font-size, inherit ) !default;
127
- $kendo-list-md-group-item-font-size: var( --kendo-font-size, inherit ) !default;
128
- $kendo-list-lg-group-item-font-size: var( --kendo-font-size, inherit ) !default;
123
+ $kendo-list-sm-group-item-font-size: var( --kendo-list-sm-group-item-font-size, var(--kendo-font-size, inherit) ) !default;
124
+ $kendo-list-md-group-item-font-size: var( --kendo-list-md-group-item-font-size, var(--kendo-font-size, inherit) ) !default;
125
+ $kendo-list-lg-group-item-font-size: var( --kendo-list-lg-group-item-font-size, var(--kendo-font-size, inherit) ) !default;
129
126
 
130
127
  /// The line height of the List group items.
131
128
  /// @group list
132
- $kendo-list-sm-group-item-line-height: var( --kendo-line-height, normal ) !default;
133
- $kendo-list-md-group-item-line-height: var( --kendo-line-height, normal ) !default;
134
- $kendo-list-lg-group-item-line-height: var( --kendo-line-height, normal ) !default;
129
+ $kendo-list-sm-group-item-line-height: var( --kendo-list-sm-group-item-line-height, var(--kendo-line-height, normal) ) !default;
130
+ $kendo-list-md-group-item-line-height: var( --kendo-list-md-group-item-line-height, var(--kendo-line-height, normal) ) !default;
131
+ $kendo-list-lg-group-item-line-height: var( --kendo-list-lg-group-item-line-height, var(--kendo-line-height, normal) ) !default;
135
132
 
136
133
  /// The font weight of the List group item.
137
134
  /// @group list
138
- $kendo-list-group-item-font-weight: var( --kendo-font-weight-bold, normal ) !default;
135
+ $kendo-list-group-item-font-weight: var( --kendo-list-group-item-font-weight, var(--kendo-font-weight-bold, normal) ) !default;
139
136
 
140
137
  /// The text color of the List item icon
141
138
  /// @group list
142
- $kendo-list-item-icon-text: k-color(primary) !default;
139
+ $kendo-list-item-icon-text: var( --kendo-list-item-icon-text, #{k-color(primary)} ) !default;
143
140
 
144
141
  /// The map with the sizes of the List.
145
142
  /// @group list
@@ -212,90 +209,177 @@ $kendo-list-sizes: (
212
209
 
213
210
  /// The background color of the List component.
214
211
  /// @group list
215
- $kendo-list-bg: k-color(surface-alt) !default;
212
+ $kendo-list-bg: var( --kendo-list-bg, #{k-color(surface-alt)} ) !default;
216
213
  /// The text color of the List component.
217
214
  /// @group list
218
- $kendo-list-text: k-color(on-app-surface) !default;
215
+ $kendo-list-text: var( --kendo-list-text, #{k-color(on-app-surface)} ) !default;
219
216
  /// The border color of the List component.
220
217
  /// @group list
221
- $kendo-list-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
218
+ $kendo-list-border: var( --kendo-list-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
222
219
 
223
220
 
224
221
  /// The background color of the List header.
225
222
  /// @group list
226
- $kendo-list-header-bg: k-color(app-surface) !default;
223
+ $kendo-list-header-bg: var( --kendo-list-header-bg, #{k-color(app-surface)} ) !default;
227
224
  /// The text color of the List header.
228
225
  /// @group list
229
- $kendo-list-header-text: k-color(primary) !default;
226
+ $kendo-list-header-text: var( --kendo-list-header-text, #{k-color(primary)} ) !default;
230
227
  /// The border color of the List header.
231
228
  /// @group list
232
- $kendo-list-header-border: inherit !default;
229
+ $kendo-list-header-border: var( --kendo-list-header-border, inherit ) !default;
233
230
  /// The box shadow of the List header.
234
231
  /// @group list
235
- $kendo-list-header-shadow: $kendo-box-shadow-depth-3 !default;
232
+ $kendo-list-header-shadow: var( --kendo-list-header-shadow, #{$kendo-box-shadow-depth-3} ) !default;
236
233
 
237
234
 
238
235
  /// The background color of the List items.
239
236
  /// @group list
240
- $kendo-list-item-bg: k-color(app-surface) !default;
237
+ $kendo-list-item-bg: var( --kendo-list-item-bg, #{k-color(app-surface)} ) !default;
241
238
  /// The text color of the List items.
242
239
  /// @group list
243
- $kendo-list-item-text: k-color(on-app-surface) !default;
240
+ $kendo-list-item-text: var( --kendo-list-item-text, #{k-color(on-app-surface)} ) !default;
244
241
 
245
242
  /// The background color of the hovered List items.
246
243
  /// @group list
247
- $kendo-list-item-hover-bg: k-color(base-hover) !default;
244
+ $kendo-list-item-hover-bg: var( --kendo-list-item-hover-bg, #{k-color(base-hover)} ) !default;
248
245
  /// The text color of the hovered List items.
249
246
  /// @group list
250
- $kendo-list-item-hover-text: k-color(on-app-surface) !default;
247
+ $kendo-list-item-hover-text: var( --kendo-list-item-hover-text, #{k-color(on-app-surface)} ) !default;
251
248
 
252
249
  /// The background color of the focused List items.
253
250
  /// @group list
254
- $kendo-list-item-focus-bg: k-color(app-surface) !default;
251
+ $kendo-list-item-focus-bg: var( --kendo-list-item-focus-bg, #{k-color(app-surface)} ) !default;
255
252
  /// The text color of the focused List items.
256
253
  /// @group list
257
- $kendo-list-item-focus-text: k-color(on-app-surface) !default;
254
+ $kendo-list-item-focus-text: var( --kendo-list-item-focus-text, #{k-color(on-app-surface)} ) !default;
258
255
  /// The box shadow of the focused List items.
259
256
  /// @group list
260
- $kendo-list-item-focus-shadow: inset 0 0 0 1px k-color(base-emphasis) !default;
257
+ $kendo-list-item-focus-shadow: var( --kendo-list-item-focus-shadow, inset 0 0 0 1px #{k-color(base-emphasis)} ) !default;
261
258
 
262
259
  /// The background color of the selected List items.
263
260
  /// @group list
264
- $kendo-list-item-selected-bg: k-color(base-active) !default;
261
+ $kendo-list-item-selected-bg: var( --kendo-list-item-selected-bg, #{k-color(base-active)} ) !default;
265
262
  /// The text color of the selected List items.
266
263
  /// @group list
267
- $kendo-list-item-selected-text: k-color(on-app-surface) !default;
264
+ $kendo-list-item-selected-text: var( --kendo-list-item-selected-text, #{k-color(on-app-surface)} ) !default;
268
265
 
269
266
  /// The background color of the selected hovered List items.
270
267
  /// @group list
271
- $kendo-list-item-selected-hover-bg: k-color(base-active) !default;
268
+ $kendo-list-item-selected-hover-bg: var( --kendo-list-item-selected-hover-bg, #{k-color(base-active)} ) !default;
272
269
  /// The text color of the selected hovered List items.
273
270
  /// @group list
274
- $kendo-list-item-selected-hover-text: k-color(on-app-surface) !default;
271
+ $kendo-list-item-selected-hover-text: var( --kendo-list-item-selected-hover-text, #{k-color(on-app-surface)} ) !default;
275
272
 
276
273
  /// The background color of the disabled List items.
277
274
  /// @group list
278
- $kendo-list-item-disabled-bg: k-color(app-surface) !default;
275
+ $kendo-list-item-disabled-bg: var( --kendo-list-item-disabled-bg, #{k-color(app-surface)} ) !default;
279
276
  /// The text color of the disabled List items.
280
277
  /// @group list
281
- $kendo-list-item-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
278
+ $kendo-list-item-disabled-text: var( --kendo-list-item-disabled-text, #{color-mix(in srgb, k-color(on-app-surface) 46%, transparent)} ) !default;
282
279
 
283
280
  /// The background color of the List group items.
284
281
  /// @group list
285
- $kendo-list-group-item-bg: k-color(app-surface) !default;
282
+ $kendo-list-group-item-bg: var( --kendo-list-group-item-bg, #{k-color(app-surface)} ) !default;
286
283
  /// The text color of the List group items.
287
284
  /// @group list
288
- $kendo-list-group-item-text: k-color(primary) !default;
285
+ $kendo-list-group-item-text: var( --kendo-list-group-item-text, #{k-color(primary)} ) !default;
289
286
  /// The border color of the List group items.
290
287
  /// @group list
291
- $kendo-list-group-item-border: inherit !default;
288
+ $kendo-list-group-item-border: var( --kendo-list-group-item-border, inherit ) !default;
292
289
  /// The base shadow of the List group items.
293
290
  /// @group list
294
- $kendo-list-group-item-shadow: none !default;
291
+ $kendo-list-group-item-shadow: var( --kendo-list-group-item-shadow, none ) !default;
295
292
 
296
293
  /// The color of the 'Option Label' text.
297
294
  /// @group list
298
- $kendo-list-option-label-text: k-color(subtle) !default;
295
+ $kendo-list-option-label-text: var( --kendo-list-option-label-text, #{k-color(subtle)} ) !default;
299
296
  /// The color of the disabled 'Option Label' text.
300
297
  /// @group list
301
- $kendo-list-option-label-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
298
+ $kendo-list-option-label-disabled-text: var( --kendo-list-option-label-disabled-text, #{color-mix(in srgb, k-color(on-app-surface) 46%, transparent)} ) !default;
299
+
300
+ @forward "@progress/kendo-theme-core/scss/components/list/_variables.scss" with (
301
+ $kendo-list-font-family: $kendo-list-font-family,
302
+ $kendo-list-sm-font-size: $kendo-list-sm-font-size,
303
+ $kendo-list-md-font-size: $kendo-list-md-font-size,
304
+ $kendo-list-lg-font-size: $kendo-list-lg-font-size,
305
+ $kendo-list-sm-line-height: $kendo-list-sm-line-height,
306
+ $kendo-list-md-line-height: $kendo-list-md-line-height,
307
+ $kendo-list-lg-line-height: $kendo-list-lg-line-height,
308
+ $kendo-list-sm-header-padding-x: $kendo-list-sm-header-padding-x,
309
+ $kendo-list-md-header-padding-x: $kendo-list-md-header-padding-x,
310
+ $kendo-list-lg-header-padding-x: $kendo-list-lg-header-padding-x,
311
+ $kendo-list-sm-header-padding-y: $kendo-list-sm-header-padding-y,
312
+ $kendo-list-md-header-padding-y: $kendo-list-md-header-padding-y,
313
+ $kendo-list-lg-header-padding-y: $kendo-list-lg-header-padding-y,
314
+ $kendo-list-header-border-width: $kendo-list-header-border-width,
315
+ $kendo-list-sm-header-font-size: $kendo-list-sm-header-font-size,
316
+ $kendo-list-md-header-font-size: $kendo-list-md-header-font-size,
317
+ $kendo-list-lg-header-font-size: $kendo-list-lg-header-font-size,
318
+ $kendo-list-sm-header-line-height: $kendo-list-sm-header-line-height,
319
+ $kendo-list-md-header-line-height: $kendo-list-md-header-line-height,
320
+ $kendo-list-lg-header-line-height: $kendo-list-lg-header-line-height,
321
+ $kendo-list-header-font-weight: $kendo-list-header-font-weight,
322
+ $kendo-list-sm-item-padding-x: $kendo-list-sm-item-padding-x,
323
+ $kendo-list-md-item-padding-x: $kendo-list-md-item-padding-x,
324
+ $kendo-list-lg-item-padding-x: $kendo-list-lg-item-padding-x,
325
+ $kendo-list-sm-item-padding-y: $kendo-list-sm-item-padding-y,
326
+ $kendo-list-md-item-padding-y: $kendo-list-md-item-padding-y,
327
+ $kendo-list-lg-item-padding-y: $kendo-list-lg-item-padding-y,
328
+ $kendo-list-sm-item-font-size: $kendo-list-sm-item-font-size,
329
+ $kendo-list-md-item-font-size: $kendo-list-md-item-font-size,
330
+ $kendo-list-lg-item-font-size: $kendo-list-lg-item-font-size,
331
+ $kendo-list-sm-item-line-height: $kendo-list-sm-item-line-height,
332
+ $kendo-list-md-item-line-height: $kendo-list-md-item-line-height,
333
+ $kendo-list-lg-item-line-height: $kendo-list-lg-item-line-height,
334
+ $kendo-list-sm-group-item-padding-x: $kendo-list-sm-group-item-padding-x,
335
+ $kendo-list-md-group-item-padding-x: $kendo-list-md-group-item-padding-x,
336
+ $kendo-list-lg-group-item-padding-x: $kendo-list-lg-group-item-padding-x,
337
+ $kendo-list-sm-group-item-padding-y: $kendo-list-sm-group-item-padding-y,
338
+ $kendo-list-md-group-item-padding-y: $kendo-list-md-group-item-padding-y,
339
+ $kendo-list-lg-group-item-padding-y: $kendo-list-lg-group-item-padding-y,
340
+ $kendo-list-item-group-label-sm-padding-x: $kendo-list-item-group-label-sm-padding-x,
341
+ $kendo-list-item-group-label-md-padding-x: $kendo-list-item-group-label-md-padding-x,
342
+ $kendo-list-item-group-label-lg-padding-x: $kendo-list-item-group-label-lg-padding-x,
343
+ $kendo-list-item-group-label-sm-padding-y: $kendo-list-item-group-label-sm-padding-y,
344
+ $kendo-list-item-group-label-md-padding-y: $kendo-list-item-group-label-md-padding-y,
345
+ $kendo-list-item-group-label-lg-padding-y: $kendo-list-item-group-label-lg-padding-y,
346
+ $kendo-list-item-group-label-sm-font-size: $kendo-list-item-group-label-sm-font-size,
347
+ $kendo-list-item-group-label-md-font-size: $kendo-list-item-group-label-md-font-size,
348
+ $kendo-list-item-group-label-lg-font-size: $kendo-list-item-group-label-lg-font-size,
349
+ $kendo-list-group-item-border-width: $kendo-list-group-item-border-width,
350
+ $kendo-list-sm-group-item-font-size: $kendo-list-sm-group-item-font-size,
351
+ $kendo-list-md-group-item-font-size: $kendo-list-md-group-item-font-size,
352
+ $kendo-list-lg-group-item-font-size: $kendo-list-lg-group-item-font-size,
353
+ $kendo-list-sm-group-item-line-height: $kendo-list-sm-group-item-line-height,
354
+ $kendo-list-md-group-item-line-height: $kendo-list-md-group-item-line-height,
355
+ $kendo-list-lg-group-item-line-height: $kendo-list-lg-group-item-line-height,
356
+ $kendo-list-sm-filter-padding-x: $kendo-list-sm-filter-padding-x,
357
+ $kendo-list-sm-filter-padding-y: $kendo-list-sm-filter-padding-y,
358
+ $kendo-list-md-filter-padding-x: $kendo-list-md-filter-padding-x,
359
+ $kendo-list-md-filter-padding-y: $kendo-list-md-filter-padding-y,
360
+ $kendo-list-lg-filter-padding-x: $kendo-list-lg-filter-padding-x,
361
+ $kendo-list-lg-filter-padding-y: $kendo-list-lg-filter-padding-y,
362
+ $kendo-list-group-item-font-weight: $kendo-list-group-item-font-weight,
363
+ $kendo-list-sizes: $kendo-list-sizes,
364
+ $kendo-list-bg: $kendo-list-bg,
365
+ $kendo-list-text: $kendo-list-text,
366
+ $kendo-list-border: $kendo-list-border,
367
+ $kendo-list-header-bg: $kendo-list-header-bg,
368
+ $kendo-list-header-text: $kendo-list-header-text,
369
+ $kendo-list-header-border: $kendo-list-header-border,
370
+ $kendo-list-header-shadow: $kendo-list-header-shadow,
371
+ $kendo-list-item-bg: $kendo-list-item-bg,
372
+ $kendo-list-item-text: $kendo-list-item-text,
373
+ $kendo-list-item-hover-bg: $kendo-list-item-hover-bg,
374
+ $kendo-list-item-hover-text: $kendo-list-item-hover-text,
375
+ $kendo-list-item-focus-bg: $kendo-list-item-focus-bg,
376
+ $kendo-list-item-focus-text: $kendo-list-item-focus-text,
377
+ $kendo-list-item-focus-shadow: $kendo-list-item-focus-shadow,
378
+ $kendo-list-item-selected-bg: $kendo-list-item-selected-bg,
379
+ $kendo-list-item-selected-text: $kendo-list-item-selected-text,
380
+ $kendo-list-group-item-bg: $kendo-list-group-item-bg,
381
+ $kendo-list-group-item-text: $kendo-list-group-item-text,
382
+ $kendo-list-group-item-border: $kendo-list-group-item-border,
383
+ $kendo-list-group-item-shadow: $kendo-list-group-item-shadow,
384
+ $kendo-list-option-label-text: $kendo-list-option-label-text
385
+ );
package/scss/listbox/_layout.scss CHANGED
@@ -1,86 +1,8 @@
1
1
  @use "../core/_index.scss" as *;
2
2
  @use "./_variables.scss" as *;
3
+ @use "@progress/kendo-theme-core/scss/components/listbox/_layout.scss" as *;
3
4
 
4
5
  @mixin kendo-listbox--layout() {
5
-
6
- .k-listbox {
7
- width: var( --kendo-listbox-width, #{$kendo-listbox-width} );
8
- height: var( --kendo-listbox-height, #{$kendo-listbox-height} );
9
- border-width: 0;
10
- outline: 0;
11
- font-family: var( --kendo-listbox-font-family, #{$kendo-listbox-font-family} );
12
- font-size: var( --kendo-listbox-font-size, #{$kendo-listbox-font-size} );
13
- line-height: var( --kendo-listbox-line-height, #{$kendo-listbox-line-height} );
14
- vertical-align: top;
15
- background-color: transparent;
16
- display: inline-flex;
17
- gap: var( --kendo-listbox-spacing, #{$kendo-listbox-spacing} );
18
- -webkit-touch-callout: none;
19
- -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
20
-
21
- .k-listbox-actions {
22
- display: flex;
23
- gap: var( --kendo-listbox-button-spacing, #{$kendo-listbox-button-spacing} );
24
- }
25
-
26
- &.k-listbox-actions-left,
27
- &.k-listbox-actions-right {
28
- flex-direction: row;
29
-
30
- .k-listbox-actions {
31
- flex-direction: column;
32
- }
33
- }
34
-
35
- &.k-listbox-actions-right {
36
- flex-direction: row-reverse;
37
- }
38
-
39
- &.k-listbox-actions-top,
40
- &.k-listbox-actions-bottom {
41
- flex-direction: column;
42
-
43
- .k-listbox-actions {
44
- flex-direction: row;
45
- }
46
- }
47
-
48
- &.k-listbox-actions-bottom {
49
- flex-direction: column-reverse;
50
- }
51
-
52
- .k-list-scroller {
53
- width: 100%;
54
- min-height: 0;
55
- height: inherit;
56
- border-width: var( --kendo-listbox-border-width, #{$kendo-listbox-border-width} );
57
- border-style: solid;
58
- box-sizing: border-box;
59
- display: flex;
60
- flex-flow: column nowrap;
61
-
62
- .k-list-scroller {
63
- border-width: 0;
64
- }
65
-
66
- .k-list {
67
- height: inherit;
68
- background: transparent;
69
- }
70
- }
71
-
72
- .k-drop-hint {
73
- border-top-width: var( --kendo-listbox-drop-hint-width, #{$kendo-listbox-drop-hint-width} );
74
- border-top-style: solid;
75
- }
76
-
77
- .k-ghost {
78
- opacity: .5;
79
- }
80
- }
81
-
82
- .k-item {
83
- cursor: default;
84
- }
6
+ @include kendo-listbox--layout-base();
85
7
 
86
8
  }
package/scss/listbox/_theme.scss CHANGED
@@ -1,18 +1,15 @@
1
1
  @use "../core/_index.scss" as *;
2
2
  @use "./_variables.scss" as *;
3
+ @use "@progress/kendo-theme-core/scss/components/listbox/_theme.scss" as *;
3
4
 
4
5
  @mixin kendo-listbox--theme() {
5
6
 
7
+ @include kendo-listbox--theme-base();
8
+
6
9
  .k-listbox {
7
- .k-list-scroller {
8
- @include fill(
9
- var( --kendo-listbox-text, #{$kendo-listbox-text} ),
10
- var( --kendo-listbox-bg, #{$kendo-listbox-bg} ),
11
- var( --kendo-listbox-border, #{$kendo-listbox-border} )
12
- );
13
- }
10
+
14
11
  .k-drop-hint {
15
- border-top-color: var( --kendo-listbox-drop-hint-border-color, #{$kendo-listbox-drop-hint-border-color} );
12
+ border-top-color: $kendo-listbox-drop-hint-border-color;
16
13
  }
17
14
  }
18
15
 
package/scss/listbox/_variables.scss CHANGED
@@ -3,42 +3,57 @@
3
3
 
4
4
  /// The spacing between the ListBox elements.
5
5
  /// @group listbox
6
- $kendo-listbox-spacing: k-spacing(2) !default;
6
+ $kendo-listbox-spacing: var( --kendo-listbox-spacing, #{k-spacing(2)} ) !default;
7
7
  /// The spacing between the ListBox buttons.
8
8
  /// @group listbox
9
- $kendo-listbox-button-spacing: k-spacing(2) !default;
9
+ $kendo-listbox-button-spacing: var( --kendo-listbox-button-spacing, #{k-spacing(2)} ) !default;
10
10
  /// WThe width of the ListBox.
11
11
  /// @group listbox
12
- $kendo-listbox-width: 10em !default;
12
+ $kendo-listbox-width: var( --kendo-listbox-width, 10em ) !default;
13
13
  /// The height of the ListBox.
14
14
  /// @group listbox
15
- $kendo-listbox-height: 200px !default;
15
+ $kendo-listbox-height: var( --kendo-listbox-height, 200px ) !default;
16
16
  /// The width of the border around the ListBox.
17
17
  /// @group listbox
18
- $kendo-listbox-border-width: 1px !default;
18
+ $kendo-listbox-border-width: var( --kendo-listbox-border-width, 1px ) !default;
19
19
  /// The font family of the ListBox.
20
20
  /// @group listbox
21
- $kendo-listbox-font-family: var( --kendo-font-family, normal ) !default;
21
+ $kendo-listbox-font-family: var( --kendo-listbox-font-family, var( --kendo-font-family, normal ) ) !default;
22
22
  /// The font size of the ListBox.
23
23
  /// @group listbox
24
- $kendo-listbox-font-size: var( --kendo-font-size, inherit ) !default;
24
+ $kendo-listbox-font-size: var( --kendo-listbox-font-size, var( --kendo-font-size, inherit ) ) !default;
25
25
  /// The line height of the ListBox.
26
26
  /// @group listbox
27
- $kendo-listbox-line-height: var( --kendo-line-height, normal ) !default;
27
+ $kendo-listbox-line-height: var( --kendo-listbox-line-height, var( --kendo-line-height, normal ) ) !default;
28
28
 
29
29
  /// The text color of the ListBox.
30
30
  /// @group listbox
31
- $kendo-listbox-text: k-color(on-app-surface) !default;
31
+ $kendo-listbox-text: var( --kendo-listbox-text, #{k-color(on-app-surface)} ) !default;
32
32
  /// The background color of the ListBox.
33
33
  /// @group listbox
34
- $kendo-listbox-bg: k-color(surface-alt) !default;
34
+ $kendo-listbox-bg: var( --kendo-listbox-bg, #{k-color(surface-alt)} ) !default;
35
35
  /// The border color of the ListBox.
36
36
  /// @group listbox
37
- $kendo-listbox-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
37
+ $kendo-listbox-border: var( --kendo-listbox-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
38
38
 
39
39
  /// The width of the ListBox drop hint.
40
40
  /// @group listbox
41
- $kendo-listbox-drop-hint-width: 1px !default;
41
+ $kendo-listbox-drop-hint-width: var( --kendo-listbox-drop-hint-width, 1px ) !default;
42
42
  /// The border color of the ListBox drop hint.
43
43
  /// @group listbox
44
- $kendo-listbox-drop-hint-border-color: k-color(primary) !default;
44
+ $kendo-listbox-drop-hint-border-color: var( --kendo-listbox-drop-hint-border-color, #{k-color(primary)} ) !default;
45
+
46
+ @forward "@progress/kendo-theme-core/scss/components/listbox/_variables.scss" with (
47
+ $kendo-listbox-spacing: $kendo-listbox-spacing,
48
+ $kendo-listbox-button-spacing: $kendo-listbox-button-spacing,
49
+ $kendo-listbox-width: $kendo-listbox-width,
50
+ $kendo-listbox-default-height: $kendo-listbox-height,
51
+ $kendo-listbox-border-width: $kendo-listbox-border-width,
52
+ $kendo-listbox-font-family: $kendo-listbox-font-family,
53
+ $kendo-listbox-font-size: $kendo-listbox-font-size,
54
+ $kendo-listbox-line-height: $kendo-listbox-line-height,
55
+ $kendo-listbox-text: $kendo-listbox-text,
56
+ $kendo-listbox-bg: $kendo-listbox-bg,
57
+ $kendo-listbox-border: $kendo-listbox-border,
58
+ $kendo-listbox-drop-hint-width: $kendo-listbox-drop-hint-width
59
+ );