Permalink
Browse files

feature: Merged latest master from MDL/JS

  • Loading branch information...
MikeMitterer committed Jul 27, 2015
1 parent 91b4c2b commit b26c7da9d97248cfce1f68751b7c753c8dcb4e8f
Showing with 4,498 additions and 1,720 deletions.
  1. +14 −0 example/mdl_card/.sitegen/html/_content/index.html
  2. +1 −1 example/mdl_card/web/README.md
  3. +14 −0 example/mdl_card/web/index.html
  4. +59 −77 example/mdl_footer/.sitegen/html/_content/index.html
  5. +59 −76 example/mdl_footer/web/index.html
  6. +1 −0 example/mdl_grid/web/README.md
  7. +3 −3 example/mdl_layout/.sitegen/html/_content/index.html
  8. +3 −3 example/mdl_layout/web/index.html
  9. +1 −1 example/mdl_tooltip/web/README.md
  10. +151 −133 example/template_blog/web/entry.html
  11. +139 −112 example/template_blog/web/index.html
  12. +175 −174 example/template_dashboard/web/index.html
  13. +219 −219 example/template_text-only/web/index.html
  14. +151 −133 lib/_templates/blog/web/entry.html
  15. +139 −112 lib/_templates/blog/web/index.html
  16. +175 −174 lib/_templates/dashboard/web/index.html
  17. +1 −1 lib/_templates/dashboard/web/styles.css
  18. +219 −219 lib/_templates/text-only/web/index.html
  19. +59 −0 lib/assets/styles/button/README.md
  20. +128 −0 lib/assets/styles/card/README.md
  21. +65 −0 lib/assets/styles/checkbox/README.md
  22. +160 −0 lib/assets/styles/data-table/README.md
  23. +406 −0 lib/assets/styles/footer/README.md
  24. +115 −0 lib/assets/styles/grid/README.md
  25. +65 −0 lib/assets/styles/icon-toggle/README.md
  26. +327 −0 lib/assets/styles/layout/README.md
  27. +6 −0 lib/assets/styles/layout/_layout.orig.scss
  28. +2 −1 lib/assets/styles/material.css
  29. +1 −1 lib/assets/styles/material.min.css
  30. +102 −0 lib/assets/styles/menu/README.md
  31. +0 −1 lib/assets/styles/menu/_menu.orig.scss
  32. +40 −0 lib/assets/styles/progress/README.md
  33. +76 −0 lib/assets/styles/radio/README.md
  34. +52 −0 lib/assets/styles/shadow/README.md
  35. +53 −0 lib/assets/styles/slider/README.md
  36. +49 −0 lib/assets/styles/spinner/README.md
  37. +65 −0 lib/assets/styles/switch/README.md
  38. +150 −0 lib/assets/styles/tabs/README.md
  39. +260 −0 lib/assets/styles/textfield/README.md
  40. +67 −0 lib/assets/styles/tooltip/README.md
  41. +102 −0 lib/assets/styles/typography/README.md
  42. +3 −3 lib/assets/styles/variables/_variables.orig.scss
  43. +19 −9 lib/src/components/MaterialCheckbox.dart
  44. +14 −6 lib/src/components/MaterialIconToggle.dart
  45. +12 −1 lib/src/components/MaterialLayout.dart
  46. +17 −0 lib/src/components/MaterialRadio.dart
  47. +12 −2 lib/src/components/MaterialSwitch.dart
  48. +14 −1 lib/src/components/MaterialTextfield.dart
  49. +11 −1 lib/src/components/MaterialTooltip.dart
  50. +14 −0 tool/demobase/card/snippets/event.html
  51. +2 −0 tool/demobase/card/snippets/image.html
  52. +19 −19 tool/demobase/footer/snippets/mega-footer.html
  53. +2 −2 tool/demobase/footer/snippets/mini-footer.html
  54. +26 −28 tool/demobase/layout/snippets/fixed-header-drawer.html
  55. +21 −20 tool/demobase/material.css
  56. +1 −1 tool/demobase/material.min.css
  57. +2 −1 tool/jsbase/button.js
  58. +28 −12 tool/jsbase/checkbox.js
  59. +30 −13 tool/jsbase/icon-toggle.js
  60. +14 −2 tool/jsbase/layout.js
  61. +2 −1 tool/jsbase/menu.js
  62. +12 −1 tool/jsbase/progress.js
  63. +37 −22 tool/jsbase/radio.js
  64. +2 −1 tool/jsbase/slider.js
  65. +2 −1 tool/jsbase/spinner.js
  66. +30 −15 tool/jsbase/switch.js
  67. +28 −3 tool/jsbase/textfield.js
  68. +9 −0 tool/jsbase/tooltip.js
  69. +2 −1 tool/portbase/button.js.dart
  70. +28 −14 tool/portbase/checkbox.js.dart
  71. +30 −15 tool/portbase/icon-toggle.js.dart
  72. +13 −1 tool/portbase/layout.js.dart
  73. +50 −35 tool/portbase/mdlComponentHandler.js.dart
  74. +2 −1 tool/portbase/menu.js.dart
  75. +11 −1 tool/portbase/progress.js.dart
  76. +38 −25 tool/portbase/radio.js.dart
  77. +2 −1 tool/portbase/slider.js.dart
  78. +2 −1 tool/portbase/spinner.js.dart
  79. +29 −16 tool/portbase/switch.js.dart
  80. +23 −3 tool/portbase/textfield.js.dart
  81. +11 −0 tool/portbase/tooltip.js.dart
