@shortfuse/materialdesignweb 0.0.9 → 0.4.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 (392) hide show
  1. package/.browserslistrc +3 -0
  2. package/.eslintrc.json +146 -27
  3. package/.stylelintrc.json +598 -2
  4. package/.vscode/launch.json +20 -5
  5. package/.vscode/settings.json +3 -0
  6. package/.vscode/tasks.json +19 -10
  7. package/CHANGELOG.md +24 -0
  8. package/README.md +84 -2
  9. package/adapters/datatable/column.js +203 -0
  10. package/adapters/datatable/index.js +972 -0
  11. package/adapters/dom/index.js +601 -0
  12. package/adapters/list/index.js +69 -0
  13. package/adapters/search/index.js +521 -0
  14. package/components/appbar/_spec.scss +225 -0
  15. package/components/appbar/_theme.scss +0 -0
  16. package/components/appbar/index.scss +2 -0
  17. package/components/banner/_spec.scss +118 -0
  18. package/components/banner/_theme.scss +0 -0
  19. package/components/banner/index.scss +2 -0
  20. package/components/bottomnav/README.md +85 -0
  21. package/components/bottomnav/_spec.scss +157 -0
  22. package/components/bottomnav/_theme.scss +0 -0
  23. package/components/bottomnav/index.js +122 -0
  24. package/components/bottomnav/index.scss +2 -0
  25. package/components/bottomnav/item.js +89 -0
  26. package/components/{core/button → button}/README.md +16 -22
  27. package/components/button/_spec.scss +161 -0
  28. package/components/button/_theme.scss +65 -0
  29. package/components/button/index.eta +32 -0
  30. package/components/button/index.js +43 -0
  31. package/components/button/index.pug +18 -0
  32. package/components/button/index.scss +2 -0
  33. package/components/card/_spec.scss +249 -0
  34. package/components/card/_theme.scss +0 -0
  35. package/components/card/index.scss +2 -0
  36. package/components/chip/_spec.scss +134 -0
  37. package/components/chip/_theme.scss +177 -0
  38. package/components/chip/index.js +21 -0
  39. package/components/chip/index.scss +2 -0
  40. package/components/chip/item.js +20 -0
  41. package/components/datatable/_spec.scss +288 -0
  42. package/components/datatable/_theme.scss +154 -0
  43. package/components/datatable/cell.js +45 -0
  44. package/components/datatable/columnheader.js +47 -0
  45. package/components/datatable/index.js +388 -0
  46. package/components/datatable/index.scss +2 -0
  47. package/components/datatable/row.js +49 -0
  48. package/components/datatable/rowheader.js +18 -0
  49. package/components/dialog/_spec.scss +213 -0
  50. package/components/dialog/_theme.scss +0 -0
  51. package/components/dialog/index.js +627 -0
  52. package/components/dialog/index.scss +2 -0
  53. package/components/divider/_spec.scss +13 -0
  54. package/components/divider/_theme.scss +0 -0
  55. package/components/divider/index.scss +2 -0
  56. package/components/elevation/_spec.scss +9 -0
  57. package/components/elevation/_theme.scss +0 -0
  58. package/components/elevation/index.scss +2 -0
  59. package/components/fab/_spec.scss +222 -0
  60. package/components/fab/_theme.scss +0 -0
  61. package/components/fab/index.js +103 -0
  62. package/components/fab/index.scss +2 -0
  63. package/components/grid/_spec.scss +312 -0
  64. package/components/grid/_theme.scss +0 -0
  65. package/components/grid/index.scss +2 -0
  66. package/components/layout/_mixins.scss +33 -0
  67. package/components/layout/_spec.scss +1012 -0
  68. package/components/layout/_theme.scss +44 -0
  69. package/components/layout/index.js +464 -0
  70. package/components/layout/index.scss +2 -0
  71. package/components/list/_spec.scss +397 -0
  72. package/components/list/_theme.scss +111 -0
  73. package/components/list/content.js +110 -0
  74. package/components/list/index.js +260 -0
  75. package/components/list/index.scss +2 -0
  76. package/components/list/item.js +170 -0
  77. package/components/list/secondary.js +46 -0
  78. package/components/menu/_spec.scss +362 -0
  79. package/components/menu/_theme.scss +0 -0
  80. package/components/menu/index.js +721 -0
  81. package/components/menu/index.scss +2 -0
  82. package/components/menu/item.js +239 -0
  83. package/components/{core/progress/style.scss → progress/_spec.scss} +36 -25
  84. package/components/progress/_theme.scss +0 -0
  85. package/components/progress/index.js +36 -0
  86. package/components/progress/index.scss +2 -0
  87. package/components/selection/_spec.scss +386 -0
  88. package/components/selection/_theme.scss +166 -0
  89. package/components/selection/index.eta +60 -0
  90. package/components/selection/index.js +76 -0
  91. package/components/selection/index.pug +30 -0
  92. package/components/selection/index.scss +2 -0
  93. package/components/selection/input.js +56 -0
  94. package/components/selection/radiogroup.js +47 -0
  95. package/components/slider/_spec.scss +64 -0
  96. package/components/slider/_theme.scss +0 -0
  97. package/components/slider/index.scss +2 -0
  98. package/components/snackbar/_spec.scss +195 -0
  99. package/components/snackbar/_theme.scss +0 -0
  100. package/components/snackbar/index.js +344 -0
  101. package/components/snackbar/index.scss +2 -0
  102. package/components/tab/_spec.scss +235 -0
  103. package/components/tab/_theme.scss +0 -0
  104. package/components/tab/content.js +205 -0
  105. package/components/tab/index.js +260 -0
  106. package/components/tab/index.scss +2 -0
  107. package/components/tab/item.js +89 -0
  108. package/components/tab/list.js +210 -0
  109. package/components/tab/panel.js +54 -0
  110. package/components/template/_theme.scss +27 -0
  111. package/components/{core/textfield → textfield}/README.md +70 -50
  112. package/components/textfield/_mixins.scss +52 -0
  113. package/components/textfield/_spec.scss +809 -0
  114. package/components/textfield/_theme.scss +299 -0
  115. package/components/textfield/index.eta +74 -0
  116. package/components/textfield/index.js +168 -0
  117. package/components/textfield/index.pug +30 -0
  118. package/components/textfield/index.scss +2 -0
  119. package/components/tooltip/_spec.scss +188 -0
  120. package/components/tooltip/_theme.scss +0 -0
  121. package/components/tooltip/index.scss +2 -0
  122. package/components/type/_spec.scss +224 -0
  123. package/components/type/_theme.scss +0 -0
  124. package/components/type/index.scss +2 -0
  125. package/core/_breakpoint.scss +189 -0
  126. package/core/_elevation.scss +38 -0
  127. package/core/_length.scss +9 -0
  128. package/core/_motion.scss +31 -0
  129. package/core/_platform.scss +34 -0
  130. package/core/_type.scss +127 -0
  131. package/core/aria/attributes.js +141 -0
  132. package/core/aria/button.js +50 -0
  133. package/core/aria/keyboard.js +93 -0
  134. package/core/aria/rovingtabindex.js +178 -0
  135. package/core/aria/tab.js +60 -0
  136. package/core/color/_spec.scss +0 -0
  137. package/core/color/_theme.scss +390 -0
  138. package/core/color/index.scss +2 -0
  139. package/core/document/index.js +39 -0
  140. package/core/dom.js +271 -0
  141. package/core/overlay/_spec.scss +31 -0
  142. package/core/overlay/_theme.scss +171 -0
  143. package/core/overlay/index.js +108 -0
  144. package/core/overlay/index.scss +2 -0
  145. package/core/ripple/_spec.scss +197 -0
  146. package/core/ripple/_theme.scss +40 -0
  147. package/core/ripple/index.js +294 -0
  148. package/core/ripple/index.scss +2 -0
  149. package/core/theme/_config.scss +2 -0
  150. package/core/theme/_mixins.scss +172 -0
  151. package/{components/theming/palettes.scss → core/theme/_palettes.scss} +173 -150
  152. package/core/theme/_variables.scss +24 -0
  153. package/core/theme/index.js +50 -0
  154. package/core/throttler.js +42 -0
  155. package/core/transition/index.js +468 -0
  156. package/docs/_flex.scss +22 -0
  157. package/docs/_menuoptions.js +183 -0
  158. package/docs/_mixins.pug +155 -0
  159. package/docs/_partials/_androidnavbar.eta +5 -0
  160. package/docs/_partials/_androidstatusbar.eta +13 -0
  161. package/docs/_partials/_appbar.eta +29 -0
  162. package/docs/_partials/_buttontest.eta +31 -0
  163. package/docs/_partials/_header.eta +149 -0
  164. package/docs/_partials/_navlistitem.eta +16 -0
  165. package/docs/_partials/_target.eta +1 -0
  166. package/docs/_sample-utils.js +93 -0
  167. package/docs/_storage.js +33 -0
  168. package/docs/docs.scss +295 -0
  169. package/docs/index.eta +16 -0
  170. package/docs/index.js +0 -0
  171. package/docs/pages/appbar.eta +114 -0
  172. package/docs/pages/appbar.js +0 -0
  173. package/docs/pages/appbar.pug +78 -0
  174. package/docs/pages/bottomnav.eta +188 -0
  175. package/docs/pages/bottomnav.js +115 -0
  176. package/docs/pages/bottomnav.pug +137 -0
  177. package/docs/pages/button.eta +124 -0
  178. package/docs/pages/button.js +224 -0
  179. package/docs/pages/button.pug +121 -0
  180. package/docs/pages/card.eta +90 -0
  181. package/docs/pages/card.js +177 -0
  182. package/docs/pages/card.pug +74 -0
  183. package/docs/pages/chip.eta +122 -0
  184. package/docs/pages/chip.js +82 -0
  185. package/docs/pages/chip.pug +91 -0
  186. package/docs/pages/color.eta +143 -0
  187. package/docs/pages/color.js +262 -0
  188. package/docs/pages/color.pug +121 -0
  189. package/docs/pages/datatable.eta +323 -0
  190. package/docs/pages/datatable.js +164 -0
  191. package/docs/pages/datatable.pug +283 -0
  192. package/docs/pages/dialog.eta +186 -0
  193. package/docs/pages/dialog.js +177 -0
  194. package/docs/pages/dialog.pug +132 -0
  195. package/docs/pages/dom.eta +26 -0
  196. package/docs/pages/dom.js +143 -0
  197. package/docs/pages/dom.pug +22 -0
  198. package/docs/pages/elevation.eta +35 -0
  199. package/docs/pages/elevation.js +0 -0
  200. package/docs/pages/elevation.pug +25 -0
  201. package/docs/pages/fab.eta +99 -0
  202. package/docs/pages/fab.js +44 -0
  203. package/docs/pages/fab.pug +66 -0
  204. package/docs/pages/grid.eta +135 -0
  205. package/docs/pages/grid.js +128 -0
  206. package/docs/pages/grid.pug +95 -0
  207. package/docs/pages/layout.eta +8 -0
  208. package/docs/pages/layout.js +0 -0
  209. package/docs/pages/layout.pug +7 -0
  210. package/docs/pages/list.eta +465 -0
  211. package/docs/pages/list.js +9 -0
  212. package/docs/pages/list.pug +326 -0
  213. package/docs/pages/menu.eta +276 -0
  214. package/docs/pages/menu.js +217 -0
  215. package/docs/pages/menu.pug +205 -0
  216. package/docs/pages/overlay.eta +69 -0
  217. package/docs/pages/overlay.js +4 -0
  218. package/docs/pages/overlay.pug +55 -0
  219. package/docs/pages/progress.eta +23 -0
  220. package/docs/pages/progress.js +12 -0
  221. package/docs/pages/progress.pug +16 -0
  222. package/docs/pages/ripple.eta +27 -0
  223. package/docs/pages/ripple.js +4 -0
  224. package/docs/pages/ripple.pug +21 -0
  225. package/docs/pages/search.eta +246 -0
  226. package/docs/pages/search.js +243 -0
  227. package/docs/pages/search.pug +165 -0
  228. package/docs/pages/selection.eta +111 -0
  229. package/docs/pages/selection.js +13 -0
  230. package/docs/pages/selection.pug +74 -0
  231. package/docs/pages/slider.eta +23 -0
  232. package/docs/pages/slider.js +0 -0
  233. package/docs/pages/slider.pug +17 -0
  234. package/docs/pages/snackbar.eta +83 -0
  235. package/docs/pages/snackbar.js +158 -0
  236. package/docs/pages/snackbar.pug +60 -0
  237. package/docs/pages/tab.eta +421 -0
  238. package/docs/pages/tab.js +151 -0
  239. package/docs/pages/tab.pug +304 -0
  240. package/docs/pages/textfield.eta +486 -0
  241. package/docs/pages/textfield.js +254 -0
  242. package/docs/pages/textfield.pug +360 -0
  243. package/docs/pages/tooltip.eta +94 -0
  244. package/docs/pages/tooltip.js +0 -0
  245. package/docs/pages/tooltip.pug +78 -0
  246. package/docs/pages/transition.eta +117 -0
  247. package/docs/pages/transition.js +54 -0
  248. package/docs/pages/transition.pug +76 -0
  249. package/docs/pages/type.eta +31 -0
  250. package/docs/pages/type.js +0 -0
  251. package/docs/pages/type.pug +29 -0
  252. package/docs/postrender.js +39 -0
  253. package/docs/prerender.js +16 -0
  254. package/docs/pwa/_dialogs.eta +143 -0
  255. package/docs/pwa/_dialogs.pug +96 -0
  256. package/docs/pwa/_menus.eta +16 -0
  257. package/docs/pwa/_menus.pug +11 -0
  258. package/docs/pwa/pwa-prerender.js +3 -0
  259. package/docs/pwa/pwa.eta +480 -0
  260. package/docs/pwa/pwa.js +306 -0
  261. package/docs/pwa/pwa.pug +325 -0
  262. package/docs/pwa/pwa.scss +26 -0
  263. package/docs/spec.scss +26 -0
  264. package/docs/themes/_component-themes.scss +26 -0
  265. package/docs/themes/theme-colored-fallbacks.scss +17 -0
  266. package/docs/themes/theme-colored.scss +17 -0
  267. package/docs/themes/theme-default-fallbacks.scss +17 -0
  268. package/docs/themes/theme-default.scss +17 -0
  269. package/jsconfig.json +4 -2
  270. package/package.json +43 -28
  271. package/scripts/deploy-docs.sh +9 -0
  272. package/templates/index.eta +2 -0
  273. package/templates/index.pug +3 -0
  274. package/utils/function.js +3 -0
  275. package/webpack.config.cjs +257 -0
  276. package/components/_index.scss +0 -4
  277. package/components/all-components.scss +0 -14
  278. package/components/common/functions.scss +0 -173
  279. package/components/common/mixins.scss +0 -107
  280. package/components/common/motion.scss +0 -36
  281. package/components/common/ripple.scss +0 -92
  282. package/components/common/variables.scss +0 -48
  283. package/components/complex/dialog/style.scss +0 -159
  284. package/components/complex/dialog/theming.scss +0 -29
  285. package/components/complex/navdrawer/style.scss +0 -477
  286. package/components/complex/navdrawer/theming.scss +0 -58
  287. package/components/complex/search/index.js +0 -492
  288. package/components/core/bottomnav/README.md +0 -85
  289. package/components/core/bottomnav/index.js +0 -140
  290. package/components/core/bottomnav/style.scss +0 -173
  291. package/components/core/bottomnav/theming.scss +0 -42
  292. package/components/core/button/index.js +0 -52
  293. package/components/core/button/style.scss +0 -283
  294. package/components/core/button/theming.scss +0 -131
  295. package/components/core/list/index.js +0 -94
  296. package/components/core/list/style.scss +0 -269
  297. package/components/core/list/theming.scss +0 -74
  298. package/components/core/menu/index.js +0 -127
  299. package/components/core/menu/style.scss +0 -239
  300. package/components/core/menu/theming.scss +0 -55
  301. package/components/core/progress/index.js +0 -33
  302. package/components/core/selection/style.scss +0 -249
  303. package/components/core/selection/theming.scss +0 -49
  304. package/components/core/switch/style.scss +0 -3
  305. package/components/core/tab/index.js +0 -174
  306. package/components/core/tab/style.scss +0 -202
  307. package/components/core/tab/theming.scss +0 -43
  308. package/components/core/textfield/index.js +0 -169
  309. package/components/core/textfield/style.scss +0 -672
  310. package/components/core/textfield/theming.scss +0 -262
  311. package/components/core/toolbar/style.scss +0 -109
  312. package/components/core/toolbar/theming.scss +0 -28
  313. package/components/core/tooltip/style.scss +0 -127
  314. package/components/core/type/style.scss +0 -133
  315. package/components/core/type/theming.scss +0 -25
  316. package/components/index.js +0 -24
  317. package/components/template/theming.scss +0 -31
  318. package/components/theming/theming.scss +0 -504
  319. package/docs/bottomnav.html +0 -171
  320. package/docs/bottomnav.min.js +0 -383
  321. package/docs/button.html +0 -322
  322. package/docs/button.min.js +0 -251
  323. package/docs/components.min.css +0 -1
  324. package/docs/components.min.js +0 -83
  325. package/docs/dialog.html +0 -103
  326. package/docs/dialog.min.js +0 -160
  327. package/docs/docs.min.css +0 -1
  328. package/docs/docs.min.js +0 -83
  329. package/docs/index.html +0 -55
  330. package/docs/index.min.js +0 -83
  331. package/docs/list.html +0 -442
  332. package/docs/list.min.js +0 -312
  333. package/docs/menu.html +0 -185
  334. package/docs/menu.min.js +0 -370
  335. package/docs/navdrawer.html +0 -199
  336. package/docs/navdrawer.min.js +0 -244
  337. package/docs/progress.html +0 -75
  338. package/docs/progress.min.js +0 -162
  339. package/docs/search.html +0 -230
  340. package/docs/search.min.js +0 -1202
  341. package/docs/selection.html +0 -188
  342. package/docs/selection.min.js +0 -160
  343. package/docs/src/complex/dialog.js +0 -3
  344. package/docs/src/complex/dialog.pug +0 -44
  345. package/docs/src/complex/navdrawer.js +0 -82
  346. package/docs/src/complex/navdrawer.pug +0 -109
  347. package/docs/src/complex/search.js +0 -207
  348. package/docs/src/complex/search.pug +0 -143
  349. package/docs/src/components.scss +0 -1
  350. package/docs/src/core/bottomnav.js +0 -22
  351. package/docs/src/core/bottomnav.pug +0 -93
  352. package/docs/src/core/button.js +0 -16
  353. package/docs/src/core/button.pug +0 -73
  354. package/docs/src/core/list.js +0 -21
  355. package/docs/src/core/list.pug +0 -246
  356. package/docs/src/core/menu.js +0 -33
  357. package/docs/src/core/menu.pug +0 -108
  358. package/docs/src/core/progress.js +0 -11
  359. package/docs/src/core/progress.pug +0 -17
  360. package/docs/src/core/selection.js +0 -4
  361. package/docs/src/core/selection.pug +0 -92
  362. package/docs/src/core/tab.js +0 -21
  363. package/docs/src/core/tab.pug +0 -180
  364. package/docs/src/core/textfield.js +0 -15
  365. package/docs/src/core/textfield.pug +0 -274
  366. package/docs/src/core/toolbar.js +0 -4
  367. package/docs/src/core/toolbar.pug +0 -79
  368. package/docs/src/core/tooltip.js +0 -4
  369. package/docs/src/core/tooltip.pug +0 -76
  370. package/docs/src/core/type.js +0 -4
  371. package/docs/src/core/type.pug +0 -36
  372. package/docs/src/docs.scss +0 -200
  373. package/docs/src/index.pug +0 -5
  374. package/docs/src/mixins.pug +0 -72
  375. package/docs/src/targetHandler.js +0 -50
  376. package/docs/src/theming.ie11.scss +0 -35
  377. package/docs/src/theming.scss +0 -36
  378. package/docs/tab.html +0 -301
  379. package/docs/tab.min.js +0 -397
  380. package/docs/textfield.html +0 -476
  381. package/docs/textfield.min.js +0 -381
  382. package/docs/theming.ie11.min.css +0 -1
  383. package/docs/theming.ie11.min.js +0 -83
  384. package/docs/theming.min.css +0 -1
  385. package/docs/theming.min.js +0 -83
  386. package/docs/toolbar.html +0 -213
  387. package/docs/toolbar.min.js +0 -160
  388. package/docs/tooltip.html +0 -138
  389. package/docs/tooltip.min.js +0 -160
  390. package/docs/type.html +0 -94
  391. package/docs/type.min.js +0 -160
  392. package/webpack.config.js +0 -176
