@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/button.html DELETED
@@ -1,322 +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">button</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" selected href="button.html" mdw-theme-color="primary">
35
- <div class="mdw-list__text">button</div></a><a class="mdw-list__item" 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">
55
- <div class="render">
56
- <div class="androidstatusbar" mdw-theme-fill="background-400">
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="background-50">
60
- <div class="mdw-toolbar__action">
61
- <div class="mdw-toolbar__start">
62
- </div>
63
- <div class="mdw-toolbar__title">CSS Only
64
- </div>
65
- <div class="mdw-toolbar__end">
66
- </div>
67
- </div>
68
- </div>
69
- <div class="content" mdw-theme-fill="background-50 light" style="padding: 16px 0;">
70
- <div>
71
- <div class="display-flex flex-wrap">
72
- <div class="mdw-button">Flat
73
- <div class="mdw-button__focus-ring"></div>
74
- </div>
75
- <div class="mdw-button" mdw-raised>Raised
76
- <div class="mdw-button__focus-ring"></div>
77
- </div>
78
- <div class="mdw-button" mdw-raised disabled>Disabled
79
- <div class="mdw-button__focus-ring"></div>
80
- </div>
81
- <div class="mdw-button" mdw-raised="always">+Raised
82
- <div class="mdw-button__focus-ring"></div>
83
- </div>
84
- </div>
85
- <div style="height:24px;"></div>
86
- <div class="display-flex flex-wrap">
87
- <div class="mdw-button" mdw-theme-color="primary">Flat
88
- <div class="mdw-button__focus-ring"></div>
89
- </div>
90
- <div class="mdw-button" mdw-theme-color="primary" mdw-raised>Raised
91
- <div class="mdw-button__focus-ring"></div>
92
- </div>
93
- <div class="mdw-button" mdw-theme-color="primary" mdw-raised disabled>Disabled
94
- <div class="mdw-button__focus-ring"></div>
95
- </div>
96
- <div class="mdw-button" mdw-theme-color="accent-A100">accent
97
- <div class="mdw-button__focus-ring"></div>
98
- </div>
99
- </div>
100
- <div style="height:24px;"></div>
101
- <div class="display-flex flex-wrap">
102
- <div class="mdw-button" mdw-theme-fill="primary dark">Flat
103
- <div class="mdw-button__focus-ring"></div>
104
- </div>
105
- <div class="mdw-button" mdw-theme-fill="primary dark" mdw-raised>Raised
106
- <div class="mdw-button__focus-ring"></div>
107
- </div>
108
- <div class="mdw-button" mdw-theme-fill="primary dark" mdw-raised disabled>Disabled
109
- <div class="mdw-button__focus-ring"></div>
110
- </div>
111
- <div class="mdw-button" mdw-theme-fill="accent-A100 light" mdw-raised>accent
112
- <div class="mdw-button__focus-ring"></div>
113
- </div>
114
- </div>
115
- <div style="height:24px;"></div>
116
- <div class="display-flex flex-wrap">
117
- <div class="mdw-button material-icons" mdw-icon>favorite</div>
118
- <div class="mdw-button material-icons" mdw-theme-color="warn dark" mdw-icon>favorite</div>
119
- <div class="mdw-button material-icons" mdw-theme-fill="warn dark" mdw-icon>favorite</div>
120
- <div class="mdw-button material-icons" mdw-theme-fill="warn dark" mdw-icon mdw-raised>favorite</div>
121
- <div class="mdw-button material-icons" mdw-theme-fill="warn dark" mdw-icon mdw-raised disabled>favorite</div>
122
- <div class="mdw-button material-icons" mdw-icon disabled>favorite</div>
123
- </div>
124
- </div>
125
- <div style="height:24px;"></div>
126
- <div mdw-theme-fill="background-900 dark" style="padding-bottom: 8px;">
127
- <div class="display-flex flex-wrap">
128
- <div class="mdw-button">Flat
129
- <div class="mdw-button__focus-ring"></div>
130
- </div>
131
- <div class="mdw-button" mdw-raised>Raised
132
- <div class="mdw-button__focus-ring"></div>
133
- </div>
134
- <div class="mdw-button" mdw-raised disabled>Disabled
135
- <div class="mdw-button__focus-ring"></div>
136
- </div>
137
- <div class="mdw-button" mdw-raised="always">+Raised
138
- <div class="mdw-button__focus-ring"></div>
139
- </div>
140
- </div>
141
- <div style="height:24px;"></div>
142
- <div class="display-flex flex-wrap">
143
- <div class="mdw-button" mdw-theme-color="primary">Flat
144
- <div class="mdw-button__focus-ring"></div>
145
- </div>
146
- <div class="mdw-button" mdw-theme-color="primary" mdw-raised>Raised
147
- <div class="mdw-button__focus-ring"></div>
148
- </div>
149
- <div class="mdw-button" mdw-theme-color="primary" mdw-raised disabled>Disabled
150
- <div class="mdw-button__focus-ring"></div>
151
- </div>
152
- <div class="mdw-button" mdw-theme-color="accent-A100">accent
153
- <div class="mdw-button__focus-ring"></div>
154
- </div>
155
- </div>
156
- <div style="height:24px;"></div>
157
- <div class="display-flex flex-wrap">
158
- <div class="mdw-button" mdw-theme-fill="primary dark">Flat
159
- <div class="mdw-button__focus-ring"></div>
160
- </div>
161
- <div class="mdw-button" mdw-theme-fill="primary dark" mdw-raised>Raised
162
- <div class="mdw-button__focus-ring"></div>
163
- </div>
164
- <div class="mdw-button" mdw-theme-fill="primary dark" mdw-raised disabled>Disabled
165
- <div class="mdw-button__focus-ring"></div>
166
- </div>
167
- <div class="mdw-button" mdw-theme-fill="accent-A100 light" mdw-raised>accent
168
- <div class="mdw-button__focus-ring"></div>
169
- </div>
170
- </div>
171
- <div style="height:24px;"></div>
172
- <div class="display-flex flex-wrap">
173
- <div class="mdw-button material-icons" mdw-icon>favorite</div>
174
- <div class="mdw-button material-icons" mdw-theme-color="warn dark" mdw-icon>favorite</div>
175
- <div class="mdw-button material-icons" mdw-theme-fill="warn dark" mdw-icon>favorite</div>
176
- <div class="mdw-button material-icons" mdw-theme-fill="warn dark" mdw-icon mdw-raised>favorite</div>
177
- <div class="mdw-button material-icons" mdw-theme-fill="warn dark" mdw-icon mdw-raised disabled>favorite</div>
178
- <div class="mdw-button material-icons" mdw-icon disabled>favorite</div>
179
- </div>
180
- </div>
181
- </div>
182
- <div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div>
183
- </div>
184
- <div class="target" style="background-image: url(https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsX0xZMnFkR1ZOVmc/components-buttons-main6.png);"></div>
185
- </div>
186
- <div class="comparison">
187
- <div class="render js">
188
- <div class="androidstatusbar" mdw-theme-fill="background-400 light">
189
- <div>12:30</div><i class="material-icons" style="letter-spacing:2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
190
- </div>
191
- <div class="mdw-toolbar" mdw-theme-fill="background-50">
192
- <div class="mdw-toolbar__action">
193
- <div class="mdw-toolbar__start">
194
- </div>
195
- <div class="mdw-toolbar__title">Javascript Version
196
- </div>
197
- <div class="mdw-toolbar__end">
198
- </div>
199
- </div>
200
- </div>
201
- <div class="content" mdw-theme-fill="background-50 light" style="padding: 16px 0;">
202
- <div>
203
- <div class="display-flex flex-wrap">
204
- <div class="mdw-button">Flat
205
- <div class="mdw-button__focus-ring"></div>
206
- </div>
207
- <div class="mdw-button" mdw-raised>Raised
208
- <div class="mdw-button__focus-ring"></div>
209
- </div>
210
- <div class="mdw-button" mdw-raised disabled>Disabled
211
- <div class="mdw-button__focus-ring"></div>
212
- </div>
213
- <div class="mdw-button" mdw-raised="always">+Raised
214
- <div class="mdw-button__focus-ring"></div>
215
- </div>
216
- </div>
217
- <div style="height:24px;"></div>
218
- <div class="display-flex flex-wrap">
219
- <div class="mdw-button" mdw-theme-color="primary">Flat
220
- <div class="mdw-button__focus-ring"></div>
221
- </div>
222
- <div class="mdw-button" mdw-theme-color="primary" mdw-raised>Raised
223
- <div class="mdw-button__focus-ring"></div>
224
- </div>
225
- <div class="mdw-button" mdw-theme-color="primary" mdw-raised disabled>Disabled
226
- <div class="mdw-button__focus-ring"></div>
227
- </div>
228
- <div class="mdw-button" mdw-theme-color="accent-A100">accent
229
- <div class="mdw-button__focus-ring"></div>
230
- </div>
231
- </div>
232
- <div style="height:24px;"></div>
233
- <div class="display-flex flex-wrap">
234
- <div class="mdw-button" mdw-theme-fill="primary dark">Flat
235
- <div class="mdw-button__focus-ring"></div>
236
- </div>
237
- <div class="mdw-button" mdw-theme-fill="primary dark" mdw-raised>Raised
238
- <div class="mdw-button__focus-ring"></div>
239
- </div>
240
- <div class="mdw-button" mdw-theme-fill="primary dark" mdw-raised disabled>Disabled
241
- <div class="mdw-button__focus-ring"></div>
242
- </div>
243
- <div class="mdw-button" mdw-theme-fill="accent-A100 light" mdw-raised>accent
244
- <div class="mdw-button__focus-ring"></div>
245
- </div>
246
- </div>
247
- <div style="height:24px;"></div>
248
- <div class="display-flex flex-wrap">
249
- <div class="mdw-button material-icons" mdw-icon>favorite</div>
250
- <div class="mdw-button material-icons" mdw-theme-color="warn dark" mdw-icon>favorite</div>
251
- <div class="mdw-button material-icons" mdw-theme-fill="warn dark" mdw-icon>favorite</div>
252
- <div class="mdw-button material-icons" mdw-theme-fill="warn dark" mdw-icon mdw-raised>favorite</div>
253
- <div class="mdw-button material-icons" mdw-theme-fill="warn dark" mdw-icon mdw-raised disabled>favorite</div>
254
- <div class="mdw-button material-icons" mdw-icon disabled>favorite</div>
255
- </div>
256
- </div>
257
- <div style="height:24px;"></div>
258
- <div mdw-theme-fill="background-900 dark" style="padding-bottom: 8px;">
259
- <div class="display-flex flex-wrap">
260
- <div class="mdw-button">Flat
261
- <div class="mdw-button__focus-ring"></div>
262
- </div>
263
- <div class="mdw-button" mdw-raised>Raised
264
- <div class="mdw-button__focus-ring"></div>
265
- </div>
266
- <div class="mdw-button" mdw-raised disabled>Disabled
267
- <div class="mdw-button__focus-ring"></div>
268
- </div>
269
- <div class="mdw-button" mdw-raised="always">+Raised
270
- <div class="mdw-button__focus-ring"></div>
271
- </div>
272
- </div>
273
- <div style="height:24px;"></div>
274
- <div class="display-flex flex-wrap">
275
- <div class="mdw-button" mdw-theme-color="primary">Flat
276
- <div class="mdw-button__focus-ring"></div>
277
- </div>
278
- <div class="mdw-button" mdw-theme-color="primary" mdw-raised>Raised
279
- <div class="mdw-button__focus-ring"></div>
280
- </div>
281
- <div class="mdw-button" mdw-theme-color="primary" mdw-raised disabled>Disabled
282
- <div class="mdw-button__focus-ring"></div>
283
- </div>
284
- <div class="mdw-button" mdw-theme-color="accent-A100">accent
285
- <div class="mdw-button__focus-ring"></div>
286
- </div>
287
- </div>
288
- <div style="height:24px;"></div>
289
- <div class="display-flex flex-wrap">
290
- <div class="mdw-button" mdw-theme-fill="primary dark">Flat
291
- <div class="mdw-button__focus-ring"></div>
292
- </div>
293
- <div class="mdw-button" mdw-theme-fill="primary dark" mdw-raised>Raised
294
- <div class="mdw-button__focus-ring"></div>
295
- </div>
296
- <div class="mdw-button" mdw-theme-fill="primary dark" mdw-raised disabled>Disabled
297
- <div class="mdw-button__focus-ring"></div>
298
- </div>
299
- <div class="mdw-button" mdw-theme-fill="accent-A100 light" mdw-raised>accent
300
- <div class="mdw-button__focus-ring"></div>
301
- </div>
302
- </div>
303
- <div style="height:24px;"></div>
304
- <div class="display-flex flex-wrap">
305
- <div class="mdw-button material-icons" mdw-icon>favorite</div>
306
- <div class="mdw-button material-icons" mdw-theme-color="warn dark" mdw-icon>favorite</div>
307
- <div class="mdw-button material-icons" mdw-theme-fill="warn dark" mdw-icon>favorite</div>
308
- <div class="mdw-button material-icons" mdw-theme-fill="warn dark" mdw-icon mdw-raised>favorite</div>
309
- <div class="mdw-button material-icons" mdw-theme-fill="warn dark" mdw-icon mdw-raised disabled>favorite</div>
310
- <div class="mdw-button material-icons" mdw-icon disabled>favorite</div>
311
- </div>
312
- </div>
313
- </div>
314
- <div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div>
315
- </div>
316
- <div class="target" style="background-image: url(https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsX0xZMnFkR1ZOVmc/components-buttons-main6.png);"></div>
317
- </div>
318
- </div>
319
- </div>
320
- <script src="button.min.js"></script>
321
- </body>
322
- </html>
package/docs/button.min.js DELETED
@@ -1,251 +0,0 @@
1
- /******/ (function(modules) { // webpackBootstrap
2
- /******/ // The module cache
3
- /******/ var installedModules = {};
4
- /******/
5
- /******/ // The require function
6
- /******/ function __webpack_require__(moduleId) {
7
- /******/
8
- /******/ // Check if module is in cache
9
- /******/ if(installedModules[moduleId]) {
10
- /******/ return installedModules[moduleId].exports;
11
- /******/ }
12
- /******/ // Create a new module (and put it into the cache)
13
- /******/ var module = installedModules[moduleId] = {
14
- /******/ i: moduleId,
15
- /******/ l: false,
16
- /******/ exports: {}
17
- /******/ };
18
- /******/
19
- /******/ // Execute the module function
20
- /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21
- /******/
22
- /******/ // Flag the module as loaded
23
- /******/ module.l = true;
24
- /******/
25
- /******/ // Return the exports of the module
26
- /******/ return module.exports;
27
- /******/ }
28
- /******/
29
- /******/
30
- /******/ // expose the modules object (__webpack_modules__)
31
- /******/ __webpack_require__.m = modules;
32
- /******/
33
- /******/ // expose the module cache
34
- /******/ __webpack_require__.c = installedModules;
35
- /******/
36
- /******/ // define getter function for harmony exports
37
- /******/ __webpack_require__.d = function(exports, name, getter) {
38
- /******/ if(!__webpack_require__.o(exports, name)) {
39
- /******/ Object.defineProperty(exports, name, {
40
- /******/ configurable: false,
41
- /******/ enumerable: true,
42
- /******/ get: getter
43
- /******/ });
44
- /******/ }
45
- /******/ };
46
- /******/
47
- /******/ // getDefaultExport function for compatibility with non-harmony modules
48
- /******/ __webpack_require__.n = function(module) {
49
- /******/ var getter = module && module.__esModule ?
50
- /******/ function getDefault() { return module['default']; } :
51
- /******/ function getModuleExports() { return module; };
52
- /******/ __webpack_require__.d(getter, 'a', getter);
53
- /******/ return getter;
54
- /******/ };
55
- /******/
56
- /******/ // Object.prototype.hasOwnProperty.call
57
- /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
58
- /******/
59
- /******/ // __webpack_public_path__
60
- /******/ __webpack_require__.p = "";
61
- /******/
62
- /******/ // Load entry module and return exports
63
- /******/ return __webpack_require__(__webpack_require__.s = 17);
64
- /******/ })
65
- /************************************************************************/
66
- /******/ ({
67
-
68
- /***/ 0:
69
- /***/ (function(module, exports, __webpack_require__) {
70
-
71
- "use strict";
72
-
73
-
74
- Object.defineProperty(exports, "__esModule", {
75
- value: true
76
- });
77
- var crosshairs = {};
78
- var vOffset = 0;
79
- var hOffset = 0;
80
-
81
- Object.defineProperty(crosshairs, 'vOffset', {
82
- enumerable: true,
83
- configurable: false,
84
- get: function get() {
85
- return vOffset;
86
- },
87
- set: function set(val) {
88
- vOffset = val;
89
- document.getElementById('verticalLineLeft').style.left = val + 'px';
90
- document.getElementById('verticalLineRight').style.left = val + 'px';
91
- }
92
- });
93
-
94
- Object.defineProperty(crosshairs, 'hOffset', {
95
- enumerable: true,
96
- configurable: false,
97
- get: function get() {
98
- return hOffset;
99
- },
100
- set: function set(val) {
101
- hOffset = val;
102
- document.getElementById('horizontalLine').style.top = val + 'px';
103
- }
104
- });
105
-
106
- /**
107
- * @param {MouseEvent} event
108
- * @return {void}
109
- */
110
- function onTemplateImageClick(event) {
111
- document.getElementById('horizontalLine').style.top = event.clientY + 'px';
112
- document.getElementById('verticalLineLeft').style.left = event.layerX + 'px';
113
- document.getElementById('verticalLineRight').style.left = event.clientX + 'px';
114
- }
115
-
116
- /** @return {void} */
117
- function setupImageTargets() {
118
- var targets = document.getElementsByClassName('target');
119
- for (var i = 0; i < targets.length; i += 1) {
120
- targets[i].addEventListener('click', onTemplateImageClick);
121
- }
122
- }
123
-
124
- exports.default = setupImageTargets;
125
-
126
- /***/ }),
127
-
128
- /***/ 17:
129
- /***/ (function(module, exports, __webpack_require__) {
130
-
131
- __webpack_require__(18);
132
- module.exports = __webpack_require__(20);
133
-
134
-
135
- /***/ }),
136
-
137
- /***/ 18:
138
- /***/ (function(module, exports, __webpack_require__) {
139
-
140
- "use strict";
141
-
142
-
143
- var _targetHandler = __webpack_require__(0);
144
-
145
- var _targetHandler2 = _interopRequireDefault(_targetHandler);
146
-
147
- var _index = __webpack_require__(19);
148
-
149
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
150
-
151
- var componentMap = new WeakMap();
152
-
153
- /** @return {void} */
154
- function initializeMdwComponents() {
155
- var components = document.querySelectorAll('.js .mdw-button');
156
- for (var i = 0; i < components.length; i += 1) {
157
- componentMap.set(components[i], new _index.Button(components[i]));
158
- }
159
- }
160
-
161
- initializeMdwComponents();
162
- (0, _targetHandler2.default)();
163
-
164
- /***/ }),
165
-
166
- /***/ 19:
167
- /***/ (function(module, exports, __webpack_require__) {
168
-
169
- "use strict";
170
-
171
-
172
- Object.defineProperty(exports, "__esModule", {
173
- value: true
174
- });
175
-
176
- var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
177
-
178
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
179
-
180
- var Button = function () {
181
- /**
182
- * @param {Element} element
183
- */
184
- function Button(element) {
185
- var _this = this;
186
-
187
- _classCallCheck(this, Button);
188
-
189
- this.element = element;
190
- var rippleElements = element.getElementsByClassName('mdw-ripple');
191
- this.ripple = rippleElements && rippleElements[0];
192
- if (!this.ripple) {
193
- var ripple = document.createElement('div');
194
- ripple.classList.add('mdw-ripple');
195
- this.element.insertBefore(ripple, this.element.firstChild);
196
- this.ripple = ripple;
197
- }
198
- var innerRippleElements = this.ripple.getElementsByClassName('mdw-ripple__inner');
199
- this.rippleInner = innerRippleElements && innerRippleElements[0];
200
- if (!this.rippleInner) {
201
- var rippleInner = document.createElement('div');
202
- rippleInner.classList.add('mdw-ripple__inner');
203
- this.ripple.appendChild(rippleInner);
204
- this.rippleInner = rippleInner;
205
- }
206
- this.element.setAttribute('mdw-ripple', '');
207
- this.element.addEventListener('click', function (event) {
208
- _this.updateRipplePosition(event);
209
- });
210
- }
211
-
212
- /**
213
- * @param {MouseEvent|PointerEvent} event
214
- * @return {void}
215
- */
216
-
217
-
218
- _createClass(Button, [{
219
- key: 'updateRipplePosition',
220
- value: function updateRipplePosition(event) {
221
- if (event.target !== this.element && event.target !== this.ripple) {
222
- return;
223
- }
224
- if (this.element.hasAttribute('mdw-icon') || !event.pointerType && !event.detail) {
225
- // Ripple from center
226
- this.rippleInner.style.removeProperty('left');
227
- this.rippleInner.style.removeProperty('top');
228
- return;
229
- }
230
- var x = event.offsetX;
231
- var y = event.offsetY;
232
- this.rippleInner.style.setProperty('left', x + 'px');
233
- this.rippleInner.style.setProperty('top', y + 'px');
234
- }
235
- }]);
236
-
237
- return Button;
238
- }();
239
-
240
- exports.Button = Button;
241
-
242
- /***/ }),
243
-
244
- /***/ 20:
245
- /***/ (function(module, exports) {
246
-
247
- // removed by extract-text-webpack-plugin
248
-
249
- /***/ })
250
-
251
- /******/ });