@universal-material/web 3.0.7 → 3.0.9

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/.editorconfig +8 -0
  2. package/.eleventy.cjs +21 -0
  3. package/.eslintignore +6 -0
  4. package/.eslintrc.json +98 -0
  5. package/.prettierrc.json +7 -0
  6. package/.vscode/extensions.json +9 -0
  7. package/CHANGELOG.md +98 -0
  8. package/LICENSE +28 -0
  9. package/docs/.nojekyll +0 -0
  10. package/docs/api/index.html +149 -0
  11. package/docs/docs.css +185 -0
  12. package/docs/examples/index.html +75 -0
  13. package/docs/examples/name-property/index.html +65 -0
  14. package/docs/index.html +75 -0
  15. package/docs/install/index.html +53 -0
  16. package/docs/prism-okaidia.css +123 -0
  17. package/docs/src/_api-section.pug +27 -0
  18. package/docs/src/_layout.pug +182 -0
  19. package/docs/src/components/button-set/alignment.html +29 -0
  20. package/docs/src/components/button-set/stack.html +5 -0
  21. package/docs/src/components/button-set/usage.html +35 -0
  22. package/docs/src/components/button-set.pug +16 -0
  23. package/docs/src/components/cards/card-media.html +39 -0
  24. package/docs/src/components/cards/card-with-actions.html +38 -0
  25. package/docs/src/components/cards/simple-card.html +3 -0
  26. package/docs/src/components/cards.pug +15 -0
  27. package/docs/src/components/checkbox/usage.html +33 -0
  28. package/docs/src/components/checkbox.pug +7 -0
  29. package/docs/src/components/chips/chip-input.html +73 -0
  30. package/docs/src/components/chips/default-chips.html +25 -0
  31. package/docs/src/components/chips/elevated-chips.html +25 -0
  32. package/docs/src/components/chips/selected-chips.html +50 -0
  33. package/docs/src/components/chips.pug +16 -0
  34. package/docs/src/components/common-buttons/anchor-buttons.html +6 -0
  35. package/docs/src/components/common-buttons/buttons-icons.html +24 -0
  36. package/docs/src/components/common-buttons/buttons-trailing-icons.html +25 -0
  37. package/docs/src/components/common-buttons/buttons-variants.html +6 -0
  38. package/docs/src/components/common-buttons/filled-colors.html +4 -0
  39. package/docs/src/components/common-buttons.pug +22 -0
  40. package/docs/src/components/data-tables/simple-table.html +47 -0
  41. package/docs/src/components/data-tables/table-footer.html +59 -0
  42. package/docs/src/components/data-tables/table-header.html +43 -0
  43. package/docs/src/components/data-tables.pug +15 -0
  44. package/docs/src/components/datepicker.pug +133 -0
  45. package/docs/src/components/dialogs/example.html +44 -0
  46. package/docs/src/components/dialogs.pug +19 -0
  47. package/docs/src/components/dividers/no-margin.html +7 -0
  48. package/docs/src/components/dividers/usage.html +7 -0
  49. package/docs/src/components/dividers.pug +13 -0
  50. package/docs/src/components/dropdown-menus/down-end.html +10 -0
  51. package/docs/src/components/dropdown-menus/down-left.html +10 -0
  52. package/docs/src/components/dropdown-menus/down-right.html +10 -0
  53. package/docs/src/components/dropdown-menus/down-start.html +10 -0
  54. package/docs/src/components/dropdown-menus/down.html +10 -0
  55. package/docs/src/components/dropdown-menus/up-end.html +10 -0
  56. package/docs/src/components/dropdown-menus/up-left.html +10 -0
  57. package/docs/src/components/dropdown-menus/up-right.html +10 -0
  58. package/docs/src/components/dropdown-menus/up-start.html +10 -0
  59. package/docs/src/components/dropdown-menus/up.html +10 -0
  60. package/docs/src/components/expansion-panel.pug +33 -0
  61. package/docs/src/components/fab/button-colors.html +18 -0
  62. package/docs/src/components/fab/button-sizes.html +11 -0
  63. package/docs/src/components/fab/extended-buttons.html +18 -0
  64. package/docs/src/components/fab/floating-action-area.html +5 -0
  65. package/docs/src/components/fab/floating-menu.html +10 -0
  66. package/docs/src/components/fab/lowered-buttons.html +6 -0
  67. package/docs/src/components/fab.pug +25 -0
  68. package/docs/src/components/icon-buttons/anchor-buttons.html +15 -0
  69. package/docs/src/components/icon-buttons/buttons-variants.html +15 -0
  70. package/docs/src/components/icon-buttons/toggle-buttons-manual.html +44 -0
  71. package/docs/src/components/icon-buttons/toggle-buttons.html +48 -0
  72. package/docs/src/components/icon-buttons.pug +18 -0
  73. package/docs/src/components/lists/list-avatars.html +14 -0
  74. package/docs/src/components/lists/list-custom-dividers.html +23 -0
  75. package/docs/src/components/lists/list-dividers.html +17 -0
  76. package/docs/src/components/lists/list-dynamic.html +26 -0
  77. package/docs/src/components/lists/list-hover.html +17 -0
  78. package/docs/src/components/lists/list-icons.html +17 -0
  79. package/docs/src/components/lists/list-indexed.html +123 -0
  80. package/docs/src/components/lists/list-sections.html +16 -0
  81. package/docs/src/components/lists/list-three-lines.html +20 -0
  82. package/docs/src/components/lists/list-two-lines.html +20 -0
  83. package/docs/src/components/lists/list-with-action.html +26 -0
  84. package/docs/src/components/lists/list-with-activated-item.html +17 -0
  85. package/docs/src/components/lists/simple-list.html +17 -0
  86. package/docs/src/components/lists.pug +94 -0
  87. package/docs/src/components/menus.pug +55 -0
  88. package/docs/src/components/progress/circular-progress.html +13 -0
  89. package/docs/src/components/progress/determinate-progress.html +3 -0
  90. package/docs/src/components/progress/indeterminate-progress.html +3 -0
  91. package/docs/src/components/progress/progress-color.html +3 -0
  92. package/docs/src/components/progress.pug +18 -0
  93. package/docs/src/components/ripple/usage.html +9 -0
  94. package/docs/src/components/ripple.pug +10 -0
  95. package/docs/src/components/selection-controls/checkbox.html +22 -0
  96. package/docs/src/components/selection-controls/radio-button.html +36 -0
  97. package/docs/src/components/selection-controls/switch.html +12 -0
  98. package/docs/src/components/selection-controls.pug +13 -0
  99. package/docs/src/components/sliders/example.html +42 -0
  100. package/docs/src/components/sliders.pug +7 -0
  101. package/docs/src/components/snackbar/example.html +35 -0
  102. package/docs/src/components/snackbars.pug +21 -0
  103. package/docs/src/components/steppers.pug +57 -0
  104. package/docs/src/components/tabs/example.html +45 -0
  105. package/docs/src/components/tabs.pug +8 -0
  106. package/docs/src/components/text-fields.pug +88 -0
  107. package/docs/src/components/toolbars/simple-toolbar.html +33 -0
  108. package/docs/src/components/toolbars.pug +7 -0
  109. package/docs/src/content/typography/example.html +15 -0
  110. package/docs/src/content/typography.pug +8 -0
  111. package/docs/src/css/docs.scss +189 -0
  112. package/docs/src/index.pug +10 -0
  113. package/docs/src/js/docs.js +161 -0
  114. package/docs/src/js/universal-material.js +757 -0
  115. package/docs/src/js/universal-material.js.map +1 -0
  116. package/docs/src/js/universal-material.min.js +17 -0
  117. package/docs/src/js/universal-material.min.js.map +1 -0
  118. package/docs/src/layout/grid.pug +15 -0
  119. package/docs/src/utilities/background-colors/common-colors.html +7 -0
  120. package/docs/src/utilities/background-colors/theme-colors.html +16 -0
  121. package/docs/src/utilities/background-colors.pug +10 -0
  122. package/docs/src/utilities/text-and-background-colors/common-colors.html +80 -0
  123. package/docs/src/utilities/text-and-background-colors/theme-colors.html +208 -0
  124. package/docs/src/utilities/text-and-background-colors.pug +10 -0
  125. package/docs/src/utilities/text-colors/common-colors.html +12 -0
  126. package/docs/src/utilities/text-colors/emphasis-colors.html +26 -0
  127. package/docs/src/utilities/text-colors/theme-colors.html +37 -0
  128. package/docs/src/utilities/text-colors.pug +13 -0
  129. package/gulpfile.js +225 -0
  130. package/index.html +11 -0
  131. package/package.json +1 -1
  132. package/rollup.config.js +42 -0
  133. package/src/_utils.scss +20 -0
  134. package/src/_variables.scss +68 -0
  135. package/src/button/button-base.styles.scss +75 -0
  136. package/src/button/button-base.ts +147 -0
  137. package/src/button/button-set.styles.scss +35 -0
  138. package/src/button/button-set.ts +33 -0
  139. package/src/button/button.styles.scss +97 -0
  140. package/src/button/button.ts +64 -0
  141. package/src/button/fab.styles.scss +90 -0
  142. package/src/button/fab.ts +55 -0
  143. package/src/button/icon-button.styles.scss +74 -0
  144. package/src/button/icon-button.ts +72 -0
  145. package/src/card/card-content.styles.scss +11 -0
  146. package/src/card/card-content.ts +45 -0
  147. package/src/card/card-media.styles.scss +9 -0
  148. package/src/card/card-media.ts +24 -0
  149. package/src/card/card.styles.scss +27 -0
  150. package/src/card/card.ts +37 -0
  151. package/src/checkbox/checkbox.ts +77 -0
  152. package/src/container/container.styles.scss +39 -0
  153. package/src/container/container.ts +24 -0
  154. package/src/divider/divider.styles.scss +13 -0
  155. package/src/divider/divider.ts +21 -0
  156. package/src/elevation/elevation.styles.scss +31 -0
  157. package/src/elevation/elevation.ts +17 -0
  158. package/{index.js → src/index.ts} +1 -1
  159. package/src/ripple/ripple.styles.scss +80 -0
  160. package/src/ripple/ripple.ts +150 -0
  161. package/src/shared/base.styles.scss +5 -0
  162. package/src/table/table-body.styles.scss +9 -0
  163. package/src/table/table-body.ts +21 -0
  164. package/src/table/table-cell.styles.scss +9 -0
  165. package/src/table/table-cell.ts +21 -0
  166. package/src/table/table-head.styles.scss +9 -0
  167. package/src/table/table-head.ts +21 -0
  168. package/src/table/table-header-cell.styles.scss +10 -0
  169. package/src/table/table-header-cell.ts +21 -0
  170. package/src/table/table-row.styles.scss +3 -0
  171. package/src/table/table-row.ts +21 -0
  172. package/src/table/table.styles.scss +12 -0
  173. package/{table/table.js → src/table/table.ts} +15 -6
  174. package/src/theme/color.ts +6 -0
  175. package/src/theme/css-var-builder.ts +36 -0
  176. package/{theme/index.js → src/theme/index.ts} +0 -1
  177. package/src/theme/neutral-colors.ts +21 -0
  178. package/src/theme/rgb-color.ts +19 -0
  179. package/src/theme/theme-builder.ts +201 -0
  180. package/{theme/theme-color.d.ts → src/theme/theme-color.ts} +3 -2
  181. package/tsconfig.json +36 -0
  182. package/web-dev-server.config.js +25 -0
  183. package/web-test-runner.config.js +120 -0
  184. package/button/button-base.d.ts +0 -43
  185. package/button/button-base.d.ts.map +0 -1
  186. package/button/button-base.js +0 -152
  187. package/button/button-base.js.map +0 -1
  188. package/button/button-base.styles.d.ts +0 -2
  189. package/button/button-base.styles.d.ts.map +0 -1
  190. package/button/button-base.styles.js +0 -75
  191. package/button/button-base.styles.js.map +0 -1
  192. package/button/button-set.d.ts +0 -20
  193. package/button/button-set.d.ts.map +0 -1
  194. package/button/button-set.js +0 -38
  195. package/button/button-set.js.map +0 -1
  196. package/button/button-set.styles.d.ts +0 -2
  197. package/button/button-set.styles.d.ts.map +0 -1
  198. package/button/button-set.styles.js +0 -39
  199. package/button/button-set.styles.js.map +0 -1
  200. package/button/button.d.ts +0 -34
  201. package/button/button.d.ts.map +0 -1
  202. package/button/button.js +0 -64
  203. package/button/button.js.map +0 -1
  204. package/button/button.styles.d.ts +0 -2
  205. package/button/button.styles.d.ts.map +0 -1
  206. package/button/button.styles.js +0 -94
  207. package/button/button.styles.js.map +0 -1
  208. package/button/fab.d.ts +0 -31
  209. package/button/fab.d.ts.map +0 -1
  210. package/button/fab.js +0 -63
  211. package/button/fab.js.map +0 -1
  212. package/button/fab.styles.d.ts +0 -2
  213. package/button/fab.styles.d.ts.map +0 -1
  214. package/button/fab.styles.js +0 -89
  215. package/button/fab.styles.js.map +0 -1
  216. package/button/icon-button.d.ts +0 -35
  217. package/button/icon-button.d.ts.map +0 -1
  218. package/button/icon-button.js +0 -79
  219. package/button/icon-button.js.map +0 -1
  220. package/button/icon-button.styles.d.ts +0 -2
  221. package/button/icon-button.styles.d.ts.map +0 -1
  222. package/button/icon-button.styles.js +0 -70
  223. package/button/icon-button.styles.js.map +0 -1
  224. package/card/card-content.d.ts +0 -13
  225. package/card/card-content.d.ts.map +0 -1
  226. package/card/card-content.js +0 -44
  227. package/card/card-content.js.map +0 -1
  228. package/card/card-content.styles.d.ts +0 -2
  229. package/card/card-content.styles.d.ts.map +0 -1
  230. package/card/card-content.styles.js +0 -15
  231. package/card/card-content.styles.js.map +0 -1
  232. package/card/card-media.d.ts +0 -12
  233. package/card/card-media.d.ts.map +0 -1
  234. package/card/card-media.js +0 -29
  235. package/card/card-media.js.map +0 -1
  236. package/card/card-media.styles.d.ts +0 -2
  237. package/card/card-media.styles.d.ts.map +0 -1
  238. package/card/card-media.styles.js +0 -13
  239. package/card/card-media.styles.js.map +0 -1
  240. package/card/card.d.ts +0 -19
  241. package/card/card.d.ts.map +0 -1
  242. package/card/card.js +0 -40
  243. package/card/card.js.map +0 -1
  244. package/card/card.styles.d.ts +0 -2
  245. package/card/card.styles.d.ts.map +0 -1
  246. package/card/card.styles.js +0 -28
  247. package/card/card.styles.js.map +0 -1
  248. package/checkbox/checkbox.d.ts +0 -16
  249. package/checkbox/checkbox.d.ts.map +0 -1
  250. package/checkbox/checkbox.js +0 -75
  251. package/checkbox/checkbox.js.map +0 -1
  252. package/container/container.d.ts +0 -13
  253. package/container/container.d.ts.map +0 -1
  254. package/container/container.js +0 -23
  255. package/container/container.js.map +0 -1
  256. package/container/container.styles.d.ts +0 -2
  257. package/container/container.styles.d.ts.map +0 -1
  258. package/container/container.styles.js +0 -43
  259. package/container/container.styles.js.map +0 -1
  260. package/custom-elements.json +0 -3706
  261. package/divider/divider.d.ts +0 -14
  262. package/divider/divider.d.ts.map +0 -1
  263. package/divider/divider.js +0 -27
  264. package/divider/divider.js.map +0 -1
  265. package/divider/divider.styles.d.ts +0 -2
  266. package/divider/divider.styles.d.ts.map +0 -1
  267. package/divider/divider.styles.js +0 -15
  268. package/divider/divider.styles.js.map +0 -1
  269. package/elevation/elevation.d.ts +0 -11
  270. package/elevation/elevation.d.ts.map +0 -1
  271. package/elevation/elevation.js +0 -21
  272. package/elevation/elevation.js.map +0 -1
  273. package/elevation/elevation.styles.d.ts +0 -2
  274. package/elevation/elevation.styles.d.ts.map +0 -1
  275. package/elevation/elevation.styles.js +0 -28
  276. package/elevation/elevation.styles.js.map +0 -1
  277. package/index.d.ts +0 -27
  278. package/index.d.ts.map +0 -1
  279. package/index.js.map +0 -1
  280. package/ripple/ripple.d.ts +0 -25
  281. package/ripple/ripple.d.ts.map +0 -1
  282. package/ripple/ripple.js +0 -119
  283. package/ripple/ripple.js.map +0 -1
  284. package/ripple/ripple.styles.d.ts +0 -2
  285. package/ripple/ripple.styles.d.ts.map +0 -1
  286. package/ripple/ripple.styles.js +0 -74
  287. package/ripple/ripple.styles.js.map +0 -1
  288. package/shared/base.styles.d.ts +0 -2
  289. package/shared/base.styles.d.ts.map +0 -1
  290. package/shared/base.styles.js +0 -9
  291. package/shared/base.styles.js.map +0 -1
  292. package/table/table-body.d.ts +0 -11
  293. package/table/table-body.d.ts.map +0 -1
  294. package/table/table-body.js +0 -21
  295. package/table/table-body.js.map +0 -1
  296. package/table/table-body.styles.d.ts +0 -2
  297. package/table/table-body.styles.d.ts.map +0 -1
  298. package/table/table-body.styles.js +0 -11
  299. package/table/table-body.styles.js.map +0 -1
  300. package/table/table-cell.d.ts +0 -11
  301. package/table/table-cell.d.ts.map +0 -1
  302. package/table/table-cell.js +0 -21
  303. package/table/table-cell.js.map +0 -1
  304. package/table/table-cell.styles.d.ts +0 -2
  305. package/table/table-cell.styles.d.ts.map +0 -1
  306. package/table/table-cell.styles.js +0 -11
  307. package/table/table-cell.styles.js.map +0 -1
  308. package/table/table-head.d.ts +0 -11
  309. package/table/table-head.d.ts.map +0 -1
  310. package/table/table-head.js +0 -21
  311. package/table/table-head.js.map +0 -1
  312. package/table/table-head.styles.d.ts +0 -2
  313. package/table/table-head.styles.d.ts.map +0 -1
  314. package/table/table-head.styles.js +0 -11
  315. package/table/table-head.styles.js.map +0 -1
  316. package/table/table-header-cell.d.ts +0 -11
  317. package/table/table-header-cell.d.ts.map +0 -1
  318. package/table/table-header-cell.js +0 -21
  319. package/table/table-header-cell.js.map +0 -1
  320. package/table/table-header-cell.styles.d.ts +0 -2
  321. package/table/table-header-cell.styles.d.ts.map +0 -1
  322. package/table/table-header-cell.styles.js +0 -12
  323. package/table/table-header-cell.styles.js.map +0 -1
  324. package/table/table-row.d.ts +0 -11
  325. package/table/table-row.d.ts.map +0 -1
  326. package/table/table-row.js +0 -21
  327. package/table/table-row.js.map +0 -1
  328. package/table/table-row.styles.d.ts +0 -2
  329. package/table/table-row.styles.d.ts.map +0 -1
  330. package/table/table-row.styles.js +0 -7
  331. package/table/table-row.styles.js.map +0 -1
  332. package/table/table.d.ts +0 -16
  333. package/table/table.d.ts.map +0 -1
  334. package/table/table.js.map +0 -1
  335. package/table/table.styles.d.ts +0 -2
  336. package/table/table.styles.d.ts.map +0 -1
  337. package/table/table.styles.js +0 -16
  338. package/table/table.styles.js.map +0 -1
  339. package/theme/color.d.ts +0 -7
  340. package/theme/color.d.ts.map +0 -1
  341. package/theme/color.js +0 -2
  342. package/theme/color.js.map +0 -1
  343. package/theme/css-var-builder.d.ts +0 -9
  344. package/theme/css-var-builder.d.ts.map +0 -1
  345. package/theme/css-var-builder.js +0 -25
  346. package/theme/css-var-builder.js.map +0 -1
  347. package/theme/index.d.ts +0 -2
  348. package/theme/index.d.ts.map +0 -1
  349. package/theme/index.js.map +0 -1
  350. package/theme/neutral-colors.d.ts +0 -4
  351. package/theme/neutral-colors.d.ts.map +0 -1
  352. package/theme/neutral-colors.js +0 -19
  353. package/theme/neutral-colors.js.map +0 -1
  354. package/theme/rgb-color.d.ts +0 -9
  355. package/theme/rgb-color.d.ts.map +0 -1
  356. package/theme/rgb-color.js +0 -13
  357. package/theme/rgb-color.js.map +0 -1
  358. package/theme/theme-builder.d.ts +0 -27
  359. package/theme/theme-builder.d.ts.map +0 -1
  360. package/theme/theme-builder.js +0 -146
  361. package/theme/theme-builder.js.map +0 -1
  362. package/theme/theme-color.d.ts.map +0 -1
  363. package/theme/theme-color.js +0 -2
  364. package/theme/theme-color.js.map +0 -1
