@universal-material/web 3.0.9 → 3.0.11

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 (364) hide show
  1. package/button/button-base.d.ts +43 -0
  2. package/button/button-base.d.ts.map +1 -0
  3. package/button/button-base.js +152 -0
  4. package/button/button-base.js.map +1 -0
  5. package/button/button-base.styles.d.ts +2 -0
  6. package/button/button-base.styles.d.ts.map +1 -0
  7. package/button/button-base.styles.js +75 -0
  8. package/button/button-base.styles.js.map +1 -0
  9. package/button/button-set.d.ts +20 -0
  10. package/button/button-set.d.ts.map +1 -0
  11. package/button/button-set.js +38 -0
  12. package/button/button-set.js.map +1 -0
  13. package/button/button-set.styles.d.ts +2 -0
  14. package/button/button-set.styles.d.ts.map +1 -0
  15. package/button/button-set.styles.js +39 -0
  16. package/button/button-set.styles.js.map +1 -0
  17. package/button/button.d.ts +34 -0
  18. package/button/button.d.ts.map +1 -0
  19. package/button/button.js +64 -0
  20. package/button/button.js.map +1 -0
  21. package/button/button.styles.d.ts +2 -0
  22. package/button/button.styles.d.ts.map +1 -0
  23. package/button/button.styles.js +96 -0
  24. package/button/button.styles.js.map +1 -0
  25. package/button/fab.d.ts +31 -0
  26. package/button/fab.d.ts.map +1 -0
  27. package/button/fab.js +63 -0
  28. package/button/fab.js.map +1 -0
  29. package/button/fab.styles.d.ts +2 -0
  30. package/button/fab.styles.d.ts.map +1 -0
  31. package/button/fab.styles.js +89 -0
  32. package/button/fab.styles.js.map +1 -0
  33. package/button/icon-button.d.ts +35 -0
  34. package/button/icon-button.d.ts.map +1 -0
  35. package/button/icon-button.js +79 -0
  36. package/button/icon-button.js.map +1 -0
  37. package/button/icon-button.styles.d.ts +2 -0
  38. package/button/icon-button.styles.d.ts.map +1 -0
  39. package/button/icon-button.styles.js +70 -0
  40. package/button/icon-button.styles.js.map +1 -0
  41. package/card/card-content.d.ts +13 -0
  42. package/card/card-content.d.ts.map +1 -0
  43. package/card/card-content.js +44 -0
  44. package/card/card-content.js.map +1 -0
  45. package/card/card-content.styles.d.ts +2 -0
  46. package/card/card-content.styles.d.ts.map +1 -0
  47. package/card/card-content.styles.js +15 -0
  48. package/card/card-content.styles.js.map +1 -0
  49. package/card/card-media.d.ts +12 -0
  50. package/card/card-media.d.ts.map +1 -0
  51. package/card/card-media.js +29 -0
  52. package/card/card-media.js.map +1 -0
  53. package/card/card-media.styles.d.ts +2 -0
  54. package/card/card-media.styles.d.ts.map +1 -0
  55. package/card/card-media.styles.js +13 -0
  56. package/card/card-media.styles.js.map +1 -0
  57. package/card/card.d.ts +19 -0
  58. package/card/card.d.ts.map +1 -0
  59. package/card/card.js +40 -0
  60. package/card/card.js.map +1 -0
  61. package/card/card.styles.d.ts +2 -0
  62. package/card/card.styles.d.ts.map +1 -0
  63. package/card/card.styles.js +28 -0
  64. package/card/card.styles.js.map +1 -0
  65. package/checkbox/checkbox.d.ts +16 -0
  66. package/checkbox/checkbox.d.ts.map +1 -0
  67. package/checkbox/checkbox.js +75 -0
  68. package/checkbox/checkbox.js.map +1 -0
  69. package/container/container.d.ts +13 -0
  70. package/container/container.d.ts.map +1 -0
  71. package/container/container.js +23 -0
  72. package/container/container.js.map +1 -0
  73. package/container/container.styles.d.ts +2 -0
  74. package/container/container.styles.d.ts.map +1 -0
  75. package/container/container.styles.js +43 -0
  76. package/container/container.styles.js.map +1 -0
  77. package/custom-elements.json +3706 -0
  78. package/divider/divider.d.ts +14 -0
  79. package/divider/divider.d.ts.map +1 -0
  80. package/divider/divider.js +27 -0
  81. package/divider/divider.js.map +1 -0
  82. package/divider/divider.styles.d.ts +2 -0
  83. package/divider/divider.styles.d.ts.map +1 -0
  84. package/divider/divider.styles.js +15 -0
  85. package/divider/divider.styles.js.map +1 -0
  86. package/elevation/elevation.d.ts +11 -0
  87. package/elevation/elevation.d.ts.map +1 -0
  88. package/elevation/elevation.js +21 -0
  89. package/elevation/elevation.js.map +1 -0
  90. package/elevation/elevation.styles.d.ts +2 -0
  91. package/elevation/elevation.styles.d.ts.map +1 -0
  92. package/elevation/elevation.styles.js +28 -0
  93. package/elevation/elevation.styles.js.map +1 -0
  94. package/index.d.ts +27 -0
  95. package/index.d.ts.map +1 -0
  96. package/{src/index.ts → index.js} +1 -1
  97. package/index.js.map +1 -0
  98. package/package.json +1 -1
  99. package/ripple/ripple.d.ts +25 -0
  100. package/ripple/ripple.d.ts.map +1 -0
  101. package/ripple/ripple.js +119 -0
  102. package/ripple/ripple.js.map +1 -0
  103. package/ripple/ripple.styles.d.ts +2 -0
  104. package/ripple/ripple.styles.d.ts.map +1 -0
  105. package/ripple/ripple.styles.js +74 -0
  106. package/ripple/ripple.styles.js.map +1 -0
  107. package/shared/base.styles.d.ts +2 -0
  108. package/shared/base.styles.d.ts.map +1 -0
  109. package/shared/base.styles.js +9 -0
  110. package/shared/base.styles.js.map +1 -0
  111. package/table/table-body.d.ts +11 -0
  112. package/table/table-body.d.ts.map +1 -0
  113. package/table/table-body.js +21 -0
  114. package/table/table-body.js.map +1 -0
  115. package/table/table-body.styles.d.ts +2 -0
  116. package/table/table-body.styles.d.ts.map +1 -0
  117. package/table/table-body.styles.js +11 -0
  118. package/table/table-body.styles.js.map +1 -0
  119. package/table/table-cell.d.ts +11 -0
  120. package/table/table-cell.d.ts.map +1 -0
  121. package/table/table-cell.js +21 -0
  122. package/table/table-cell.js.map +1 -0
  123. package/table/table-cell.styles.d.ts +2 -0
  124. package/table/table-cell.styles.d.ts.map +1 -0
  125. package/table/table-cell.styles.js +11 -0
  126. package/table/table-cell.styles.js.map +1 -0
  127. package/table/table-head.d.ts +11 -0
  128. package/table/table-head.d.ts.map +1 -0
  129. package/table/table-head.js +21 -0
  130. package/table/table-head.js.map +1 -0
  131. package/table/table-head.styles.d.ts +2 -0
  132. package/table/table-head.styles.d.ts.map +1 -0
  133. package/table/table-head.styles.js +11 -0
  134. package/table/table-head.styles.js.map +1 -0
  135. package/table/table-header-cell.d.ts +11 -0
  136. package/table/table-header-cell.d.ts.map +1 -0
  137. package/table/table-header-cell.js +21 -0
  138. package/table/table-header-cell.js.map +1 -0
  139. package/table/table-header-cell.styles.d.ts +2 -0
  140. package/table/table-header-cell.styles.d.ts.map +1 -0
  141. package/table/table-header-cell.styles.js +12 -0
  142. package/table/table-header-cell.styles.js.map +1 -0
  143. package/table/table-row.d.ts +11 -0
  144. package/table/table-row.d.ts.map +1 -0
  145. package/table/table-row.js +21 -0
  146. package/table/table-row.js.map +1 -0
  147. package/table/table-row.styles.d.ts +2 -0
  148. package/table/table-row.styles.d.ts.map +1 -0
  149. package/table/table-row.styles.js +7 -0
  150. package/table/table-row.styles.js.map +1 -0
  151. package/table/table.d.ts +16 -0
  152. package/table/table.d.ts.map +1 -0
  153. package/{src/table/table.ts → table/table.js} +6 -15
  154. package/table/table.js.map +1 -0
  155. package/table/table.styles.d.ts +2 -0
  156. package/table/table.styles.d.ts.map +1 -0
  157. package/table/table.styles.js +16 -0
  158. package/table/table.styles.js.map +1 -0
  159. package/theme/color.d.ts +7 -0
  160. package/theme/color.d.ts.map +1 -0
  161. package/theme/color.js +2 -0
  162. package/theme/color.js.map +1 -0
  163. package/theme/css-var-builder.d.ts +9 -0
  164. package/theme/css-var-builder.d.ts.map +1 -0
  165. package/theme/css-var-builder.js +25 -0
  166. package/theme/css-var-builder.js.map +1 -0
  167. package/theme/index.d.ts +2 -0
  168. package/theme/index.d.ts.map +1 -0
  169. package/{src/theme/index.ts → theme/index.js} +1 -0
  170. package/theme/index.js.map +1 -0
  171. package/theme/neutral-colors.d.ts +4 -0
  172. package/theme/neutral-colors.d.ts.map +1 -0
  173. package/theme/neutral-colors.js +19 -0
  174. package/theme/neutral-colors.js.map +1 -0
  175. package/theme/rgb-color.d.ts +9 -0
  176. package/theme/rgb-color.d.ts.map +1 -0
  177. package/theme/rgb-color.js +13 -0
  178. package/theme/rgb-color.js.map +1 -0
  179. package/theme/theme-builder.d.ts +27 -0
  180. package/theme/theme-builder.d.ts.map +1 -0
  181. package/theme/theme-builder.js +146 -0
  182. package/theme/theme-builder.js.map +1 -0
  183. package/{src/theme/theme-color.ts → theme/theme-color.d.ts} +2 -3
  184. package/theme/theme-color.d.ts.map +1 -0
  185. package/theme/theme-color.js +2 -0
  186. package/theme/theme-color.js.map +1 -0
  187. package/.editorconfig +0 -8
  188. package/.eleventy.cjs +0 -21
  189. package/.eslintignore +0 -6
  190. package/.eslintrc.json +0 -98
  191. package/.prettierrc.json +0 -7
  192. package/.vscode/extensions.json +0 -9
  193. package/CHANGELOG.md +0 -98
  194. package/LICENSE +0 -28
  195. package/docs/.nojekyll +0 -0
  196. package/docs/api/index.html +0 -149
  197. package/docs/docs.css +0 -185
  198. package/docs/examples/index.html +0 -75
  199. package/docs/examples/name-property/index.html +0 -65
  200. package/docs/index.html +0 -75
  201. package/docs/install/index.html +0 -53
  202. package/docs/prism-okaidia.css +0 -123
  203. package/docs/src/_api-section.pug +0 -27
  204. package/docs/src/_layout.pug +0 -182
  205. package/docs/src/components/button-set/alignment.html +0 -29
  206. package/docs/src/components/button-set/stack.html +0 -5
  207. package/docs/src/components/button-set/usage.html +0 -35
  208. package/docs/src/components/button-set.pug +0 -16
  209. package/docs/src/components/cards/card-media.html +0 -39
  210. package/docs/src/components/cards/card-with-actions.html +0 -38
  211. package/docs/src/components/cards/simple-card.html +0 -3
  212. package/docs/src/components/cards.pug +0 -15
  213. package/docs/src/components/checkbox/usage.html +0 -33
  214. package/docs/src/components/checkbox.pug +0 -7
  215. package/docs/src/components/chips/chip-input.html +0 -73
  216. package/docs/src/components/chips/default-chips.html +0 -25
  217. package/docs/src/components/chips/elevated-chips.html +0 -25
  218. package/docs/src/components/chips/selected-chips.html +0 -50
  219. package/docs/src/components/chips.pug +0 -16
  220. package/docs/src/components/common-buttons/anchor-buttons.html +0 -6
  221. package/docs/src/components/common-buttons/buttons-icons.html +0 -24
  222. package/docs/src/components/common-buttons/buttons-trailing-icons.html +0 -25
  223. package/docs/src/components/common-buttons/buttons-variants.html +0 -6
  224. package/docs/src/components/common-buttons/filled-colors.html +0 -4
  225. package/docs/src/components/common-buttons.pug +0 -22
  226. package/docs/src/components/data-tables/simple-table.html +0 -47
  227. package/docs/src/components/data-tables/table-footer.html +0 -59
  228. package/docs/src/components/data-tables/table-header.html +0 -43
  229. package/docs/src/components/data-tables.pug +0 -15
  230. package/docs/src/components/datepicker.pug +0 -133
  231. package/docs/src/components/dialogs/example.html +0 -44
  232. package/docs/src/components/dialogs.pug +0 -19
  233. package/docs/src/components/dividers/no-margin.html +0 -7
  234. package/docs/src/components/dividers/usage.html +0 -7
  235. package/docs/src/components/dividers.pug +0 -13
  236. package/docs/src/components/dropdown-menus/down-end.html +0 -10
  237. package/docs/src/components/dropdown-menus/down-left.html +0 -10
  238. package/docs/src/components/dropdown-menus/down-right.html +0 -10
  239. package/docs/src/components/dropdown-menus/down-start.html +0 -10
  240. package/docs/src/components/dropdown-menus/down.html +0 -10
  241. package/docs/src/components/dropdown-menus/up-end.html +0 -10
  242. package/docs/src/components/dropdown-menus/up-left.html +0 -10
  243. package/docs/src/components/dropdown-menus/up-right.html +0 -10
  244. package/docs/src/components/dropdown-menus/up-start.html +0 -10
  245. package/docs/src/components/dropdown-menus/up.html +0 -10
  246. package/docs/src/components/expansion-panel.pug +0 -33
  247. package/docs/src/components/fab/button-colors.html +0 -18
  248. package/docs/src/components/fab/button-sizes.html +0 -11
  249. package/docs/src/components/fab/extended-buttons.html +0 -18
  250. package/docs/src/components/fab/floating-action-area.html +0 -5
  251. package/docs/src/components/fab/floating-menu.html +0 -10
  252. package/docs/src/components/fab/lowered-buttons.html +0 -6
  253. package/docs/src/components/fab.pug +0 -25
  254. package/docs/src/components/icon-buttons/anchor-buttons.html +0 -15
  255. package/docs/src/components/icon-buttons/buttons-variants.html +0 -15
  256. package/docs/src/components/icon-buttons/toggle-buttons-manual.html +0 -44
  257. package/docs/src/components/icon-buttons/toggle-buttons.html +0 -48
  258. package/docs/src/components/icon-buttons.pug +0 -18
  259. package/docs/src/components/lists/list-avatars.html +0 -14
  260. package/docs/src/components/lists/list-custom-dividers.html +0 -23
  261. package/docs/src/components/lists/list-dividers.html +0 -17
  262. package/docs/src/components/lists/list-dynamic.html +0 -26
  263. package/docs/src/components/lists/list-hover.html +0 -17
  264. package/docs/src/components/lists/list-icons.html +0 -17
  265. package/docs/src/components/lists/list-indexed.html +0 -123
  266. package/docs/src/components/lists/list-sections.html +0 -16
  267. package/docs/src/components/lists/list-three-lines.html +0 -20
  268. package/docs/src/components/lists/list-two-lines.html +0 -20
  269. package/docs/src/components/lists/list-with-action.html +0 -26
  270. package/docs/src/components/lists/list-with-activated-item.html +0 -17
  271. package/docs/src/components/lists/simple-list.html +0 -17
  272. package/docs/src/components/lists.pug +0 -94
  273. package/docs/src/components/menus.pug +0 -55
  274. package/docs/src/components/progress/circular-progress.html +0 -13
  275. package/docs/src/components/progress/determinate-progress.html +0 -3
  276. package/docs/src/components/progress/indeterminate-progress.html +0 -3
  277. package/docs/src/components/progress/progress-color.html +0 -3
  278. package/docs/src/components/progress.pug +0 -18
  279. package/docs/src/components/ripple/usage.html +0 -9
  280. package/docs/src/components/ripple.pug +0 -10
  281. package/docs/src/components/selection-controls/checkbox.html +0 -22
  282. package/docs/src/components/selection-controls/radio-button.html +0 -36
  283. package/docs/src/components/selection-controls/switch.html +0 -12
  284. package/docs/src/components/selection-controls.pug +0 -13
  285. package/docs/src/components/sliders/example.html +0 -42
  286. package/docs/src/components/sliders.pug +0 -7
  287. package/docs/src/components/snackbar/example.html +0 -35
  288. package/docs/src/components/snackbars.pug +0 -21
  289. package/docs/src/components/steppers.pug +0 -57
  290. package/docs/src/components/tabs/example.html +0 -45
  291. package/docs/src/components/tabs.pug +0 -8
  292. package/docs/src/components/text-fields.pug +0 -88
  293. package/docs/src/components/toolbars/simple-toolbar.html +0 -33
  294. package/docs/src/components/toolbars.pug +0 -7
  295. package/docs/src/content/typography/example.html +0 -15
  296. package/docs/src/content/typography.pug +0 -8
  297. package/docs/src/css/docs.scss +0 -189
  298. package/docs/src/index.pug +0 -10
  299. package/docs/src/js/docs.js +0 -161
  300. package/docs/src/js/universal-material.js +0 -757
  301. package/docs/src/js/universal-material.js.map +0 -1
  302. package/docs/src/js/universal-material.min.js +0 -17
  303. package/docs/src/js/universal-material.min.js.map +0 -1
  304. package/docs/src/layout/grid.pug +0 -15
  305. package/docs/src/utilities/background-colors/common-colors.html +0 -7
  306. package/docs/src/utilities/background-colors/theme-colors.html +0 -16
  307. package/docs/src/utilities/background-colors.pug +0 -10
  308. package/docs/src/utilities/text-and-background-colors/common-colors.html +0 -80
  309. package/docs/src/utilities/text-and-background-colors/theme-colors.html +0 -208
  310. package/docs/src/utilities/text-and-background-colors.pug +0 -10
  311. package/docs/src/utilities/text-colors/common-colors.html +0 -12
  312. package/docs/src/utilities/text-colors/emphasis-colors.html +0 -26
  313. package/docs/src/utilities/text-colors/theme-colors.html +0 -37
  314. package/docs/src/utilities/text-colors.pug +0 -13
  315. package/gulpfile.js +0 -225
  316. package/index.html +0 -11
  317. package/rollup.config.js +0 -42
  318. package/src/_utils.scss +0 -20
  319. package/src/_variables.scss +0 -68
  320. package/src/button/button-base.styles.scss +0 -75
  321. package/src/button/button-base.ts +0 -147
  322. package/src/button/button-set.styles.scss +0 -35
  323. package/src/button/button-set.ts +0 -33
  324. package/src/button/button.styles.scss +0 -97
  325. package/src/button/button.ts +0 -64
  326. package/src/button/fab.styles.scss +0 -90
  327. package/src/button/fab.ts +0 -55
  328. package/src/button/icon-button.styles.scss +0 -74
  329. package/src/button/icon-button.ts +0 -72
  330. package/src/card/card-content.styles.scss +0 -11
  331. package/src/card/card-content.ts +0 -45
  332. package/src/card/card-media.styles.scss +0 -9
  333. package/src/card/card-media.ts +0 -24
  334. package/src/card/card.styles.scss +0 -27
  335. package/src/card/card.ts +0 -37
  336. package/src/checkbox/checkbox.ts +0 -77
  337. package/src/container/container.styles.scss +0 -39
  338. package/src/container/container.ts +0 -24
  339. package/src/divider/divider.styles.scss +0 -13
  340. package/src/divider/divider.ts +0 -21
  341. package/src/elevation/elevation.styles.scss +0 -31
  342. package/src/elevation/elevation.ts +0 -17
  343. package/src/ripple/ripple.styles.scss +0 -80
  344. package/src/ripple/ripple.ts +0 -150
  345. package/src/shared/base.styles.scss +0 -5
  346. package/src/table/table-body.styles.scss +0 -9
  347. package/src/table/table-body.ts +0 -21
  348. package/src/table/table-cell.styles.scss +0 -9
  349. package/src/table/table-cell.ts +0 -21
  350. package/src/table/table-head.styles.scss +0 -9
  351. package/src/table/table-head.ts +0 -21
  352. package/src/table/table-header-cell.styles.scss +0 -10
  353. package/src/table/table-header-cell.ts +0 -21
  354. package/src/table/table-row.styles.scss +0 -3
  355. package/src/table/table-row.ts +0 -21
  356. package/src/table/table.styles.scss +0 -12
  357. package/src/theme/color.ts +0 -6
  358. package/src/theme/css-var-builder.ts +0 -36
  359. package/src/theme/neutral-colors.ts +0 -21
  360. package/src/theme/rgb-color.ts +0 -19
  361. package/src/theme/theme-builder.ts +0 -201
  362. package/tsconfig.json +0 -36
  363. package/web-dev-server.config.js +0 -25
  364. package/web-test-runner.config.js +0 -120