@@ -112,7 +112,19 @@ <h2>Event card</h2>
.demo-card-event > .mdl-card__actions {
border-color: rgba(255, 255, 255, 0.2);
}
.demo-card-event > .mdl-card__title {
align-items: flex-start;
}
.demo-card-event > .mdl-card__title > h4 {
margin-top: 0;
}
.demo-card-event > .mdl-card__actions {
display: flex;
box-sizing:border-box;
align-items: center;
}
.demo-card-event > .mdl-card__title,
.demo-card-event > .mdl-card__actions,
.demo-card-event > .mdl-card__actions > .mdl-button {
color: #fff;
}
@@ -130,6 +142,8 @@ <h4 class="mdl-color-text--white">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar
</a>
<div class="mdl-layout-spacer"></div>
<i class="material-icons">event</i>
</div>
</div>
@@ -116,7 +116,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|-----------|--------|---------|
| `mdl-card` | Defines div element as an MDL card container | Required on "outer" div |
| `mdl-card--border` | Adds a border to the card section that it's applied to | Used on the "inner" divs |
| `mdl-shadow--2dp through mdl-shadow--8dp` | Assigns variable shadow depths (1-5) to card | Optional, goes on "outer" div; if omitted, no shadow is present |
| `mdl-shadow--2dp through mdl-shadow--16dp` | Assigns variable shadow depths (2, 3, 4, 6, 8, or 16) to card | Optional, goes on "outer" div; if omitted, no shadow is present |
| `mdl-card__title` | Defines div as a card title container | Required on "inner" title div |
| `mdl-card__title-text` | Assigns appropriate text characteristics to card title | Required on head tag (H1 - H6) inside title div |
| `mdl-card__subtitle-text` | Assigns text characteristics to a card subtitile | Optional. Should be a child of the title element. |
@@ -151,7 +151,19 @@ <h2>Event card</h2>
.demo-card-event > .mdl-card__actions {
border-color: rgba(255, 255, 255, 0.2);
}
.demo-card-event > .mdl-card__title {
align-items: flex-start;
}
.demo-card-event > .mdl-card__title > h4 {
margin-top: 0;
}
.demo-card-event > .mdl-card__actions {
display: flex;
box-sizing:border-box;
align-items: center;
}
.demo-card-event > .mdl-card__title,
.demo-card-event > .mdl-card__actions,
.demo-card-event > .mdl-card__actions > .mdl-button {
color: #fff;
}
@@ -168,6 +180,8 @@ <h4 class="mdl-color-text--white">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar
</a>
<div class="mdl-layout-spacer"></div>
<i class="material-icons">event</i>
</div>
</div>
<div class="mdl-card mdl-shadow--2dp">
@@ -4,89 +4,71 @@
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--top-section">
<div class="mdl-mega-footer--left-section">
<!-- Content for the left section -->
</div>
<div class="mdl-mega-footer--right-section">
<a href="#">App Status Dashboard</a>
<a href="#">Terms of Service</a>
</div>
</div>
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer--middle-section">
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">Features</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">About</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Updates</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading mdl-color-text--white">Learning &amp; Support</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Resource Center</a></li>
<li><a href="#">Help Center</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Learn with Google</a></li>
<li><a href="#">Small Business Community</a></li>
<li><a href="#">Think Insights</a></li>
</ul>
</div>
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">Details</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Specs</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Resources</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading mdl-color-text--white">Just for Developers</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Google Developers</a></li>
<li><a href="#">AdWords API</a></li>
<li><a href="#">AdWords Scipts</a></li>
<li><a href="#">AdWords Remarketing Tag</a></li>
</ul>
</div>
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">Technology</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">How it works</a></li>
<li><a href="#">Patterns</a></li>
<li><a href="#">Usage</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contracts</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading mdl-color-text--white">Related Products</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Analytics Standard</a></li>
<li><a href="#">Shopping Ads</a></li>
<li><a href="#">Trusted Store</a></li>
<li><a href="#">AdSense</a></li>
</ul>
</div>
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">FAQ</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Questions</a></li>
<li><a href="#">Answers</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading mdl-color-text--white">More solutions from Google</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Google for Advertising</a></li>
<li><a href="#">Google for Business</a></li>
</ul>
</div>
</div>
</div>
<div class="mdl-mega-footer__bottom-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy &amp; Terms</a></li>
</ul>
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-logo mdl-typography--subhead">
<strong>Title</strong>
</div>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy &amp; Terms</a></li>
</ul>
</div>
</footer>
</footer>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<div class="mdl-logo mdl-typography--subhead">
<strong>Title</strong>
</div>
<ul class="mdl-mini-footer--link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy &amp; Terms</a></li>
</ul>
</div>
<div class="mdl-mini-footer--right-section">
<!-- Content for the right section -->
</div>
</footer>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer__link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy &amp; Terms</a></li>
</ul>
</div>
</footer>
</div>
@@ -50,82 +50,65 @@
<div class="content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<section class="demo-section demo-section--footer">
<div class="demo-preview-block">
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--top-section">
<div class="mdl-mega-footer--left-section">
<!-- Content for the left section -->
</div>
<div class="mdl-mega-footer--right-section">
<a href="#">App Status Dashboard</a>
<a href="#">Terms of Service</a>
</div>
</div>
<div class="mdl-mega-footer--middle-section">
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading mdl-color-text--white">Learning &amp; Support</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Resource Center</a></li>
<li><a href="#">Help Center</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Learn with Google</a></li>
<li><a href="#">Small Business Community</a></li>
<li><a href="#">Think Insights</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading mdl-color-text--white">Just for Developers</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Google Developers</a></li>
<li><a href="#">AdWords API</a></li>
<li><a href="#">AdWords Scipts</a></li>
<li><a href="#">AdWords Remarketing Tag</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading mdl-color-text--white">Related Products</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Analytics Standard</a></li>
<li><a href="#">Shopping Ads</a></li>
<li><a href="#">Trusted Store</a></li>
<li><a href="#">AdSense</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading mdl-color-text--white">More solutions from Google</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Google for Advertising</a></li>
<li><a href="#">Google for Business</a></li>
</ul>
</div>
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-logo mdl-typography--subhead">
<strong>Title</strong>
</div>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy &amp; Terms</a></li>
</ul>
</div>
</footer>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<div class="mdl-logo mdl-typography--subhead">
<strong>Title</strong>
</div>
<ul class="mdl-mini-footer--link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy &amp; Terms</a></li>
</ul>
</div>
<div class="mdl-mini-footer--right-section">
<!-- Content for the right section -->
</div>
</footer>
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">Features</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">About</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Updates</a></li>
</ul>
</div>
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">Details</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Specs</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Resources</a></li>
</ul>
</div>
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">Technology</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">How it works</a></li>
<li><a href="#">Patterns</a></li>
<li><a href="#">Usage</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contracts</a></li>
</ul>
</div>
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">FAQ</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Questions</a></li>
<li><a href="#">Answers</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<div class="mdl-mega-footer__bottom-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy &amp; Terms</a></li>
</ul>
</div>
</footer>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer__link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy &amp; Terms</a></li>
</ul>
</div>
</footer>
</div>
</section>
</div>
@@ -98,6 +98,7 @@ The MDL CSS classes apply various predefined visual enhancements and behavioral
|-----------|--------|---------|
| `mdl-grid` | Defines a container as an MDL grid component | Required on "outer" div element |
| `mdl-cell` | Defines a container as an MDL cell | Required on "inner" div elements |
| `mdl-grid--no-spacing` | Modifies the grid cells to have no margin between them. | Optional on grid container. |
| `mdl-cell--N-col` | Sets the column size for the cell to N | N is 1-12 inclusive, defaults to 4; optional on "inner" div elements|
| `mdl-cell--N-col-desktop` | Sets the column size for the cell to N in desktop mode only | N is 1-12 inclusive; optional on "inner" div elements|
| `mdl-cell--N-col-tablet` | Sets the column size for the cell to N in tablet mode only | N is 1-8 inclusive; optional on "inner" div elements|
@@ -128,12 +128,12 @@ <h2>Fixed header and drawer</h2>
<div class="demo-layout fixed-header-drawer-container">
<div class="demo-layout">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
mdl-layout--fixed-header">
mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon"
for="fixed-header-drawer-exp">
<i class="material-icons">search</i>
@@ -155,7 +155,7 @@ <h2>Fixed header and drawer</h2>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"></div>
<div class="page-content"><!-- Your content goes here --></div>
</main>
</div>
</div>
Oops, something went wrong.

0 comments on commit b26c7da

Please sign in to comment.