package/docs/src/components/icon-buttons.pug ADDED
@@ -0,0 +1,18 @@
1
+ extends ../_layout
2
+
3
+ block content
4
+ +renderTitle('Icon buttons')
5
+
6
+ +renderSection('Variants')
7
+ include:exampleCode icon-buttons/buttons-variants.html
8
+
9
+ +renderSection('Anchor buttons')
10
+ include:exampleCode icon-buttons/anchor-buttons.html
11
+
12
+ +renderSection('Toggles')
13
+ include:exampleCode icon-buttons/toggle-buttons.html
14
+
15
+ +renderSection('Toggles (manual)')
16
+ include:exampleCode icon-buttons/toggle-buttons-manual.html
17
+
18
+ +renderApiSection(apis.iconButton)
package/docs/src/components/lists/list-avatars.html ADDED
@@ -0,0 +1,14 @@
1
+ <div class="u-list u-list-selectable">
2
+ <div class="u-list-item">
3
+ <div class="u-list-item-avatar"></div>
4
+ <div class="u-list-item-content">Item A</div>
5
+ </div>
6
+ <div class="u-list-item">
7
+ <div class="u-list-item-avatar"></div>
8
+ <div class="u-list-item-content">Item B</div>
9
+ </div>
10
+ <div class="u-list-item">
11
+ <div class="u-list-item-avatar"></div>
12
+ <div class="u-list-item-content">Item C</div>
13
+ </div>
14
+ </div>
package/docs/src/components/lists/list-custom-dividers.html ADDED
@@ -0,0 +1,23 @@
1
+ <div class="u-list">
2
+ <div class="u-list-item">
3
+ <div class="u-list-item-content">
4
+ <div class="u-list-headline">Headline</div>
5
+ </div>
6
+ </div>
7
+ <div class="u-list-item">
8
+ <div class="u-list-item-content">
9
+ <div class="u-list-headline">Headline</div>
10
+ </div>
11
+ </div>
12
+ <div class="u-divider"></div>
13
+ <div class="u-list-item">
14
+ <div class="u-list-item-content">
15
+ <div class="u-list-headline">Headline</div>
16
+ </div>
17
+ </div>
18
+ <div class="u-list-item">
19
+ <div class="u-list-item-content">
20
+ <div class="u-list-headline">Headline</div>
21
+ </div>
22
+ </div>
23
+ </div>
package/docs/src/components/lists/list-dividers.html ADDED
@@ -0,0 +1,17 @@
1
+ <div class="u-list u-list-item-dividers">
2
+ <div class="u-list-item">
3
+ <div class="u-list-item-content">
4
+ <div class="u-list-headline">Headline</div>
5
+ </div>
6
+ </div>
7
+ <div class="u-list-item">
8
+ <div class="u-list-item-content">
9
+ <div class="u-list-headline">Headline</div>
10
+ </div>
11
+ </div>
12
+ <div class="u-list-item">
13
+ <div class="u-list-item-content">
14
+ <div class="u-list-headline">Headline</div>
15
+ </div>
16
+ </div>
17
+ </div>
package/docs/src/components/lists/list-dynamic.html ADDED
@@ -0,0 +1,26 @@
1
+ <div class="u-list">
2
+ <div class="u-list-item u-list-item-dynamic">
3
+ <div class="u-list-item-content">Item A
4
+ <div class="u-progress show">
5
+ <div class="u-progress-indicator" style="width: 30%;"></div>
6
+ </div>
7
+ <div class="u-text-end">30%</div>
8
+ </div>
9
+ </div>
10
+ <div class="u-list-item u-list-item-dynamic">
11
+ <div class="u-list-item-content">Item B
12
+ <div class="u-progress show">
13
+ <div class="u-progress-indicator" style="width: 67%;"></div>
14
+ </div>
15
+ <div class="u-text-end">67%</div>
16
+ </div>
17
+ </div>
18
+ <div class="u-list-item u-list-item-dynamic">
19
+ <div class="u-list-item-content">Item C
20
+ <div class="u-progress show">
21
+ <div class="u-progress-indicator" style="width: 10%;"></div>
22
+ </div>
23
+ <div class="u-text-end">10%</div>
24
+ </div>
25
+ </div>
26
+ </div>
package/docs/src/components/lists/list-hover.html ADDED
@@ -0,0 +1,17 @@
1
+ <div class="u-list u-list-selectable">
2
+ <div class="u-list-item">
3
+ <div class="u-list-item-content">
4
+ <div class="u-list-headline">Headline</div>
5
+ </div>
6
+ </div>
7
+ <div class="u-list-item">
8
+ <div class="u-list-item-content">
9
+ <div class="u-list-headline">Headline</div>
10
+ </div>
11
+ </div>
12
+ <div class="u-list-item">
13
+ <div class="u-list-item-content">
14
+ <div class="u-list-headline">Headline</div>
15
+ </div>
16
+ </div>
17
+ </div>
package/docs/src/components/lists/list-icons.html ADDED
@@ -0,0 +1,17 @@
1
+ <div class="u-list u-list-selectable">
2
+ <div class="u-list-item">
3
+ <div class="u-list-item-icon mdi mdi-star"></div>
4
+ <div class="u-list-item-content">Item A</div>
5
+ <div class="u-list-item-icon mdi mdi-information"></div>
6
+ </div>
7
+ <div class="u-list-item">
8
+ <div class="u-list-item-icon mdi mdi-star"></div>
9
+ <div class="u-list-item-content">Item B</div>
10
+ <div class="u-list-item-icon mdi mdi-information"></div>
11
+ </div>
12
+ <div class="u-list-item">
13
+ <div class="u-list-item-icon mdi mdi-star"></div>
14
+ <div class="u-list-item-content">Item C</div>
15
+ <div class="u-list-item-icon mdi mdi-information"></div>
16
+ </div>
17
+ </div>
package/docs/src/components/lists/list-indexed.html ADDED
@@ -0,0 +1,123 @@
1
+ <div class="u-list u-list-indexed">
2
+ <div class="u-list-group">
3
+ <div class="u-list-index">A</div>
4
+ <div class="u-list-group-items">
5
+ <div class="u-list-item">
6
+ <div class="u-list-item-content">Angelita Kellar  </div>
7
+ </div>
8
+ <div class="u-list-item">
9
+ <div class="u-list-item-content">Ayesha Commons  </div>
10
+ </div>
11
+ </div>
12
+ </div>
13
+ <div class="u-list-group">
14
+ <div class="u-list-index">B</div>
15
+ <div class="u-list-group-items">
16
+ <div class="u-list-item">
17
+ <div class="u-list-item-content">Bella Drayton  </div>
18
+ </div>
19
+ </div>
20
+ </div>
21
+ <div class="u-list-group">
22
+ <div class="u-list-index">C</div>
23
+ <div class="u-list-group-items">
24
+ <div class="u-list-item">
25
+ <div class="u-list-item-content">Carlita Baum  </div>
26
+ </div>
27
+ <div class="u-list-item">
28
+ <div class="u-list-item-content">Collette Morena  </div>
29
+ </div>
30
+ <div class="u-list-item">
31
+ <div class="u-list-item-content">Corliss Vaughan  </div>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ <div class="u-list-group">
36
+ <div class="u-list-index">E</div>
37
+ <div class="u-list-group-items">
38
+ <div class="u-list-item">
39
+ <div class="u-list-item-content">Earline Marcoux  </div>
40
+ </div>
41
+ <div class="u-list-item">
42
+ <div class="u-list-item-content">Eilene Mcarthur  </div>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ <div class="u-list-group">
47
+ <div class="u-list-index">J</div>
48
+ <div class="u-list-group-items">
49
+ <div class="u-list-item">
50
+ <div class="u-list-item-content">Jerold Sancho  </div>
51
+ </div>
52
+ <div class="u-list-item">
53
+ <div class="u-list-item-content">Josef Ariza  </div>
54
+ </div>
55
+ <div class="u-list-item">
56
+ <div class="u-list-item-content">Jospeh Wooten</div>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ <div class="u-list-group">
61
+ <div class="u-list-index">L</div>
62
+ <div class="u-list-group-items">
63
+ <div class="u-list-item">
64
+ <div class="u-list-item-content">Lupe Kerry</div>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ <div class="u-list-group">
69
+ <div class="u-list-index">M</div>
70
+ <div class="u-list-group-items">
71
+ <div class="u-list-item">
72
+ <div class="u-list-item-content">Marin Whitwell  </div>
73
+ </div>
74
+ <div class="u-list-item">
75
+ <div class="u-list-item-content">Matt Tugwell</div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ <div class="u-list-group">
80
+ <div class="u-list-index">N</div>
81
+ <div class="u-list-group-items">
82
+ <div class="u-list-item">
83
+ <div class="u-list-item-content">Norine Woodell  </div>
84
+ </div>
85
+ <div class="u-list-item"></div>
86
+ </div>
87
+ </div>
88
+ <div class="u-list-group">
89
+ <div class="u-list-index">O</div>
90
+ <div class="u-list-group-items">
91
+ <div class="u-list-item">
92
+ <div class="u-list-item-content">Olen Beumer</div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ <div class="u-list-group">
97
+ <div class="u-list-index">S</div>
98
+ <div class="u-list-group-items">
99
+ <div class="u-list-item">
100
+ <div class="u-list-item-content">Shannan Mathews</div>
101
+ </div>
102
+ <div class="u-list-item">
103
+ <div class="u-list-item-content">Stephaine Fraise  </div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ <div class="u-list-group">
108
+ <div class="u-list-index">T</div>
109
+ <div class="u-list-group-items">
110
+ <div class="u-list-item">
111
+ <div class="u-list-item-content">Timika Soller</div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ <div class="u-list-group">
116
+ <div class="u-list-index">V</div>
117
+ <div class="u-list-group-items">
118
+ <div class="u-list-item">
119
+ <div class="u-list-item-content">Vannessa Armer</div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
package/docs/src/components/lists/list-sections.html ADDED
@@ -0,0 +1,16 @@
1
+ <div class="u-list">
2
+ <div class="u-list-section">Section 1</div>
3
+ <div class="u-list-item">
4
+ <div class="u-list-item-content">Item A</div>
5
+ </div>
6
+ <div class="u-list-item">
7
+ <div class="u-list-item-content">Item B</div>
8
+ </div>
9
+ <div class="u-list-section">Section 2</div>
10
+ <div class="u-list-item">
11
+ <div class="u-list-item-content">Item C</div>
12
+ </div>
13
+ <div class="u-list-item">
14
+ <div class="u-list-item-content">Item D</div>
15
+ </div>
16
+ </div>
package/docs/src/components/lists/list-three-lines.html ADDED
@@ -0,0 +1,20 @@
1
+ <div class="u-list u-list-selectable">
2
+ <div class="u-list-item u-list-item-three-lines">
3
+ <div class="u-list-item-content">
4
+ <div class="u-list-headline">Headline</div>
5
+ <div class="u-list-supporting-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue sagittis erat at ultrices. In vel dolor bibendum, pretium elit sed, viverra neque. Donec tincidunt lorem orci, et ultricies est elementum at. Suspendisse potenti. Cras non ullamcorper turpis. Etiam sagittis erat ut blandit posuere. Aliquam eget leo vel nisl varius feugiat vel a magna. Nulla ornare libero id lacus ultricies sodales. In scelerisque erat eget metus luctus, sed blandit felis condimentum. Suspendisse hendrerit lorem at enim mattis, ut pharetra dui mattis. Sed eget mi est. Proin pretium faucibus turpis ut blandit. Sed dapibus, velit sit amet pretium maximus, ex arcu vulputate felis, eget vestibulum ligula quam et elit. Donec aliquam id massa ac fringilla.</div>
6
+ </div>
7
+ </div>
8
+ <div class="u-list-item u-list-item-three-lines">
9
+ <div class="u-list-item-content">
10
+ <div class="u-list-headline">Headline</div>
11
+ <div class="u-list-supporting-text">In hac habitasse platea dictumst. Nullam pulvinar, lacus sed laoreet gravida, neque mi vulputate nunc, ut cursus quam nisl eu felis. Curabitur vel blandit diam. Praesent ultrices mi quis interdum ultricies. Duis faucibus quis ligula vitae sagittis. Phasellus eu faucibus neque. Morbi et nulla augue. Integer dictum justo a sem mattis eleifend. Ut lorem velit, vestibulum vitae fermentum a, laoreet eu tellus. Proin egestas tellus ut dolor sollicitudin rutrum</div>
12
+ </div>
13
+ </div>
14
+ <div class="u-list-item u-list-item-three-lines">
15
+ <div class="u-list-item-content">
16
+ <div class="u-list-headline">Headline</div>
17
+ <div class="u-list-supporting-text">Nulla vehicula lectus lorem, varius euismod libero aliquam tempor. Donec ornare, neque vitae rhoncus viverra, dolor quam lacinia ligula, at laoreet ex neque nec tellus. Curabitur iaculis elementum turpis et commodo. Donec feugiat diam ac quam aliquam, sit amet pellentesque nunc imperdiet. Phasellus laoreet arcu vitae ipsum molestie, ac consequat felis tempor. Maecenas non velit sit amet ipsum lacinia feugiat vel et ante. Donec faucibus ligula nec tortor hendrerit imperdiet. Aliquam ante eros, ultricies nec enim et, pulvinar rutrum arcu.</div>
18
+ </div>
19
+ </div>
20
+ </div>
package/docs/src/components/lists/list-two-lines.html ADDED
@@ -0,0 +1,20 @@
1
+ <div class="u-list u-list-selectable">
2
+ <div class="u-list-item u-list-item-two-lines">
3
+ <div class="u-list-item-content">
4
+ <div class="u-list-headline">Headline</div>
5
+ <div class="u-list-supporting-text">Supporting text</div>
6
+ </div>
7
+ </div>
8
+ <div class="u-list-item u-list-item-two-lines">
9
+ <div class="u-list-item-content">
10
+ <div class="u-list-headline">Headline</div>
11
+ <div class="u-list-supporting-text">Supporting text</div>
12
+ </div>
13
+ </div>
14
+ <div class="u-list-item u-list-item-two-lines">
15
+ <div class="u-list-item-content">
16
+ <div class="u-list-headline">Headline</div>
17
+ <div class="u-list-supporting-text">Supporting text</div>
18
+ </div>
19
+ </div>
20
+ </div>
package/docs/src/components/lists/list-with-action.html ADDED
@@ -0,0 +1,26 @@
1
+ <div class="u-list">
2
+ <div class="u-list-item">
3
+ <div class="u-list-item-hover"></div>
4
+ <div class="u-list-item-avatar"></div>
5
+ <div class="u-list-item-content">Item A</div>
6
+ <button class="u-list-item-icon u-icon-btn u-btn-default">
7
+ <i class="u-btn-icon mdi mdi-heart-outline"></i>
8
+ </button>
9
+ </div>
10
+ <div class="u-list-item">
11
+ <div class="u-list-item-hover"></div>
12
+ <div class="u-list-item-avatar"></div>
13
+ <div class="u-list-item-content">Item B</div>
14
+ <button class="u-list-item-icon u-icon-btn u-btn-default">
15
+ <i class="u-btn-icon mdi mdi-heart-outline"></i>
16
+ </button>
17
+ </div>
18
+ <div class="u-list-item">
19
+ <div class="u-list-item-hover"></div>
20
+ <div class="u-list-item-avatar"></div>
21
+ <div class="u-list-item-content">Item C</div>
22
+ <button class="u-list-item-icon u-icon-btn u-btn-default">
23
+ <i class="u-btn-icon mdi mdi-heart-outline"></i>
24
+ </button>
25
+ </div>
26
+ </div>
package/docs/src/components/lists/list-with-activated-item.html ADDED
@@ -0,0 +1,17 @@
1
+ <div class="u-list u-list-selectable">
2
+ <div class="u-list-item active">
3
+ <div class="u-list-item-icon u-list-item-activity-icon mdi mdi-star"></div>
4
+ <div class="u-list-item-content">Item A</div>
5
+ <div class="u-list-item-icon mdi mdi-information"></div>
6
+ </div>
7
+ <div class="u-list-item">
8
+ <div class="u-list-item-icon u-list-item-activity-icon mdi mdi-star"></div>
9
+ <div class="u-list-item-content">Item B</div>
10
+ <div class="u-list-item-icon mdi mdi-information"></div>
11
+ </div>
12
+ <div class="u-list-item">
13
+ <div class="u-list-item-icon u-list-item-activity-icon mdi mdi-star"></div>
14
+ <div class="u-list-item-content">Item C</div>
15
+ <div class="u-list-item-icon mdi mdi-information"></div>
16
+ </div>
17
+ </div>
package/docs/src/components/lists/simple-list.html ADDED
@@ -0,0 +1,17 @@
1
+ <div class="u-list">
2
+ <div class="u-list-item">
3
+ <div class="u-list-item-content">
4
+ <div class="u-list-headline">Headline</div>
5
+ </div>
6
+ </div>
7
+ <div class="u-list-item">
8
+ <div class="u-list-item-content">
9
+ <div class="u-list-headline">Headline</div>
10
+ </div>
11
+ </div>
12
+ <div class="u-list-item">
13
+ <div class="u-list-item-content">
14
+ <div class="u-list-headline">Headline</div>
15
+ </div>
16
+ </div>
17
+ </div>
package/docs/src/components/lists.pug ADDED
@@ -0,0 +1,94 @@
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
package/docs/src/components/menus.pug ADDED
@@ -0,0 +1,55 @@
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
package/docs/src/components/progress/circular-progress.html ADDED
@@ -0,0 +1,13 @@
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>
package/docs/src/components/progress/determinate-progress.html ADDED
@@ -0,0 +1,3 @@
1
+ <div class="u-progress show">
2
+ <div class="u-progress-indicator" style="width: 30%;"></div>
3
+ </div>
package/docs/src/components/progress/indeterminate-progress.html ADDED
@@ -0,0 +1,3 @@
1
+ <div class="u-progress indeterminate show">
2
+ <div class="u-progress-indicator"></div>
3
+ </div>
package/docs/src/components/progress/progress-color.html ADDED
@@ -0,0 +1,3 @@
1
+ <div class="u-progress indeterminate show u-text-secondary">
2
+ <div class="u-progress-indicator"></div>
3
+ </div>
package/docs/src/components/progress.pug ADDED
@@ -0,0 +1,18 @@
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
package/docs/src/components/ripple/usage.html ADDED
@@ -0,0 +1,9 @@
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>
package/docs/src/components/ripple.pug ADDED
@@ -0,0 +1,10 @@
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)
package/docs/src/components/selection-controls/checkbox.html ADDED
@@ -0,0 +1,22 @@
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>