@shortfuse/materialdesignweb 0.3.0 → 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 (398) hide show
  1. package/.eslintrc.json +136 -30
  2. package/.stylelintrc.json +6 -40
  3. package/.vscode/launch.json +20 -5
  4. package/CHANGELOG.md +24 -0
  5. package/README.md +12 -9
  6. package/adapters/datatable/column.js +82 -74
  7. package/adapters/datatable/index.js +173 -131
  8. package/adapters/dom/index.js +529 -75
  9. package/adapters/list/index.js +25 -12
  10. package/adapters/search/index.js +13 -13
  11. package/components/appbar/_spec.scss +87 -64
  12. package/components/appbar/index.scss +2 -2
  13. package/components/banner/_spec.scss +8 -8
  14. package/components/banner/index.scss +2 -2
  15. package/components/bottomnav/_spec.scss +22 -17
  16. package/components/bottomnav/index.js +61 -52
  17. package/components/bottomnav/index.scss +2 -2
  18. package/components/bottomnav/item.js +44 -25
  19. package/components/button/README.md +14 -14
  20. package/components/button/_spec.scss +23 -22
  21. package/components/button/_theme.scss +37 -21
  22. package/components/button/index.eta +32 -0
  23. package/components/button/index.js +12 -12
  24. package/components/button/index.scss +2 -2
  25. package/components/card/_spec.scss +40 -36
  26. package/components/card/index.scss +2 -2
  27. package/components/chip/_spec.scss +7 -8
  28. package/components/chip/_theme.scss +31 -31
  29. package/components/chip/index.js +3 -2
  30. package/components/chip/index.scss +2 -2
  31. package/components/chip/item.js +1 -16
  32. package/components/datatable/_spec.scss +71 -85
  33. package/components/datatable/_theme.scss +61 -156
  34. package/components/datatable/cell.js +45 -0
  35. package/components/datatable/columnheader.js +47 -0
  36. package/components/datatable/index.js +279 -366
  37. package/components/datatable/index.scss +2 -2
  38. package/components/datatable/row.js +49 -0
  39. package/components/datatable/rowheader.js +18 -0
  40. package/components/dialog/_spec.scss +61 -41
  41. package/components/dialog/index.js +325 -297
  42. package/components/dialog/index.scss +2 -2
  43. package/components/divider/_spec.scss +8 -6
  44. package/components/divider/index.scss +2 -2
  45. package/components/elevation/_spec.scss +2 -2
  46. package/components/elevation/index.scss +2 -2
  47. package/components/fab/_spec.scss +23 -24
  48. package/components/fab/index.js +50 -50
  49. package/components/fab/index.scss +2 -2
  50. package/components/grid/_spec.scss +33 -31
  51. package/components/grid/index.scss +2 -2
  52. package/components/layout/_mixins.scss +5 -5
  53. package/components/layout/_spec.scss +206 -176
  54. package/components/layout/_theme.scss +14 -16
  55. package/components/layout/index.js +181 -153
  56. package/components/layout/index.scss +2 -2
  57. package/components/list/_spec.scss +117 -104
  58. package/components/list/_theme.scss +31 -34
  59. package/components/list/content.js +68 -52
  60. package/components/list/index.js +194 -61
  61. package/components/list/index.scss +2 -2
  62. package/components/list/item.js +136 -12
  63. package/components/list/secondary.js +46 -0
  64. package/components/menu/_spec.scss +32 -19
  65. package/components/menu/index.js +242 -229
  66. package/components/menu/index.scss +2 -2
  67. package/components/menu/item.js +95 -110
  68. package/components/progress/_spec.scss +35 -27
  69. package/components/progress/index.js +21 -0
  70. package/components/progress/index.scss +2 -1
  71. package/components/selection/_spec.scss +242 -224
  72. package/components/selection/_theme.scss +100 -95
  73. package/components/selection/index.eta +60 -0
  74. package/components/selection/index.js +76 -0
  75. package/components/selection/index.pug +15 -8
  76. package/components/selection/index.scss +2 -2
  77. package/components/selection/input.js +56 -0
  78. package/components/selection/radiogroup.js +47 -0
  79. package/components/slider/_spec.scss +10 -8
  80. package/components/slider/index.scss +2 -2
  81. package/components/snackbar/_spec.scss +22 -21
  82. package/components/snackbar/index.js +102 -111
  83. package/components/snackbar/index.scss +2 -2
  84. package/components/tab/_spec.scss +20 -19
  85. package/components/tab/content.js +41 -40
  86. package/components/tab/index.js +192 -99
  87. package/components/tab/index.scss +2 -2
  88. package/components/tab/item.js +38 -55
  89. package/components/tab/list.js +96 -72
  90. package/components/tab/panel.js +12 -13
  91. package/components/template/_theme.scss +11 -11
  92. package/components/textfield/_mixins.scss +52 -0
  93. package/components/textfield/_spec.scss +215 -266
  94. package/components/textfield/_theme.scss +95 -72
  95. package/components/textfield/index.eta +74 -0
  96. package/components/textfield/index.js +63 -57
  97. package/components/textfield/index.scss +2 -2
  98. package/components/tooltip/_spec.scss +27 -25
  99. package/components/tooltip/index.scss +2 -2
  100. package/components/type/_spec.scss +51 -38
  101. package/components/type/index.scss +2 -2
  102. package/core/_breakpoint.scss +75 -91
  103. package/core/_elevation.scss +10 -10
  104. package/core/_length.scss +9 -0
  105. package/core/_motion.scss +14 -14
  106. package/core/_platform.scss +9 -15
  107. package/core/_type.scss +33 -32
  108. package/core/aria/attributes.js +125 -25
  109. package/core/aria/button.js +23 -23
  110. package/core/aria/keyboard.js +93 -0
  111. package/core/aria/rovingtabindex.js +69 -154
  112. package/core/aria/tab.js +31 -28
  113. package/core/color/_theme.scss +240 -280
  114. package/core/color/index.scss +2 -2
  115. package/core/document/index.js +39 -0
  116. package/core/dom.js +12 -12
  117. package/core/overlay/_spec.scss +0 -3
  118. package/core/overlay/_theme.scss +56 -74
  119. package/core/overlay/index.js +49 -18
  120. package/core/overlay/index.scss +2 -2
  121. package/core/ripple/_spec.scss +22 -39
  122. package/core/ripple/_theme.scss +13 -13
  123. package/core/ripple/index.js +137 -134
  124. package/core/ripple/index.scss +2 -2
  125. package/core/theme/_config.scss +2 -0
  126. package/core/theme/_mixins.scss +172 -0
  127. package/core/theme/_palettes.scss +155 -135
  128. package/core/theme/_variables.scss +24 -15
  129. package/core/theme/index.js +50 -0
  130. package/core/throttler.js +1 -1
  131. package/core/transition/index.js +36 -20
  132. package/{docs-src → docs}/_flex.scss +0 -0
  133. package/{docs-src → docs}/_menuoptions.js +21 -34
  134. package/{docs-src → docs}/_mixins.pug +39 -26
  135. package/docs/_partials/_androidnavbar.eta +5 -0
  136. package/docs/_partials/_androidstatusbar.eta +13 -0
  137. package/docs/_partials/_appbar.eta +29 -0
  138. package/docs/_partials/_buttontest.eta +31 -0
  139. package/docs/_partials/_header.eta +149 -0
  140. package/docs/_partials/_navlistitem.eta +16 -0
  141. package/docs/_partials/_target.eta +1 -0
  142. package/{docs-src → docs}/_sample-utils.js +8 -6
  143. package/{docs-src → docs}/_storage.js +0 -0
  144. package/{docs-src → docs}/docs.scss +5 -2
  145. package/docs/index.eta +16 -0
  146. package/{docs-src → docs}/index.js +0 -0
  147. package/docs/pages/appbar.eta +114 -0
  148. package/{docs-src/components → docs/pages}/appbar.js +0 -0
  149. package/{docs-src/components → docs/pages}/appbar.pug +15 -18
  150. package/docs/pages/bottomnav.eta +188 -0
  151. package/{docs-src/components → docs/pages}/bottomnav.js +23 -24
  152. package/{docs-src/components → docs/pages}/bottomnav.pug +4 -4
  153. package/docs/pages/button.eta +124 -0
  154. package/{docs-src/components → docs/pages}/button.js +19 -19
  155. package/{docs-src/components → docs/pages}/button.pug +15 -15
  156. package/docs/pages/card.eta +90 -0
  157. package/{docs-src/components → docs/pages}/card.js +3 -3
  158. package/{docs-src/components → docs/pages}/card.pug +7 -7
  159. package/docs/pages/chip.eta +122 -0
  160. package/{docs-src/components → docs/pages}/chip.js +3 -6
  161. package/{docs-src/components → docs/pages}/chip.pug +2 -2
  162. package/docs/pages/color.eta +143 -0
  163. package/{docs-src/core → docs/pages}/color.js +95 -20
  164. package/docs/pages/color.pug +121 -0
  165. package/docs/pages/datatable.eta +323 -0
  166. package/{docs-src/components → docs/pages}/datatable.js +26 -13
  167. package/docs/pages/datatable.pug +283 -0
  168. package/docs/pages/dialog.eta +186 -0
  169. package/{docs-src/components → docs/pages}/dialog.js +26 -13
  170. package/{docs-src/components → docs/pages}/dialog.pug +46 -28
  171. package/docs/pages/dom.eta +26 -0
  172. package/docs/pages/dom.js +143 -0
  173. package/docs/pages/dom.pug +22 -0
  174. package/docs/pages/elevation.eta +35 -0
  175. package/{docs-src/components → docs/pages}/elevation.js +0 -0
  176. package/{docs-src/components → docs/pages}/elevation.pug +0 -0
  177. package/docs/pages/fab.eta +99 -0
  178. package/{docs-src/components → docs/pages}/fab.js +3 -3
  179. package/{docs-src/components → docs/pages}/fab.pug +2 -2
  180. package/docs/pages/grid.eta +135 -0
  181. package/{docs-src/components → docs/pages}/grid.js +1 -1
  182. package/{docs-src/components → docs/pages}/grid.pug +3 -3
  183. package/docs/pages/layout.eta +8 -0
  184. package/{docs-src/components → docs/pages}/layout.js +0 -0
  185. package/{docs-src/components → docs/pages}/layout.pug +0 -0
  186. package/docs/pages/list.eta +465 -0
  187. package/{docs-src/components → docs/pages}/list.js +2 -2
  188. package/{docs-src/components → docs/pages}/list.pug +7 -14
  189. package/docs/pages/menu.eta +276 -0
  190. package/{docs-src/components → docs/pages}/menu.js +14 -10
  191. package/{docs-src/components → docs/pages}/menu.pug +0 -0
  192. package/docs/pages/overlay.eta +69 -0
  193. package/docs/pages/overlay.js +4 -0
  194. package/{docs-src/core → docs/pages}/overlay.pug +14 -11
  195. package/docs/pages/progress.eta +23 -0
  196. package/{docs-src/components → docs/pages}/progress.js +1 -1
  197. package/{docs-src/components → docs/pages}/progress.pug +1 -1
  198. package/docs/pages/ripple.eta +27 -0
  199. package/docs/pages/ripple.js +4 -0
  200. package/{docs-src/core → docs/pages}/ripple.pug +4 -4
  201. package/docs/pages/search.eta +246 -0
  202. package/{docs-src/components → docs/pages}/search.js +59 -42
  203. package/{docs-src/components → docs/pages}/search.pug +50 -51
  204. package/docs/pages/selection.eta +111 -0
  205. package/docs/pages/selection.js +13 -0
  206. package/docs/pages/selection.pug +74 -0
  207. package/docs/pages/slider.eta +23 -0
  208. package/{docs-src/components → docs/pages}/slider.js +0 -0
  209. package/{docs-src/components → docs/pages}/slider.pug +0 -0
  210. package/docs/pages/snackbar.eta +83 -0
  211. package/{docs-src/components → docs/pages}/snackbar.js +3 -3
  212. package/{docs-src/components → docs/pages}/snackbar.pug +0 -0
  213. package/docs/pages/tab.eta +421 -0
  214. package/{docs-src/components → docs/pages}/tab.js +18 -35
  215. package/{docs-src/components → docs/pages}/tab.pug +4 -4
  216. package/docs/pages/textfield.eta +486 -0
  217. package/{docs-src/components → docs/pages}/textfield.js +3 -4
  218. package/{docs-src/components → docs/pages}/textfield.pug +87 -35
  219. package/docs/pages/tooltip.eta +94 -0
  220. package/{docs-src/components → docs/pages}/tooltip.js +0 -0
  221. package/{docs-src/components → docs/pages}/tooltip.pug +0 -1
  222. package/docs/pages/transition.eta +117 -0
  223. package/{docs-src/core → docs/pages}/transition.js +7 -8
  224. package/{docs-src/core → docs/pages}/transition.pug +0 -0
  225. package/docs/pages/type.eta +31 -0
  226. package/{docs-src/components → docs/pages}/type.js +0 -0
  227. package/{docs-src/components → docs/pages}/type.pug +0 -1
  228. package/docs/postrender.js +39 -0
  229. package/{docs-src → docs}/prerender.js +3 -9
  230. package/docs/pwa/_dialogs.eta +143 -0
  231. package/docs/pwa/_dialogs.pug +96 -0
  232. package/docs/pwa/_menus.eta +16 -0
  233. package/{docs-src → docs}/pwa/_menus.pug +0 -0
  234. package/docs/pwa/pwa-prerender.js +3 -0
  235. package/docs/pwa/pwa.eta +480 -0
  236. package/docs/pwa/pwa.js +306 -0
  237. package/{docs-src → docs}/pwa/pwa.pug +166 -263
  238. package/docs/pwa/pwa.scss +26 -0
  239. package/docs/spec.scss +26 -0
  240. package/docs/themes/_component-themes.scss +26 -0
  241. package/docs/themes/theme-colored-fallbacks.scss +17 -0
  242. package/docs/themes/theme-colored.scss +17 -0
  243. package/docs/themes/theme-default-fallbacks.scss +17 -0
  244. package/docs/themes/theme-default.scss +17 -0
  245. package/jsconfig.json +4 -2
  246. package/package.json +40 -27
  247. package/scripts/deploy-docs.sh +9 -0
  248. package/templates/index.eta +2 -0
  249. package/utils/function.js +3 -0
  250. package/webpack.config.cjs +257 -0
  251. package/_spec.scss +0 -27
  252. package/_theme.scss +0 -27
  253. package/components/list/expander.js +0 -142
  254. package/components/list/itemgroup.js +0 -22
  255. package/core/theme/_builder.scss +0 -116
  256. package/core/theme/index.scss +0 -68
  257. package/docs/appbar.html +0 -1
  258. package/docs/appbar.min.js +0 -2
  259. package/docs/appbar.min.js.map +0 -1
  260. package/docs/bottomnav.html +0 -1
  261. package/docs/bottomnav.min.js +0 -2
  262. package/docs/bottomnav.min.js.map +0 -1
  263. package/docs/button.html +0 -1
  264. package/docs/button.min.js +0 -2
  265. package/docs/button.min.js.map +0 -1
  266. package/docs/card.html +0 -1
  267. package/docs/card.min.js +0 -2
  268. package/docs/card.min.js.map +0 -1
  269. package/docs/chip.html +0 -1
  270. package/docs/chip.min.js +0 -2
  271. package/docs/chip.min.js.map +0 -1
  272. package/docs/color.html +0 -1
  273. package/docs/color.min.js +0 -2
  274. package/docs/color.min.js.map +0 -1
  275. package/docs/datatable.html +0 -1
  276. package/docs/datatable.min.js +0 -2
  277. package/docs/datatable.min.js.map +0 -1
  278. package/docs/default.common.min.js +0 -2
  279. package/docs/default.common.min.js.map +0 -1
  280. package/docs/dialog.html +0 -1
  281. package/docs/dialog.min.js +0 -2
  282. package/docs/dialog.min.js.map +0 -1
  283. package/docs/docs.min.css +0 -1
  284. package/docs/docs.min.js +0 -2
  285. package/docs/docs.min.js.map +0 -1
  286. package/docs/elevation.html +0 -1
  287. package/docs/elevation.min.js +0 -2
  288. package/docs/elevation.min.js.map +0 -1
  289. package/docs/fab.html +0 -1
  290. package/docs/fab.min.js +0 -2
  291. package/docs/fab.min.js.map +0 -1
  292. package/docs/grid.html +0 -1
  293. package/docs/grid.min.js +0 -2
  294. package/docs/grid.min.js.map +0 -1
  295. package/docs/index.html +0 -1
  296. package/docs/index.min.js +0 -2
  297. package/docs/index.min.js.map +0 -1
  298. package/docs/ink.html +0 -1
  299. package/docs/ink.min.js +0 -2
  300. package/docs/ink.min.js.map +0 -1
  301. package/docs/layout.html +0 -1
  302. package/docs/layout.min.js +0 -2
  303. package/docs/layout.min.js.map +0 -1
  304. package/docs/list.html +0 -1
  305. package/docs/list.min.js +0 -2
  306. package/docs/list.min.js.map +0 -1
  307. package/docs/menu.html +0 -1
  308. package/docs/menu.min.js +0 -2
  309. package/docs/menu.min.js.map +0 -1
  310. package/docs/overlay.html +0 -1
  311. package/docs/overlay.min.js +0 -2
  312. package/docs/overlay.min.js.map +0 -1
  313. package/docs/prerender.common.min.js +0 -2
  314. package/docs/prerender.common.min.js.map +0 -1
  315. package/docs/prerender.min.js +0 -2
  316. package/docs/prerender.min.js.map +0 -1
  317. package/docs/progress.html +0 -1
  318. package/docs/progress.min.js +0 -2
  319. package/docs/progress.min.js.map +0 -1
  320. package/docs/pwa-prerender.min.js +0 -2
  321. package/docs/pwa-prerender.min.js.map +0 -1
  322. package/docs/pwa.html +0 -11
  323. package/docs/pwa.min.css +0 -1
  324. package/docs/pwa.min.js +0 -2
  325. package/docs/pwa.min.js.map +0 -1
  326. package/docs/ripple.html +0 -1
  327. package/docs/ripple.min.js +0 -2
  328. package/docs/ripple.min.js.map +0 -1
  329. package/docs/search.html +0 -1
  330. package/docs/search.min.js +0 -2
  331. package/docs/search.min.js.map +0 -1
  332. package/docs/selection.html +0 -1
  333. package/docs/selection.min.js +0 -2
  334. package/docs/selection.min.js.map +0 -1
  335. package/docs/slider.html +0 -1
  336. package/docs/slider.min.js +0 -2
  337. package/docs/slider.min.js.map +0 -1
  338. package/docs/snackbar.html +0 -1
  339. package/docs/snackbar.min.js +0 -2
  340. package/docs/snackbar.min.js.map +0 -1
  341. package/docs/spec.min.css +0 -1
  342. package/docs/spec.min.js +0 -2
  343. package/docs/spec.min.js.map +0 -1
  344. package/docs/surface.html +0 -1
  345. package/docs/surface.min.js +0 -2
  346. package/docs/surface.min.js.map +0 -1
  347. package/docs/tab.html +0 -1
  348. package/docs/tab.min.js +0 -2
  349. package/docs/tab.min.js.map +0 -1
  350. package/docs/textfield.html +0 -2
  351. package/docs/textfield.min.js +0 -2
  352. package/docs/textfield.min.js.map +0 -1
  353. package/docs/theme-colored-fallbacks.min.css +0 -1
  354. package/docs/theme-colored-fallbacks.min.js +0 -2
  355. package/docs/theme-colored-fallbacks.min.js.map +0 -1
  356. package/docs/theme-colored.min.css +0 -1
  357. package/docs/theme-colored.min.js +0 -2
  358. package/docs/theme-colored.min.js.map +0 -1
  359. package/docs/theme-default-fallbacks.min.css +0 -1
  360. package/docs/theme-default-fallbacks.min.js +0 -2
  361. package/docs/theme-default-fallbacks.min.js.map +0 -1
  362. package/docs/theme-default.min.css +0 -1
  363. package/docs/theme-default.min.js +0 -2
  364. package/docs/theme-default.min.js.map +0 -1
  365. package/docs/themes-fallbacks.min.css +0 -1
  366. package/docs/themes-fallbacks.min.js +0 -2
  367. package/docs/themes-fallbacks.min.js.map +0 -1
  368. package/docs/themes.min.css +0 -1
  369. package/docs/themes.min.js +0 -2
  370. package/docs/themes.min.js.map +0 -1
  371. package/docs/tooltip.html +0 -1
  372. package/docs/tooltip.min.js +0 -2
  373. package/docs/tooltip.min.js.map +0 -1
  374. package/docs/transition.html +0 -1
  375. package/docs/transition.min.js +0 -2
  376. package/docs/transition.min.js.map +0 -1
  377. package/docs/type.html +0 -1
  378. package/docs/type.min.js +0 -2
  379. package/docs/type.min.js.map +0 -1
  380. package/docs-src/components/datatable.pug +0 -327
  381. package/docs-src/components/selection.js +0 -9
  382. package/docs-src/components/selection.pug +0 -77
  383. package/docs-src/core/color.pug +0 -201
  384. package/docs-src/core/overlay.js +0 -4
  385. package/docs-src/core/ripple.js +0 -4
  386. package/docs-src/index.pug +0 -9
  387. package/docs-src/pwa/_dialogs.pug +0 -15
  388. package/docs-src/pwa/pwa-prerender.js +0 -3
  389. package/docs-src/pwa/pwa.js +0 -182
  390. package/docs-src/pwa/pwa.scss +0 -25
  391. package/docs-src/spec.scss +0 -1
  392. package/docs-src/themes/theme-colored-fallbacks.scss +0 -14
  393. package/docs-src/themes/theme-colored.scss +0 -14
  394. package/docs-src/themes/theme-default-fallbacks.scss +0 -14
  395. package/docs-src/themes/theme-default.scss +0 -14
  396. package/index.js +0 -51
  397. package/index.scss +0 -2
  398. package/webpack.config.js +0 -187