package/docs/list.html DELETED
@@ -1,442 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <title>Material Design Web</title>
5
- <meta charset="utf-8">
6
- <meta content="IE=edge" http-equiv="X-UA-Compatible">
7
- <meta content="" name="description">
8
- <meta content="width=device-width initial-scale=1" name="viewport">
9
- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
10
- <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
11
- <link rel="stylesheet" href="docs.min.css">
12
- <link rel="stylesheet" href="components.min.css">
13
- <link rel="stylesheet" href="theming.min.css">
14
- <link rel="stylesheet" href="theming.ie11.min.css" media="screen and (-ms-high-contrast: active), (-ms-high-contrast: none)">
15
- </head>
16
- <body mdw-theme-fill="white light">
17
- <div class="mdw-navdrawer" id="docs-navdrawer" mdw-theme-fill="background-100 light" mdw-floating="card"><a class="mdw-navdrawer__scrim" href="#"></a>
18
- <div class="mdw-navdrawer__toolbar">
19
- <div class="mdw-toolbar" mdw-theme-fill="accent-500 dark">
20
- <div class="mdw-toolbar__action">
21
- <div class="mdw-toolbar__start">
22
- <div class="mdw-tooltip__wrapper"><a class="mdw-button material-icons" mdw-icon href="#docs-navdrawer">menu</a>
23
- <div class="mdw-tooltip">Menu</div>
24
- </div>
25
- </div>
26
- <div class="mdw-toolbar__title">list</div>
27
- </div>
28
- </div>
29
- </div>
30
- <div class="mdw-navdrawer__drawer">
31
- <div class="mdw-list"><a class="mdw-list__item" href="index.html" mdw-theme-color="primary">
32
- <div class="mdw-list__text">Home</div></a>
33
- <div class="mdw-list__subheader">Core</div><a class="mdw-list__item" href="bottomnav.html" mdw-theme-color="primary">
34
- <div class="mdw-list__text">bottomnav</div></a><a class="mdw-list__item" href="button.html" mdw-theme-color="primary">
35
- <div class="mdw-list__text">button</div></a><a class="mdw-list__item" selected href="list.html" mdw-theme-color="primary">
36
- <div class="mdw-list__text">list</div></a><a class="mdw-list__item" href="menu.html" mdw-theme-color="primary">
37
- <div class="mdw-list__text">menu</div></a><a class="mdw-list__item" href="progress.html" mdw-theme-color="primary">
38
- <div class="mdw-list__text">progress</div></a><a class="mdw-list__item" href="selection.html" mdw-theme-color="primary">
39
- <div class="mdw-list__text">selection</div></a><a class="mdw-list__item" href="tab.html" mdw-theme-color="primary">
40
- <div class="mdw-list__text">tab</div></a><a class="mdw-list__item" href="textfield.html" mdw-theme-color="primary">
41
- <div class="mdw-list__text">textfield</div></a><a class="mdw-list__item" href="toolbar.html" mdw-theme-color="primary">
42
- <div class="mdw-list__text">toolbar</div></a><a class="mdw-list__item" href="type.html" mdw-theme-color="primary">
43
- <div class="mdw-list__text">type</div></a>
44
- <div class="mdw-list__subheader">Complex</div><a class="mdw-list__item" href="dialog.html" mdw-theme-color="accent">
45
- <div class="mdw-list__text">dialog</div></a><a class="mdw-list__item" href="navdrawer.html" mdw-theme-color="accent">
46
- <div class="mdw-list__text">navdrawer</div></a><a class="mdw-list__item" href="search.html" mdw-theme-color="accent">
47
- <div class="mdw-list__text">search</div></a>
48
- </div>
49
- </div>
50
- <div class="mdw-navdrawer__content">
51
- <div id="horizontalLine"></div>
52
- <div id="verticalLineLeft"></div>
53
- <div id="verticalLineRight"></div>
54
- <div class="comparison mdw-theme-list">
55
- <div class="render">
56
- <div class="androidstatusbar" mdw-theme-fill="primary-700 dark">
57
- <div>12:30</div><i class="material-icons" style="letter-spacing:2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
58
- </div>
59
- <div class="mdw-toolbar" mdw-theme-fill="primary-500 dark">
60
- <div class="mdw-toolbar__action">
61
- <div class="mdw-toolbar__start">
62
- <div class="mdw-button material-icons" mdw-icon="mdw-icon">menu</div>
63
- </div>
64
- <div class="mdw-toolbar__title">Topics
65
- </div>
66
- <div class="mdw-toolbar__end">
67
- <div class="mdw-button material-icons" mdw-icon="mdw-icon" mdw-more-button="mdw-more-button">more_vert</div>
68
- </div>
69
- </div>
70
- </div>
71
- <div class="content" mdw-theme-fill="background-50 light" style="padding-top:2px;">
72
- <ul class="mdw-list">
73
- <li class="mdw-list__item">Attractions</li>
74
- <li class="mdw-list__item">Dining</li>
75
- <li class="mdw-list__item">Education</li>
76
- <li class="mdw-list__item">Family</li>
77
- <li class="mdw-list__item">Health</li>
78
- <li class="mdw-list__item">Office</li>
79
- <li class="mdw-list__item">Promotions</li>
80
- <li class="mdw-list__item">Radio</li>
81
- <li class="mdw-list__item">Recipes</li>
82
- <li class="mdw-list__item">Sports</li>
83
- <li class="mdw-list__item">Travel</li>
84
- </ul>
85
- </div>
86
- <div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div>
87
- </div>
88
- <div class="target" style="background-image: url(https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3V2tZaHMwSXZuS2s/components-lists-keylines-single3.png);"></div>
89
- </div>
90
- <div class="comparison mdw-theme-list">
91
- <div class="render">
92
- <div class="androidstatusbar" mdw-theme-fill="primary-700 dark">
93
- <div>12:30</div><i class="material-icons" style="letter-spacing:2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
94
- </div>
95
- <div class="mdw-toolbar" mdw-theme-fill="primary-500 dark">
96
- <div class="mdw-toolbar__action">
97
- <div class="mdw-toolbar__start">
98
- <div class="mdw-button material-icons" mdw-icon="mdw-icon">menu</div>
99
- </div>
100
- <div class="mdw-toolbar__title">Topics
101
- </div>
102
- <div class="mdw-toolbar__end">
103
- <div class="mdw-button material-icons" mdw-icon="mdw-icon" mdw-more-button="mdw-more-button">more_vert</div>
104
- </div>
105
- </div>
106
- </div>
107
- <div class="content" mdw-theme-fill="background-50 light" style="padding-top:2px;">
108
- <ul class="mdw-list" mdw-divider>
109
- <li class="mdw-list__item">
110
- <div class="mdw-list__text">Attractions</div>
111
- </li>
112
- <li class="mdw-list__item">
113
- <div class="mdw-list__text">Dining</div>
114
- </li>
115
- <li class="mdw-list__item">
116
- <div class="mdw-list__text">Education</div>
117
- </li>
118
- <li class="mdw-list__item">
119
- <div class="mdw-list__text">Family</div>
120
- </li>
121
- <li class="mdw-list__item">
122
- <div class="mdw-list__text">Health</div>
123
- </li>
124
- <li class="mdw-list__item">
125
- <div class="mdw-list__text">Office</div>
126
- </li>
127
- <li class="mdw-list__item">
128
- <div class="mdw-list__text">Promotions</div>
129
- </li>
130
- <li class="mdw-list__item">
131
- <div class="mdw-list__text">Radio</div>
132
- </li>
133
- <li class="mdw-list__item">
134
- <div class="mdw-list__text">Recipes</div>
135
- </li>
136
- <li class="mdw-list__item">
137
- <div class="mdw-list__text">Sports</div>
138
- </li>
139
- <li class="mdw-list__item">
140
- <div class="mdw-list__text">Travel</div>
141
- </li>
142
- </ul>
143
- </div>
144
- <div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div>
145
- </div>
146
- <div class="target" style="background-image: url(https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3V2tZaHMwSXZuS2s/components-lists-keylines-single3.png);"></div>
147
- </div>
148
- <div class="comparison mdw-theme-list">
149
- <div class="render">
150
- <div class="androidstatusbar" mdw-theme-fill="primary-700 dark">
151
- <div>12:30</div><i class="material-icons" style="letter-spacing:2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
152
- </div>
153
- <div class="mdw-toolbar" mdw-theme-fill="primary-500 dark">
154
- <div class="mdw-toolbar__action">
155
- <div class="mdw-toolbar__start">
156
- <div class="mdw-button material-icons" mdw-icon="mdw-icon">menu</div>
157
- </div>
158
- <div class="mdw-toolbar__title">Topics
159
- </div>
160
- <div class="mdw-toolbar__end">
161
- <div class="mdw-button material-icons" mdw-icon="mdw-icon" mdw-more-button="mdw-more-button">more_vert</div>
162
- </div>
163
- </div>
164
- </div>
165
- <div class="content" mdw-theme-fill="background-50 light" style="padding-top:2px;">
166
- <ul class="mdw-list">
167
- <li class="mdw-list__item">Attractions
168
- <div class="mdw-list__icon material-icons">local_activity</div>
169
- </li>
170
- <li class="mdw-list__item">Dining
171
- <div class="mdw-list__icon material-icons">local_dining</div>
172
- </li>
173
- <li class="mdw-list__item">Education
174
- <div class="mdw-list__icon material-icons">school</div>
175
- </li>
176
- <li class="mdw-list__item">Family
177
- <div class="mdw-list__icon material-icons">people</div>
178
- </li>
179
- <li class="mdw-list__item">Health
180
- <div class="mdw-list__icon material-icons">healing</div>
181
- </li>
182
- <li class="mdw-list__item">Office
183
- <div class="mdw-list__icon material-icons">business</div>
184
- </li>
185
- <li class="mdw-list__item">Promotions
186
- <div class="mdw-list__icon material-icons">local_offer</div>
187
- </li>
188
- <li class="mdw-list__item">Radio
189
- <div class="mdw-list__icon material-icons">radio</div>
190
- </li>
191
- <li class="mdw-list__item">Recipes
192
- <div class="mdw-list__icon material-icons">book</div>
193
- </li>
194
- <li class="mdw-list__item">Sports
195
- <div class="mdw-list__icon material-icons">stars</div>
196
- </li>
197
- <li class="mdw-list__item">Travel
198
- <div class="mdw-list__icon material-icons">local_airport</div>
199
- </li>
200
- </ul>
201
- </div>
202
- <div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div>
203
- </div>
204
- <div class="target" style="background-image: url(https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3ZnVLdzRHZ3FsSjQ/components-lists-keylines-single6.png);"></div>
205
- </div>
206
- <div class="comparison mdw-theme-list">
207
- <div class="render">
208
- <div class="androidstatusbar" mdw-theme-fill="accent-700 dark">
209
- <div>12:30</div><i class="material-icons" style="letter-spacing:2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
210
- </div>
211
- <div class="mdw-toolbar" mdw-theme-fill="accent-500 dark">
212
- <div class="mdw-toolbar__action">
213
- <div class="mdw-toolbar__start">
214
- <div class="mdw-button material-icons" mdw-icon="mdw-icon">menu</div>
215
- </div>
216
- <div class="mdw-toolbar__title">Inbox
217
- </div>
218
- <div class="mdw-toolbar__end">
219
- <div class="mdw-button material-icons" mdw-icon="mdw-icon">search</div>
220
- </div>
221
- </div>
222
- </div>
223
- <div class="content" mdw-theme-fill="background-50 light">
224
- <ul class="mdw-list" mdw-divider>
225
- <li class="mdw-list__subheader">Today</li>
226
- <li class="mdw-list__item">
227
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
228
- <div class="mdw-list__text">
229
- <div class="mdw-list__text-line">Brunch this weekend?</div>
230
- <div class="mdw-list__text-line">Ali Connors <span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to meet?</span></div>
231
- </div>
232
- </li>
233
- <li class="mdw-list__item">
234
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
235
- <div class="mdw-list__text">
236
- <div class="mdw-list__text-line">Summer BBQ<span> 4</span></div>
237
- <div class="mdw-list__text-line">to Alex, Scott, Jennifer<span> &mdash; Wish I could come. but I'm out of town this weekend.</span></div>
238
- </div>
239
- </li>
240
- <li class="mdw-list__item">
241
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
242
- <div class="mdw-list__text">
243
- <div class="mdw-list__text-line">Oui oui</div>
244
- <div class="mdw-list__text-line">Sandra Adams<span> &mdash; Do you have Paris recommendations? Have you ever been?</span></div>
245
- </div>
246
- </li>
247
- <li class="mdw-list__item">
248
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
249
- <div class="mdw-list__text">
250
- <div class="mdw-list__text-line">Birthday gift</div>
251
- <div class="mdw-list__text-line">Trevor Hansen<span> &mdash; Have any ideas about what we should get Heidi for her birthday?</span></div>
252
- </div>
253
- </li>
254
- <li class="mdw-list__item">
255
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
256
- <div class="mdw-list__text">
257
- <div class="mdw-list__text-line">Recipe to try</div>
258
- <div class="mdw-list__text-line">Britta Holt<span> &mdash; We should eat this: Grated Squash, Corn, and tomatillo Tacos J</span></div>
259
- </div>
260
- </li>
261
- <li class="mdw-list__item">
262
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
263
- <div class="mdw-list__text">
264
- <div class="mdw-list__text-line">Giants game</div>
265
- <div class="mdw-list__text-line">David Park<span> &mdash; Any interest in seeing</span></div>
266
- </div>
267
- </li>
268
- <li class="mdw-list__item">
269
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
270
- <div class="mdw-list__text">
271
- <div class="mdw-list__text-line">Montauk weekend</div>
272
- <div class="mdw-list__text-line">-----</div>
273
- </div>
274
- </li>
275
- </ul>
276
- </div>
277
- <div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div>
278
- </div>
279
- <div class="target" style="background-image: url(https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsWGQ4OWVWREpLNkU/components-lists-keylines-two8.png);"></div>
280
- </div>
281
- <div class="comparison mdw-theme-list">
282
- <div class="render">
283
- <div class="androidstatusbar" mdw-theme-fill="accent-700 dark">
284
- <div>12:30</div><i class="material-icons" style="letter-spacing:2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
285
- </div>
286
- <div class="mdw-toolbar" mdw-theme-fill="accent-500 dark">
287
- <div class="mdw-toolbar__action">
288
- <div class="mdw-toolbar__start">
289
- <div class="mdw-button material-icons" mdw-icon="mdw-icon">menu</div>
290
- </div>
291
- <div class="mdw-toolbar__title">Inbox
292
- </div>
293
- <div class="mdw-toolbar__end">
294
- <div class="mdw-button material-icons" mdw-icon="mdw-icon">search</div>
295
- </div>
296
- </div>
297
- </div>
298
- <div class="content" mdw-theme-fill="background-50 light">
299
- <ul class="mdw-list" mdw-divider mdw-rows="3">
300
- <li class="mdw-list__subheader">Today</li>
301
- <li class="mdw-list__item">
302
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
303
- <div class="mdw-list__text">
304
- <div class="mdw-list__text-line">Brunch this weekend?</div>
305
- <div class="mdw-list__text-block">Ali Connors <span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to meet?</span></div>
306
- </div>
307
- </li>
308
- <li class="mdw-list__item">
309
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
310
- <div class="mdw-list__text">
311
- <div class="mdw-list__text-line">Summer BBQ<span> 4</span></div>
312
- <div class="mdw-list__text-block">to Alex, Scott, Jennifer<span> &mdash; Wish I could come. but I'm out of town this weekend.</span></div>
313
- </div>
314
- </li>
315
- <li class="mdw-list__item">
316
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
317
- <div class="mdw-list__text">
318
- <div class="mdw-list__text-line">Oui oui</div>
319
- <div class="mdw-list__text-block">Sandra Adams<span> &mdash; Do you have Paris recommendations? Have you ever been?</span></div>
320
- </div>
321
- </li>
322
- <li class="mdw-list__item">
323
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
324
- <div class="mdw-list__text">
325
- <div class="mdw-list__text-line">Birthday gift</div>
326
- <div class="mdw-list__text-block">Trevor Hansen<span> &mdash; Have any ideas about what we should get Heidi for her birthday?</span></div>
327
- </div>
328
- </li>
329
- <li class="mdw-list__item">
330
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
331
- <div class="mdw-list__text">
332
- <div class="mdw-list__text-line">Recipe to try</div>
333
- <div class="mdw-list__text-block">Britta Holt<span> &mdash; We should eat this: Grated Squash, Corn, and tomatillo Tacos J</span></div>
334
- </div>
335
- </li>
336
- <li class="mdw-list__item">
337
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
338
- <div class="mdw-list__text">
339
- <div class="mdw-list__text-line">Giants game</div>
340
- <div class="mdw-list__text-block">David Park<span> &mdash; Any interest in seeing</span></div>
341
- </div>
342
- </li>
343
- <li class="mdw-list__item">
344
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
345
- <div class="mdw-list__text">
346
- <div class="mdw-list__text-line">Montauk weekend</div>
347
- <div class="mdw-list__text-block">-----</div>
348
- </div>
349
- </li>
350
- </ul>
351
- </div>
352
- <div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div>
353
- </div>
354
- <div class="target" style="background-image: url(https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsTll3U0dBTFByeUU/components-lists-keylines6.png);"></div>
355
- </div>
356
- <div class="comparison mdw-theme-list js">
357
- <div class="render">
358
- <div class="androidstatusbar" mdw-theme-fill="warn-700 dark">
359
- <div>12:30</div><i class="material-icons" style="letter-spacing:2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
360
- </div>
361
- <div class="mdw-toolbar" mdw-theme-fill="warn-500 dark">
362
- <div class="mdw-toolbar__action">
363
- <div class="mdw-toolbar__start">
364
- <div class="mdw-button material-icons" mdw-icon="mdw-icon">menu</div>
365
- </div>
366
- <div class="mdw-toolbar__title">Inbox (with JS)
367
- </div>
368
- <div class="mdw-toolbar__end">
369
- <div class="mdw-button material-icons" mdw-icon="mdw-icon">search</div>
370
- <div class="mdw-button material-icons" mdw-icon="mdw-icon">check_circle</div>
371
- </div>
372
- </div>
373
- </div>
374
- <div class="content" mdw-theme-fill="background-50 light">
375
- <ul class="mdw-list" mdw-divider mdw-rows="3">
376
- <li class="mdw-list__item">
377
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
378
- <div class="mdw-list__text">
379
- <div class="mdw-list__text-line">Ali Connors</div>
380
- <div class="mdw-list__text-line">Brunch this weekend?</div>
381
- <div class="mdw-list__text-line">I'll be in your neighborhood doing errands this weekend. Do you want to meet?</div>
382
- </div>
383
- </li>
384
- <li class="mdw-list__item">
385
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
386
- <div class="mdw-list__text">
387
- <div class="mdw-list__text-line">me, Scott, Jennifer</div>
388
- <div class="mdw-list__text-line">Summer BBQ</div>
389
- <div class="mdw-list__text-line">Wish I could come. but I'm out of town this weekend.</div>
390
- </div>
391
- </li>
392
- <li class="mdw-list__item">
393
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
394
- <div class="mdw-list__text">
395
- <div class="mdw-list__text-line">Sandra Adams</div>
396
- <div class="mdw-list__text-line">Oui oui</div>
397
- <div class="mdw-list__text-line">Do you have Paris recommendations? Have you ever been?</div>
398
- </div>
399
- </li>
400
- <li class="mdw-list__item">
401
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
402
- <div class="mdw-list__text">
403
- <div class="mdw-list__text-line">Trevor Hansen</div>
404
- <div class="mdw-list__text-line">Order Confirmation</div>
405
- <div class="mdw-list__text-line">Thank you for your recent order from Google.</div>
406
- </div>
407
- </li>
408
- <li class="mdw-list__item">
409
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
410
- <div class="mdw-list__text">
411
- <div class="mdw-list__text-line">Britta Holt</div>
412
- <div class="mdw-list__text-line">Recipe to try</div>
413
- <div class="mdw-list__text-line">We should eat this: Grated Squash, Corn, and tomatillo Tacos J</div>
414
- </div>
415
- </li>
416
- <li class="mdw-list__item">
417
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
418
- <div class="mdw-list__text">
419
- <div class="mdw-list__text-line">David Park</div>
420
- <div class="mdw-list__text-line">Giants game</div>
421
- <div class="mdw-list__text-line">Any interest in seeing</div>
422
- </div>
423
- </li>
424
- <li class="mdw-list__item">
425
- <div class="mdw-list__avatar material-icons" style="font-size:48px;">&#xE853;</div>
426
- <div class="mdw-list__text">
427
- <div class="mdw-list__text-line">Montauk weekend</div>
428
- <div class="mdw-list__text-line">-----</div>
429
- <div class="mdw-list__text-line">-----</div>
430
- </div>
431
- </li>
432
- </ul>
433
- </div>
434
- <div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div>
435
- </div>
436
- <div class="target" style="background-image: url(https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsdFNSZ1kzeXBfR1U/components-lists-keylines-three11.png);"></div>
437
- </div>
438
- </div>
439
- </div>
440
- <script src="list.min.js"></script>
441
- </body>
442
- </html>