@progress/kendo-theme-fluent 11.2.1-dev.0 → 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 (341) 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/_index.scss +0 -1
  131. package/scss/forms/_layout.scss +5 -302
  132. package/scss/forms/_theme.scss +5 -24
  133. package/scss/forms/_variables.scss +73 -39
  134. package/scss/gantt/_layout.scss +5 -801
  135. package/scss/gantt/_theme.scss +17 -236
  136. package/scss/gantt/_variables.scss +142 -73
  137. package/scss/grid/_layout.scss +60 -1276
  138. package/scss/grid/_theme.scss +35 -343
  139. package/scss/grid/_variables.scss +306 -183
  140. package/scss/gridlayout/_layout.scss +1 -6
  141. package/scss/gridlayout/_theme.scss +1 -6
  142. package/scss/icons/_layout.scss +4 -33
  143. package/scss/icons/_theme.scss +7 -1
  144. package/scss/icons/_variables.scss +35 -9
  145. package/scss/imageeditor/_layout.scss +2 -152
  146. package/scss/imageeditor/_theme.scss +5 -42
  147. package/scss/imageeditor/_variables.scss +66 -32
  148. package/scss/index.scss +2 -1
  149. package/scss/input/_layout.scss +36 -468
  150. package/scss/input/_theme.scss +52 -128
  151. package/scss/input/_variables.scss +153 -208
  152. package/scss/list/_layout.scss +3 -252
  153. package/scss/list/_theme.scss +10 -81
  154. package/scss/list/_variables.scss +176 -92
  155. package/scss/listbox/_layout.scss +2 -80
  156. package/scss/listbox/_theme.scss +5 -8
  157. package/scss/listbox/_variables.scss +28 -13
  158. package/scss/listgroup/_layout.scss +2 -174
  159. package/scss/listgroup/_theme.scss +2 -8
  160. package/scss/listgroup/_variables.scss +23 -10
  161. package/scss/listview/_layout.scss +6 -133
  162. package/scss/listview/_theme.scss +8 -37
  163. package/scss/listview/_variables.scss +66 -39
  164. package/scss/loader/_layout.scss +15 -572
  165. package/scss/loader/_theme.scss +2 -14
  166. package/scss/loader/_variables.scss +90 -92
  167. package/scss/map/_layout.scss +7 -121
  168. package/scss/map/_theme.scss +5 -17
  169. package/scss/map/_variables.scss +40 -22
  170. package/scss/maskedtextbox/_layout.scss +3 -3
  171. package/scss/maskedtextbox/_theme.scss +3 -3
  172. package/scss/mediaplayer/_layout.scss +5 -72
  173. package/scss/mediaplayer/_theme.scss +5 -15
  174. package/scss/mediaplayer/_variables.scss +27 -14
  175. package/scss/menu/_layout.scss +25 -267
  176. package/scss/menu/_theme.scss +14 -73
  177. package/scss/menu/_variables.scss +135 -76
  178. package/scss/menu-button/_layout.scss +9 -14
  179. package/scss/menu-button/_theme.scss +5 -1
  180. package/scss/menu-button/_variables.scss +10 -0
  181. package/scss/messagebox/_layout.scss +2 -18
  182. package/scss/messagebox/_theme.scss +4 -19
  183. package/scss/messagebox/_variables.scss +33 -37
  184. package/scss/multiselect/_layout.scss +3 -4
  185. package/scss/multiselect/_theme.scss +3 -4
  186. package/scss/no-data/_layout.scss +2 -17
  187. package/scss/no-data/_theme.scss +2 -5
  188. package/scss/no-data/_variables.scss +7 -2
  189. package/scss/notification/_functions.scss +17 -0
  190. package/scss/notification/_layout.scss +2 -68
  191. package/scss/notification/_theme.scss +4 -28
  192. package/scss/notification/_variables.scss +50 -91
  193. package/scss/numerictextbox/_layout.scss +3 -7
  194. package/scss/numerictextbox/_theme.scss +3 -3
  195. package/scss/orgchart/_layout.scss +8 -99
  196. package/scss/orgchart/_theme.scss +4 -45
  197. package/scss/orgchart/_variables.scss +87 -45
  198. package/scss/otp/_layout.scss +1 -34
  199. package/scss/otp/_theme.scss +1 -7
  200. package/scss/otp/_variables.scss +25 -12
  201. package/scss/overlay/_layout.scss +2 -11
  202. package/scss/overlay/_theme.scss +4 -3
  203. package/scss/overlay/_variables.scss +7 -3
  204. package/scss/pager/_layout.scss +11 -145
  205. package/scss/pager/_theme.scss +7 -15
  206. package/scss/pager/_variables.scss +49 -26
  207. package/scss/panel/_layout.scss +2 -24
  208. package/scss/panel/_theme.scss +10 -13
  209. package/scss/panel/_variables.scss +23 -10
  210. package/scss/panelbar/_layout.scss +17 -95
  211. package/scss/panelbar/_theme.scss +15 -164
  212. package/scss/panelbar/_variables.scss +134 -68
  213. package/scss/pdf-viewer/_layout.scss +3 -327
  214. package/scss/pdf-viewer/_theme.scss +2 -80
  215. package/scss/pdf-viewer/_variables.scss +75 -36
  216. package/scss/pivotgrid/_index.scss +0 -6
  217. package/scss/pivotgrid/_layout.scss +44 -579
  218. package/scss/pivotgrid/_theme.scss +5 -192
  219. package/scss/pivotgrid/_variables.scss +144 -70
  220. package/scss/popover/_layout.scss +6 -73
  221. package/scss/popover/_theme.scss +2 -36
  222. package/scss/popover/_variables.scss +54 -27
  223. package/scss/popup/_layout.scss +5 -70
  224. package/scss/popup/_theme.scss +2 -9
  225. package/scss/popup/_variables.scss +25 -12
  226. package/scss/progressbar/_layout.scss +10 -196
  227. package/scss/progressbar/_theme.scss +11 -46
  228. package/scss/progressbar/_variables.scss +57 -34
  229. package/scss/prompt/_layout.scss +2 -75
  230. package/scss/prompt/_theme.scss +2 -35
  231. package/scss/prompt/_variables.scss +43 -20
  232. package/scss/radio/_layout.scss +12 -178
  233. package/scss/radio/_theme.scss +7 -75
  234. package/scss/radio/_variables.scss +72 -36
  235. package/scss/rating/_layout.scss +11 -57
  236. package/scss/rating/_theme.scss +8 -6
  237. package/scss/rating/_variables.scss +21 -13
  238. package/scss/responsivepanel/_layout.scss +2 -45
  239. package/scss/responsivepanel/_theme.scss +3 -3
  240. package/scss/ripple/_layout.scss +2 -50
  241. package/scss/ripple/_theme.scss +2 -2
  242. package/scss/scheduler/_layout.scss +11 -773
  243. package/scss/scheduler/_theme.scss +32 -167
  244. package/scss/scheduler/_variables.scss +149 -77
  245. package/scss/scroller/_layout.scss +2 -80
  246. package/scss/scroller/_theme.scss +2 -5
  247. package/scss/scrollview/_layout.scss +2 -159
  248. package/scss/scrollview/_theme.scss +11 -35
  249. package/scss/scrollview/_variables.scss +52 -29
  250. package/scss/searchbox/_layout.scss +2 -0
  251. package/scss/searchbox/_theme.scss +4 -1
  252. package/scss/searchbox/_variables.scss +1 -1
  253. package/scss/signature/_layout.scss +3 -67
  254. package/scss/signature/_theme.scss +3 -8
  255. package/scss/signature/_variables.scss +46 -25
  256. package/scss/skeleton/_layout.scss +2 -79
  257. package/scss/skeleton/_theme.scss +2 -17
  258. package/scss/skeleton/_variables.scss +15 -6
  259. package/scss/slider/_layout.scss +18 -203
  260. package/scss/slider/_theme.scss +31 -40
  261. package/scss/slider/_variables.scss +58 -41
  262. package/scss/speech-to-text-button/_layout.scss +1 -9
  263. package/scss/speech-to-text-button/_theme.scss +1 -3
  264. package/scss/split-button/_layout.scss +22 -18
  265. package/scss/split-button/_theme.scss +2 -1
  266. package/scss/split-button/_variables.scss +18 -9
  267. package/scss/splitter/_layout.scss +8 -171
  268. package/scss/splitter/_theme.scss +2 -31
  269. package/scss/splitter/_variables.scss +42 -20
  270. package/scss/spreadsheet/_layout.scss +50 -724
  271. package/scss/spreadsheet/_theme.scss +14 -182
  272. package/scss/spreadsheet/_variables.scss +172 -99
  273. package/scss/stacklayout/_layout.scss +1 -5
  274. package/scss/stacklayout/_theme.scss +1 -5
  275. package/scss/stepper/_layout.scss +9 -255
  276. package/scss/stepper/_theme.scss +4 -186
  277. package/scss/stepper/_variables.scss +125 -60
  278. package/scss/suggestion/_layout.scss +2 -38
  279. package/scss/suggestion/_theme.scss +3 -66
  280. package/scss/suggestion/_variables.scss +42 -19
  281. package/scss/switch/_layout.scss +2 -138
  282. package/scss/switch/_theme.scss +2 -136
  283. package/scss/switch/_variables.scss +99 -49
  284. package/scss/table/_layout.scss +6 -249
  285. package/scss/table/_theme.scss +9 -95
  286. package/scss/table/_variables.scss +100 -64
  287. package/scss/tabstrip/_layout.scss +2 -421
  288. package/scss/tabstrip/_theme.scss +12 -123
  289. package/scss/tabstrip/_variables.scss +113 -61
  290. package/scss/taskboard/_layout.scss +28 -178
  291. package/scss/taskboard/_theme.scss +20 -55
  292. package/scss/taskboard/_variables.scss +122 -63
  293. package/scss/textarea/_layout.scss +3 -6
  294. package/scss/textarea/_theme.scss +3 -4
  295. package/scss/textbox/_layout.scss +3 -4
  296. package/scss/textbox/_theme.scss +3 -4
  297. package/scss/tilelayout/_layout.scss +2 -36
  298. package/scss/tilelayout/_theme.scss +13 -10
  299. package/scss/tilelayout/_variables.scss +19 -8
  300. package/scss/time-marker/_layout.scss +2 -15
  301. package/scss/time-marker/_theme.scss +2 -17
  302. package/scss/time-marker/_variables.scss +7 -2
  303. package/scss/timedurationpicker/_layout.scss +3 -4
  304. package/scss/timedurationpicker/_theme.scss +3 -4
  305. package/scss/timeline/_layout.scss +8 -423
  306. package/scss/timeline/_theme.scss +11 -34
  307. package/scss/timeline/_variables.scss +108 -61
  308. package/scss/timepicker/_layout.scss +7 -3
  309. package/scss/timepicker/_theme.scss +3 -4
  310. package/scss/timeselector/_layout.scss +3 -223
  311. package/scss/timeselector/_theme.scss +5 -55
  312. package/scss/timeselector/_variables.scss +84 -41
  313. package/scss/toolbar/_layout.scss +11 -297
  314. package/scss/toolbar/_theme.scss +3 -167
  315. package/scss/toolbar/_variables.scss +65 -32
  316. package/scss/tooltip/_functions.scss +17 -0
  317. package/scss/tooltip/_layout.scss +13 -74
  318. package/scss/tooltip/_theme.scss +17 -23
  319. package/scss/tooltip/_variables.scss +50 -72
  320. package/scss/treelist/_layout.scss +3 -82
  321. package/scss/treelist/_theme.scss +4 -6
  322. package/scss/treelist/_variables.scss +7 -2
  323. package/scss/treeview/_layout.scss +8 -137
  324. package/scss/treeview/_theme.scss +20 -65
  325. package/scss/treeview/_variables.scss +88 -48
  326. package/scss/typography/_layout.scss +3 -113
  327. package/scss/typography/_theme.scss +2 -17
  328. package/scss/typography/_variables.scss +84 -3
  329. package/scss/upload/_layout.scss +7 -219
  330. package/scss/upload/_theme.scss +4 -90
  331. package/scss/upload/_variables.scss +66 -29
  332. package/scss/validator/_layout.scss +2 -16
  333. package/scss/validator/_theme.scss +2 -2
  334. package/scss/virtual-scroller/_layout.scss +2 -34
  335. package/scss/virtual-scroller/_theme.scss +2 -2
  336. package/scss/window/_layout.scss +9 -141
  337. package/scss/window/_theme.scss +7 -35
  338. package/scss/window/_variables.scss +65 -70
  339. package/scss/wizard/_layout.scss +8 -95
  340. package/scss/wizard/_theme.scss +4 -7
  341. package/scss/wizard/_variables.scss +24 -11