package/docs/_partials/_header.eta ADDED
@@ -0,0 +1,149 @@
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
+ <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
15
+ <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500">
16
+ <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Merriweather:300,400,500">
17
+ <link rel="stylesheet" href="docs.min.css">
18
+ <link rel="stylesheet" href="spec.min.css">
19
+ <link rel="stylesheet" href="theme-default.min.css" title="Default Theme">
20
+ <link rel="stylesheet" href="theme-default-fallbacks.min.css" media="all\0" title="Default Theme">
21
+ <link rel="stylesheet" disabled href="theme-colored.min.css" title="Colored Theme">
22
+ <link rel="stylesheet" disabled href="theme-colored-fallbacks.min.css" media="all\0" title="Colored Theme">
23
+ <script src="prerender.min.js"></script>
24
+ </head>
25
+
26
+ <body class="mdw-layout__body mdw-theme" mdw-surface="background" mdw-sidesheet-toggle="dismissible" mdw-sidesheet-style="modal">
27
+ <div class="mdw-layout__menus"></div>
28
+ <div class="mdw-layout__dialogs"></div>
29
+ <nav class="mdw-layout__navdrawer" id="docs-navdrawer">
30
+ <div class="mdw-layout__sheet-content mdw-theme" mdw-surface="background" mdw-border-ink>
31
+ <ul class="mdw-list" style="padding-bottom:64px;">
32
+ <li class="mdw-list__item">
33
+ <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">
34
+ <div class="mdw-list__text">Home</div>
35
+ </a>
36
+ </li>
37
+ <li class="mdw-list__item" aria-expanded="true">
38
+ <div class="mdw-list__content mdw-list__subheader">
39
+ <div class="mdw-list__text mdw-theme" mdw-ink="medium">Core</div>
40
+ <div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div>
41
+ </div>
42
+ <ul class="mdw-list">
43
+ <%~ includeFile('../_partials/_navlistitem.eta', {key: 'color', icon: 'compare', name: 'Color', page: it.page, color: 'primary contrast'}) %>
44
+ <%~ includeFile('../_partials/_navlistitem.eta', {key: 'overlay', icon: 'tonality', name: 'Overlay', page: it.page, color: 'primary contrast'}) %>
45
+ <%~ includeFile('../_partials/_navlistitem.eta', {key: 'ripple', icon: 'center_focus_strong', name: 'Ripple', page: it.page, color: 'primary contrast'}) %>
46
+ <%~ includeFile('../_partials/_navlistitem.eta', {key: 'transition', icon: 'dynamic_feed', name: 'Transition', page: it.page, color: 'primary contrast'}) %>
47
+ </ul>
48
+ </li>
49
+ <li class="mdw-list__item mdw-theme" aria-expanded="true">
50
+ <div class="mdw-list__content mdw-list__subheader">
51
+ <div class="mdw-list__text mdw-theme" mdw-ink="medium">Components</div>
52
+ <div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div>
53
+ </div>
54
+ <ul class="mdw-list">
55
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'appbar', icon: 'web_asset', name: 'App Bar', page: it.page }) %>
56
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'bottomnav', icon: 'call_to_action', name: 'Bottom Navigation', page: it.page }) %>
57
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'button', icon: 'crop_landscape', name: 'Button', page: it.page }) %>
58
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'card', icon: 'crop_square', name: 'Card', page: it.page }) %>
59
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'chip', icon: 'check_circle', name: 'Chip', page: it.page }) %>
60
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'datatable', icon: 'format_align_justify', name: 'Data Table', page: it.page }) %>
61
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'dialog', icon: 'select_all', name: 'Dialog', page: it.page }) %>
62
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'elevation', icon: 'layers', name: 'Elevation', page: it.page }) %>
63
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'fab', icon: 'add_circle', name: 'Floating Action Button', page: it.page }) %>
64
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'grid', icon: 'view_compact', name: 'Grid', page: it.page }) %>
65
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'layout', icon: 'view_quilt', name: 'Layout', page: it.page }) %>
66
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'list', icon: 'view_list', name: 'List', page: it.page }) %>
67
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'menu', icon: 'picture_in_picture', name: 'Menu', page: it.page }) %>
68
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'progress', icon: 'timelapse', name: 'Progress', page: it.page }) %>
69
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'selection', icon: 'toggle_on', name: 'Selection', page: it.page }) %>
70
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'slider', icon: 'tune', name: 'Slider', page: it.page }) %>
71
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'snackbar', icon: 'video_label', name: 'Snackbar', page: it.page }) %>
72
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'tab', icon: 'tab', name: 'Tab', page: it.page }) %>
73
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'textfield', icon: 'text_fields', name: 'Text Field', page: it.page }) %>
74
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'tooltip', icon: 'info', name: 'Tooltip', page: it.page }) %>
75
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'type', icon: 'font_download', name: 'Typography', page: it.page }) %>
76
+ </ul>
77
+ </li>
78
+ <li class="mdw-list__item" aria-expanded="true">
79
+ <div class="mdw-list__content mdw-list__subheader">
80
+ <div class="mdw-list__text mdw-theme" mdw-ink="medium">Adapters</div>
81
+ <div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div>
82
+ </div>
83
+ <ul class="mdw-list">
84
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'dom', icon:'calendar_view_day', name:'DOM', page: it.page }) %>
85
+ <%~ includeFile('../_partials/_navlistitem.eta', {key:'search', icon:'search', name:'Search', page: it.page }) %>
86
+ </ul>
87
+ </li>
88
+ </ul>
89
+ </div>
90
+ </nav>
91
+ <a class="mdw-layout__scrim" href="#" tabindex="-1"></a>
92
+ <div class="mdw-layout__appbar mdw-appbar mdw-theme" mdw-autohide="mobile tablet" mdw-surface="secondary 500" mdw-dark>
93
+ <div class="mdw-layout__appbar-shape"></div>
94
+ <div class="mdw-appbar__action">
95
+ <div class="mdw-appbar__start">
96
+ <div class="mdw-tooltip__wrapper">
97
+ <%~ includeFile(T, { button: {
98
+ class: 'mdw-tooltip__target material-icons mdw-layout__navdrawer-toggle',
99
+ text:'menu', icon:true, attributes: { href:"#docs-navdrawer" },
100
+ }}) %>
101
+ <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="start">Menu</div>
102
+ </div>
103
+ </div>
104
+ <div class="mdw-appbar__title"><%~ it.page %></div>
105
+ <div class="mdw-appbar__end" id="docs-menu-buttons">
106
+ <div class="mdw-tooltip__wrapper">
107
+ <%~ includeFile(T, { button: {
108
+ id: 'altThemeButton', class: 'mdw-tooltip__target material-icons',
109
+ text:'palette', icon:true, attributes: { 'mdw-overlay-default':'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
110
+ }}) %>
111
+ <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Alt Theme</div>
112
+ </div>
113
+ <div class="mdw-tooltip__wrapper">
114
+ <%~ includeFile(T, { button: {
115
+ id: 'darkModeButton', class: 'mdw-tooltip__target material-icons',
116
+ text: 'brightness_3', icon: true, attributes: { 'mdw-overlay-default':'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
117
+ }}) %>
118
+ <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Dark Mode</div>
119
+ </div>
120
+ <div class="mdw-tooltip__wrapper">
121
+ <%~ includeFile(T, { button: {
122
+ id: 'rtlButton', class: 'mdw-tooltip__target material-icons',
123
+ text: 'format_align_right', icon: true, attributes: { 'mdw-overlay-default': 'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
124
+ }}) %>
125
+ <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Right-to-Left</div>
126
+ </div>
127
+ <div class="mdw-tooltip__wrapper">
128
+ <%~ includeFile(T, { button: {
129
+ id: 'largeFontButton', class: 'mdw-tooltip__target material-icons',
130
+ text: 'format_size', icon: true, attributes: { 'mdw-overlay-default': 'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
131
+ }}) %>
132
+ <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">200% Text</div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ <div class="mdw-layout__fab"></div>
138
+ <div class="mdw-layout__snackbar"></div>
139
+ <div class="mdw-layout__content">
140
+ <div class="mdw-layout__content-page">
141
+ <%~ it?.body ?? '' %>
142
+ </div>
143
+ </div>
144
+ </body>
145
+ <script src="postrender.min.js"></script>
146
+ <script src="entire-framework.min.js"></script>
147
+ <script src="docs.common.min.js"></script>
148
+
149
+ </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-src → docs}/_sample-utils.js RENAMED
@@ -1,5 +1,4 @@
1
- import { iterateArrayLike } from '../core/dom';
2
-
1
+ import { iterateArrayLike } from '../core/dom.js';
3
2
 
4
3
  /**
5
4
  * @param {Element|HTMLElement} element
@@ -34,9 +33,10 @@ function convertElementToCode(element, pug = false, linePrefix = '') {
34
33
  ];
35
34
  const openingHTMLLine = pug
36
35
  ? `${htmlType === 'div' && classes.length ? '' : htmlType}${classes.length ? `.${classes.join('.')}` : ''}${attributes.length ? `(${attributes.join(' ')})` : ''}`
37
- : `<${syntaxItems.filter(item => item).join(' ').trim()}>`;
36
+ : `<${syntaxItems.filter((item) => item).join(' ').trim()}>`;
38
37
  const closingHTMLLine = pug ? '' : `</${htmlType}>`;
39
38
  const lines = [openingHTMLLine];
39
+ /** @type {string[]} */
40
40
  const innerLines = [];
41
41
  let onlyText = true;
42
42
  iterateArrayLike(element.childNodes, (child) => {
@@ -61,9 +61,9 @@ function convertElementToCode(element, pug = false, linePrefix = '') {
61
61
  }
62
62
  return linePrefix + lines.join('') + innerLines.join('').trim() + closingHTMLLine;
63
63
  }
64
- innerLines.forEach(line => lines.push(line));
64
+ innerLines.forEach((line) => lines.push(line));
65
65
  lines.push(linePrefix + closingHTMLLine);
66
- return linePrefix + lines.filter(line => line.trim()).join('\n');
66
+ return linePrefix + lines.filter((line) => line.trim()).join('\n');
67
67
  }
68
68
 
69
69
  /**
@@ -75,7 +75,9 @@ function changeElementTagName(element, tagname) {
75
75
  const newElement = document.createElement(tagname);
76
76
  for (let i = element.attributes.length - 1; i >= 0; i -= 1) {
77
77
  const attr = element.attributes.item(i);
78
- newElement.attributes.setNamedItem(attr.cloneNode());
78
+ /** @type {Attr} */
79
+ const clonedAttr = (attr.cloneNode());
80
+ newElement.attributes.setNamedItem(clonedAttr);
79
81
  }
80
82
  while (element.firstChild) {
81
83
  newElement.appendChild(element.firstChild);
package/{docs-src → docs}/_storage.js RENAMED
File without changes
package/{docs-src → docs}/docs.scss RENAMED
@@ -1,4 +1,4 @@
1
- @import './_flex.scss';
1
+ @use './_flex.scss';
2
2
 
3
3
  // Material Icon incorrectly changes RTL direction
4
4
  .material-icons {
@@ -13,7 +13,7 @@
13
13
  }
14
14
 
15
15
  .androidstatusbar {
16
- z-index: 1;
16
+ z-index: 16;
17
17
  display: flex;
18
18
  align-items: center;
19
19
  flex-direction: row-reverse;
@@ -46,6 +46,7 @@
46
46
  .content {
47
47
  flex: 1;
48
48
  overflow-y: auto;
49
+ -webkit-overflow-scrolling: touch;
49
50
  -ms-overflow-style: -ms-autohiding-scrollbar;
50
51
  flex-direction: column;
51
52
  }
@@ -62,6 +63,8 @@
62
63
 
63
64
  .render,
64
65
  .render-fill {
66
+ z-index: 1;
67
+ overflow-x: hidden;
65
68
  max-height: 640px;
66
69
  border-color: #eee;
67
70
  border-width: 1px;
package/docs/index.eta ADDED
@@ -0,0 +1,16 @@
1
+ <% layout('./_partials/_header.eta', {page: 'Home'}) %>
2
+ <div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
3
+ <div class="mdw-grid__item" mdw-colspan="100%">
4
+ <div class="mdw-grid__content">
5
+ <h1 class="mdw-type">Material Design Web</h1>
6
+ <%~ includeFile('../components/button/index.eta', {
7
+ ink: 'primary', attributes: {href:"https://github.com/clshortfuse/materialdesignweb"}, text: 'GitHub',
8
+ }) %>
9
+ <%~ includeFile('../components/button/index.eta', {
10
+ ink: 'primary', attributes: {href:"./report.html"}, text: 'Bundle Analyzer Report',
11
+ }) %>
12
+ </div>
13
+ </div>
14
+ </div>
15
+
16
+ <script src="index.min.js"></script>
package/{docs-src → docs}/index.js RENAMED
File without changes
package/docs/pages/appbar.eta ADDED
@@ -0,0 +1,114 @@
1
+ <% var T = '../../templates/index.eta' %>
2
+ <% layout('../_partials/_header.eta', {page: 'appbar'}) %>
3
+ <div class="comparison clipped">
4
+ <div class="render">
5
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'background 400', light:true }) %>
6
+ <%~ includeFile('../_partials/_appbar.eta', {
7
+ surface:'background 50', light:true, start: ['menu'], end: ['search', 'favorite', 'more_vert'], body: 'Title',
8
+ }) %>
9
+ <div class="content mdw-theme" mdw-surface="background alt"></div>
10
+ </div>
11
+ </div>
12
+
13
+ <div class="comparison clipped">
14
+ <div class="render">
15
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface: 'black', dark: true }) %>
16
+ <%~ includeFile('../_partials/_appbar.eta', {
17
+ surface: 'background 900', dark: true, start: ['menu'], end: ['search', 'favorite', 'more_vert'], body: 'Title'
18
+ }) %>
19
+ <div class="content mdw-theme" mdw-surface="background alt"></div>
20
+ </div>
21
+ </div>
22
+
23
+ <div class="comparison clipped">
24
+ <div class="render">
25
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface: 'blue 800', dark: true }) %>
26
+ <%~ includeFile('../_partials/_appbar.eta', {
27
+ surface: 'blue 700', dark: true, start: ['menu'], end: ['search', 'favorite', 'more_vert'], body: 'Title'
28
+ }) %>
29
+ <div class="content mdw-theme" mdw-surface="background alt"></div>
30
+ </div>
31
+ </div>
32
+
33
+ <div class="comparison clipped-304">
34
+ <div class="render">
35
+ <%~ includeFile('../_partials/_androidstatusbar.eta') %>
36
+ <!-- Elevation and z-index only for demo-->
37
+ <!-- Normally handled with .mdw-layout__appbar-->
38
+ <div class="mdw-appbar mdw-elevation" mdw-dense mdw-elevation="4" style="z-index:4">
39
+ <div class="mdw-appbar__action">
40
+ <div class="mdw-appbar__start">
41
+ <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'menu' }}) %>
42
+ </div>
43
+ <div class="mdw-appbar__title">Dense (Desktop)</div>
44
+ <div class="mdw-appbar__end">
45
+ <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'more_vert' }}) %>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ <div class="content mdw-theme" mdw-surface="background alt"></div>
50
+ </div>
51
+ </div>
52
+ <div class="comparison clipped-304">
53
+ <div class="render">
54
+ <%~ includeFile('../_partials/_androidstatusbar.eta') %>
55
+ <div class="mdw-appbar mdw-elevation" mdw-prominent mdw-dense mdw-elevation="4" style="z-index:4">
56
+ <div class="mdw-appbar__action">
57
+ <div class="mdw-appbar__start">
58
+ <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'menu' }}) %>
59
+ </div>
60
+ <div class="mdw-appbar__title">Prominent Dense</div>
61
+ <div class="mdw-appbar__end">
62
+ <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'search' }}) %>
63
+ <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'more_vert' }}) %>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ <div class="content mdw-theme" mdw-surface="background alt"></div>
68
+ </div>
69
+ </div>
70
+ <div class="comparison clipped-304">
71
+ <div class="render">
72
+ <%~ includeFile('../_partials/_androidstatusbar.eta') %>
73
+ <div class="mdw-appbar mdw-elevation" mdw-elevation="4" style="z-index:4">
74
+ <div class="mdw-appbar__action">
75
+ <div class="mdw-appbar__start">
76
+ <div class="mdw-tooltip__wrapper">
77
+ <%~ includeFile(T, { button: {icon:true, class: 'mdw-tooltip__target material-icons', body: 'arrow_back' }}) %>
78
+ <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>Back</div>
79
+ </div>
80
+ </div>
81
+ <div class="mdw-appbar__end">
82
+ <div class="mdw-tooltip__wrapper">
83
+ <%~ includeFile(T, { button: {icon:true, class: 'mdw-tooltip__target material-icons', body: 'more_vert', attributes: {'mdw-more-button': true} }}) %>
84
+ <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>More</div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ <div class="mdw-appbar__content">
89
+ <label class="mdw-textfield mdw-theme" mdw-ink="primary contrast" style="font-size: 1.5rem">
90
+ <input class="mdw-textfield__input" value="Project Properties" placeholder=" " />
91
+ <div class="mdw-textfield__border">
92
+ <div class="mdw-textfield__outline-gap">
93
+ <div class="mdw-textfield__label">Title</div>
94
+ </div>
95
+ </div>
96
+ </label>
97
+ <div style="height:8px"></div>
98
+ <label class="mdw-textfield mdw-theme" mdw-ink="primary contrast">
99
+ <input class="mdw-textfield__input" value="Sync with the team abo" placeholder=" " />
100
+ <div class="mdw-textfield__border">
101
+ <div class="mdw-textfield__outline-gap">
102
+ <div class="mdw-textfield__label">Description</div>
103
+ </div>
104
+ </div>
105
+ </label>
106
+ <div style="height:24px">
107
+ <!-- Spec says 16dp, but it's actually 24dp-->
108
+ </div>
109
+ </div>
110
+ </div>
111
+ <div class="content mdw-theme" mdw-surface="background alt"></div>
112
+ </div>
113
+ </div>
114
+ <script src="appbar.min.js"></script>
package/{docs-src/components → docs/pages}/appbar.js RENAMED
File without changes
package/{docs-src/components → docs/pages}/appbar.pug RENAMED
@@ -5,40 +5,38 @@ include ../_mixins.pug
5
5
  .render
