@shortfuse/materialdesignweb 0.2.0 → 0.5.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 (416) hide show
  1. package/.browserslistrc +2 -1
  2. package/.eslintrc.json +188 -30
  3. package/.stylelintrc.json +643 -2
  4. package/.vscode/launch.json +20 -5
  5. package/.vscode/settings.json +3 -0
  6. package/CHANGELOG.md +36 -0
  7. package/README.md +82 -2
  8. package/adapters/datatable/column.js +176 -0
  9. package/adapters/datatable/index.js +253 -437
  10. package/adapters/dom/index.js +586 -0
  11. package/adapters/list/index.js +36 -113
  12. package/adapters/search/index.js +153 -180
  13. package/components/appbar/_spec.scss +165 -0
  14. package/components/appbar/_theme.scss +0 -0
  15. package/components/appbar/index.scss +2 -0
  16. package/components/banner/_spec.scss +83 -0
  17. package/components/banner/_theme.scss +0 -0
  18. package/components/banner/index.scss +2 -0
  19. package/components/bottomnav/README.md +4 -4
  20. package/components/bottomnav/_spec.scss +149 -0
  21. package/components/bottomnav/_theme.scss +0 -0
  22. package/components/bottomnav/index.js +100 -120
  23. package/components/bottomnav/index.scss +2 -0
  24. package/components/bottomnav/item.js +88 -0
  25. package/components/button/README.md +16 -22
  26. package/components/button/_spec.scss +162 -0
  27. package/components/button/_theme.scss +42 -0
  28. package/components/button/index.eta +32 -0
  29. package/components/button/index.js +37 -48
  30. package/components/button/index.pug +18 -0
  31. package/components/button/index.scss +2 -0
  32. package/components/card/_spec.scss +241 -0
  33. package/components/card/_theme.scss +0 -0
  34. package/components/card/index.scss +2 -0
  35. package/components/chip/_spec.scss +111 -0
  36. package/components/chip/_theme.scss +105 -0
  37. package/components/chip/index.js +23 -0
  38. package/components/chip/index.scss +2 -0
  39. package/components/chip/item.js +20 -0
  40. package/components/datatable/_spec.scss +225 -0
  41. package/components/datatable/_theme.scss +128 -0
  42. package/components/datatable/cell.js +44 -0
  43. package/components/datatable/columnheader.js +46 -0
  44. package/components/datatable/index.js +339 -443
  45. package/components/datatable/index.scss +2 -0
  46. package/components/datatable/row.js +48 -0
  47. package/components/datatable/rowheader.js +18 -0
  48. package/components/dialog/_spec.scss +203 -0
  49. package/components/dialog/_theme.scss +7 -0
  50. package/components/dialog/index.js +512 -437
  51. package/components/dialog/index.scss +2 -0
  52. package/components/divider/_spec.scss +11 -0
  53. package/components/divider/_theme.scss +0 -0
  54. package/components/divider/index.scss +2 -0
  55. package/components/elevation/_spec.scss +9 -0
  56. package/components/elevation/_theme.scss +0 -0
  57. package/components/elevation/index.scss +2 -0
  58. package/components/fab/{style.scss → _spec.scss} +104 -79
  59. package/components/fab/_theme.scss +0 -0
  60. package/components/fab/index.js +85 -79
  61. package/components/fab/index.scss +2 -0
  62. package/components/grid/_spec.scss +169 -0
  63. package/components/grid/_theme.scss +0 -0
  64. package/components/grid/index.scss +2 -0
  65. package/components/layout/_mixins.scss +11 -0
  66. package/components/layout/_spec.scss +916 -0
  67. package/components/layout/_theme.scss +19 -0
  68. package/components/layout/index.js +454 -0
  69. package/components/layout/index.scss +2 -0
  70. package/components/list/_spec.scss +363 -0
  71. package/components/list/_theme.scss +102 -0
  72. package/components/list/content.js +106 -0
  73. package/components/list/index.js +234 -79
  74. package/components/list/index.scss +2 -0
  75. package/components/list/item.js +167 -0
  76. package/components/list/secondary.js +45 -0
  77. package/components/menu/_spec.scss +329 -0
  78. package/components/menu/_theme.scss +0 -0
  79. package/components/menu/index.js +636 -651
  80. package/components/menu/index.scss +2 -0
  81. package/components/menu/item.js +231 -0
  82. package/components/progress/_spec.scss +156 -0
  83. package/components/progress/_theme.scss +0 -0
  84. package/components/progress/index.js +29 -13
  85. package/components/progress/index.scss +2 -0
  86. package/components/selection/_spec.scss +376 -0
  87. package/components/selection/_theme.scss +134 -0
  88. package/components/selection/index.eta +60 -0
  89. package/components/selection/index.js +70 -0
  90. package/components/selection/index.pug +30 -0
  91. package/components/selection/index.scss +2 -0
  92. package/components/selection/input.js +54 -0
  93. package/components/selection/radiogroup.js +40 -0
  94. package/components/slider/{style.scss → _spec.scss} +31 -34
  95. package/components/slider/_theme.scss +0 -0
  96. package/components/slider/index.scss +2 -0
  97. package/components/snackbar/_spec.scss +150 -0
  98. package/components/snackbar/_theme.scss +0 -0
  99. package/components/snackbar/index.js +293 -206
  100. package/components/snackbar/index.scss +2 -0
  101. package/components/tab/_spec.scss +220 -0
  102. package/components/tab/_theme.scss +0 -0
  103. package/components/tab/content.js +210 -0
  104. package/components/tab/index.js +229 -213
  105. package/components/tab/index.scss +2 -0
  106. package/components/tab/item.js +88 -0
  107. package/components/tab/list.js +196 -0
  108. package/components/tab/panel.js +54 -0
  109. package/components/textfield/README.md +4 -4
  110. package/components/textfield/_spec.scss +763 -0
  111. package/components/textfield/_theme.scss +264 -0
  112. package/components/textfield/index.eta +74 -0
  113. package/components/textfield/index.js +132 -138
  114. package/components/textfield/index.pug +30 -0
  115. package/components/textfield/index.scss +2 -0
  116. package/components/tooltip/_spec.scss +185 -0
  117. package/components/tooltip/_theme.scss +0 -0
  118. package/components/tooltip/index.scss +2 -0
  119. package/components/type/_spec.scss +227 -0
  120. package/components/type/_theme.scss +0 -0
  121. package/components/type/index.scss +2 -0
  122. package/core/_breakpoint.scss +189 -0
  123. package/core/_elevation.scss +78 -0
  124. package/core/_length.scss +8 -0
  125. package/core/_motion.scss +31 -0
  126. package/core/_platform.scss +12 -0
  127. package/core/_type.scss +128 -0
  128. package/core/aria/attributes.js +141 -0
  129. package/core/aria/button.js +49 -0
  130. package/core/aria/keyboard.js +92 -0
  131. package/core/aria/rovingtabindex.js +175 -0
  132. package/core/aria/tab.js +59 -0
  133. package/core/document/index.js +39 -0
  134. package/core/dom.js +180 -0
  135. package/core/overlay/_spec.scss +28 -0
  136. package/core/overlay/_theme.scss +147 -0
  137. package/core/overlay/index.js +95 -0
  138. package/core/overlay/index.scss +2 -0
  139. package/core/ripple/_spec.scss +196 -0
  140. package/core/ripple/_theme.scss +20 -0
  141. package/core/ripple/index.js +286 -0
  142. package/core/ripple/index.scss +2 -0
  143. package/core/theme/_aliases.scss +15 -0
  144. package/core/theme/_config.scss +8 -0
  145. package/core/theme/_functions.scss +22 -0
  146. package/{components/theming/palettes.scss → core/theme/_palettes.scss} +173 -151
  147. package/core/theme/_spec.scss +0 -0
  148. package/core/theme/_theme.scss +268 -0
  149. package/core/theme/index.js +50 -0
  150. package/core/theme/index.scss +4 -0
  151. package/core/throttler.js +42 -0
  152. package/core/transition/index.js +465 -0
  153. package/docs/_flex.scss +28 -0
  154. package/docs/_menuoptions.js +183 -0
  155. package/docs/_partials/_androidnavbar.eta +5 -0
  156. package/docs/_partials/_androidstatusbar.eta +13 -0
  157. package/docs/_partials/_appbar.eta +27 -0
  158. package/docs/_partials/_buttontest.eta +31 -0
  159. package/docs/_partials/_header.eta +146 -0
  160. package/docs/_partials/_navlistitem.eta +16 -0
  161. package/docs/_partials/_target.eta +1 -0
  162. package/docs/_sample-utils.js +88 -0
  163. package/docs/{src/storage.js → _storage.js} +0 -0
  164. package/docs/docs.scss +331 -0
  165. package/docs/framework.scss +26 -0
  166. package/docs/index.eta +12 -0
  167. package/docs/index.js +7 -0
  168. package/docs/pages/appbar.eta +108 -0
  169. package/docs/pages/appbar.js +0 -0
  170. package/docs/pages/bottomnav.eta +188 -0
  171. package/docs/pages/bottomnav.js +118 -0
  172. package/docs/pages/button.eta +124 -0
  173. package/docs/pages/button.js +224 -0
  174. package/docs/pages/card.eta +90 -0
  175. package/docs/pages/card.js +175 -0
  176. package/docs/pages/chip.eta +122 -0
  177. package/docs/pages/chip.js +80 -0
  178. package/docs/pages/color.eta +143 -0
  179. package/docs/pages/color.js +261 -0
  180. package/docs/pages/datatable.eta +323 -0
  181. package/docs/pages/datatable.js +160 -0
  182. package/docs/pages/dialog.eta +184 -0
  183. package/docs/{src/components → pages}/dialog.js +35 -48
  184. package/docs/pages/dom.eta +26 -0
  185. package/docs/pages/dom.js +140 -0
  186. package/docs/pages/elevation.eta +35 -0
  187. package/docs/pages/elevation.js +0 -0
  188. package/docs/pages/fab.eta +99 -0
  189. package/docs/{src/components → pages}/fab.js +6 -13
  190. package/docs/pages/grid.eta +135 -0
  191. package/docs/pages/grid.js +128 -0
  192. package/docs/pages/layout.eta +8 -0
  193. package/docs/pages/layout.js +0 -0
  194. package/docs/pages/list.eta +465 -0
  195. package/docs/pages/list.js +8 -0
  196. package/docs/pages/menu.eta +274 -0
  197. package/docs/{src/components → pages}/menu.js +26 -42
  198. package/docs/pages/overlay.eta +69 -0
  199. package/docs/pages/overlay.js +3 -0
  200. package/docs/pages/progress.eta +23 -0
  201. package/docs/{src/components → pages}/progress.js +2 -4
  202. package/docs/pages/ripple.eta +27 -0
  203. package/docs/pages/ripple.js +3 -0
  204. package/docs/pages/search.eta +242 -0
  205. package/docs/pages/search.js +226 -0
  206. package/docs/pages/selection.eta +107 -0
  207. package/docs/pages/selection.js +12 -0
  208. package/docs/pages/slider.eta +23 -0
  209. package/docs/pages/slider.js +0 -0
  210. package/docs/pages/snackbar.eta +83 -0
  211. package/docs/{src/components → pages}/snackbar.js +31 -36
  212. package/docs/pages/tab.eta +407 -0
  213. package/docs/pages/tab.js +152 -0
  214. package/docs/pages/textfield.eta +487 -0
  215. package/docs/{src/components → pages}/textfield.js +41 -45
  216. package/docs/pages/tooltip.eta +92 -0
  217. package/docs/pages/tooltip.js +0 -0
  218. package/docs/pages/transition.eta +117 -0
  219. package/docs/pages/transition.js +52 -0
  220. package/docs/pages/type.eta +31 -0
  221. package/docs/pages/type.js +0 -0
  222. package/docs/postrender.js +41 -0
  223. package/docs/prerender.js +16 -0
  224. package/docs/pwa/_dialogs.eta +143 -0
  225. package/docs/pwa/_menus.eta +16 -0
  226. package/docs/pwa/pwa-prerender.js +3 -0
  227. package/docs/pwa/pwa.eta +478 -0
  228. package/docs/pwa/pwa.js +298 -0
  229. package/docs/pwa/pwa.scss +31 -0
  230. package/docs/themes/theme-colored.scss +15 -0
  231. package/docs/themes/theme-default.scss +3 -0
  232. package/index.scss +27 -0
  233. package/jsconfig.json +8 -2
  234. package/package.json +54 -27
  235. package/scripts/deploy-docs.sh +9 -0
  236. package/templates/index.eta +2 -0
  237. package/templates/index.pug +3 -0
  238. package/tsconfig.json +16 -0
  239. package/utils/function.js +3 -0
  240. package/webpack.config.js +224 -68
  241. package/_index.scss +0 -4
  242. package/components/all-components.scss +0 -21
  243. package/components/bottomnav/style.scss +0 -190
  244. package/components/bottomnav/theming.scss +0 -76
  245. package/components/button/style.scss +0 -315
  246. package/components/button/theming.scss +0 -134
  247. package/components/card/style.scss +0 -175
  248. package/components/card/theming.scss +0 -43
  249. package/components/common/dom.js +0 -51
  250. package/components/common/functions.scss +0 -174
  251. package/components/common/mixins.scss +0 -122
  252. package/components/common/motion.scss +0 -36
  253. package/components/common/type.scss +0 -104
  254. package/components/common/variables.scss +0 -46
  255. package/components/datatable/style.scss +0 -257
  256. package/components/datatable/theming.scss +0 -119
  257. package/components/dialog/style.scss +0 -159
  258. package/components/dialog/theming.scss +0 -29
  259. package/components/divider/style.scss +0 -7
  260. package/components/divider/theming.scss +0 -20
  261. package/components/elevation/style.scss +0 -32
  262. package/components/layout/style.scss +0 -223
  263. package/components/list/style.scss +0 -358
  264. package/components/list/theming.scss +0 -83
  265. package/components/menu/style.scss +0 -280
  266. package/components/menu/theming.scss +0 -80
  267. package/components/navdrawer/index.js +0 -200
  268. package/components/navdrawer/style.scss +0 -595
  269. package/components/navdrawer/theming.scss +0 -62
  270. package/components/progress/style.scss +0 -136
  271. package/components/ripple/index.js +0 -63
  272. package/components/ripple/ripple.scss +0 -122
  273. package/components/selection/style.scss +0 -320
  274. package/components/selection/theming.scss +0 -98
  275. package/components/snackbar/style.scss +0 -212
  276. package/components/switch/style.scss +0 -3
  277. package/components/tab/style.scss +0 -275
  278. package/components/tab/theming.scss +0 -34
  279. package/components/template/theming.scss +0 -31
  280. package/components/textfield/style.scss +0 -795
  281. package/components/textfield/theming.scss +0 -256
  282. package/components/theming/globals.scss +0 -25
  283. package/components/theming/theming.scss +0 -559
  284. package/components/toolbar/style.scss +0 -190
  285. package/components/toolbar/theming.scss +0 -32
  286. package/components/tooltip/style.scss +0 -135
  287. package/components/type/style.scss +0 -167
  288. package/components/type/theming.scss +0 -25
  289. package/docs/bottomnav.html +0 -1
  290. package/docs/bottomnav.min.js +0 -2
  291. package/docs/bottomnav.min.js.map +0 -1
  292. package/docs/button.html +0 -1
  293. package/docs/button.min.js +0 -2
  294. package/docs/button.min.js.map +0 -1
  295. package/docs/card.html +0 -1
  296. package/docs/card.min.js +0 -2
  297. package/docs/card.min.js.map +0 -1
  298. package/docs/components.min.css +0 -1
  299. package/docs/components.min.js +0 -2
  300. package/docs/components.min.js.map +0 -1
  301. package/docs/datatable.html +0 -1
  302. package/docs/datatable.min.js +0 -2
  303. package/docs/datatable.min.js.map +0 -1
  304. package/docs/dialog.html +0 -1
  305. package/docs/dialog.min.js +0 -2
  306. package/docs/dialog.min.js.map +0 -1
  307. package/docs/docs.min.css +0 -1
  308. package/docs/docs.min.js +0 -2
  309. package/docs/docs.min.js.map +0 -1
  310. package/docs/elevation.html +0 -1
  311. package/docs/elevation.min.js +0 -2
  312. package/docs/elevation.min.js.map +0 -1
  313. package/docs/fab.html +0 -1
  314. package/docs/fab.min.js +0 -2
  315. package/docs/fab.min.js.map +0 -1
  316. package/docs/index.html +0 -1
  317. package/docs/index.min.js +0 -2
  318. package/docs/index.min.js.map +0 -1
  319. package/docs/layout.html +0 -1
  320. package/docs/layout.min.js +0 -2
  321. package/docs/layout.min.js.map +0 -1
  322. package/docs/list.html +0 -1
  323. package/docs/list.min.js +0 -2
  324. package/docs/list.min.js.map +0 -1
  325. package/docs/menu.html +0 -1
  326. package/docs/menu.min.js +0 -2
  327. package/docs/menu.min.js.map +0 -1
  328. package/docs/navdrawer.html +0 -1
  329. package/docs/navdrawer.min.js +0 -2
  330. package/docs/navdrawer.min.js.map +0 -1
  331. package/docs/prerender.min.js +0 -2
  332. package/docs/prerender.min.js.map +0 -1
  333. package/docs/progress.html +0 -1
  334. package/docs/progress.min.js +0 -2
  335. package/docs/progress.min.js.map +0 -1
  336. package/docs/search.html +0 -1
  337. package/docs/search.min.js +0 -2
  338. package/docs/search.min.js.map +0 -1
  339. package/docs/selection.html +0 -1
  340. package/docs/selection.min.js +0 -2
  341. package/docs/selection.min.js.map +0 -1
  342. package/docs/slider.html +0 -1
  343. package/docs/slider.min.js +0 -2
  344. package/docs/slider.min.js.map +0 -1
  345. package/docs/snackbar.html +0 -1
  346. package/docs/snackbar.min.js +0 -2
  347. package/docs/snackbar.min.js.map +0 -1
  348. package/docs/src/components/bottomnav.js +0 -16
  349. package/docs/src/components/bottomnav.pug +0 -112
  350. package/docs/src/components/button.js +0 -156
  351. package/docs/src/components/button.pug +0 -194
  352. package/docs/src/components/card.js +0 -136
  353. package/docs/src/components/card.pug +0 -133
  354. package/docs/src/components/datatable.js +0 -183
  355. package/docs/src/components/datatable.pug +0 -324
  356. package/docs/src/components/dialog.pug +0 -138
  357. package/docs/src/components/elevation.js +0 -3
  358. package/docs/src/components/elevation.pug +0 -17
  359. package/docs/src/components/fab.pug +0 -84
  360. package/docs/src/components/layout.js +0 -116
  361. package/docs/src/components/layout.pug +0 -104
  362. package/docs/src/components/list.js +0 -15
  363. package/docs/src/components/list.pug +0 -293
  364. package/docs/src/components/menu.pug +0 -292
  365. package/docs/src/components/navdrawer.js +0 -112
  366. package/docs/src/components/navdrawer.pug +0 -113
  367. package/docs/src/components/progress.pug +0 -17
  368. package/docs/src/components/search.js +0 -206
  369. package/docs/src/components/search.pug +0 -149
  370. package/docs/src/components/selection.js +0 -6
  371. package/docs/src/components/selection.pug +0 -116
  372. package/docs/src/components/slider.js +0 -3
  373. package/docs/src/components/slider.pug +0 -19
  374. package/docs/src/components/snackbar.pug +0 -145
  375. package/docs/src/components/tab.js +0 -137
  376. package/docs/src/components/tab.pug +0 -329
  377. package/docs/src/components/textfield.pug +0 -416
  378. package/docs/src/components/toolbar.js +0 -6
  379. package/docs/src/components/toolbar.pug +0 -86
  380. package/docs/src/components/tooltip.js +0 -6
  381. package/docs/src/components/tooltip.pug +0 -76
  382. package/docs/src/components/type.js +0 -6
  383. package/docs/src/components/type.pug +0 -34
  384. package/docs/src/components.scss +0 -1
  385. package/docs/src/docs.scss +0 -284
  386. package/docs/src/index.js +0 -3
  387. package/docs/src/index.pug +0 -6
  388. package/docs/src/menuoptions.js +0 -136
  389. package/docs/src/mixins.pug +0 -139
  390. package/docs/src/prerender.js +0 -26
  391. package/docs/src/sample-utils.js +0 -108
  392. package/docs/src/targetHandler.js +0 -50
  393. package/docs/src/theming.ie11.scss +0 -18
  394. package/docs/src/theming.scss +0 -18
  395. package/docs/tab.html +0 -1
  396. package/docs/tab.min.js +0 -2
  397. package/docs/tab.min.js.map +0 -1
  398. package/docs/textfield.html +0 -2
  399. package/docs/textfield.min.js +0 -2
  400. package/docs/textfield.min.js.map +0 -1
  401. package/docs/theming.ie11.min.css +0 -1
  402. package/docs/theming.ie11.min.js +0 -2
  403. package/docs/theming.ie11.min.js.map +0 -1
  404. package/docs/theming.min.css +0 -1
  405. package/docs/theming.min.js +0 -2
  406. package/docs/theming.min.js.map +0 -1
  407. package/docs/toolbar.html +0 -1
  408. package/docs/toolbar.min.js +0 -2
  409. package/docs/toolbar.min.js.map +0 -1
  410. package/docs/tooltip.html +0 -1
  411. package/docs/tooltip.min.js +0 -2
  412. package/docs/tooltip.min.js.map +0 -1
  413. package/docs/type.html +0 -1
  414. package/docs/type.min.js +0 -2
  415. package/docs/type.min.js.map +0 -1
  416. package/index.js +0 -16