package/scss/taskboard/_variables.scss CHANGED
@@ -5,204 +5,263 @@
5
5
 
6
6
  /// The spacing index of the TaskBoard.
7
7
  /// @group taskboard
8
- $kendo-taskboard-spacer: k-spacing(4) !default;
8
+ $kendo-taskboard-spacer: var( --kendo-taskboard-spacer, #{k-spacing(4)} ) !default;
9
9
 
10
10
  /// The border width of the TaskBoard.
11
11
  /// @group taskboard
12
- $kendo-taskboard-border-width: 1px !default;
12
+ $kendo-taskboard-border-width: var( --kendo-taskboard-border-width, 1px ) !default;
13
13
  /// The border style of the TaskBoard.
14
14
  /// @group taskboard
15
15
  $kendo-taskboard-border-style: solid !default;
16
16
  /// The vertical padding of the TaskBoard.
17
17
  /// @group taskboard
18
- $kendo-taskboard-padding-y: k-spacing(0) !default;
18
+ $kendo-taskboard-padding-y: var( --kendo-taskboard-padding-y, #{k-spacing(0)} ) !default;
19
19
  /// The horizontal of the TaskBoard.
20
20
  /// @group taskboard
21
- $kendo-taskboard-padding-x: k-spacing(0) !default;
21
+ $kendo-taskboard-padding-x: var( --kendo-taskboard-padding-x, #{k-spacing(0)} ) !default;
22
22
  /// The font family of the TaskBoard.
23
23
  /// @group taskboard
24
- $kendo-taskboard-font-family: var( --kendo-font-family, inherit ) !default;
24
+ $kendo-taskboard-font-family: var( --kendo-taskboard-font-family, var( --kendo-font-family, inherit ) ) !default;
25
25
  /// The font size of the TaskBoard.
26
26
  /// @group taskboard
27
- $kendo-taskboard-font-size: var( --kendo-font-size, inherit ) !default;
27
+ $kendo-taskboard-font-size: var( --kendo-taskboard-font-size, var( --kendo-font-size, inherit ) ) !default;
28
28
  /// The line height of the TaskBoard.
29
29
  /// @group taskboard
30
- $kendo-taskboard-line-height: var( --kendo-line-height, inherit ) !default;
30
+ $kendo-taskboard-line-height: var( --kendo-taskboard-line-height, var( --kendo-line-height, inherit ) ) !default;
31
31
  /// The background color of the TaskBoard.
32
32
  /// @group taskboard
33
- $kendo-taskboard-bg: k-color(surface-alt) !default;
33
+ $kendo-taskboard-bg: var( --kendo-taskboard-bg, #{k-color(surface-alt)} ) !default;
34
34
  /// The text color of the TaskBoard.
35
35
  /// @group taskboard
36
- $kendo-taskboard-text: k-color(on-app-surface) !default;
36
+ $kendo-taskboard-text: var( --kendo-taskboard-text, #{k-color(on-app-surface)} ) !default;
37
37
  /// The border color of the TaskBoard.
38
38
  /// @group taskboard
39
- $kendo-taskboard-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
39
+ $kendo-taskboard-border: var( --kendo-taskboard-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
40
40
 
41
41
  /// The vertical padding of the TaskBoard content.
42
42
  /// @group taskboard
43
- $kendo-taskboard-content-padding-y: k-spacing(0) !default;
43
+ $kendo-taskboard-content-padding-y: var( --kendo-taskboard-content-padding-y, #{k-spacing(0)} ) !default;
44
44
  /// The horizontal padding of the TaskBoard content.
45
45
  /// @group taskboard
46
- $kendo-taskboard-content-padding-x: k-spacing(0) !default;
46
+ $kendo-taskboard-content-padding-x: var( --kendo-taskboard-content-padding-x, #{k-spacing(0)} ) !default;
47
47
 
48
48
  /// The vertical spacing of the TaskBoard column container.
49
49
  /// @group taskboard
50
- $kendo-taskboard-column-container-spacing-y: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
50
+ $kendo-taskboard-column-container-spacing-y: var( --kendo-taskboard-column-container-spacing-y, calc( #{$kendo-taskboard-spacer} / 2 ) ) !default;
51
51
  /// The vertical padding of the TaskBoard column container.
52
52
  /// @group taskboard
53
- $kendo-taskboard-column-container-padding-y: k-spacing(0) !default;
53
+ $kendo-taskboard-column-container-padding-y: var( --kendo-taskboard-column-container-padding-y, #{k-spacing(0)} ) !default;
54
54
  /// The horizontal padding of the TaskBoard column container.
55
55
  /// @group taskboard
56
- $kendo-taskboard-column-container-padding-x: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
56
+ $kendo-taskboard-column-container-padding-x: var( --kendo-taskboard-column-container-padding-x, calc( #{$kendo-taskboard-spacer} / 2 ) ) !default;
57
57
  /// The spacing of the TaskBoard columns container.
58
58
  /// @group taskboard
59
- $kendo-taskboard-columns-container-gap: $kendo-taskboard-spacer !default;
59
+ $kendo-taskboard-columns-container-gap: var( --kendo-taskboard-columns-container-gap, #{$kendo-taskboard-spacer} ) !default;
60
60
 
61
61
  /// The default width of the TaskBoard column.
62
62
  /// @group taskboard
63
- $kendo-taskboard-column-width: 320px !default;
63
+ $kendo-taskboard-column-width: var( --kendo-taskboard-column-width, 320px ) !default;
64
64
  /// The border width of the TaskBoard column.
65
65
  /// @group taskboard
66
- $kendo-taskboard-column-border-width: 1px !default;
66
+ $kendo-taskboard-column-border-width: var( --kendo-taskboard-column-border-width, 1px ) !default;
67
67
  /// The border radius of the TaskBoard column.
68
68
  /// @group taskboard
69
- $kendo-taskboard-column-border-radius: k-border-radius(md) !default;
69
+ $kendo-taskboard-column-border-radius: var( --kendo-taskboard-column-border-radius, #{k-border-radius(md)} ) !default;
70
70
  /// The background color of the TaskBoard column.
71
71
  /// @group taskboard
72
- $kendo-taskboard-column-bg: k-color(surface) !default;
72
+ $kendo-taskboard-column-bg: var( --kendo-taskboard-column-bg, #{k-color(surface)} ) !default;
73
73
  /// The text color of the TaskBoard column.
74
74
  /// @group taskboard
75
- $kendo-taskboard-column-text: k-color(on-app-surface) !default;
75
+ $kendo-taskboard-column-text: var( --kendo-taskboard-column-text, #{k-color(on-app-surface)} ) !default;
76
76
  /// The border color of the TaskBoard column.
77
77
  /// @group taskboard
78
- $kendo-taskboard-column-border: transparent !default;
78
+ $kendo-taskboard-column-border: var( --kendo-taskboard-column-border, transparent ) !default;
79
79
  /// The background color of the focused TaskBoard column.
80
80
  /// @group taskboard
81
- $kendo-taskboard-column-focus-bg: $kendo-taskboard-column-bg !default;
81
+ $kendo-taskboard-column-focus-bg: var( --kendo-taskboard-column-focus-bg, #{$kendo-taskboard-column-bg} ) !default;
82
82
  /// The text color of the focused TaskBoard column.
83
83
  /// @group taskboard
84
- $kendo-taskboard-column-focus-text: $kendo-taskboard-column-text !default;
84
+ $kendo-taskboard-column-focus-text: var( --kendo-taskboard-column-focus-text, #{$kendo-taskboard-column-text} ) !default;
85
85
  /// The border color of the focused TaskBoard column.
86
86
  /// @group taskboard
87
- $kendo-taskboard-column-focus-border: k-color(border) !default;
87
+ $kendo-taskboard-column-focus-border: var( --kendo-taskboard-column-focus-border, #{k-color(border)} ) !default;
88
88
 
89
89
  /// The vertical padding of the TaskBoard column header.
90
90
  /// @group taskboard
91
- $kendo-taskboard-column-header-padding-y: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
91
+ $kendo-taskboard-column-header-padding-y: var( --kendo-taskboard-column-header-padding-y, calc( #{$kendo-taskboard-spacer} / 2 ) ) !default;
92
92
  /// The horizontal padding of the TaskBoard column header.
93
93
  /// @group taskboard
94
- $kendo-taskboard-column-header-padding-x: $kendo-taskboard-column-header-padding-y !default;
94
+ $kendo-taskboard-column-header-padding-x: var( --kendo-taskboard-column-header-padding-x, #{$kendo-taskboard-column-header-padding-y} ) !default;
95
95
  /// The spacing of the TaskBoard column header.
96
96
  /// @group taskboard
97
- $kendo-taskboard-column-header-gap: calc( #{$kendo-taskboard-spacer} / 4 ) !default;
97
+ $kendo-taskboard-column-header-gap: var( --kendo-taskboard-column-header-gap, calc( #{$kendo-taskboard-spacer} / 4 ) ) !default;
98
98
  /// The spacing of the TaskBoard column header actions.
99
99
  /// @group taskboard
100
- $kendo-taskboard-column-header-actions-gap: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
100
+ $kendo-taskboard-column-header-actions-gap: var( --kendo-taskboard-column-header-actions-gap, calc( #{$kendo-taskboard-spacer} / 2 ) ) !default;
101
101
  /// The font weight of the TaskBoard column header.
102
102
  /// @group taskboard
103
- $kendo-taskboard-column-header-font-weight: 400 !default;
103
+ $kendo-taskboard-column-header-font-weight: var( --kendo-taskboard-column-header-font-weight, 400 ) !default;
104
104
  /// The text color of the TaskBoard column header.
105
105
  /// @group taskboard
106
- $kendo-taskboard-column-header-text: k-color(on-app-surface) !default;
106
+ $kendo-taskboard-column-header-text: var( --kendo-taskboard-column-header-text, #{k-color(on-app-surface)} ) !default;
107
107
 
108
108
  /// The vertical padding of the TaskBoard column Card wrapper.
109
109
  /// @group taskboard
110
- $kendo-taskboard-column-cards-padding-y: k-spacing(0) !default;
110
+ $kendo-taskboard-column-cards-padding-y: var( --kendo-taskboard-column-cards-padding-y, #{k-spacing(0)} ) !default;
111
111
  /// The horizontal padding of the TaskBoard column Card wrapper.
112
112
  /// @group taskboard
113
- $kendo-taskboard-column-cards-padding-x: k-spacing(0) !default;
113
+ $kendo-taskboard-column-cards-padding-x: var( --kendo-taskboard-column-cards-padding-x, #{k-spacing(0)} ) !default;
114
114
  /// The spacing of the TaskBoard column Card wrapper.
115
115
  /// @group taskboard
116
- $kendo-taskboard-column-cards-gap: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
117
-
116
+ $kendo-taskboard-column-cards-gap: var( --kendo-taskboard-column-cards-gap, calc( #{$kendo-taskboard-spacer} / 2 ) ) !default;
118
117
 
119
118
  /// The default width of the TaskBoard pane.
120
119
  /// @group taskboard
121
- $kendo-taskboard-pane-width: $kendo-taskboard-column-width !default;
120
+ $kendo-taskboard-pane-width: var( --kendo-taskboard-pane-width, #{$kendo-taskboard-column-width} ) !default;
122
121
  /// The vertical padding of the TaskBoard pane.
123
122
  /// @group taskboard
124
- $kendo-taskboard-pane-padding-y: k-spacing(0) !default;
123
+ $kendo-taskboard-pane-padding-y: var( --kendo-taskboard-pane-padding-y, #{k-spacing(0)} ) !default;
125
124
  /// The horizontal padding of the TaskBoard pane.
126
125
  /// @group taskboard
127
- $kendo-taskboard-pane-padding-x: k-spacing(0) !default;
126
+ $kendo-taskboard-pane-padding-x: var( --kendo-taskboard-pane-padding-x, #{k-spacing(0)} ) !default;
128
127
  /// The border width of the TaskBoard pane.
129
128
  /// @group taskboard
130
- $kendo-taskboard-pane-border-width: 1px !default;
129
+ $kendo-taskboard-pane-border-width: var( --kendo-taskboard-pane-border-width, 1px ) !default;
131
130
  /// The background color of the TaskBoard pane.
132
131
  /// @group taskboard
133
- $kendo-taskboard-pane-bg: k-color(surface-alt) !default;
132
+ $kendo-taskboard-pane-bg: var( --kendo-taskboard-pane-bg, #{k-color(surface-alt)} ) !default;
134
133
  /// The text color of the TaskBoard pane.
135
134
  /// @group taskboard
136
- $kendo-taskboard-pane-text: k-color(on-app-surface) !default;
135
+ $kendo-taskboard-pane-text: var( --kendo-taskboard-pane-text, #{k-color(on-app-surface)} ) !default;
137
136
  /// The border color of the TaskBoard pane.
138
137
  /// @group taskboard
139
- $kendo-taskboard-pane-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
138
+ $kendo-taskboard-pane-border: var( --kendo-taskboard-pane-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
140
139
 
141
140
  /// The vertical padding of the TaskBoard pane header.
142
141
  /// @group taskboard
143
- $kendo-taskboard-pane-header-padding-y: $kendo-taskboard-spacer !default;
142
+ $kendo-taskboard-pane-header-padding-y: var( --kendo-taskboard-pane-header-padding-y, #{$kendo-taskboard-spacer} ) !default;
144
143
  /// The horizontal padding of the TaskBoard pane header.
145
144
  /// @group taskboard
146
- $kendo-taskboard-pane-header-padding-x: k-spacing(6) !default;
145
+ $kendo-taskboard-pane-header-padding-x: var( --kendo-taskboard-pane-header-padding-x, #{k-spacing(6)} ) !default;
147
146
  /// The font size of the TaskBoard pane header.
148
147
  /// @group taskboard
149
- $kendo-taskboard-pane-header-font-size: var( --kendo-font-size-xl, 1rem ) !default;
148
+ $kendo-taskboard-pane-header-font-size: var( --kendo-taskboard-pane-header-font-size, var( --kendo-font-size-xl, 1rem ) ) !default;
150
149
  /// The font weight of the TaskBoard pane header.
151
150
  /// @group taskboard
152
- $kendo-taskboard-pane-header-font-weight: var( --kendo-font-weight-bold, bold ) !default;
151
+ $kendo-taskboard-pane-header-font-weight: var( --kendo-taskboard-pane-header-font-weight, var( --kendo-font-weight-bold, bold ) ) !default;
153
152
  /// The text color of the TaskBoard pane header.
154
153
  /// @group taskboard
155
- $kendo-taskboard-pane-header-text: $kendo-taskboard-pane-text !default;
154
+ $kendo-taskboard-pane-header-text: var( --kendo-taskboard-pane-header-text, #{$kendo-taskboard-pane-text} ) !default;
156
155
 
157
156
  /// The vertical padding of the TaskBoard pane content.
158
157
  /// @group taskboard
159
- $kendo-taskboard-pane-content-padding-y: k-spacing(0) !default;
158
+ $kendo-taskboard-pane-content-padding-y: var( --kendo-taskboard-pane-content-padding-y, #{k-spacing(0)} ) !default;
160
159
  /// The horizontal padding of the TaskBoard pane content.
161
160
  /// @group taskboard
162
- $kendo-taskboard-pane-content-padding-x: $kendo-taskboard-pane-header-padding-x !default;
161
+ $kendo-taskboard-pane-content-padding-x: var( --kendo-taskboard-pane-content-padding-x, #{$kendo-taskboard-pane-header-padding-x} ) !default;
163
162
 
164
163
  /// The vertical padding of the TaskBoard pane actions.
165
164
  /// @group taskboard
166
- $kendo-taskboard-pane-actions-padding-y: k-spacing(6) !default;
165
+ $kendo-taskboard-pane-actions-padding-y: var( --kendo-taskboard-pane-actions-padding-y, #{k-spacing(6)} ) !default;
167
166
  /// The horizontal padding of the TaskBoard pane actions.
168
167
  /// @group taskboard
169
- $kendo-taskboard-pane-actions-padding-x: $kendo-taskboard-pane-actions-padding-y !default;
168
+ $kendo-taskboard-pane-actions-padding-x: var( --kendo-taskboard-pane-actions-padding-x, #{$kendo-taskboard-pane-actions-padding-y} ) !default;
170
169
 
171
170
  /// The vertical padding of the TaskBoard Card.
172
171
  /// @group taskboard
173
- $kendo-taskboard-card-padding-y: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
172
+ $kendo-taskboard-card-padding-y: var( --kendo-taskboard-card-padding-y, calc( #{$kendo-taskboard-spacer} / 2 ) ) !default;
174
173
  /// The horizontal padding of the TaskBoard Card.
175
174
  /// @group taskboard
176
- $kendo-taskboard-card-padding-x: $kendo-taskboard-card-padding-y !default;
175
+ $kendo-taskboard-card-padding-x: var( --kendo-taskboard-card-padding-x, #{$kendo-taskboard-card-padding-y} ) !default;
177
176
  /// The border width of the TaskBoard Card category.
178
177
  /// @group taskboard
179
- $kendo-taskboard-card-category-border-width: 4px !default;
178
+ $kendo-taskboard-card-category-border-width: var( --kendo-taskboard-card-category-border-width, 4px ) !default;
180
179
  /// The shadow of the focused TaskBoard Card.
181
180
  /// @group taskboard
182
- $kendo-taskboard-card-focus-shadow: none !default;
181
+ $kendo-taskboard-card-focus-shadow: var( --kendo-taskboard-card-focus-shadow, none ) !default;
183
182
  /// The border of the selected TaskBoard Card.
184
183
  /// @group taskboard
185
- $kendo-taskboard-card-selected-border: k-color(primary) !default;
184
+ $kendo-taskboard-card-selected-border: var( --kendo-taskboard-card-selected-border, #{k-color(primary)} ) !default;
186
185
  /// The shadow of the selected TaskBoard Card.
187
186
  /// @group taskboard
188
- $kendo-taskboard-card-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
187
+ $kendo-taskboard-card-selected-shadow: var( --kendo-taskboard-card-selected-shadow, var( --kendo-box-shadow-depth-3, none ) ) !default;
189
188
 
190
189
  /// The font size of the TaskBoard Card title.
191
190
  /// @group taskboard
192
- $kendo-taskboard-card-title-font-size: var( --kendo-font-size, 1rem ) !default;
191
+ $kendo-taskboard-card-title-font-size: var( --kendo-taskboard-card-title-font-size, var( --kendo-font-size, 1rem ) ) !default;
193
192
  /// The font weight of the TaskBoard Card title.
194
193
  /// @group taskboard
195
- $kendo-taskboard-card-title-font-weight: var( --kendo-font-weight-bold, 600 ) !default;
194
+ $kendo-taskboard-card-title-font-weight: var( --kendo-taskboard-card-title-font-weight, var( --kendo-font-weight-bold, 600 ) ) !default;
196
195
 
197
196
  /// The border width of the TaskBoard Card placeholder.
198
197
  /// @group taskboard
199
- $kendo-taskboard-drag-placeholder-border-width: 1px !default;
198
+ $kendo-taskboard-drag-placeholder-border-width: var( --kendo-taskboard-drag-placeholder-border-width, 1px ) !default;
200
199
  /// The border radius of the TaskBoard Card placeholder.
201
200
  /// @group taskboard
202
- $kendo-taskboard-drag-placeholder-border-radius: $kendo-card-border-radius !default;
201
+ $kendo-taskboard-drag-placeholder-border-radius: var( --kendo-taskboard-drag-placeholder-border-radius, #{$kendo-card-border-radius} ) !default;
203
202
  /// The background color of the TaskBoard Card placeholder.
204
203
  /// @group taskboard
205
- $kendo-taskboard-drag-placeholder-bg: color-mix(in srgb, k-color(on-app-surface) 23%, transparent) !default;
204
+ $kendo-taskboard-drag-placeholder-bg: var( --kendo-taskboard-drag-placeholder-bg, #{color-mix(in srgb, k-color(on-app-surface) 23%, transparent)} ) !default;
206
205
  /// The border color of the TaskBoard Card placeholder.
207
206
  /// @group taskboard
208
- $kendo-taskboard-drag-placeholder-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
207
+ $kendo-taskboard-drag-placeholder-border: var( --kendo-taskboard-drag-placeholder-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
208
+
209
+ @forward "@progress/kendo-theme-core/scss/components/taskboard/_variables.scss" with (
210
+ $kendo-taskboard-spacer: $kendo-taskboard-spacer,
211
+ $kendo-taskboard-padding-y: $kendo-taskboard-padding-y,
212
+ $kendo-taskboard-padding-x: $kendo-taskboard-padding-x,
213
+ $kendo-taskboard-font-family: $kendo-taskboard-font-family,
214
+ $kendo-taskboard-font-size: $kendo-taskboard-font-size,
215
+ $kendo-taskboard-line-height: $kendo-taskboard-line-height,
216
+ $kendo-taskboard-bg: $kendo-taskboard-bg,
217
+ $kendo-taskboard-text: $kendo-taskboard-text,
218
+ $kendo-taskboard-border: $kendo-taskboard-border,
219
+ $kendo-taskboard-content-padding-y: $kendo-taskboard-content-padding-y,
220
+ $kendo-taskboard-column-container-spacing-y: $kendo-taskboard-column-container-spacing-y,
221
+ $kendo-taskboard-column-container-padding-y: $kendo-taskboard-column-container-padding-y,
222
+ $kendo-taskboard-column-container-padding-x: $kendo-taskboard-column-container-padding-x,
223
+ $kendo-taskboard-columns-container-gap: $kendo-taskboard-columns-container-gap,
224
+ $kendo-taskboard-column-width: $kendo-taskboard-column-width,
225
+ $kendo-taskboard-column-border-width: $kendo-taskboard-column-border-width,
226
+ $kendo-taskboard-column-border-radius: $kendo-taskboard-column-border-radius,
227
+ $kendo-taskboard-column-bg: $kendo-taskboard-column-bg,
228
+ $kendo-taskboard-column-text: $kendo-taskboard-column-text,
229
+ $kendo-taskboard-column-border: $kendo-taskboard-column-border,
230
+ $kendo-taskboard-column-focus-bg: $kendo-taskboard-column-focus-bg,
231
+ $kendo-taskboard-column-focus-text: $kendo-taskboard-column-focus-text,
232
+ $kendo-taskboard-column-focus-border: $kendo-taskboard-column-focus-border,
233
+ $kendo-taskboard-column-header-padding-y: $kendo-taskboard-column-header-padding-y,
234
+ $kendo-taskboard-column-header-padding-x: $kendo-taskboard-column-header-padding-x,
235
+ $kendo-taskboard-column-header-gap: $kendo-taskboard-column-header-gap,
236
+ $kendo-taskboard-column-header-actions-gap: $kendo-taskboard-column-header-actions-gap,
237
+ $kendo-taskboard-column-header-font-weight: $kendo-taskboard-column-header-font-weight,
238
+ $kendo-taskboard-column-header-text: $kendo-taskboard-column-header-text,
239
+ $kendo-taskboard-column-cards-padding-y: $kendo-taskboard-column-cards-padding-y,
240
+ $kendo-taskboard-column-cards-padding-x: $kendo-taskboard-column-cards-padding-x,
241
+ $kendo-taskboard-column-cards-gap: $kendo-taskboard-column-cards-gap,
242
+ $kendo-taskboard-pane-width: $kendo-taskboard-pane-width,
243
+ $kendo-taskboard-pane-padding-y: $kendo-taskboard-pane-padding-y,
244
+ $kendo-taskboard-pane-padding-x: $kendo-taskboard-pane-padding-x,
245
+ $kendo-taskboard-pane-border-width: $kendo-taskboard-pane-border-width,
246
+ $kendo-taskboard-pane-bg: $kendo-taskboard-pane-bg,
247
+ $kendo-taskboard-pane-text: $kendo-taskboard-pane-text,
248
+ $kendo-taskboard-pane-border: $kendo-taskboard-pane-border,
249
+ $kendo-taskboard-pane-header-padding-y: $kendo-taskboard-pane-header-padding-y,
250
+ $kendo-taskboard-pane-header-padding-x: $kendo-taskboard-pane-header-padding-x,
251
+ $kendo-taskboard-pane-header-font-weight: $kendo-taskboard-pane-header-font-weight,
252
+ $kendo-taskboard-pane-header-text: $kendo-taskboard-pane-header-text,
253
+ $kendo-taskboard-pane-content-padding-y: $kendo-taskboard-pane-content-padding-y,
254
+ $kendo-taskboard-pane-content-padding-x: $kendo-taskboard-pane-content-padding-x,
255
+ $kendo-taskboard-pane-actions-padding-y: $kendo-taskboard-pane-actions-padding-y,
256
+ $kendo-taskboard-pane-actions-padding-x: $kendo-taskboard-pane-actions-padding-x,
257
+ $kendo-taskboard-card-padding-y: $kendo-taskboard-card-padding-y,
258
+ $kendo-taskboard-card-padding-x: $kendo-taskboard-card-padding-x,
259
+ $kendo-taskboard-card-category-border-width: $kendo-taskboard-card-category-border-width,
260
+ $kendo-taskboard-card-focus-shadow: $kendo-taskboard-card-focus-shadow,
261
+ $kendo-taskboard-card-selected-border: $kendo-taskboard-card-selected-border,
262
+ $kendo-taskboard-card-selected-shadow: $kendo-taskboard-card-selected-shadow,
263
+ $kendo-taskboard-drag-placeholder-border-width: $kendo-taskboard-drag-placeholder-border-width,
264
+ $kendo-taskboard-drag-placeholder-border-radius: $kendo-taskboard-drag-placeholder-border-radius,
265
+ $kendo-taskboard-drag-placeholder-bg: $kendo-taskboard-drag-placeholder-bg,
266
+ $kendo-taskboard-drag-placeholder-border: $kendo-taskboard-drag-placeholder-border
267
+ );
package/scss/textarea/_layout.scss CHANGED
@@ -1,8 +1,5 @@
1
- @mixin kendo-textarea--layout() {
2
-
3
- // Textarea
4
- .k-textarea:has(.k-input-inner[style*="width"]) {
5
- width: max-content;
6
- }
1
+ @use "@progress/kendo-theme-core/scss/components/textarea/_layout.scss" as *;
7
2
 
3
+ @mixin kendo-textarea--layout() {
4
+ @include kendo-textarea--layout-base();
8
5
  }
package/scss/textarea/_theme.scss CHANGED
@@ -1,6 +1,5 @@
1
- @mixin kendo-textarea--theme() {
2
-
3
- // Textarea
4
- .k-textarea {}
1
+ @use "@progress/kendo-theme-core/scss/components/textarea/_theme.scss" as *;
5
2
 
3
+ @mixin kendo-textarea--theme() {
4
+ @include kendo-textarea--theme-base();
6
5
  }
package/scss/textbox/_layout.scss CHANGED
@@ -1,6 +1,5 @@
1
- @mixin kendo-textbox--layout() {
2
-
3
- // Textbox
4
- .k-textbox {}
1
+ @use "@progress/kendo-theme-core/scss/components/textbox/_layout.scss" as *;
5
2
 
3
+ @mixin kendo-textbox--layout() {
4
+ @include kendo-textbox--layout-base();
6
5
  }
package/scss/textbox/_theme.scss CHANGED
@@ -1,6 +1,5 @@
1
- @mixin kendo-textbox--theme() {
2
-
3
- // Textbox
4
- .k-textbox {}
1
+ @use "@progress/kendo-theme-core/scss/components/textbox/_theme.scss" as *;
5
2
 
3
+ @mixin kendo-textbox--theme() {
4
+ @include kendo-textbox--theme-base();
6
5
  }
package/scss/tilelayout/_layout.scss CHANGED
@@ -1,42 +1,8 @@
1
1
  @use "../core/_index.scss" as *;
2
2
  @use "./_variables.scss" as *;
3
+ @use "@progress/kendo-theme-core/scss/components/tilelayout/_layout.scss" as *;
3
4
 
4
5
  @mixin kendo-tile-layout--layout() {
6
+ @include kendo-tile-layout--layout-base();
5
7
 
6
- .k-tilelayout {
7
- border-width: var( --kendo-tile-layout-border-width, #{$kendo-tile-layout-border-width} );
8
- border-style: solid;
9
- box-sizing: border-box;
10
- outline: 0;
11
- display: grid;
12
- position: relative;
13
- padding-block: var( --kendo-tile-layout-padding-y, #{$kendo-tile-layout-padding-y} );
14
- padding-inline: var( --kendo-tile-layout-padding-x, #{$kendo-tile-layout-padding-x} );
15
- -webkit-touch-callout: none;
16
- -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
17
- }
18
-
19
- .k-tilelayout-item {
20
- position: relative;
21
- z-index: 0;
22
- }
23
-
24
- .k-layout-item-hint {
25
- @include border-radius( var( --kendo-tile-layout-hint-border-radius, #{$kendo-tile-layout-hint-border-radius} ) );
26
- border-width: var( --kendo-tile-layout-hint-border-width, #{$kendo-tile-layout-hint-border-width} );
27
- border-style: solid;
28
- position: relative;
29
-
30
- &.k-layout-item-hint-resize {
31
- z-index: 3;
32
- }
33
- }
34
-
35
- .k-tilelayout-item-header.k-card-header {
36
- z-index: 0;
37
- }
38
-
39
- .k-tilelayout-item-body {
40
- min-height: 0;
41
- }
42
8
  }
package/scss/tilelayout/_theme.scss CHANGED
@@ -1,18 +1,21 @@
1
1
  @use "../core/_index.scss" as *;
2
+ @use "../card/_variables.scss" as *;
2
3
  @use "./_variables.scss" as *;
4
+ @use "@progress/kendo-theme-core/scss/components/tilelayout/_theme.scss" as *;
3
5
 
4
6
  @mixin kendo-tile-layout--theme() {
7
+ @include kendo-tile-layout--theme-base();
5
8
 
6
- .k-tilelayout {
7
- @include fill(
8
- $bg: var( --kendo-tile-layout-bg, #{$kendo-tile-layout-bg} )
9
- );
10
- }
9
+ .k-tilelayout .k-card {
10
+ @include box-shadow( $kendo-card-shadow );
11
+
12
+ &:focus,
13
+ &.k-focus {
14
+ @include focus-indicator( $kendo-card-focus-shadow );
15
+ }
11
16
 
12
- .k-layout-item-hint {
13
- @include fill(
14
- $bg: var( --kendo-tile-layout-hint-bg, #{$kendo-tile-layout-hint-bg} ),
15
- $border: var( --kendo-tile-layout-hint-border, #{$kendo-tile-layout-hint-border} )
16
- );
17
+ &.k-selected {
18
+ @include box-shadow( $kendo-card-focus-shadow );
19
+ }
17
20
  }
18
21
  }
package/scss/tilelayout/_variables.scss CHANGED
@@ -5,28 +5,39 @@
5
5
 
6
6
  /// The width of the border around the TileLayout.
7
7
  /// @group tile-layout
8
- $kendo-tile-layout-border-width: 0px !default;
8
+ $kendo-tile-layout-border-width: var( --kendo-tile-layout-border-width, 0px ) !default;
9
9
  /// The background color of the TileLayout.
10
10
  /// @group tile-layout
11
- $kendo-tile-layout-bg: k-color(surface) !default;
11
+ $kendo-tile-layout-bg: var( --kendo-tile-layout-bg, #{k-color(surface)} ) !default;
12
12
 
13
13
  /// The horizontal padding of the TileLayout.
14
14
  /// @group tile-layout
15
- $kendo-tile-layout-padding-x: k-spacing(4) !default;
15
+ $kendo-tile-layout-padding-x: var( --kendo-tile-layout-padding-x, #{k-spacing(4)} ) !default;
16
16
 
17
17
  /// The vertical padding of the TileLayout
18
18
  /// @group tile-layout
19
- $kendo-tile-layout-padding-y: $kendo-tile-layout-padding-x !default;
19
+ $kendo-tile-layout-padding-y: var( --kendo-tile-layout-padding-y, #{$kendo-tile-layout-padding-x} ) !default;
20
20
 
21
21
  /// The width of the border around the TileLayout hint.
22
22
  /// @group tile-layout
23
- $kendo-tile-layout-hint-border-width: 1px !default;
23
+ $kendo-tile-layout-hint-border-width: var( --kendo-tile-layout-hint-border-width, 1px ) !default;
24
24
  /// The radius of the border around the TileLayout hint.
25
25
  /// @group tile-layout
26
- $kendo-tile-layout-hint-border-radius: var( --kendo-border-radius-lg, initial ) !default;
26
+ $kendo-tile-layout-hint-border-radius: var( --kendo-tile-layout-hint-border-radius, var( --kendo-border-radius-lg, initial ) ) !default;
27
27
  /// The color of the border around the TileLayout hint.
28
28
  /// @group tile-layout
29
- $kendo-tile-layout-hint-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
29
+ $kendo-tile-layout-hint-border: var( --kendo-tile-layout-hint-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
30
30
  /// The background color of the TileLayout hint.
31
31
  /// @group tile-layout
32
- $kendo-tile-layout-hint-bg: rgba(255, 255, 255, .2) !default;
32
+ $kendo-tile-layout-hint-bg: var( --kendo-tile-layout-hint-bg, rgba(255, 255, 255, .2) ) !default;
33
+
34
+ @forward "@progress/kendo-theme-core/scss/components/tilelayout/_variables.scss" with (
35
+ $kendo-tile-layout-border-width: $kendo-tile-layout-border-width,
36
+ $kendo-tile-layout-bg: $kendo-tile-layout-bg,
37
+ $kendo-tile-layout-padding-x: $kendo-tile-layout-padding-x,
38
+ $kendo-tile-layout-padding-y: $kendo-tile-layout-padding-y,
39
+ $kendo-tile-layout-hint-border-width: $kendo-tile-layout-hint-border-width,
40
+ $kendo-tile-layout-hint-border-radius: $kendo-tile-layout-hint-border-radius,
41
+ $kendo-tile-layout-hint-border: $kendo-tile-layout-hint-border,
42
+ $kendo-tile-layout-hint-bg: $kendo-tile-layout-hint-bg
43
+ );
package/scss/time-marker/_layout.scss CHANGED
@@ -1,19 +1,6 @@
1
1
  @use "./_variables.scss" as *;
2
+ @use "@progress/kendo-theme-core/scss/components/time-marker/_layout.scss" as *;
2
3
 
3
4
  @mixin kendo-time-marker--layout() {
4
-
5
- .k-current-time {
6
- width: var( --kendo-current-time-width, #{$kendo-current-time-width} );
7
- position: absolute;
8
-
9
- &.k-current-time-arrow-left,
10
- &.k-current-time-arrow-right,
11
- &.k-current-time-arrow-down {
12
- width: 0;
13
- height: 0;
14
- background: transparent;
15
- border: 4px solid transparent;
16
- }
17
- }
18
-
5
+ @include kendo-time-marker--layout-base();
19
6
  }
package/scss/time-marker/_theme.scss CHANGED
@@ -1,21 +1,6 @@
1
1
  @use "./_variables.scss" as *;
2
+ @use "@progress/kendo-theme-core/scss/components/time-marker/_theme.scss" as *;
2
3
 
3
4
  @mixin kendo-time-marker--theme() {
4
-
5
- .k-current-time {
6
- background: var( --kendo-current-time-color, #{$kendo-current-time-color} );
7
-
8
- &.k-current-time-arrow-left {
9
- border-right-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
10
- }
11
-
12
- &.k-current-time-arrow-right {
13
- border-left-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
14
- }
15
-
16
- &.k-current-time-arrow-down {
17
- border-top-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
18
- }
19
- }
20
-
5
+ @include kendo-time-marker--theme-base();
21
6
  }
package/scss/time-marker/_variables.scss CHANGED
@@ -1,6 +1,11 @@
1
1
  /// The border width of the current time indicator.
2
2
  /// @group time-marker
3
- $kendo-current-time-width: 1px !default;
3
+ $kendo-current-time-width: var( --kendo-current-time-width, 1px ) !default;
4
4
  /// The color of the current time indicator.
5
5
  /// @group time-marker
6
- $kendo-current-time-color: #ff0000 !default;
6
+ $kendo-current-time-color: var( --kendo-current-time-color, #ff0000 ) !default;
7
+
8
+ @forward "@progress/kendo-theme-core/scss/components/time-marker/_variables.scss" with (
9
+ $kendo-current-time-width: $kendo-current-time-width,
10
+ $kendo-current-time-color: $kendo-current-time-color
11
+ );
package/scss/timedurationpicker/_layout.scss CHANGED
@@ -1,6 +1,5 @@
1
- @mixin kendo-time-duration-picker--layout() {
2
-
3
- // Time picker
4
- .k-timedurationpicker {}
1
+ @use "@progress/kendo-theme-core/scss/components/timedurationpicker/_layout.scss" as *;
5
2
 
3
+ @mixin kendo-time-duration-picker--layout() {
4
+ @include kendo-time-duration-picker--layout-base();
6
5
  }
package/scss/timedurationpicker/_theme.scss CHANGED
@@ -1,6 +1,5 @@
1
- @mixin kendo-time-duration-picker--theme() {
2
-
3
- // Time picker
4
- .k-timedurationpicker {}
1
+ @use "@progress/kendo-theme-core/scss/components/timedurationpicker/_theme.scss" as *;
5
2
 
3
+ @mixin kendo-time-duration-picker--theme() {
4
+ @include kendo-time-duration-picker--theme-base();
6
5
  }