6
6
  +androidstatusbar('background 400', 'light')
7
7
  +appbar('background 50', 'light', ['menu'], ['search', 'favorite', 'more_vert']) Title
8
- .content.mdw-theme(mdw-surface="background 300" mdw-light)
9
- +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsU1FwTUx3cmRUNG8/layout-structure-appbar-structure2.png')
8
+ .content.mdw-theme(mdw-surface="background alt")
10
9
 
11
10
  .comparison.clipped
12
11
  .render
13
12
  +androidstatusbar('black', 'dark')
14
13
  +appbar('background 900', 'dark', ['menu'], ['search', 'favorite', 'more_vert']) Title
15
- .content.mdw-theme(mdw-surface="background 300" mdw-light)
16
- +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsbGREMW9BdDdnSUk/layout-structure-appbar-structure3.png')
14
+ .content.mdw-theme(mdw-surface="background alt")
17
15
 
18
16
  .comparison.clipped
19
17
  .render
20
18
  +androidstatusbar('blue 800', 'dark')
21
- +appbar('blue A200', 'dark', ['menu'], ['search', 'favorite', 'more_vert']) Title
22
- .content.mdw-theme(mdw-surface="background 300" mdw-light)
23
- +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsZF9VZDhtQlF5RGM/layout-structure-appbar-structure4.png')
19
+ +appbar('blue 700', 'dark', ['menu'], ['search', 'favorite', 'more_vert']) Title
20
+ .content.mdw-theme(mdw-surface="background alt")
24
21
 