@@ -1,94 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
- +renderTitle('Lists')
5
- +renderSection('Simple list')
6
- u-card-content.list-example-box-header
7
- include lists/simple-list.html
8
-
9
- u-card-content.example-card-code
10
- pre
11
- code.language-html
12
- +renderSection('List dividers')
13
- u-card-content.list-example-box-header
14
- include lists/list-dividers.html
15
-
16
- u-card-content.example-card-code
17
- pre
18
- code.language-html
19
- +renderSection('List custom divider')
20
- u-card-content.list-example-box-header
21
- include lists/list-custom-dividers.html
22
-
23
- u-card-content.example-card-code
24
- pre
25
- code.language-html
26
- +renderSection('List hover')
27
- u-card-content.list-example-box-header
28
- include lists/list-hover.html
29
- u-card-content.example-card-code
30
- pre
31
- code.language-html
32
- +renderSection('List with two lines')
33
- u-card-content.list-example-box-header
34
- include lists/list-two-lines.html
35
-
36
- u-card-content.example-card-code
37
- pre
38
- code.language-html
39
- +renderSection('List with three lines')
40
- u-card-content.list-example-box-header
41
- include lists/list-three-lines.html
42
-
43
- u-card-content.example-card-code
44
- pre
45
- code.language-html
46
- +renderSection('List with dynamic content')
47
- u-card-content.list-example-box-header
48
- include lists/list-dynamic.html
49
-
50
- u-card-content.example-card-code
51
- pre
52
- code.language-html
53
- +renderSection('List avatar')
54
- u-card-content.list-example-box-header
55
- include lists/list-avatars.html
56
-
57
- u-card-content.example-card-code
58
- pre
59
- code.language-html
60
- +renderSection('List icons')
61
- u-card-content.list-example-box-header
62
- include lists/list-icons.html
63
-
64
- u-card-content.example-card-code
65
- pre
66
- code.language-html
67
- +renderSection('List with activated item')
68
- u-card-content.list-example-box-header
69
- include lists/list-with-activated-item.html
70
-
71
- u-card-content.example-card-code
72
- pre
73
- code.language-html
74
- +renderSection('List with action')
75
- u-card-content.list-example-box-header
76
- include lists/list-with-action.html
77
-
78
- u-card-content.example-card-code
79
- pre
80
- code.language-html
81
- +renderSection('List sections')
82
- u-card-content.list-example-box-header
83
- include lists/list-sections.html
84
-
85
- u-card-content.example-card-code
86
- pre
87
- code.language-html
88
- +renderSection('List indexed')
89
- u-card-content.list-example-box-header.limited-height
90
- include lists/list-indexed.html
91
-
92
- u-card-content.example-card-code
93
- pre
94
- code.language-html
@@ -1,55 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
- +renderTitle('Menus')
5
-
6
- .menu-example
7
- +renderSection('Down')
8
- include:exampleCode dropdown-menus/down.html
9
-
10
- +renderSection('Down left')
11
- include:exampleCode dropdown-menus/down-left.html
12
-
13
- +renderSection('Down right')
14
- include:exampleCode dropdown-menus/down-right.html
15
-
16
- +renderSection('Down start')
17
- include:exampleCode dropdown-menus/down-start.html
18
-
19
- +renderSection('Down end')
20
- include:exampleCode dropdown-menus/down-end.html
21
-
22
- +renderSection('Up')
23
- u-card-content.d-flex.align-items-end
24
- include dropdown-menus/up.html
25
- u-card-content.example-card-code
26
- pre
27
- code.language-html
28
-
29
- +renderSection('Up left')
30
- u-card-content.d-flex.align-items-end
31
- include dropdown-menus/up-left.html
32
- u-card-content.example-card-code
33
- pre
34
- code.language-html
35
-
36
- +renderSection('Up right')
37
- u-card-content.d-flex.align-items-end
38
- include dropdown-menus/up-right.html
39
- u-card-content.example-card-code
40
- pre
41
- code.language-html
42
-
43
- +renderSection('Up start')
44
- u-card-content.d-flex.align-items-end
45
- include dropdown-menus/up-start.html
46
- u-card-content.example-card-code
47
- pre
48
- code.language-html
49
-
50
- +renderSection('Up end')
51
- u-card-content.d-flex.align-items-end
52
- include dropdown-menus/up-end.html
53
- u-card-content.example-card-code
54
- pre
55
- code.language-html
@@ -1,13 +0,0 @@
1
- <div class="preloader-wrapper">
2
- <div class="spinner-layer">
3
- <div class="circle-clipper left">
4
- <div class="circle"></div>
5
- </div>
6
- <div class="gap-patch">
7
- <div class="circle"></div>
8
- </div>
9
- <div class="circle-clipper right">
10
- <div class="circle"></div>
11
- </div>
12
- </div>
13
- </div>
@@ -1,3 +0,0 @@
1
- <div class="u-progress show">
2
- <div class="u-progress-indicator" style="width: 30%;"></div>
3
- </div>
@@ -1,3 +0,0 @@
1
- <div class="u-progress indeterminate show">
2
- <div class="u-progress-indicator"></div>
3
- </div>
@@ -1,3 +0,0 @@
1
- <div class="u-progress indeterminate show u-text-secondary">
2
- <div class="u-progress-indicator"></div>
3
- </div>
@@ -1,18 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
- +renderTitle('Progress')
5
-
6
- +renderSection('Determinate')
7
- include:exampleCode progress/determinate-progress.html
8
-
9
- +renderSection('Indeterminate')
10
- include:exampleCode progress/indeterminate-progress.html
11
-
12
- h5.u-headline5.article-title Changing color
13
- p Just set progress color and the magic is done
14
- u-card.example-card(variant="outlined")
15
- include:exampleCode progress/progress-color.html
16
-
17
- +renderSection('Circular progress')
18
- include:exampleCode progress/circular-progress.html
@@ -1,9 +0,0 @@
1
- <div class="d-flex">
2
- <div class="ripple-example-container">
3
- <u-ripple></u-ripple>
4
- </div>
5
-
6
- <div class="ripple-example-container round ml-3">
7
- <u-ripple></u-ripple>
8
- </div>
9
- </div>
@@ -1,10 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
-
5
- +renderTitle('Ripple')
6
-
7
- +renderSection('Usage')
8
- include:exampleCode ripple/usage.html
9
-
10
- +renderApiSection(apis.ripple)
@@ -1,22 +0,0 @@
1
- <label class="u-checkbox">
2
- <input type="checkbox" aria-labelledby="checkboxLabel" />
3
- <span class="u-selection-control">
4
- <span class="u-check-indicator"></span>
5
- </span>
6
- <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
7
- </label>
8
- <label class="u-checkbox">
9
- <input type="checkbox" aria-labelledby="checkboxLabel" disabled />
10
- <span class="u-selection-control">
11
- <span class="u-check-indicator"></span>
12
- </span>
13
- <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
14
- </label>
15
-
16
- <label class="u-checkbox">
17
- <input type="checkbox" aria-labelledby="checkboxLabel" disabled checked />
18
- <span class="u-selection-control">
19
- <span class="u-check-indicator"></span>
20
- </span>
21
- <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
22
- </label>
@@ -1,36 +0,0 @@
1
- <label class="u-radio">
2
- <input type="radio" name="radio" />
3
- <span class="u-selection-control">
4
- <span class="u-check-indicator"></span>
5
- </span>
6
- <span class="u-selection-control-label">Radio A</span>
7
- </label>
8
- <label class="u-radio">
9
- <input type="radio" name="radio" />
10
- <span class="u-selection-control">
11
- <span class="u-check-indicator"></span>
12
- </span>
13
- <span class="u-selection-control-label">Radio B</span>
14
- </label>
15
- <label class="u-radio">
16
- <input type="radio" name="radio" />
17
- <span class="u-selection-control">
18
- <span class="u-check-indicator"></span>
19
- </span>
20
- <span class="u-selection-control-label">Radio C</span>
21
- </label>
22
- <label class="u-radio">
23
- <input type="radio" name="radio" disabled />
24
- <span class="u-selection-control">
25
- <span class="u-check-indicator"></span>
26
- </span>
27
- <span class="u-selection-control-label">Radio C</span>
28
- </label>
29
-
30
- <label class="u-radio">
31
- <input type="radio" name="other" disabled checked />
32
- <span class="u-selection-control">
33
- <span class="u-check-indicator"></span>
34
- </span>
35
- <span class="u-selection-control-label">Radio C</span>
36
- </label>
@@ -1,12 +0,0 @@
1
- <label class="u-switch">
2
- <input type="checkbox" />
3
- <span class="u-selection-control">
4
- <span class="u-check-indicator"></span></span>
5
- <span class="u-selection-control-label">Switch</span>
6
- </label>
7
- <label class="u-switch">
8
- <input type="checkbox" disabled />
9
- <span class="u-selection-control">
10
- <span class="u-check-indicator"></span></span>
11
- <span class="u-selection-control-label">Switch</span>
12
- </label>
@@ -1,13 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
- +renderTitle('Selection controls')
5
-
6
- +renderSection('Checkbox')
7
- include:exampleCode selection-controls/checkbox.html
8
-
9
- +renderSection('Radio')
10
- include:exampleCode selection-controls/radio-button.html
11
-
12
- +renderSection('Switch')
13
- include:exampleCode selection-controls/switch.html
@@ -1,42 +0,0 @@
1
- <div class="u-slider" aria-label="Select value">
2
- <input type="range" min="100" max="300" step="0.25"/>
3
- <div class="u-slider-track-container">
4
- <div class="u-slider-track"></div>
5
- </div>
6
- <div class="u-slider-thumb-container">
7
- <div class="u-slider-thumb"></div>
8
- </div>
9
- </div>
10
- <div class="u-slider" aria-label="Select value">
11
- <input type="range" min="10" max="20" step="2"/>
12
- <div class="u-slider-track-container">
13
- <div class="u-slider-track-marker-container">
14
- <div class="u-slider-track-marker"></div>
15
- </div>
16
- <div class="u-slider-track"></div>
17
- </div>
18
- <div class="u-slider-thumb-container">
19
- <div class="u-slider-thumb"></div>
20
- </div>
21
- </div>
22
- <div class="u-slider" aria-label="Select value">
23
- <input type="range" min="100" max="300" step="0.25" disabled />
24
- <div class="u-slider-track-container">
25
- <div class="u-slider-track"></div>
26
- </div>
27
- <div class="u-slider-thumb-container">
28
- <div class="u-slider-thumb"></div>
29
- </div>
30
- </div>
31
- <div class="u-slider" aria-label="Select value">
32
- <input type="range" min="10" max="20" step="2" disabled />
33
- <div class="u-slider-track-container">
34
- <div class="u-slider-track-marker-container">
35
- <div class="u-slider-track-marker"></div>
36
- </div>
37
- <div class="u-slider-track"></div>
38
- </div>
39
- <div class="u-slider-thumb-container">
40
- <div class="u-slider-thumb"></div>
41
- </div>
42
- </div>
@@ -1,7 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
- +renderTitle('Sliders')
5
-
6
- +renderSection('Slider')
7
- include:exampleCode sliders/example.html
@@ -1,35 +0,0 @@
1
- <div class="u-form-field">
2
- <div class="u-text-field-container">
3
- <div class="u-text-field u-text-field-box">
4
- <input class="u-text-input" id="snackbarText" />
5
- <label>Snackbar text</label>
6
- </div>
7
- </div>
8
- </div>
9
-
10
- <div class="u-form-field">
11
- <div class="u-text-field-container">
12
- <div class="u-text-field u-text-field-box">
13
- <input class="u-text-input" id="snackbarButtonText" />
14
- <label>Snackbar button text</label>
15
- </div>
16
- </div>
17
- </div>
18
-
19
- <div class="u-text-end">
20
- <button class="u-filled-btn" onclick="showSnackbar()">Show snackbar</button>
21
- </div>
22
- <script>
23
- function showSnackbar() {
24
-
25
- const text = document.getElementById('snackbarText').value;
26
- const buttonText = document.getElementById('snackbarButtonText').value;
27
-
28
- umd.Snackbar.show(text, 30000, buttonText ? {
29
- text: buttonText,
30
- action: function () {
31
- alert('Snackbar action!')
32
- }
33
- } : null);
34
- }
35
- </script>
@@ -1,21 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
- +renderTitle('Snackbars')
5
-
6
- +renderSection('Example')
7
- include:exampleCode snackbar/example.html
8
- block scripts
9
- script.
10
- function showSnackbar() {
11
-
12
- const text = document.getElementById('snackbarText').value;
13
- const buttonText = document.getElementById('snackbarButtonText').value;
14
-
15
- umd.Snackbar.show(text, umd.SnackbarDuration.long, buttonText ? {
16
- text: buttonText,
17
- action: function () {
18
- alert('Snackbar action!')
19
- }
20
- } : null);
21
- }
@@ -1,57 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
- +renderTitle('Steppers')
5
-
6
- h5.u-headline5.article-title Horizontal stepper
7
- .u-card-elevated
8
- .u-stepper.u-horizontal-stepper
9
- .u-step.completed
10
- .u-step-indicator
11
- .u-step-circle 1
12
- .u-step-label Step 1
13
- .u-step-line
14
- .u-step.active
15
- .u-step-indicator
16
- .u-step-circle 1
17
- .u-step-label Step 1
18
- .u-step-line
19
- .u-step
20
- .u-step-indicator
21
- .u-step-circle 2
22
- .u-step-label Step 2
23
- .u-step-line
24
- .u-step
25
- .u-step-indicator
26
- .u-step-circle 3
27
- .u-step-label Step 3
28
- .u-step-line
29
- .u-step
30
- .u-step-indicator
31
- .u-step-circle 4
32
- .u-step-label Step 4
33
-
34
- h5.u-headline5.article-title Vertical stepper
35
- .u-card-elevated
36
- .u-stepper.u-vertical-stepper
37
- .u-step.completed
38
- .u-step-indicator
39
- .u-step-circle 1
40
- .u-step-line
41
- .u-step-content
42
- .u-step-label Step 1
43
- .u-step.active
44
- .u-step-indicator
45
- .u-step-circle 2
46
- .u-step-line
47
- .u-step-content
48
- .u-step-label Step 2
49
- .example-step-content
50
- .u-step-actions
51
- button.u-step-action.u-filled-btn Continue
52
- button.u-step-action.u-text-btn Cancel
53
- .u-step
54
- .u-step-indicator
55
- .u-step-circle 3
56
- .u-step-content
57
- .u-step-label Step 3
@@ -1,45 +0,0 @@
1
- <div class="u-toolbar">
2
- <div class="u-toolbar-row">
3
- <div class="u-toolbar-start">
4
- <div class="u-toolbar-actions">
5
- <div class="u-icon-btn u-btn-default">
6
- <i class="u-btn-icon mdi mdi-menu"></i>
7
- </div>
8
- </div>
9
- </div>
10
- <div class="u-toolbar-center">
11
- <div class="u-toolbar-title">Page title</div>
12
- </div>
13
- <div class="u-toolbar-end">
14
- <div class="u-toolbar-actions">
15
- <div class="u-icon-btn u-btn-default"><i class="u-btn-icon mdi mdi-magnify"></i></div>
16
- <div class="u-icon-btn u-btn-default"><i class="u-btn-icon mdi mdi-phone"></i></div>
17
- <div class="u-icon-btn u-btn-default"><i class="u-btn-icon mdi mdi-dots-vertical"></i></div>
18
- </div>
19
- </div>
20
- </div>
21
- <div class="u-tab-bar u-tab-bar-primary u-toolbar-icon-padding" role="tablist" aria-label="Example tab">
22
- <button type="button" role="tab" class="u-tab active">
23
- <div class="u-tab-content">
24
- <div class="u-tab-text">Item one</div>
25
- </div>
26
- </button>
27
- <button type="button" role="tab" class="u-tab">
28
- <div class="u-tab-content">
29
- <div class="u-tab-text">Item two</div>
30
- </div>
31
- </button>
32
- <button type="button" role="tab" class="u-tab">
33
- <div class="u-tab-content">
34
- <div class="u-tab-text">Item three</div>
35
- </div>
36
- </button>
37
- <button type="button" role="tab" class="u-tab">
38
- <div class="u-tab-content">
39
- <div class="u-tab-text">Item four Item four Item four</div>
40
- </div>
41
- </button>
42
- <div class="u-tab-indicator"></div>
43
- </div>
44
- </div>
45
-
@@ -1,8 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
- +renderTitle('Tabs')
5
-
6
- h5.u-headline5.article-title
7
- u-card.example-card(variant="outlined")
8
- include:exampleCode tabs/example.html
@@ -1,88 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
- +renderTitle('Text fields')
5
- u-card.example-card(variant="outlined")
6
- u-card-content
7
- .u-form-field
8
- .u-text-field.u-text-field-box
9
- .u-text-field-leading-icon
10
- i.mdi.mdi-magnify
11
- .u-text-field-trailing-icon
12
- i.mdi.mdi-close-circle-outline
13
- label.u-text-field-label(for="text-field-box") Text field box
14
- .u-text-input
15
- input(type="text" placeholder="Placeholder" id="text-field-box" aria-describedby="textFieldBox")
16
-
17
- .u-text-field-supporting-text
18
- .u-text-field-supporting-text-item Supporting text
19
- .u-text-field-supporting-text-item.ml-auto 0 / 10
20
- u-card-content.example-card-code
21
- pre
22
- code.language-html
23
-
24
- .u-form-field
25
- .u-text-field.u-text-field-box.disabled
26
- .u-text-field-leading-icon
27
- i.mdi.mdi-magnify
28
- .u-text-field-trailing-icon
29
- i.mdi.mdi-close-circle-outline
30
-
31
- label.u-text-field-label Text field box
32
- input.u-text-input(type="text" placeholder="Placeholder" disabled aria-describedby="textFieldBox")
33
-
34
- .u-form-field
35
- .u-text-field.u-text-field-outlined
36
- .u-text-field-leading-icon
37
- i.mdi.mdi-magnify
38
- .u-text-field-trailing-icon
39
- i.mdi.mdi-close-circle-outline
40
- label.u-text-field-label(for="text-field-outline") Text field outline
41
- input.u-text-input(type="text" placeholder="Placeholder" id="text-field-outline" aria-describedby="textFieldOutline")
42
- small#textFieldOutline.u-text-field-supporting-text Text field outline
43
-
44
- .u-form-field
45
- .u-text-field.u-text-field-outlined.disabled
46
- .u-text-field-leading-icon
47
- i.mdi.mdi-magnify
48
- .u-text-field-trailing-icon
49
- i.mdi.mdi-close-circle-outline
50
- label.u-text-field-label(for="text-field-outline") Text field outline
51
- input.u-text-input(type="text" placeholder="Placeholder" disabled)
52
-
53
- .u-form-field
54
- .u-text-field.u-search-field
55
- .u-text-field-leading-icon
56
- i.mdi.mdi-magnify
57
- .u-text-field-trailing-icon
58
- button.u-icon-btn
59
- i.u-btn-icon.mdi.mdi-calendar
60
-
61
- label.u-text-field-label(for="search-field") Label text
62
- input.u-text-input(type="text" placeholder="Search" id="search-field" aria-describedby="searchField")
63
- small#searchField.u-text-field-supporting-text Supporting text
64
-
65
- .u-form-field
66
- .u-text-field.u-text-field-box
67
- label.u-text-field-label(for="text-area-box") Text area box
68
- textarea.u-text-input(type="text" placeholder="Placeholder" id="text-area-box" aria-describedby="textAreaBox")
69
- small#textAreaBox.u-text-field-supporting-text Text area box
70
-
71
- .u-form-field
72
- .u-text-field.u-text-field-outlined
73
- label.u-text-field-label(for="text-area-outline") Text area outline
74
- textarea.u-text-input(type="text" placeholder="Placeholder" id="text-area-outline" aria-describedby="textAreaOutline")
75
- small#textAreaOutline.u-text-field-supporting-text Text area outline
76
-
77
- .u-form-field
78
- .u-text-field.u-text-field-box.u-dropdown
79
- .u-text-field-trailing-icon
80
- .u-dropdown-toggle-icon
81
- label.u-text-field-label Dropdown
82
- button.u-text-input.u-dropdown-toggle(type="button" disabled)
83
- .u-text-input-placeholder No value
84
- .u-dropdown-menu.up.w-100
85
- .u-dropdown-content
86
- button.u-dropdown-item(type="button") Option A
87
- button.u-dropdown-item(type="button") Option B
88
- button.u-dropdown-item(type="button") Option C
@@ -1,33 +0,0 @@
1
- <div class="u-toolbar">
2
- <div class="u-toolbar-row">
3
- <div class="u-toolbar-start">
4
- <div class="u-toolbar-actions">
5
- <button class="u-icon-btn u-btn-default" type="button">
6
- <i class="u-btn-icon mdi mdi-menu"></i>
7
- </button>
8
- </div>
9
- </div>
10
- <div class="u-toolbar-center">
11
- <div class="u-toolbar-title">Title here</div>
12
- </div>
13
- <div class="u-toolbar-end">
14
- <div class="u-toolbar-actions">
15
- <button class="u-toolbar-action u-icon-btn u-btn-default" type="button">
16
- <i class="u-btn-icon mdi mdi-phone"></i>
17
- </button>
18
- <div class="u-toolbar-action u-dropdown">
19
- <button class="u-icon-btn u-btn-default u-dropdown-toggle" type="button">
20
- <i class="u-btn-icon mdi mdi-dots-vertical"></i>
21
- </button>
22
- <div class="u-dropdown-menu down-left">
23
- <div class="u-dropdown-content">
24
- <a class="u-dropdown-item text-nowrap" href="#">Item A</a>
25
- <a class="u-dropdown-item text-nowrap" href="#">Item B</a>
26
- <a class="u-dropdown-item text-nowrap" href="#">Item C</a>
27
- </div>
28
- </div>
29
- </div>
30
- </div>
31
- </div>
32
- </div>
33
- </div>
@@ -1,7 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
- +renderTitle('Toolbars')
5
-
6
- +renderSection('Simple toolbar')
7
- include:exampleCode toolbars/simple-toolbar.html