package/docs/_partials/_appbar.eta ADDED
@@ -0,0 +1,27 @@
1
+ <% var T = '../../templates/index.eta'; %>
2
+ <div <%~ Object.entries({
3
+ 'class': 'mdw-appbar mdw-elevation mdw-theme',
4
+ 'style': 'z-index:4',
5
+ 'mdw-elevation': 4,
6
+ 'mdw-surface': it?.surface,
7
+ 'mdw-light': it?.light,
8
+ 'mdw-dark': it?.dark
9
+ }).map(([key, value]) => {
10
+ if (value === true) return key;
11
+ if (value === false || value == null) return false;
12
+ return `${key}="${value}"`
13
+ }).filter(v=>v).join(' ')-%>>
14
+ <div class="mdw-appbar__start">
15
+ <%_~ it?.start?.map((icon) => includeFile(T, { button: {
16
+ class:'material-icons', icon:true, text:icon }})).join(' ') ?? '' _%>
17
+ </div>
18
+ <div class="mdw-appbar__title">
19
+ <%_~ it?.body ?? '' %><%= it?.text ?? '' _%>
20
+ </div>
21
+ <div class="mdw-appbar__end">
22
+ <%_~ it?.end?.map((icon) => includeFile(T, { button:{
23
+ class:'material-icons', icon:true, text:icon,
24
+ attributes: { 'mdw-more-button': icon === 'more_vert' }
25
+ }})).join(' ') ?? '' _%>
26
+ </div>
27
+ </div>
package/docs/_partials/_buttontest.eta ADDED
@@ -0,0 +1,31 @@
1
+ <% var T = '../../templates/index.eta'; %>
2
+ <div class="display-flex flex-wrap">
3
+ <%~ includeFile(T, {button: { text: 'Text' }}) %>
4
+ <%~ includeFile(T, {button: { raised:true, text: 'Contained' }}) %>
5
+ <%~ includeFile(T, {button: { raised:true, disabled:true, text: 'Disabled' }}) %>
6
+ <%~ includeFile(T, {button: { borderInk:'default', text: 'Outlined' }}) %>
7
+ </div>
8
+ <div style="height:24px;"></div>
9
+ <div class="display-flex flex-wrap">
10
+ <%~ includeFile(T, {button: { ink:'primary', text:'Text' }}) %>
11
+ <%~ includeFile(T, {button: { ink:'primary', raised:true, text: 'Contained' }}) %>
12
+ <%~ includeFile(T, {button: { ink:'primary', raised:true, disabled:true, text:'Disabled' }}) %>
13
+ <%~ includeFile(T, {button: { ink:'secondary', text:'Secondary' }}) %>
14
+ <%~ includeFile(T, {button: { ink:'secondary', borderInk:true, text:'Outlined' }}) %>
15
+ </div>
16
+ <div style="height:24px;"></div>
17
+ <div class="display-flex flex-wrap">
18
+ <%~ includeFile(T, { button: { surface:'primary 500', dark:true, text:'Text' }}) %>
19
+ <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, text:'Contained' }}) %>
20
+ <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, disabled:true, text:'Disabled' }}) %>
21
+ <%~ includeFile(T, { button: { surface:'secondary 100', light:true, raised:true, text:'Outlined' }}) %>
22
+ </div>
23
+ <div style="height:24px;"></div>
24
+ <div class="display-flex flex-wrap">
25
+ <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', icon:true }}) %>
26
+ <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', ink:"warn", dark:true, icon:true }}) %>
27
+ <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', surface:"warn 500", dark:true, icon:true }}) %>
28
+ <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', surface:"warn 500", dark:true, icon:true, raised:true }}) %>
29
+ <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', surface:"warn 500", dark:true, icon:true, raised:true, disabled:true }}) %>
30
+ <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', icon:true, disabled:true }}) %>
31
+ </div>
package/docs/_partials/_header.eta ADDED
@@ -0,0 +1,146 @@
1
+ <% var T = '../../templates/index.eta' -%>
2
+ <!DOCTYPE html>
3
+ <html class="mdw-layout mdw-theme" lang="en" mdw-surface="binary" mdw-light>
4
+
5
+ <head>
6
+ <title>Material Design Web</title>
7
+ <meta charset="utf-8">
8
+ <meta content="IE=edge" http-equiv="X-UA-Compatible">
9
+ <meta content="Material Design Web - CSS/JS Framework" name="description">
10
+ <meta content="width=device-width,initial-scale=1,viewport-fit=cover" name="viewport">
11
+ <meta name="theme-color" content="#C2185B">
12
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
13
+ <meta name="apple-mobile-web-app-capable" content="yes">
14
+
15
+ <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
16
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
17
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300,400,500">
18
+ <link rel="stylesheet" href="docs.min.css">
19
+ <link rel="stylesheet" href="framework.min.css">
20
+ <link rel="stylesheet" href="theme-default.min.css" title="Default Theme">
21
+ <link rel="stylesheet" disabled href="theme-colored.min.css" title="Colored Theme">
22
+ <script src="prerender.min.js"></script>
23
+ </head>
24
+
25
+ <body class="mdw-layout__body mdw-theme" mdw-surface="background" mdw-sidesheet-toggle="dismissible" mdw-sidesheet-style="modal">
26
+ <div class="mdw-layout__menus"></div>
27
+ <div class="mdw-layout__dialogs"></div>
28
+ <nav class="mdw-layout__navdrawer" id="docs-navdrawer">
29
+ <div class="mdw-layout__sheet-content mdw-theme" mdw-surface="background" mdw-border-ink>
30
+ <ul class="mdw-list" style="padding-bottom:64px;">
31
+ <li class="mdw-list__item">
32
+ <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" <%~ it.page === 'Home' ? 'aria-current="page"' : '' %> aria-selected="<%~ it.page === 'Home'%>" href="index.html" mdw-ink="default">
33
+ <div class="mdw-list__text">Home</div>
34
+ </a>
35
+ </li>
36
+ <li class="mdw-list__item" aria-expanded="true">
37
+ <div class="mdw-list__content mdw-list__subheader">
38
+ <div class="mdw-list__text mdw-theme" mdw-ink="medium">Core</div>
39
+ <div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div>
40
+ </div>
41
+ <ul class="mdw-list">
42
+ <%~ includeFile('../_partials/_navlistitem.eta', {key: 'color', icon: 'compare', name: 'Color', page: it.page, color: 'primary contrast'}) %>
43
+ <%~ includeFile('../_partials/_navlistitem.eta', {key: 'overlay', icon: 'tonality', name: 'Overlay', page: it.page, color: 'primary contrast'}) %>
44
+ <%~ includeFile('../_partials/_navlistitem.eta', {key: 'ripple', icon: 'center_focus_strong', name: 'Ripple', page: it.page, color: 'primary contrast'}) %>
45
+ <%~ includeFile('../_partials/_navlistitem.eta', {key: 'transition', icon: 'dynamic_feed', name: 'Transition', page: it.page, color: 'primary contrast'}) %>
46
+ </ul>
47
+ </li>
48
+ <li class="mdw-list__item mdw-theme" aria-expanded="true">
49
+ <div class="mdw-list__content mdw-list__subheader">
50
+ <div class="mdw-list__text mdw-theme" mdw-ink="medium">Components</div>
51
+ <div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div>
52
+ </div>
53
+ <ul class="mdw-list">
54
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'appbar', icon: 'web_asset', name: 'App Bar', page: it.page }) %>
55
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'bottomnav', icon: 'call_to_action', name: 'Bottom Navigation', page: it.page }) %>
56
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'button', icon: 'crop_landscape', name: 'Button', page: it.page }) %>
57
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'card', icon: 'crop_square', name: 'Card', page: it.page }) %>
58
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'chip', icon: 'check_circle', name: 'Chip', page: it.page }) %>
59
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'datatable', icon: 'format_align_justify', name: 'Data Table', page: it.page }) %>
60
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'dialog', icon: 'select_all', name: 'Dialog', page: it.page }) %>
61
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'elevation', icon: 'layers', name: 'Elevation', page: it.page }) %>
62
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'fab', icon: 'add_circle', name: 'Floating Action Button', page: it.page }) %>
63
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'grid', icon: 'view_compact', name: 'Grid', page: it.page }) %>
64
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'layout', icon: 'view_quilt', name: 'Layout', page: it.page }) %>
65
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'list', icon: 'view_list', name: 'List', page: it.page }) %>
66
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'menu', icon: 'picture_in_picture', name: 'Menu', page: it.page }) %>
67
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'progress', icon: 'timelapse', name: 'Progress', page: it.page }) %>
68
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'selection', icon: 'toggle_on', name: 'Selection', page: it.page }) %>
69
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'slider', icon: 'tune', name: 'Slider', page: it.page }) %>
70
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'snackbar', icon: 'video_label', name: 'Snackbar', page: it.page }) %>
71
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'tab', icon: 'tab', name: 'Tab', page: it.page }) %>
72
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'textfield', icon: 'text_fields', name: 'Text Field', page: it.page }) %>
73
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'tooltip', icon: 'info', name: 'Tooltip', page: it.page }) %>
74
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'type', icon: 'font_download', name: 'Typography', page: it.page }) %>
75
+ </ul>
76
+ </li>
77
+ <li class="mdw-list__item" aria-expanded="true">
78
+ <div class="mdw-list__content mdw-list__subheader">
79
+ <div class="mdw-list__text mdw-theme" mdw-ink="medium">Adapters</div>
80
+ <div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div>
81
+ </div>
82
+ <ul class="mdw-list">
83
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'dom', icon:'calendar_view_day', name:'DOM', page: it.page }) %>
84
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'search', icon:'search', name:'Search', page: it.page }) %>
85
+ </ul>
86
+ </li>
87
+ </ul>
88
+ </div>
89
+ </nav>
90
+ <a class="mdw-layout__scrim" href="#" tabindex="-1"></a>
91
+ <div class="mdw-layout__appbar mdw-appbar mdw-theme" mdw-autohide="mobile tablet" mdw-surface="secondary 500" mdw-dark>
92
+ <div class="mdw-layout__appbar-shape"></div>
93
+ <div class="mdw-appbar__start">
94
+ <div class="mdw-tooltip__wrapper">
95
+ <%~ includeFile(T, { button: {
96
+ class: 'mdw-tooltip__target material-icons mdw-layout__navdrawer-toggle',
97
+ text:'menu', icon:true, attributes: { href:"#docs-navdrawer" },
98
+ }}) %>
99
+ <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="start">Menu</div>
100
+ </div>
101
+ </div>
102
+ <div class="mdw-appbar__title"><%~ it.page %></div>
103
+ <div class="mdw-appbar__end" id="docs-menu-buttons">
104
+ <div class="mdw-tooltip__wrapper">
105
+ <%~ includeFile(T, { button: {
106
+ id: 'altThemeButton', class: 'mdw-tooltip__target material-icons',
107
+ text:'palette', icon:true, attributes: { 'mdw-overlay-default':'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
108
+ }}) %>
109
+ <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Alt Theme</div>
110
+ </div>
111
+ <div class="mdw-tooltip__wrapper">
112
+ <%~ includeFile(T, { button: {
113
+ id: 'darkModeButton', class: 'mdw-tooltip__target material-icons',
114
+ text: 'brightness_3', icon: true, attributes: { 'mdw-overlay-default':'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
115
+ }}) %>
116
+ <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Dark Mode</div>
117
+ </div>
118
+ <div class="mdw-tooltip__wrapper">
119
+ <%~ includeFile(T, { button: {
120
+ id: 'rtlButton', class: 'mdw-tooltip__target material-icons',
121
+ text: 'format_align_right', icon: true, attributes: { 'mdw-overlay-default': 'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
122
+ }}) %>
123
+ <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Right-to-Left</div>
124
+ </div>
125
+ <div class="mdw-tooltip__wrapper">
126
+ <%~ includeFile(T, { button: {
127
+ id: 'largeFontButton', class: 'mdw-tooltip__target material-icons',
128
+ text: 'format_size', icon: true, attributes: { 'mdw-overlay-default': 'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
129
+ }}) %>
130
+ <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">200% Text</div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ <div class="mdw-layout__fab"></div>
135
+ <div class="mdw-layout__snackbar"></div>
136
+ <div class="mdw-layout__content">
137
+ <div class="mdw-layout__content-page">
138
+ <%~ it?.body ?? '' %>
139
+ </div>
140
+ </div>
141
+ </body>
142
+ <script src="postrender.min.js"></script>
143
+ <script src="entire-framework.min.js"></script>
144
+ <script src="docs.common.min.js"></script>
145
+
146
+ </html>
package/docs/_partials/_navlistitem.eta ADDED
@@ -0,0 +1,16 @@
1
+ <li class="mdw-list__item">
2
+ <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" <%_~ [
3
+ it.page === it.key ? 'aria-current="page"' : '',
4
+ `aria-selected="${it.page === it.key}"`,
5
+ `href="${it.key}.html"`,
6
+ `mdw-ink="${it.color ?? 'secondary contrast'}"`,
7
+ ].filter(v=>v).join(' ')
8
+ %>>
9
+ <% if (it.icon) { %>
10
+ <div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium"><%= it.icon ?? '' %></div>
11
+ <% } %>
12
+ <div class="mdw-list__text">
13
+ <div class="mdw-list__text-block"><%= it.name ?? '' %></div>
14
+ </div>
15
+ </a>
16
+ </li>
package/docs/_partials/_target.eta ADDED
@@ -0,0 +1 @@
1
+ <div class="target" style="background-image:url(<%~ it.url %>)"></div>
package/docs/_sample-utils.js ADDED
@@ -0,0 +1,88 @@
1
+ /**
2
+ * @param {Element|HTMLElement} element
3
+ * @param {boolean} [pug=false]
4
+ * @param {string} [linePrefix='']
5
+ * @return {string}
6
+ */
7
+ function convertElementToCode(element, pug = false, linePrefix = '') {
8
+ const htmlType = element.tagName.toLowerCase();
9
+ /** @type {string[]} */
10
+ const attributes = [];
11
+ /** @type {string[]} */
12
+ const classes = [];
13
+ for (const c of element.classList) {
14
+ classes.push(c);
15
+ }
16
+ for (const attr of element.attributes) {
17
+ if (attr.name === 'class') {
18
+ continue;
19
+ }
20
+ if (attr.value.length) {
21
+ attributes.push(`${attr.name}="${attr.value}"`);
22
+ } else {
23
+ attributes.push(attr.name);
24
+ }
25
+ }
26
+ attributes.sort();
27
+ const syntaxItems = [
28
+ htmlType,
29
+ classes.length ? `class="${classes.join(' ')}"` : '',
30
+ attributes.join(' '),
31
+ ];
32
+ const openingHTMLLine = pug
33
+ ? `${htmlType === 'div' && classes.length ? '' : htmlType}${classes.length ? `.${classes.join('.')}` : ''}${attributes.length ? `(${attributes.join(' ')})` : ''}`
34
+ : `<${syntaxItems.filter(Boolean).join(' ').trim()}>`;
35
+ const closingHTMLLine = pug ? '' : `</${htmlType}>`;
36
+ const lines = [openingHTMLLine];
37
+ /** @type {string[]} */
38
+ const innerLines = [];
39
+ let onlyText = true;
40
+ for (const child of element.childNodes) {
41
+ let lineText;
42
+ if (child instanceof HTMLElement) {
43
+ lineText = convertElementToCode(child, pug, ` ${linePrefix}`);
44
+ if (lineText.trim()) {
45
+ onlyText = false;
46
+ }
47
+ } else if (child.nodeValue && pug) {
48
+ lineText = ` ${child.nodeValue}`;
49
+ }
50
+ if (lineText && lineText.trim()) {
51
+ innerLines.push(lineText);
52
+ }
53
+ }
54
+ if (onlyText) {
55
+ if (pug) {
56
+ return `${linePrefix + lines.join('')} ${innerLines.join('').trim()}`;
57
+ }
58
+ return linePrefix + lines.join('') + innerLines.join('').trim() + closingHTMLLine;
59
+ }
60
+ lines.push(...innerLines, linePrefix + closingHTMLLine);
61
+ return linePrefix + lines.filter((line) => line.trim()).join('\n');
62
+ }
63
+
64
+ /**
65
+ * @param {Element} element
66
+ * @param {string} tagname
67
+ * @return {Element}
68
+ */
69
+ function changeElementTagName(element, tagname) {
70
+ const newElement = document.createElement(tagname);
71
+ let i = element.attributes.length;
72
+ while (i--) {
73
+ const attr = element.attributes.item(i);
74
+ const clonedAttr = /** @type {Attr} */ (attr.cloneNode());
75
+ newElement.attributes.setNamedItem(clonedAttr);
76
+ }
77
+ while (element.firstChild) {
78
+ newElement.appendChild(element.firstChild);
79
+ }
80
+
81
+ element.replaceWith(newElement);
82
+ return newElement;
83
+ }
84
+
85
+ export {
86
+ convertElementToCode,
87
+ changeElementTagName,
88
+ };
package/docs/{src/storage.js → _storage.js} RENAMED
File without changes
package/docs/docs.scss ADDED
@@ -0,0 +1,331 @@
1
+ @use './_flex.scss';
2
+
3
+ // Material Icon incorrectly changes RTL direction
4
+ .material-icons {
5
+ direction: inherit;
6
+ }
7
+
8
+ .comparison {
9
+ display: flex;
10
+ position: relative;
11
+ flex-direction: row;
12
+ }
13
+
14
+ .androidstatusbar {
15
+ display: flex;
16
+ align-items: center;
17
+ flex-direction: row-reverse;
18
+
19
+ block-size: 24px;
20
+ padding: 0 8px;
21
+
22
+ z-index: 16;
23
+
24
+ color: white;
25
+
26
+ font-size: 14px;
27
+
28
+ .mdw-theme[mdw-light] &,
29
+ .mdw-theme[mdw-dark] .mdw-theme[mdw-light] & {
30
+ &:not([mdw-surface]) {
31
+ background-color: #E0E0E0;
32
+ color: rgba(0, 0, 0, 0.87);
33
+ }
34
+ }
35
+
36
+ .mdw-theme[mdw-dark] &,
37
+ .mdw-theme[mdw-light] .mdw-theme[mdw-dark] & {
38
+ &:not([mdw-surface]) {
39
+ background-color: black;
40
+ color: rgba(255, 255, 255, 1);
41
+ }
42
+ }
43
+
44
+ .material-icons {
45
+ font-size: 18px;
46
+ }
47
+ }
48
+
49
+ .content {
50
+ flex-direction: column;
51
+ -ms-overflow-style: -ms-autohiding-scrollbar;
52
+ overflow-y: auto;
53
+
54
+ flex: 1;
55
+ -webkit-overflow-scrolling: touch;
56
+ }
57
+
58
+ .render,
59
+ .target {
60
+ max-inline-size: 360px;
61
+ inline-size: 360px;
62
+ }
63
+
64
+ .render-fill {
65
+ flex: 1;
66
+ }
67
+
68
+ .render,
69
+ .render-fill {
70
+ overflow-x: hidden;
71
+
72
+ box-sizing: border-box;
73
+ max-block-size: 640px;
74
+ border-style: solid;
75
+ border-width: 1px;
76
+
77
+ z-index: 1;
78
+
79
+ border-color: #eee;
80
+
81
+ .mdw-theme[mdw-light] & {
82
+ border-color: rgba(0, 0, 0, 0.12);
83
+ }
84
+
85
+ .mdw-theme[mdw-dark] & {
86
+ border-color: rgba(255, 255, 255, 0.12);
87
+ }
88
+ }
89
+
90
+ .docs-option-list {
91
+ & > .mdw-selection {
92
+ margin: 16px 8px;
93
+ }
94
+ }
95
+
96
+ .render,
97
+ .render-fill,
98
+ .target {
99
+ display: flex;
100
+ position: relative;
101
+ flex-direction: column;
102
+
103
+ block-size: 640px;
104
+ margin: 8px;
105
+
106
+ background-repeat: no-repeat;
107
+ background-size: cover;
108
+
109
+ .clipped & {
110
+ max-block-size: 190px;
111
+ }
112
+
113
+ .clipped-236 & {
114
+ max-block-size: 236px;
115
+ }
116
+
117
+ .clipped-300 & {
118
+ max-block-size: 300px;
119
+ }
120
+
121
+ .clipped-304 & {
122
+ max-block-size: 304px;
123
+ }
124
+ }
125
+
126
+ .horizontal-controls {
127
+ display: inline-flex;
128
+
129
+ inline-size: 100%;
130
+
131
+ & > :not(:last-child) {
132
+ margin-inline: 0 16px;
133
+ }
134
+
135
+ [dir="rtl"] & > :not(:last-child) {
136
+ margin-inline: 16px 0;
137
+ }
138
+ }
139
+
140
+ .docs-render-overlay {
141
+ position: absolute;
142
+ inset-block-end: 0;
143
+ inset-inline: 0;
144
+ flex-direction: row-reverse;
145
+ }
146
+
147
+ .component-sample {
148
+ display: flex;
149
+ position: relative;
150
+ align-items: center;
151
+ justify-content: center;
152
+
153
+ min-block-size: 360px;
154
+ flex: 1;
155
+ border-style: solid;
156
+ border-width: 1px;
157
+ padding: 24px;
158
+
159
+ border-radius: 2px;
160
+
161
+ .mdw-theme[mdw-light] & {
162
+ border-color: rgba(0, 0, 0, 0.12);
163
+ }
164
+
165
+ .mdw-theme[mdw-dark] & {
166
+ border-color: rgba(255, 255, 255, 0.12);
167
+ }
168
+ }
169
+
170
+ .component-sample__container {
171
+ display: inline-flex;
172
+ }
173
+
174
+ .component-code {
175
+ display: flex;
176
+ position: relative;
177
+ align-items: flex-start;
178
+ justify-content: center;
179
+
180
+ flex-grow: 1;
181
+ padding: 24px;
182
+
183
+ font-family: monospace;
184
+ white-space: pre-wrap;
185
+ word-break: break-word;
186
+ }
187
+
188
+ #usePug {
189
+ position: absolute;
190
+ inset-block-start: 4px;
191
+ inset-inline: auto 4px;
192
+
193
+ margin: 0;
194
+
195
+ font-size: 12px;
196
+
197
+ :root[dir="rtl"] {
198
+ inset-inline: 4px auto;
199
+ }
200
+ }
201
+
202
+ .androidnavbar {
203
+ display: flex;
204
+ align-items: center;
205
+ flex-direction: row;
206
+ justify-content: space-around;
207
+
208
+ min-block-size: 48px;
209
+ block-size: 48px;
210
+ padding: 0 30px;
211
+
212
+ background-color: black;
213
+ color: white;
214
+
215
+ .material-icons {
216
+ font-size: 20px;
217
+ }
218
+
219
+ .material-icons.back-button {
220
+ transform: rotate(90deg);
221
+ }
222
+ }
223
+
224
+ .custom-no-results-indicator {
225
+ min-block-size: 48px;
226
+ margin: 8px;
227
+ }
228
+
229
+ #Vintage50Input {
230
+ font-size: sp(34);
231
+ }
232
+
233
+ .type-comparison {
234
+ .content {
235
+ display: flex;
236
+ align-items: flex-start;
237
+ flex-direction: column;
238
+
239
+ margin: 8px;
240
+ }
241
+
242
+ .target {
243
+ block-size: 568px;
244
+ inline-size: 760px;
245
+ margin-block-start: 42px;
246
+ background-position-x: -200px;
247
+ }
248
+
249
+ .mdw-type {
250
+ position: relative; // For tooltip position
251
+ }
252
+ }
253
+
254
+ .type-comparison-2 {
255
+ .target {
256
+ block-size: 208px;
257
+ inline-size: 760px;
258
+ }
259
+ }
260
+
261
+ .type-comparison-3 {
262
+ .target {
263
+ block-size: 300px;
264
+ inline-size: 360px;
265
+ }
266
+ }
267
+
268
+ .docs-grid {
269
+ .mdw-card {
270
+ display: flex;
271
+ align-items: center;
272
+ justify-content: center;
273
+
274
+ padding: 16px 8px;
275
+
276
+ cursor: pointer;
277
+ -webkit-tap-highlight-color: transparent;
278
+ }
279
+ }
280
+
281
+ .docs-elevation__item {
282
+ display: flex;
283
+ align-items: center;
284
+ justify-content: center;
285
+
286
+ padding: 24px 0;
287
+
288
+ border-radius: 4px;
289
+ }
290
+
291
+ .docs-tab {
292
+ .component-sample__container {
293
+ inline-size: 100%;
294
+
295
+ > .mdw-tab {
296
+ inline-size: 100%;
297
+ }
298
+ }
299
+ }
300
+
301
+ .demo-core-item {
302
+ display: inline-flex;
303
+ align-items: center;
304
+ justify-content: center;
305
+
306
+ block-size: 5em;
307
+ min-inline-size: 5em;
308
+ margin: 4px;
309
+
310
+ cursor: pointer;
311
+ -moz-user-select: none;
312
+ -ms-user-select: none;
313
+ -webkit-user-select: none;
314
+ user-select: none;
315
+
316
+ border-radius: 8px;
317
+
318
+ &[demo-round] {
319
+ max-block-size: 5em;
320
+ max-inline-size: 5em;
321
+
322
+ border-radius: 50%;
323
+ }
324
+
325
+ &[demo-square] {
326
+ max-block-size: 5em;
327
+ max-inline-size: 5em;
328
+
329
+ border-radius: 0;
330
+ }
331
+ }
package/docs/framework.scss ADDED
@@ -0,0 +1,26 @@
1
+ @use "../core/theme/index.scss" as theme;
2
+ @use "../core/overlay/index.scss" as overlay;
3
+ @use "../core/ripple/index.scss" as ripple;
4
+ @use "../components/appbar/index.scss" as appbar;
5
+ @use "../components/banner/index.scss" as banner;
6
+ @use "../components/bottomnav/index.scss" as bottomnav;
7
+ @use "../components/button/index.scss" as button;
8
+ @use "../components/card/index.scss" as card;
9
+ @use "../components/chip/index.scss" as chip;
10
+ @use "../components/datatable/index.scss" as datatable;
11
+ @use "../components/dialog/index.scss" as dialog;
12
+ @use "../components/divider/index.scss" as divider;
13
+ @use "../components/elevation/index.scss" as elevation;
14
+ @use "../components/fab/index.scss" as fab;
15
+ @use "../components/grid/index.scss" as grid;
16
+ @use "../components/layout/index.scss" as layout;
17
+ @use "../components/list/index.scss" as list;
18
+ @use "../components/menu/index.scss" as menu;
19
+ @use "../components/progress/index.scss" as progress;
20
+ @use "../components/selection/index.scss" as selection;
21
+ @use "../components/slider/index.scss" as slider;
22
+ @use "../components/snackbar/index.scss" as snackbar;
23
+ @use "../components/tab/index.scss" as tab;
24
+ @use "../components/textfield/index.scss" as textfield;
25
+ @use "../components/tooltip/index.scss" as tooltip;
26
+ @use "../components/type/index.scss" as type;