25
22
  .comparison.clipped-304
26
23
  .render
27
24
  +androidstatusbar('')
28
- .mdw-appbar(mdw-dense)
25
+ // Elevation and z-index only for demo
26
+ // Normally handled with .mdw-layout__appbar
27
+ .mdw-appbar.mdw-elevation(mdw-dense mdw-elevation="4" style="z-index:4")
29
28
  .mdw-appbar__action
30
29
  .mdw-appbar__start
31
30
  +mdwButton({ icon: true }).material-icons menu
32
31
  .mdw-appbar__title Dense (Desktop)
33
32
  .mdw-appbar__end
34
33
  +mdwButton({ icon: true }).material-icons more_vert
35
- .content.mdw-theme(mdw-surface="background 300" mdw-light)
36
- +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsLUFJUnFlRHVhUVU/layout-structure-appbar-metrics1.png')
34
+ .content.mdw-theme(mdw-surface="background alt")
37
35
 
38
36
  .comparison.clipped-304
39
37
  .render
40
38
  +androidstatusbar('')
41
- .mdw-appbar(mdw-prominent mdw-dense)
39
+ .mdw-appbar.mdw-elevation(mdw-prominent mdw-dense mdw-elevation="4" style="z-index:4")
42
40
  .mdw-appbar__action
