@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/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
  }