Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/footer/README.md b/node_modules/material-design-lite/src/footer/README.md
new file mode 100755
index 0000000..3913a51
--- /dev/null
+++ b/node_modules/material-design-lite/src/footer/README.md
@@ -0,0 +1,405 @@
+## Introduction
+
+The Material Design Lite (MDL) **footer** component is a comprehensive container intended to present a substantial amount of related content in a visually attractive and logically intuitive area. Although it is called "footer", it may be placed at any appropriate location on a device screen, either before or after other content.
+
+An MDL footer component takes two basic forms: *mega-footer* and *mini-footer*. As the names imply, mega-footers contain more (and more complex) content than mini-footers. A mega-footer presents multiple sections of content separated by horizontal rules, while a mini-footer presents a single section of content. Both footer forms have their own internal structures, including required and optional elements, and typically include both informational and clickable content, such as links.
+
+Footers, as represented by this component, are a fairly new feature in user interfaces, and allow users to view discrete blocks of content in a coherent and consistently organized way. Their design and use is an important factor in the overall user experience.
+
+### To include an MDL **mega-footer** component:
+
+ 1a. Code a `<footer>` element. Inside the footer, include one `<div>` element for each content section, typically three: *top*, *middle*, and *bottom*.
+```html
+<footer>
+ <div>
+ ...
+ </div>
+ <div>
+ ...
+ </div>
+ <div>
+ ...
+ </div>
+</footer>
+```
+ 1b. Add the appropriate MDL classes to the footer and divs using the `class` attribute.
+```html
+<footer class="mdl-mega-footer">
+ <div class="mdl-mega-footer__top-section">
+ ...
+ </div>
+ <div class="mdl-mega-footer__middle-section">
+ ...
+ </div>
+ <div class="mdl-mega-footer__bottom-section">
+ ...
+ </div>
+</footer>
+```
+ 2a. Inside the top section div, code two sibling "inner" divs for the *left* and *right* content sections.
+```html
+<footer class="mdl-mega-footer">
+ <div class="mdl-mega-footer__top-section">
+ <div>
+ ...
+ </div>
+ <div>
+ ...
+ </div>
+ </div>
+ <div class="mdl-mega-footer__middle-section">
+ ...
+ </div>
+ <div class="mdl-mega-footer__bottom-section">
+ ...
+ </div>
+</footer>
+```
+ 2b. Add the appropriate MDL classes to the two "inner" left and right divs using the `class` attribute.
+```html
+<footer class="mdl-mega-footer">
+ <div class="mdl-mega-footer__top-section">
+ <div class="mdl-mega-footer__left-section">
+ ...
+ </div>
+ <div class="mdl-mega-footer__right-section">
+ ...
+ </div>
+ </div>
+ <div class="mdl-mega-footer__middle-section">
+ ...
+ </div>
+ <div class="mdl-mega-footer__bottom-section">
+ ...
+ </div>
+</footer>
+```
+ 3a. Inside the middle section div, code one or more sibling "inner" divs for the *drop-down* content sections. That is, for two drop-down sections, you would code two divs.
+```html
+<footer class="mdl-mega-footer">
+ <div class="mdl-mega-footer__top-section">
+ <div class="mdl-mega-footer__left-section">
+ ...
+ </div>
+ <div class="mdl-mega-footer__right-section">
+ ...
+ </div>
+ </div>
+ <div class="mdl-mega-footer__middle-section">
+ <div>
+ ...
+ </div>
+ <div>
+ ...
+ </div>
+ </div>
+ <div class="mdl-mega-footer__bottom-section">
+ ...
+ </div>
+</footer>
+```
+ 3b. Add the appropriate MDL classes to the two "inner" drop-down divs using the `class` attribute.
+```html
+<footer class="mdl-mega-footer">
+ <div class="mdl-mega-footer__top-section">
+ <div class="mdl-mega-footer__left-section">
+ ...
+ </div>
+ <div class="mdl-mega-footer__right-section">
+ ...
+ </div>
+ </div>
+ <div class="mdl-mega-footer__middle-section">
+ <div class="mdl-mega-footer__drop-down-section">
+ ...
+ </div>
+ <div class="mdl-mega-footer__drop-down-section">
+ ...
+ </div>
+ </div>
+ <div class="mdl-mega-footer__bottom-section">
+ ...
+ </div>
+</footer>
+```
+ 4a. Inside the bottom section div, code an "inner" div for the section heading and a sibling unordered list for the bottom section links.
+```html
+<footer class="mdl-mega-footer">
+ <div class="mdl-mega-footer__top-section">
+ <div class="mdl-mega-footer__left-section">
+ ...
+ </div>
+ <div class="mdl-mega-footer__right-section">
+ ...
+ </div>
+ </div>
+ <div class="mdl-mega-footer__middle-section">
+ <div class="mdl-mega-footer__drop-down-section">
+ ...
+ </div>
+ <div class="mdl-mega-footer__drop-down-section">
+ ...
+ </div>
+ </div>
+ <div class="mdl-mega-footer__bottom-section">
+ <div>
+ ...
+ </div>
+ <ul>
+ ...
+ </ul>
+ </div>
+</footer>
+```
+ 4b. Add the appropriate MDL classes to the "inner" div heading and list using the `class` attribute.
+```html
+<footer class="mdl-mega-footer">
+ <div class="mdl-mega-footer__top-section">
+ <div class="mdl-mega-footer__left-section">
+ ...
+ </div>
+ <div class="mdl-mega-footer__right-section">
+ ...
+ </div>
+ </div>
+ <div class="mdl-mega-footer__middle-section">
+ <div class="mdl-mega-footer__drop-down-section">
+ ...
+ </div>
+ <div class="mdl-mega-footer__drop-down-section">
+ ...
+ </div>
+ </div>
+ <div class="mdl-mega-footer__bottom-section">
+ <div class="mdl-logo">
+ </div>
+ <ul class="mdl-mega-footer__link-list">
+ ...
+ </ul>
+ </div>
+</footer>
+```
+ 5. Add content to the top (left and right), middle (drop-downs), and bottom (text and links) sections of the footer; include any appropriate MDL classes using the `class` attribute.
+```html
+<footer class="mdl-mega-footer">
+ <div class="mdl-mega-footer__top-section">
+ <div class="mdl-mega-footer__left-section">
+ <button class="mdl-mega-footer__social-btn"></button>
+ <button class="mdl-mega-footer__social-btn"></button>
+ <button class="mdl-mega-footer__social-btn"></button>
+ </div>
+ <div class="mdl-mega-footer__right-section">
+ <a href="">Link 1</a>
+ <a href="">Link 2</a>
+ <a href="">Link 3</a>
+ </div>
+ </div>
+ <div class="mdl-mega-footer__middle-section">
+ <div class="mdl-mega-footer__drop-down-section">
+ <h1 class="mdl-mega-footer__heading">Drop-down 1 Heading</h1>
+ <ul class="mdl-mega-footer__link-list">
+ <li><a href="">Link A</a></li>
+ <li><a href="">Link B</a></li>
+ <li><a href="">Link C</a></li>
+ <li><a href="">Link D</a></li>
+ </ul>
+ </div>
+ <div class="mdl-mega-footer__drop-down-section">
+ <h1 class="mdl-mega-footer__heading">Drop-down 2 Heading</h1>
+ <ul class="mdl-mega-footer__link-list">
+ <li><a href="">Link A</a></li>
+ <li><a href="">Link B</a></li>
+ <li><a href="">Link C</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="mdl-mega-footer__bottom-section">
+ <div class="mdl-logo">
+ Mega-Footer Bottom Section Heading
+ </div>
+ <ul class="mdl-mega-footer__link-list">
+ <li><a href="">Link A</a></li>
+ <li><a href="">Link B</a></li>
+ </ul>
+ </div>
+</footer>
+```
+
+The mega-footer component is ready for use.
+
+#### Examples
+
+A mega-footer component with three sections and two drop-down sections in the middle section.
+```html
+<footer class="mdl-mega-footer">
+ <div class="mdl-mega-footer__top-section">
+ <div class="mdl-mega-footer__left-section">
+ <button class="mdl-mega-footer__social-btn"></button>
+ <button class="mdl-mega-footer__social-btn"></button>
+ <button class="mdl-mega-footer__social-btn"></button>
+ </div>
+ <div class="mdl-mega-footer__right-section">
+ <a href="#">Introduction</a>
+ <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">
+ <h1 class="mdl-mega-footer__heading">Learning and 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">
+ <h1 class="mdl-mega-footer__heading">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>
+ <div class="mdl-mega-footer__bottom-section">
+ <div class="mdl-logo">
+ More Information
+ </div>
+ <ul class="mdl-mega-footer__link-list">
+ <li><a href="#">Help</a></li>
+ <li><a href="#">Privacy and Terms</a></li>
+ </ul>
+ </div>
+</footer>
+```
+
+### To include an MDL **mini-footer** component:
+
+ 1a. Code a `<footer>` element. Inside the footer, code two `<div>` elements, one for the *left* section and one for the *right* section.
+```html
+<footer>
+ <div>
+ ...
+ </div>
+ <div>
+ ...
+ </div>
+</footer>
+```
+ 1b. Add the appropriate MDL classes to the footer and divs using the `class` attribute.
+```html
+<footer class="mdl-mini-footer">
+ <div class="mdl-mini-footer__left-section">
+ ...
+ </div>
+ <div class="mdl-mini-footer__right-section">
+ ...
+ </div>
+</footer>
+```
+ 2a. Inside the left section div, code an "inner" div for the section heading and a sibling unordered list for the left section links.
+```html
+<footer class="mdl-mini-footer">
+ <div class="mdl-mini-footer__left-section">
+ <div>
+ ...
+ </div>
+ <ul>
+ ...
+ </ul>
+ </div>
+ <div class="mdl-mini-footer__right-section">
+ ...
+ </div>
+</footer>
+```
+ 2b. Add the appropriate MDL classes to the "inner" div and list using the `class` attribute.
+```html
+<footer class="mdl-mini-footer">
+ <div class="mdl-mini-footer__left-section">
+ <div class="mdl-logo">
+ ...
+ </div>
+ <ul class="mdl-mini-footer__link-list">
+ ...
+ </ul>
+ </div>
+ <div class="mdl-mini-footer__right-section">
+ ...
+ </div>
+</footer>
+```
+ 3. Add content to the left (text and links) and right (text or decoration) sections of the footer; include any appropriate MDL classes using the `class` attribute.
+```html
+<footer class="mdl-mini-footer">
+ <div class="mdl-mini-footer__left-section">
+ <div class="mdl-logo">
+ Mini-footer Heading
+ </div>
+ <ul class="mdl-mini-footer__link-list">
+ <li><a href="">Link 1</a></li>
+ <li><a href="">Link 2</a></li>
+ <li><a href="">Link 3</a></li>
+ </ul>
+ </div>
+ <div class="mdl-mini-footer__right-section">
+ <button class="mdl-mini-footer__social-btn"></button>
+ <button class="mdl-mini-footer__social-btn"></button>
+ <button class="mdl-mini-footer__social-btn"></button>
+ </div>
+</footer>
+```
+
+The mini-footer component is ready for use.
+
+#### Examples
+
+A mini-footer with left and right sections.
+
+```html
+<footer class="mdl-mini-footer">
+ <div class="mdl-mini-footer__left-section">
+ <div class="mdl-logo">
+ More Information
+ </div>
+ <ul class="mdl-mini-footer__link-list">
+ <li><a href="#">Help</a></li>
+ <li><a href="#">Privacy and Terms</a></li>
+ <li><a href="#">User Agreement</a></li>
+ </ul>
+ </div>
+ <div class="mdl-mini-footer__right-section">
+ <button class="mdl-mini-footer__social-btn"></button>
+ <button class="mdl-mini-footer__social-btn"></button>
+ <button class="mdl-mini-footer__social-btn"></button>
+ </div>
+</footer>
+```
+
+## Configuration options
+
+The MDL CSS classes apply various predefined visual enhancements to the footer. The table below lists the available classes and their effects.
+
+| MDL class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-mega-footer` | Defines container as an MDL mega-footer component | Required on footer element |
+| `mdl-mega-footer__top-section` | Defines container as a footer top section | Required on top section "outer" div element |
+| `mdl-mega-footer__left-section` | Defines container as a left section | Required on left section "inner" div element |
+| `mdl-mega-footer__social-btn` | Defines a decorative square within mega-footer | Required on button element (if used) |
+| `mdl-mega-footer__right-section` | Defines container as a right section | Required on right section "inner" div element |
+| `mdl-mega-footer__middle-section` | Defines container as a footer middle section | Required on middle section "outer" div element |
+| `mdl-mega-footer__drop-down-section` | Defines container as a drop-down (vertical) content area | Required on drop-down "inner" div elements |
+| `mdl-mega-footer__heading` | Defines a heading as a mega-footer heading | Required on h1 element inside drop-down section |
+| `mdl-mega-footer__link-list` | Defines an unordered list as a drop-down (vertical) list | Required on ul element inside drop-down section |
+| `mdl-mega-footer__bottom-section` | Defines container as a footer bottom section | Required on bottom section "outer" div element |
+| `mdl-logo` | Defines a container as a styled section heading | Required on "inner" div element in mega-footer bottom-section or mini-footer left-section |
+| `mdl-mini-footer` | Defines container as an MDL mini-footer component | Required on footer element |
+| `mdl-mini-footer__left-section` | Defines container as a left section | Required on left section "inner" div element |
+| `mdl-mini-footer__link-list` | Defines an unordered list as an inline (horizontal) list | Required on ul element sibling to "mdl-logo" div element |
+| `mdl-mini-footer__right-section` | Defines container as a right section | Required on right section "inner" div element |
+| `mdl-mini-footer__social-btn` | Defines a decorative square within mini-footer | Required on button element (if used) |
diff --git a/node_modules/material-design-lite/src/footer/_mega_footer.scss b/node_modules/material-design-lite/src/footer/_mega_footer.scss
new file mode 100644
index 0000000..49ea23a
--- /dev/null
+++ b/node_modules/material-design-lite/src/footer/_mega_footer.scss
@@ -0,0 +1,321 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../variables";
+@import "../mixins";
+
+.mdl-mega-footer {
+ padding: $footer-min-padding $footer-padding-sides;
+
+ color: $footer-color;
+ background-color: $footer-bg-color;
+}
+
+
+.mdl-mega-footer--top-section:after,
+.mdl-mega-footer--middle-section:after,
+.mdl-mega-footer--bottom-section:after,
+.mdl-mega-footer__top-section:after,
+.mdl-mega-footer__middle-section:after,
+.mdl-mega-footer__bottom-section:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+.mdl-mega-footer--left-section,
+.mdl-mega-footer__left-section {
+ margin-bottom: $footer-min-padding;
+}
+
+.mdl-mega-footer--right-section,
+.mdl-mega-footer__right-section {
+ margin-bottom: $footer-min-padding;
+}
+
+.mdl-mega-footer--right-section a,
+.mdl-mega-footer__right-section a {
+ display: block;
+
+ margin-bottom: $footer-min-padding;
+
+ color: inherit;
+ text-decoration: none;
+}
+
+@media screen and (min-width: 760px) {
+ .mdl-mega-footer--left-section,
+ .mdl-mega-footer__left-section {
+ float: left;
+ }
+
+ .mdl-mega-footer--right-section,
+ .mdl-mega-footer__right-section {
+ float: right;
+ }
+
+ .mdl-mega-footer--right-section a,
+ .mdl-mega-footer__right-section a {
+ display: inline-block;
+
+ margin-left: $footer-min-padding;
+
+ line-height: $footer-btn-size;
+ vertical-align: middle;
+ }
+}
+
+.mdl-mega-footer--social-btn,
+.mdl-mega-footer__social-btn {
+ width: $footer-btn-size;
+ height: $footer-btn-size;
+
+ padding: 0;
+ margin: 0;
+
+ background-color: $footer-button-fill-color;
+
+ border: none;
+}
+
+.mdl-mega-footer--drop-down-section,
+.mdl-mega-footer__drop-down-section {
+ display: block;
+
+ position: relative;
+}
+
+@media screen and (min-width: 760px) {
+ .mdl-mega-footer--drop-down-section,
+ .mdl-mega-footer__drop-down-section {
+ width: 33%;
+ }
+
+ .mdl-mega-footer--drop-down-section:nth-child(1),
+ .mdl-mega-footer--drop-down-section:nth-child(2),
+ .mdl-mega-footer__drop-down-section:nth-child(1),
+ .mdl-mega-footer__drop-down-section:nth-child(2) {
+ float: left;
+ }
+
+ .mdl-mega-footer--drop-down-section:nth-child(3),
+ .mdl-mega-footer__drop-down-section:nth-child(3) {
+ float: right;
+
+ &:after {
+ clear: right;
+ }
+ }
+
+ .mdl-mega-footer--drop-down-section:nth-child(4),
+ .mdl-mega-footer__drop-down-section:nth-child(4) {
+ clear: right;
+ float: right;
+ }
+
+ .mdl-mega-footer--middle-section:after,
+ .mdl-mega-footer__middle-section:after {
+ content: '';
+
+ display: block;
+
+ clear: both;
+ }
+
+ .mdl-mega-footer--bottom-section,
+ .mdl-mega-footer__bottom-section {
+ padding-top: 0;
+ }
+}
+
+@media screen and (min-width: 1024px) {
+ .mdl-mega-footer--drop-down-section,
+ .mdl-mega-footer--drop-down-section:nth-child(3),
+ .mdl-mega-footer--drop-down-section:nth-child(4),
+ .mdl-mega-footer__drop-down-section,
+ .mdl-mega-footer__drop-down-section:nth-child(3),
+ .mdl-mega-footer__drop-down-section:nth-child(4) {
+ width: 24%;
+
+ float: left;
+ }
+}
+
+.mdl-mega-footer--heading-checkbox,
+.mdl-mega-footer__heading-checkbox {
+ position: absolute;
+ width: 100%;
+ height: $footer-heading-line-height + ($footer-min-padding * 2);
+
+ padding: ($footer-min-padding * 2);
+ margin: 0;
+ margin-top: -$footer-min-padding;
+
+ cursor: pointer;
+
+ z-index: 1;
+ opacity: 0;
+
+ & + .mdl-mega-footer--heading:after,
+ & + .mdl-mega-footer__heading:after {
+ font-family: 'Material Icons';
+ content: '\E5CE'
+ }
+}
+
+.mdl-mega-footer--heading-checkbox:checked,
+.mdl-mega-footer__heading-checkbox:checked {
+ // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
+ // break consecutive "+" operators in some cases. Therefore, we need to use
+ // both here to cover all the bases.
+ & ~ .mdl-mega-footer--link-list,
+ & ~ .mdl-mega-footer__link-list,
+ & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
+ & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list {
+ display: none;
+ }
+
+ & + .mdl-mega-footer--heading:after,
+ & + .mdl-mega-footer__heading:after {
+ font-family: 'Material Icons';
+ content: '\E5CF'
+ }
+}
+
+.mdl-mega-footer--heading,
+.mdl-mega-footer__heading {
+ position: relative;
+ width: 100%;
+
+ padding-right: $footer-heading-line-height + $footer-min-padding;
+ margin-bottom: $footer-min-padding;
+
+ box-sizing:border-box;
+
+ font-size: $footer-heading-font-size;
+ line-height: $footer-heading-line-height;
+
+ font-weight: 500;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+
+ color: $footer-heading-color;
+}
+
+.mdl-mega-footer--heading:after,
+.mdl-mega-footer__heading:after {
+ content: '';
+
+ position: absolute;
+ top: 0;
+ right: 0;
+
+ display: block;
+
+ width: $footer-heading-line-height;
+ height: $footer-heading-line-height;
+
+ background-size: cover;
+}
+
+.mdl-mega-footer--link-list,
+.mdl-mega-footer__link-list {
+ list-style: none;
+
+ margin: 0;
+ padding: 0;
+
+ margin-bottom: $footer-min-padding * 2;
+ &:after {
+ clear: both;
+ display: block;
+ content: '';
+ }
+}
+
+.mdl-mega-footer--link-list li,
+.mdl-mega-footer__link-list li {
+ @include typo-body-1();
+ line-height: 20px;
+}
+
+.mdl-mega-footer--link-list a,
+.mdl-mega-footer__link-list a {
+ color: inherit;
+ text-decoration: none;
+ white-space: nowrap;
+}
+
+@media screen and (min-width: 760px) {
+ .mdl-mega-footer--heading-checkbox,
+ .mdl-mega-footer__heading-checkbox {
+ display: none;
+
+ & + .mdl-mega-footer--heading:after,
+ & + .mdl-mega-footer__heading:after {
+ content: '';
+ }
+ }
+ .mdl-mega-footer--heading-checkbox:checked,
+ .mdl-mega-footer__heading-checkbox:checked {
+ // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
+ // break consecutive "+" operators in some cases. Therefore, we need to use
+ // both here to cover all the bases.
+ & ~ .mdl-mega-footer--link-list,
+ & ~ .mdl-mega-footer__link-list,
+ & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
+ & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list {
+ display: block;
+ }
+
+ & + .mdl-mega-footer--heading:after,
+ & + .mdl-mega-footer__heading:after {
+ content: '';
+ }
+ }
+}
+
+.mdl-mega-footer--bottom-section,
+.mdl-mega-footer__bottom-section {
+ padding-top: $footer-min-padding;
+ margin-bottom: $footer-min-padding;
+}
+
+.mdl-logo {
+ margin-bottom: $footer-min-padding;
+ color: white;
+}
+
+.mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li,
+.mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li {
+ float: left;
+
+ margin-bottom: 0;
+ margin-right: $footer-min-padding;
+}
+
+
+
+@media screen and (min-width: 760px) {
+ .mdl-logo {
+ float: left;
+
+ margin-bottom: 0;
+ margin-right: $footer-min-padding;
+ }
+}
diff --git a/node_modules/material-design-lite/src/footer/_mini_footer.scss b/node_modules/material-design-lite/src/footer/_mini_footer.scss
new file mode 100644
index 0000000..6a1c8ed
--- /dev/null
+++ b/node_modules/material-design-lite/src/footer/_mini_footer.scss
@@ -0,0 +1,88 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../variables";
+
+.mdl-mini-footer {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-between;
+
+ padding: ($padding * 2) $padding;
+
+ color: $footer-color;
+ background-color: $footer-bg-color;
+
+ &:after {
+ content: '';
+ display: block;
+ }
+
+ & .mdl-logo {
+ line-height: $footer-btn-size;
+ }
+}
+
+.mdl-mini-footer--link-list,
+.mdl-mini-footer__link-list {
+ display: flex;
+ flex-flow: row nowrap;
+
+ list-style: none;
+
+ margin: 0;
+ padding: 0;
+
+ & li {
+ margin-bottom: 0;
+ margin-right: $padding;
+
+ @media screen and (min-width: 760px) {
+ line-height: $footer-btn-size;
+ }
+ }
+
+ & a {
+ color: inherit;
+ text-decoration: none;
+ white-space: nowrap;
+ }
+}
+
+.mdl-mini-footer--left-section,
+.mdl-mini-footer__left-section {
+ display: inline-block;
+ order: 0;
+}
+
+.mdl-mini-footer--right-section,
+.mdl-mini-footer__right-section {
+ display: inline-block;
+ order: 1;
+}
+
+.mdl-mini-footer--social-btn,
+.mdl-mini-footer__social-btn {
+ width: $footer-btn-size;
+ height: $footer-btn-size;
+
+ padding: 0;
+ margin: 0;
+
+ background-color: $footer-button-fill-color;
+
+ border: none;
+}
diff --git a/node_modules/material-design-lite/src/footer/snippets/mega-footer.html b/node_modules/material-design-lite/src/footer/snippets/mega-footer.html
new file mode 100644
index 0000000..edd2f7d
--- /dev/null
+++ b/node_modules/material-design-lite/src/footer/snippets/mega-footer.html
@@ -0,0 +1,57 @@
+<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 & Terms</a></li>
+ </ul>
+ </div>
+
+</footer>
diff --git a/node_modules/material-design-lite/src/footer/snippets/mini-footer.html b/node_modules/material-design-lite/src/footer/snippets/mini-footer.html
new file mode 100644
index 0000000..1d78b27
--- /dev/null
+++ b/node_modules/material-design-lite/src/footer/snippets/mini-footer.html
@@ -0,0 +1,9 @@
+<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 & Terms</a></li>
+ </ul>
+ </div>
+</footer>