43
41
  .mdw-appbar__start
44
42
  +mdwButton({ icon: true }).material-icons menu
@@ -46,13 +44,12 @@ include ../_mixins.pug
46
44
  .mdw-appbar__end
47
45
  +mdwButton({ icon: true }).material-icons search
48
46
  +mdwButton({ icon: true }).material-icons more_vert
49
- .content.mdw-theme(mdw-surface="background 300" mdw-light)
50
- +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsSDBhX3BwSURRc1U/layout-structure-appbar-metrics3.png')
47
+ .content.mdw-theme(mdw-surface="background alt")
51
48
 
52
49
  .comparison.clipped-304
53
50
  .render
54
51
  +androidstatusbar('')
55
- .mdw-appbar
52
+ .mdw-appbar.mdw-elevation(mdw-elevation="4" style="z-index:4")
56
53
  .mdw-appbar__action
57
54
  .mdw-appbar__start
58
55
  .mdw-tooltip__wrapper
@@ -63,19 +60,19 @@ include ../_mixins.pug
63
60
  +mdwButton({ icon: true }).mdw-tooltip__target(mdw-more-button).material-icons more_vert
64
61
  .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark) More
65
62
  .mdw-appbar__content
66
- label.mdw-textfield.mdw-theme(mdw-ink="primary" style="font-size: 1.5rem")
63
+ label.mdw-textfield.mdw-theme(mdw-ink="primary contrast" style="font-size: 1.5rem")
67
64
  input.mdw-textfield__input(value="Project Properties" placeholder=" ")
68
65
  .mdw-textfield__border
69
66
  .mdw-textfield__outline-gap
70
67
  .mdw-textfield__label Title
71
68
  div(style="height:8px")
72
- label.mdw-textfield
69
+ label.mdw-textfield.mdw-theme(mdw-ink="primary contrast")
73
70
  input.mdw-textfield__input(value="Sync with the team abo" placeholder=" ")
74
71
  .mdw-textfield__border
75
72
  .mdw-textfield__outline-gap
76
73
  .mdw-textfield__label Description
77
74
  div(style="height:24px")
78
75
  // Spec says 16dp, but it's actually 24dp
79
- .content.mdw-theme(mdw-surface="background 300" mdw-light)
80
- +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsTW1zb2x5WWg5cDA/layout-structure-appbar-metrics5.png')
76
+ .content.mdw-theme(mdw-surface="background alt")
77
+
81
78
  script(src='appbar.min.js')