Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/layout/README.md b/node_modules/material-design-lite/src/layout/README.md
new file mode 100644
index 0000000..9c8238c
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/README.md
@@ -0,0 +1,340 @@
+## Introduction
+
+The Material Design Lite (MDL) **layout** component is a comprehensive approach to page layout that uses MDL development tenets, allows for efficient use of MDL components, and automatically adapts to different browsers, screen sizes, and devices.
+
+Appropriate and accessible layout is a critical feature of all user interfaces, regardless of a site's content or function. Page design and presentation is therefore an important factor in the overall user experience. See the layout component's [Material Design specifications page](http://www.google.com/design/spec/layout/principles.html) for details.
+
+Use of MDL layout principles simplifies the creation of scalable pages by providing reusable components and encourages consistency across environments by establishing recognizable visual elements, adhering to logical structural grids, and maintaining appropriate spacing across multiple platforms and screen sizes. MDL layout is extremely powerful and dynamic, allowing for great consistency in outward appearance and behavior while maintaining development flexibility and ease of use.
+
+### To include a basic MDL **layout** component:
+
+ 1. Code a `<div>` element. This is the "outer" div that holds the entire layout.
+```html
+<div>
+</div>
+```
+
+>**Note:** The layout cannot be applied directly on the `<body>` element. Always create a nested `<div>` element.
+
+ 2. Add MDL classes as indicated, separated by spaces, to the div using the `class` attribute.
+```html
+<div class="mdl-layout mdl-js-layout">
+</div>
+```
+
+ 3. Inside the div, code a `<header>` element. This holds the header row with navigation links that is displayed on large screens, and the menu icon that opens the navigation drawer for smaller screens. Add the MDL class to the header using the `class` attribute.
+```html
+<div class="mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header">
+ </header>
+</div>
+```
+
+ 4. Inside the header, add a `<div>` to produce the menu icon, and include the MDL class as indicated. The div has no content of its own.
+```html
+<div class="mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout-icon"></div>
+ </header>
+</div>
+```
+
+ 5. Still inside the header, add another `<div>` to hold the header row's content, and include the MDL class as indicated.
+```html
+<div class="mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout-icon"></div>
+ <div class="mdl-layout__header-row">
+ </div>
+ </header>
+</div>
+```
+
+ 6. Inside the header row div, add a span containing the layout title, and include the MDL class as indicated.
+```html
+<div class="mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout-icon"></div>
+ <div class="mdl-layout__header-row">
+ <span class="mdl-layout__title">Simple Layout</span>
+ </div>
+ </header>
+</div>
+```
+
+ 7. Following the span, add a `<div>` to align the header's navigation links to the right, and include the MDL class as indicated.
+```html
+<div class="mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout-icon"></div>
+ <div class="mdl-layout__header-row">
+ <span class="mdl-layout__title">Simple Layout</span>
+ <div class="mdl-layout-spacer"></div>
+ </div>
+ </header>
+</div>
+```
+
+ 8. Following the spacer div, add a `<nav>` element to contain the header's navigation links, and include the MDL class as indicated. Inside the nav, add one anchor `<a>` element for each header link, and include the MDL class as indicated. This completes the layout's header.
+```html
+<div class="mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout-icon"></div>
+ <div class="mdl-layout__header-row">
+ <span class="mdl-layout__title">Simple Layout</span>
+ <div class="mdl-layout-spacer"></div>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="#">Nav link 1</a>
+ <a class="mdl-navigation__link" href="#">Nav link 2</a>
+ <a class="mdl-navigation__link" href="#">Nav link 3</a>
+ </nav>
+ </div>
+ </header>
+</div>
+```
+
+ 9. Following the header, add a `<div>` element to hold the slide-out drawer's content, and add the MDL class as indicated. The drawer appears automatically on smaller screens, and may be opened with the menu icon on any screen size.
+```html
+<div class="mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout-icon"></div>
+ <div class="mdl-layout__header-row">
+ <span class="mdl-layout__title">Simple Layout</span>
+ <div class="mdl-layout-spacer"></div>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="#">Nav link 1</a>
+ <a class="mdl-navigation__link" href="#">Nav link 2</a>
+ <a class="mdl-navigation__link" href="#">Nav link 3</a>
+ </nav>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ </div>
+</div>
+```
+
+ 10. Inside the drawer div, add a span containing the layout title (this should match the title in step 5), and include the MDL class as indicated.
+```html
+<div class="mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout-icon"></div>
+ <div class="mdl-layout__header-row">
+ <span class="mdl-layout__title">Simple Layout</span>
+ <div class="mdl-layout-spacer"></div>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="#">Nav link 1</a>
+ <a class="mdl-navigation__link" href="#">Nav link 2</a>
+ <a class="mdl-navigation__link" href="#">Nav link 3</a>
+ </nav>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout__title">Simple Layout</span>
+ </div>
+</div>
+```
+
+ 11. Following the span, add a `<nav>` element to contain the drawer's navigation links, and one anchor `<a>` element for each drawer link (these should match the links in step 7), and include the MDL classes as indicated. This completes the layout's drawer.
+```html
+<div class="mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout-icon"></div>
+ <div class="mdl-layout__header-row">
+ <span class="mdl-layout__title">Simple Layout</span>
+ <div class="mdl-layout-spacer"></div>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="#">Nav link 1</a>
+ <a class="mdl-navigation__link" href="#">Nav link 2</a>
+ <a class="mdl-navigation__link" href="#">Nav link 3</a>
+ </nav>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout__title">Simple Layout</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="#">Nav link 1</a>
+ <a class="mdl-navigation__link" href="#">Nav link 2</a>
+ <a class="mdl-navigation__link" href="#">Nav link 3</a>
+ </nav>
+ </div>
+</div>
+```
+
+ 12. Finally, following the drawer div, add a `<main>` element to hold the layout's primary content, and include the MDL class as indicated. Inside that element, add your desired content.
+```html
+<div class="mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout-icon"></div>
+ <div class="mdl-layout__header-row">
+ <span class="mdl-layout__title">Simple Layout</span>
+ <div class="mdl-layout-spacer"></div>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="#">Nav link 1</a>
+ <a class="mdl-navigation__link" href="#">Nav link 2</a>
+ <a class="mdl-navigation__link" href="#">Nav link 3</a>
+ </nav>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout__title">Simple Layout</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="#">Nav link 1</a>
+ <a class="mdl-navigation__link" href="#">Nav link 2</a>
+ <a class="mdl-navigation__link" href="#">Nav link 3</a>
+ </nav>
+ </div>
+ <main class="mdl-layout__content">
+ <p>Content</p>
+ <p>Goes</p>
+ <p>Here</p>
+ </main>
+</div>
+```
+
+The layout component is ready for use.
+
+#### Examples
+
+A layout with a fixed header for larger screens and a collapsible drawer for smaller screens.
+```html
+<div class="mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout-icon"></div>
+ <div class="mdl-layout__header-row">
+ <span class="mdl-layout__title">Material Design Lite</span>
+ <div class="mdl-layout-spacer"></div>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="#">Hello</a>
+ <a class="mdl-navigation__link" href="#">World.</a>
+ <a class="mdl-navigation__link" href="#">How</a>
+ <a class="mdl-navigation__link" href="#">Are</a>
+ <a class="mdl-navigation__link" href="#">You?</a>
+ </nav>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout__title">Material Design Lite</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="#">Hello</a>
+ <a class="mdl-navigation__link" href="#">World.</a>
+ <a class="mdl-navigation__link" href="#">How</a>
+ <a class="mdl-navigation__link" href="#">Are</a>
+ <a class="mdl-navigation__link" href="#">You?</a>
+ </nav>
+ </div>
+ <main class="mdl-layout__content">
+ <div>Content</div>
+ </main>
+</div>
+```
+
+The same layout with a non-fixed header that scrolls with the content.
+```html
+<div class="mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header mdl-layout__header--scroll">
+ <img class="mdl-layout-icon"></img>
+ <div class="mdl-layout__header-row">
+ <span class="mdl-layout__title">Material Design Lite</span>
+ <div class="mdl-layout-spacer"></div>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="#">Hello</a>
+ <a class="mdl-navigation__link" href="#">World.</a>
+ <a class="mdl-navigation__link" href="#">How</a>
+ <a class="mdl-navigation__link" href="#">Are</a>
+ <a class="mdl-navigation__link" href="#">You?</a>
+ </nav>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout__title">Material Design Lite</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="#">Hello</a>
+ <a class="mdl-navigation__link" href="#">World.</a>
+ <a class="mdl-navigation__link" href="#">How</a>
+ <a class="mdl-navigation__link" href="#">Are</a>
+ <a class="mdl-navigation__link" href="#">You?</a>
+ </nav>
+ </div>
+ <main class="mdl-layout__content">
+ <div>Content</div>
+ </main>
+</div>
+```
+
+A layout with a fixed drawer that serves as sidebar navigation on larger screens. The drawer collapses and the menu icon is displayed on smaller screens.
+```html
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout__header-row">
+ <span class="mdl-layout__title">Fixed drawer layout demo</span>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout__title">Material Design Lite</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="#">Hello</a>
+ <a class="mdl-navigation__link" href="#">World.</a>
+ <a class="mdl-navigation__link" href="#">How</a>
+ <a class="mdl-navigation__link" href="#">Are</a>
+ <a class="mdl-navigation__link" href="#">You?</a>
+ </nav>
+ </div>
+ <main class="mdl-layout__content">
+ <div>Content</div>
+ </main>
+</div>
+```
+
+A layout with a fixed drawer but no header.
+```html
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout__title">Material Design Lite</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="#">Hello</a>
+ <a class="mdl-navigation__link" href="#">World.</a>
+ <a class="mdl-navigation__link" href="#">How</a>
+ <a class="mdl-navigation__link" href="#">Are</a>
+ <a class="mdl-navigation__link" href="#">You?</a>
+ </nav>
+ </div>
+ <main class="mdl-layout__content">
+ <div>Content</div>
+ </main>
+</div>
+```
+
+## Configuration options
+
+The MDL CSS classes apply various predefined visual and behavioral enhancements to the layout. The table below lists the available classes and their effects.
+
+| MDL class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-layout` | Defines container as an MDL component | Required on outer div element |
+| `mdl-js-layout` | Assigns basic MDL behavior to layout | Required on outer div element |
+| `mdl-layout__header` | Defines container as an MDL component | Required on header element |
+| `mdl-layout-icon` | Used for adding an application icon. Gets concealed by menu icon if both are visible. | Goes on optional icon element |
+| `mdl-layout__header-row` | Defines container as MDL header row | Required on header content div |
+| `mdl-layout__title` | Defines layout title text | Required on layout title span |
+| `mdl-layout-spacer` | Used to align elements inside a header or drawer, by growing to fill remaining space. Commonly used for aligning elements to the right. | Goes on optional div following layout title |
+| `mdl-navigation` | Defines container as MDL navigation group | Required on nav element |
+| `mdl-navigation__link` | Defines anchor as MDL navigation link | Required on header and/or drawer anchor elements |
+| `mdl-layout__drawer` | Defines container as MDL layout drawer | Required on drawer div element |
+| `mdl-layout__content` | Defines container as MDL layout content | Required on main element |
+| `mdl-layout__header--scroll` | Makes the header scroll with the content | Optional; goes on header element |
+| `mdl-layout--fixed-drawer` | Makes the drawer always visible and open in larger screens | Optional; goes on outer div element (not drawer div element) |
+| `mdl-layout--fixed-header` | Makes the header always visible, even in small screens | Optional; goes on outer div element |
+| `mdl-layout--no-drawer-button` | Does not display a drawer button | Optional; goes on `mdl-layout` element |
+| `mdl-layout--no-desktop-drawer-button` | Does not display a drawer button in desktop mode | Optional; goes on `mdl-layout` element |
+| `mdl-layout--large-screen-only` | Hides an element on smaller screens | Optional; goes on any descendant of `mdl-layout` |
+| `mdl-layout--small-screen-only` | Hides an element on larger screens | Optional; goes on any descendant of `mdl-layout` |
+| `mdl-layout__header--waterfall` | Allows a "waterfall" effect with multiple header lines | Optional; goes on header element |
+| `mdl-layout__header--waterfall-hide-top` | Hides the top rather than the bottom rows on a waterfall header | Optional; goes on header element. Requires `mdl-layout__header--waterfall` |
+| `mdl-layout__header--transparent` | Makes header transparent (draws on top of layout background) | Optional; goes on header element |
+| `mdl-layout__header--seamed` | Uses a header without a shadow | Optional; goes on header element |
+| `mdl-layout__tab-bar` | Defines container as an MDL tab bar | Required on div element inside header (tabbed layout) |
+| `mdl-layout__tab` | Defines anchor as MDL tab link | Required on tab bar anchor elements |
+| `is-active` | Defines tab as default active tab | Optional; goes on tab bar anchor element and associated tab section element|
+| `mdl-layout__tab-panel` | Defines container as tab content panel | Required on tab section elements |
+| `mdl-layout__tab-manual-switch` | Disables tab switching when clicking on tab separators. Useful for disabling default behavior and setting up your own event listeners. | Optional; goes on tab bar element |
+| `mdl-layout--fixed-tabs` | Uses fixed tabs instead of the default scrollable tabs | Optional; goes on outer div element (not div inside header) |
diff --git a/node_modules/material-design-lite/src/layout/_layout.scss b/node_modules/material-design-lite/src/layout/_layout.scss
new file mode 100644
index 0000000..05a317a
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/_layout.scss
@@ -0,0 +1,662 @@
+/**
+ * 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";
+
+// Navigation classes. Only used here for now, but we may at some point move
+// this to its own component.
+.mdl-navigation {
+ display: flex;
+ flex-wrap: nowrap;
+ box-sizing: border-box;
+}
+
+.mdl-navigation__link {
+ color: $layout-text-color;
+ text-decoration: none;
+ margin: 0;
+ @include typo-body-1(true);
+
+ // Align icons inside link with text
+ & .material-icons {
+ vertical-align: middle;
+ }
+}
+
+// Main layout class.
+.mdl-layout {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ overflow-x: hidden;
+ position: relative;
+ -webkit-overflow-scrolling: touch;
+}
+
+// Utility classes for screen sizes.
+.mdl-layout.is-small-screen .mdl-layout--large-screen-only {
+ display: none;
+}
+
+.mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only {
+ display: none;
+}
+
+.mdl-layout__container {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+
+
+ // Optional utility classes for formatting special blocks in this component.
+ .mdl-layout__title,
+ .mdl-layout-title {
+ display: block;
+ position: relative;
+
+ @include typo-title();
+ font-weight: 400;
+ box-sizing: border-box;
+ }
+
+ .mdl-layout-spacer {
+ flex-grow: 1;
+ }
+
+
+ // Drawer.
+ .mdl-layout__drawer {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+
+ width: $layout-drawer-width;
+ height: 100%;
+ max-height: 100%;
+
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ @include shadow-2dp();
+
+ box-sizing: border-box;
+ border-right: 1px solid $layout-drawer-border-color;
+ background: $layout-drawer-bg-color;
+
+ // Transform offscreen.
+ transform: translateX(-$layout-drawer-width - 10px);
+ transform-style: preserve-3d;
+ will-change: transform;
+
+ @include material-animation-default();
+ transition-property: transform;
+
+ color: $layout-text-color;
+
+ overflow: visible;
+ overflow-y: auto;
+
+ z-index: 5;
+
+ &.is-visible {
+ transform: translateX(0);
+ & ~ .mdl-layout__content.mdl-layout__content {
+ overflow: hidden;
+ }
+ }
+
+ & > * {
+ flex-shrink: 0;
+ }
+
+ & > .mdl-layout__title,
+ & > .mdl-layout-title {
+ line-height: $layout-desktop-header-height;
+ padding-left: $layout-header-desktop-indent;
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ line-height: $layout-mobile-header-height;
+ padding-left: $layout-header-mobile-indent;
+ }
+ }
+
+ & .mdl-navigation {
+ flex-direction: column;
+ align-items: stretch;
+ padding-top: 16px;
+
+ & .mdl-navigation__link {
+ display: block;
+ flex-shrink: 0;
+ padding: 16px $layout-header-desktop-indent;
+ margin: 0;
+ color: $layout-drawer-navigation-color;
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ padding: 16px $layout-header-mobile-indent;
+ }
+
+ &:hover {
+ background-color: $layout-nav-color;
+ }
+
+ &--current {
+ background-color: $layout-drawer-navigation-link-active-background;
+ color: $layout-drawer-navigation-link-active-color;
+ }
+ }
+ }
+
+ @media screen and (min-width: $layout-screen-size-threshold + 1px) {
+ .mdl-layout--fixed-drawer > & {
+ transform: translateX(0);
+ }
+ }
+ }
+
+
+ // Drawer button.
+ // TODO(sgomes): Replace with an icon button when we have that component.
+ .mdl-layout__drawer-button {
+ display: block;
+
+ position: absolute;
+ height: $layout-drawer-button-desktop-size;
+ width: $layout-drawer-button-desktop-size;
+ border: 0;
+
+ flex-shrink: 0;
+
+ overflow: hidden;
+ text-align: center;
+ cursor: pointer;
+ font-size: 26px;
+ line-height: $layout-mobile-header-height;
+ font-family: Helvetica, Arial, sans-serif;
+ margin: ($layout-mobile-header-height - $layout-drawer-button-desktop-size) 12px;
+ top: 0;
+ left: 0;
+ color: $layout-header-text-color;
+
+ z-index: 4;
+
+ .mdl-layout__header & {
+ position: absolute;
+ color: $layout-header-text-color;
+ background-color: inherit;
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ margin: 4px;
+ }
+ }
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ margin: 4px;
+ color: rgba(0, 0, 0, 0.5);
+ }
+
+ @media screen and (min-width: $layout-screen-size-threshold + 1px) {
+ line-height: 54px;
+
+ .mdl-layout--no-desktop-drawer-button &,
+ .mdl-layout--fixed-drawer > &,
+ .mdl-layout--no-drawer-button & {
+ display: none;
+ }
+ }
+ }
+
+ .mdl-layout__header {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ box-sizing: border-box;
+ flex-shrink: 0;
+
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ border: none;
+ min-height: $layout-desktop-header-height;
+ max-height: 1000px;
+ z-index: 3;
+
+ background-color: $layout-header-bg-color;
+ color: $layout-header-text-color;
+
+ @include shadow-2dp();
+ @include material-animation-default();
+ transition-property: max-height, box-shadow;
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ min-height: $layout-mobile-header-height;
+ }
+
+ .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > & {
+ margin-left: $layout-drawer-width;
+ width: calc(100% - #{$layout-drawer-width});
+ }
+
+ @media screen and (min-width: $layout-screen-size-threshold + 1px) {
+ .mdl-layout--fixed-drawer > & {
+ .mdl-layout__header-row {
+ padding-left: 40px;
+ }
+ }
+ }
+
+ & > .mdl-layout-icon {
+ position: absolute;
+ left: $layout-header-desktop-indent;
+ top: ($layout-desktop-header-height - $layout-header-icon-size) / 2;
+ height: $layout-header-icon-size;
+ width: $layout-header-icon-size;
+ overflow: hidden;
+ z-index: 3;
+ display: block;
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ left: $layout-header-mobile-indent;
+ top: ($layout-mobile-header-height - $layout-header-icon-size) / 2;
+ }
+ }
+
+ .mdl-layout.has-drawer & > .mdl-layout-icon {
+ display: none;
+ }
+
+ &.is-compact {
+ max-height: $layout-desktop-header-height;
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ max-height: $layout-mobile-header-height;
+ }
+ }
+
+ &.is-compact.has-tabs {
+ height: $layout-desktop-header-height + $layout-tab-bar-height;
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ min-height: $layout-mobile-header-height + $layout-tab-bar-height;
+ }
+ }
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ & {
+ display: none;
+ }
+
+ .mdl-layout--fixed-header > & {
+ display: flex;
+ }
+ }
+ }
+
+ .mdl-layout__header--transparent.mdl-layout__header--transparent {
+ background-color: transparent;
+ box-shadow: none;
+ }
+
+ .mdl-layout__header--seamed {
+ box-shadow: none;
+ }
+
+ .mdl-layout__header--scroll {
+ box-shadow: none;
+ }
+
+ .mdl-layout__header--waterfall {
+ box-shadow: none;
+ overflow: hidden;
+
+ &.is-casting-shadow {
+ @include shadow-2dp();
+ }
+
+ &.mdl-layout__header--waterfall-hide-top {
+ justify-content: flex-end;
+ }
+ }
+
+ .mdl-layout__header-row {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ flex-shrink: 0;
+ box-sizing: border-box;
+ align-self: stretch;
+ align-items: center;
+ height: $layout-header-desktop-row-height;
+ margin: 0;
+ padding: 0 $layout-header-desktop-indent 0 $layout-header-desktop-baseline;
+
+ .mdl-layout--no-drawer-button & {
+ padding-left: $layout-header-desktop-indent;
+ }
+
+ @media screen and (min-width: $layout-screen-size-threshold + 1px) {
+ .mdl-layout--no-desktop-drawer-button & {
+ padding-left: $layout-header-desktop-indent;
+ }
+ }
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ height: $layout-header-mobile-row-height;
+ padding: 0 $layout-header-mobile-indent 0 $layout-header-mobile-baseline;
+
+ .mdl-layout--no-drawer-button & {
+ padding-left: $layout-header-mobile-indent;
+ }
+ }
+
+ & > * {
+ flex-shrink: 0;
+ }
+
+ .mdl-layout__header--scroll & {
+ width: 100%;
+ }
+
+ & .mdl-navigation {
+ margin: 0;
+ padding: 0;
+ height: $layout-header-desktop-row-height;
+ flex-direction: row;
+ align-items: center;
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ height: $layout-header-mobile-row-height;
+ }
+ }
+
+ & .mdl-navigation__link {
+ display: block;
+ color: $layout-header-text-color;
+ line-height: $layout-header-desktop-row-height;
+ padding: 0 24px;
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ line-height: $layout-header-mobile-row-height;
+ padding: 0 $layout-header-mobile-indent;
+ }
+ }
+ }
+
+ // Obfuscator.
+ .mdl-layout__obfuscator {
+ background-color: transparent;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ z-index: 4;
+ visibility: hidden;
+ transition-property: background-color;
+ @include material-animation-default();
+
+ &.is-visible {
+ background-color: rgba(0, 0, 0, 0.5);
+ visibility: visible;
+ }
+
+ @supports (pointer-events: auto) {
+ background-color: rgba(0, 0, 0, 0.5);
+ opacity: 0;
+ transition-property: opacity;
+ visibility: visible;
+ pointer-events: none;
+ &.is-visible {
+ pointer-events: auto;
+ opacity: 1;
+ }
+ }
+ }
+
+
+ // Content.
+ .mdl-layout__content {
+ // Fix IE10 bug.
+ -ms-flex: 0 1 auto;
+
+ position: relative;
+ display: inline-block;
+ overflow-y: auto;
+ overflow-x: hidden;
+ flex-grow: 1;
+ z-index: 1;
+ -webkit-overflow-scrolling: touch;
+
+ .mdl-layout--fixed-drawer > & {
+ margin-left: $layout-drawer-width;
+ }
+
+ .mdl-layout__container.has-scrolling-header & {
+ overflow: visible;
+ }
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ .mdl-layout--fixed-drawer > & {
+ margin-left: 0;
+ }
+
+ .mdl-layout__container.has-scrolling-header & {
+ overflow-y: auto;
+ overflow-x: hidden;
+ }
+ }
+ }
+
+ // Tabs.
+ .mdl-layout__tab-bar {
+ height: $layout-tab-bar-height * 2;
+ margin: 0;
+ width: calc(100% -
+ #{(($layout-header-desktop-baseline - $layout-tab-desktop-padding) * 2)});
+ padding: 0 0 0
+ ($layout-header-desktop-baseline - $layout-tab-desktop-padding);
+ display: flex;
+ background-color: $layout-header-bg-color;
+ overflow-y: hidden;
+ overflow-x: scroll;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ .mdl-layout--no-drawer-button & {
+ padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;
+ width: calc(100% -
+ #{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
+ }
+
+ @media screen and (min-width: $layout-screen-size-threshold + 1px) {
+ .mdl-layout--no-desktop-drawer-button & {
+ padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;
+ width: calc(100% -
+ #{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
+ }
+ }
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ width: calc(100% -
+ #{($layout-header-mobile-baseline - $layout-tab-mobile-padding)});
+ padding: 0 0 0
+ ($layout-header-mobile-baseline - $layout-tab-mobile-padding);
+
+ .mdl-layout--no-drawer-button & {
+ width: calc(100% -
+ #{(($layout-header-mobile-indent - $layout-tab-mobile-padding) * 2)});
+ padding-left: $layout-header-mobile-indent - $layout-tab-mobile-padding;
+ }
+ }
+
+ .mdl-layout--fixed-tabs & {
+ padding: 0;
+ overflow: hidden;
+ width: 100%;
+ }
+ }
+
+ .mdl-layout__tab-bar-container {
+ position: relative;
+ height: $layout-tab-bar-height;
+ width: 100%;
+ border: none;
+ margin: 0;
+ z-index: 2;
+ flex-grow: 0;
+ flex-shrink: 0;
+ overflow: hidden;
+
+ .mdl-layout__container > & {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .mdl-layout__tab-bar-button {
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ height: $layout-tab-bar-height;
+ width: $layout-header-desktop-baseline - $layout-tab-desktop-padding;
+ z-index: 4;
+ text-align: center;
+ background-color: $layout-header-bg-color;
+ color: transparent;
+ cursor: pointer;
+ user-select: none;
+
+ .mdl-layout--no-desktop-drawer-button &,
+ .mdl-layout--no-drawer-button & {
+ width: $layout-header-desktop-indent - $layout-tab-desktop-padding;
+
+ & .material-icons {
+ position: relative;
+ left: ($layout-header-desktop-indent - $layout-tab-desktop-padding - 24px) / 2;
+ }
+ }
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ width: $layout-header-mobile-baseline - $layout-tab-mobile-padding;
+ }
+
+ .mdl-layout--fixed-tabs & {
+ display: none;
+ }
+
+ & .material-icons {
+ line-height: $layout-tab-bar-height;
+ }
+
+ &.is-active {
+ color: $layout-header-text-color;
+ }
+ }
+
+ .mdl-layout__tab-bar-left-button {
+ left: 0;
+ }
+
+ .mdl-layout__tab-bar-right-button {
+ right: 0;
+ }
+
+ .mdl-layout__tab {
+ margin: 0;
+ border: none;
+ padding: 0 $layout-tab-desktop-padding 0 $layout-tab-desktop-padding;
+
+ float: left;
+ position: relative;
+ display: block;
+ flex-grow: 0;
+ flex-shrink: 0;
+
+ text-decoration: none;
+ height: $layout-tab-bar-height;
+ line-height: $layout-tab-bar-height;
+
+ text-align: center;
+ font-weight: 500;
+ font-size: $layout-tab-font-size;
+ text-transform: uppercase;
+
+ color: $layout-header-tab-text-color;
+ overflow: hidden;
+
+ @media screen and (max-width: $layout-screen-size-threshold) {
+ padding: 0 $layout-tab-mobile-padding 0 $layout-tab-mobile-padding;
+ }
+
+ .mdl-layout--fixed-tabs & {
+ float: none;
+ flex-grow: 1;
+ padding: 0;
+ }
+
+ .mdl-layout.is-upgraded &.is-active {
+ color: $layout-header-text-color;
+ }
+
+ .mdl-layout.is-upgraded &.is-active::after {
+ height: $layout-tab-highlight-thickness;
+ width: 100%;
+ display: block;
+ content: " ";
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ background: $layout-header-tab-highlight;
+ animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
+ transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
+ }
+
+ & .mdl-layout__tab-ripple-container {
+ display: block;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ top: 0;
+ z-index: 1;
+ overflow: hidden;
+
+ & .mdl-ripple {
+ background-color: $layout-header-text-color;
+ }
+ }
+ }
+
+ .mdl-layout__tab-panel {
+ display: block;
+
+ .mdl-layout.is-upgraded & {
+ display: none;
+ }
+
+ .mdl-layout.is-upgraded &.is-active {
+ display: block;
+ }
+ }
diff --git a/node_modules/material-design-lite/src/layout/layout.js b/node_modules/material-design-lite/src/layout/layout.js
new file mode 100644
index 0000000..a1cc1dc
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/layout.js
@@ -0,0 +1,574 @@
+/**
+ * @license
+ * 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.
+ */
+
+(function() {
+ 'use strict';
+
+ /**
+ * Class constructor for Layout MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+ var MaterialLayout = function MaterialLayout(element) {
+ this.element_ = element;
+
+ // Initialize instance.
+ this.init();
+ };
+ window['MaterialLayout'] = MaterialLayout;
+
+ /**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+ MaterialLayout.prototype.Constant_ = {
+ MAX_WIDTH: '(max-width: 1024px)',
+ TAB_SCROLL_PIXELS: 100,
+ RESIZE_TIMEOUT: 100,
+
+ MENU_ICON: '',
+ CHEVRON_LEFT: 'chevron_left',
+ CHEVRON_RIGHT: 'chevron_right'
+ };
+
+ /**
+ * Keycodes, for code readability.
+ *
+ * @enum {number}
+ * @private
+ */
+ MaterialLayout.prototype.Keycodes_ = {
+ ENTER: 13,
+ ESCAPE: 27,
+ SPACE: 32
+ };
+
+ /**
+ * Modes.
+ *
+ * @enum {number}
+ * @private
+ */
+ MaterialLayout.prototype.Mode_ = {
+ STANDARD: 0,
+ SEAMED: 1,
+ WATERFALL: 2,
+ SCROLL: 3
+ };
+
+ /**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+ MaterialLayout.prototype.CssClasses_ = {
+ CONTAINER: 'mdl-layout__container',
+ HEADER: 'mdl-layout__header',
+ DRAWER: 'mdl-layout__drawer',
+ CONTENT: 'mdl-layout__content',
+ DRAWER_BTN: 'mdl-layout__drawer-button',
+
+ ICON: 'material-icons',
+
+ JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_CONTAINER: 'mdl-layout__tab-ripple-container',
+ RIPPLE: 'mdl-ripple',
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+
+ HEADER_SEAMED: 'mdl-layout__header--seamed',
+ HEADER_WATERFALL: 'mdl-layout__header--waterfall',
+ HEADER_SCROLL: 'mdl-layout__header--scroll',
+
+ FIXED_HEADER: 'mdl-layout--fixed-header',
+ OBFUSCATOR: 'mdl-layout__obfuscator',
+
+ TAB_BAR: 'mdl-layout__tab-bar',
+ TAB_CONTAINER: 'mdl-layout__tab-bar-container',
+ TAB: 'mdl-layout__tab',
+ TAB_BAR_BUTTON: 'mdl-layout__tab-bar-button',
+ TAB_BAR_LEFT_BUTTON: 'mdl-layout__tab-bar-left-button',
+ TAB_BAR_RIGHT_BUTTON: 'mdl-layout__tab-bar-right-button',
+ TAB_MANUAL_SWITCH: 'mdl-layout__tab-manual-switch',
+ PANEL: 'mdl-layout__tab-panel',
+
+ HAS_DRAWER: 'has-drawer',
+ HAS_TABS: 'has-tabs',
+ HAS_SCROLLING_HEADER: 'has-scrolling-header',
+ CASTING_SHADOW: 'is-casting-shadow',
+ IS_COMPACT: 'is-compact',
+ IS_SMALL_SCREEN: 'is-small-screen',
+ IS_DRAWER_OPEN: 'is-visible',
+ IS_ACTIVE: 'is-active',
+ IS_UPGRADED: 'is-upgraded',
+ IS_ANIMATING: 'is-animating',
+
+ ON_LARGE_SCREEN: 'mdl-layout--large-screen-only',
+ ON_SMALL_SCREEN: 'mdl-layout--small-screen-only'
+
+ };
+
+ /**
+ * Handles scrolling on the content.
+ *
+ * @private
+ */
+ MaterialLayout.prototype.contentScrollHandler_ = function() {
+ if (this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)) {
+ return;
+ }
+
+ var headerVisible =
+ !this.element_.classList.contains(this.CssClasses_.IS_SMALL_SCREEN) ||
+ this.element_.classList.contains(this.CssClasses_.FIXED_HEADER);
+
+ if (this.content_.scrollTop > 0 &&
+ !this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
+ this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
+ this.header_.classList.add(this.CssClasses_.IS_COMPACT);
+ if (headerVisible) {
+ this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
+ }
+ } else if (this.content_.scrollTop <= 0 &&
+ this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
+ this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
+ this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
+ if (headerVisible) {
+ this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
+ }
+ }
+ };
+
+ /**
+ * Handles a keyboard event on the drawer.
+ *
+ * @param {Event} evt The event that fired.
+ * @private
+ */
+ MaterialLayout.prototype.keyboardEventHandler_ = function(evt) {
+ // Only react when the drawer is open.
+ if (evt.keyCode === this.Keycodes_.ESCAPE &&
+ this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) {
+ this.toggleDrawer();
+ }
+ };
+
+ /**
+ * Handles changes in screen size.
+ *
+ * @private
+ */
+ MaterialLayout.prototype.screenSizeHandler_ = function() {
+ if (this.screenSizeMediaQuery_.matches) {
+ this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
+ // Collapse drawer (if any) when moving to a large screen size.
+ if (this.drawer_) {
+ this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
+ this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
+ }
+ }
+ };
+
+ /**
+ * Handles events of drawer button.
+ *
+ * @param {Event} evt The event that fired.
+ * @private
+ */
+ MaterialLayout.prototype.drawerToggleHandler_ = function(evt) {
+ if (evt && (evt.type === 'keydown')) {
+ if (evt.keyCode === this.Keycodes_.SPACE || evt.keyCode === this.Keycodes_.ENTER) {
+ // prevent scrolling in drawer nav
+ evt.preventDefault();
+ } else {
+ // prevent other keys
+ return;
+ }
+ }
+
+ this.toggleDrawer();
+ };
+
+ /**
+ * Handles (un)setting the `is-animating` class
+ *
+ * @private
+ */
+ MaterialLayout.prototype.headerTransitionEndHandler_ = function() {
+ this.header_.classList.remove(this.CssClasses_.IS_ANIMATING);
+ };
+
+ /**
+ * Handles expanding the header on click
+ *
+ * @private
+ */
+ MaterialLayout.prototype.headerClickHandler_ = function() {
+ if (this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
+ this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
+ this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
+ }
+ };
+
+ /**
+ * Reset tab state, dropping active classes
+ *
+ * @private
+ */
+ MaterialLayout.prototype.resetTabState_ = function(tabBar) {
+ for (var k = 0; k < tabBar.length; k++) {
+ tabBar[k].classList.remove(this.CssClasses_.IS_ACTIVE);
+ }
+ };
+
+ /**
+ * Reset panel state, droping active classes
+ *
+ * @private
+ */
+ MaterialLayout.prototype.resetPanelState_ = function(panels) {
+ for (var j = 0; j < panels.length; j++) {
+ panels[j].classList.remove(this.CssClasses_.IS_ACTIVE);
+ }
+ };
+
+ /**
+ * Toggle drawer state
+ *
+ * @public
+ */
+ MaterialLayout.prototype.toggleDrawer = function() {
+ var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
+ this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
+ this.obfuscator_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
+
+ // Set accessibility properties.
+ if (this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) {
+ this.drawer_.setAttribute('aria-hidden', 'false');
+ drawerButton.setAttribute('aria-expanded', 'true');
+ } else {
+ this.drawer_.setAttribute('aria-hidden', 'true');
+ drawerButton.setAttribute('aria-expanded', 'false');
+ }
+ };
+ MaterialLayout.prototype['toggleDrawer'] =
+ MaterialLayout.prototype.toggleDrawer;
+
+ /**
+ * Initialize element.
+ */
+ MaterialLayout.prototype.init = function() {
+ if (this.element_) {
+ var container = document.createElement('div');
+ container.classList.add(this.CssClasses_.CONTAINER);
+
+ var focusedElement = this.element_.querySelector(':focus');
+
+ this.element_.parentElement.insertBefore(container, this.element_);
+ this.element_.parentElement.removeChild(this.element_);
+ container.appendChild(this.element_);
+
+ if (focusedElement) {
+ focusedElement.focus();
+ }
+
+ var directChildren = this.element_.childNodes;
+ var numChildren = directChildren.length;
+ for (var c = 0; c < numChildren; c++) {
+ var child = directChildren[c];
+ if (child.classList &&
+ child.classList.contains(this.CssClasses_.HEADER)) {
+ this.header_ = child;
+ }
+
+ if (child.classList &&
+ child.classList.contains(this.CssClasses_.DRAWER)) {
+ this.drawer_ = child;
+ }
+
+ if (child.classList &&
+ child.classList.contains(this.CssClasses_.CONTENT)) {
+ this.content_ = child;
+ }
+ }
+
+ window.addEventListener('pageshow', function(e) {
+ if (e.persisted) { // when page is loaded from back/forward cache
+ // trigger repaint to let layout scroll in safari
+ this.element_.style.overflowY = 'hidden';
+ requestAnimationFrame(function() {
+ this.element_.style.overflowY = '';
+ }.bind(this));
+ }
+ }.bind(this), false);
+
+ if (this.header_) {
+ this.tabBar_ = this.header_.querySelector('.' + this.CssClasses_.TAB_BAR);
+ }
+
+ var mode = this.Mode_.STANDARD;
+
+ if (this.header_) {
+ if (this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)) {
+ mode = this.Mode_.SEAMED;
+ } else if (this.header_.classList.contains(
+ this.CssClasses_.HEADER_WATERFALL)) {
+ mode = this.Mode_.WATERFALL;
+ this.header_.addEventListener('transitionend',
+ this.headerTransitionEndHandler_.bind(this));
+ this.header_.addEventListener('click',
+ this.headerClickHandler_.bind(this));
+ } else if (this.header_.classList.contains(
+ this.CssClasses_.HEADER_SCROLL)) {
+ mode = this.Mode_.SCROLL;
+ container.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
+ }
+
+ if (mode === this.Mode_.STANDARD) {
+ this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
+ if (this.tabBar_) {
+ this.tabBar_.classList.add(this.CssClasses_.CASTING_SHADOW);
+ }
+ } else if (mode === this.Mode_.SEAMED || mode === this.Mode_.SCROLL) {
+ this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
+ if (this.tabBar_) {
+ this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW);
+ }
+ } else if (mode === this.Mode_.WATERFALL) {
+ // Add and remove shadows depending on scroll position.
+ // Also add/remove auxiliary class for styling of the compact version of
+ // the header.
+ this.content_.addEventListener('scroll',
+ this.contentScrollHandler_.bind(this));
+ this.contentScrollHandler_();
+ }
+ }
+
+ // Add drawer toggling button to our layout, if we have an openable drawer.
+ if (this.drawer_) {
+ var drawerButton = this.element_.querySelector('.' +
+ this.CssClasses_.DRAWER_BTN);
+ if (!drawerButton) {
+ drawerButton = document.createElement('div');
+ drawerButton.setAttribute('aria-expanded', 'false');
+ drawerButton.setAttribute('role', 'button');
+ drawerButton.setAttribute('tabindex', '0');
+ drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
+
+ var drawerButtonIcon = document.createElement('i');
+ drawerButtonIcon.classList.add(this.CssClasses_.ICON);
+ drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON;
+ drawerButton.appendChild(drawerButtonIcon);
+ }
+
+ if (this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)) {
+ //If drawer has ON_LARGE_SCREEN class then add it to the drawer toggle button as well.
+ drawerButton.classList.add(this.CssClasses_.ON_LARGE_SCREEN);
+ } else if (this.drawer_.classList.contains(this.CssClasses_.ON_SMALL_SCREEN)) {
+ //If drawer has ON_SMALL_SCREEN class then add it to the drawer toggle button as well.
+ drawerButton.classList.add(this.CssClasses_.ON_SMALL_SCREEN);
+ }
+
+ drawerButton.addEventListener('click',
+ this.drawerToggleHandler_.bind(this));
+
+ drawerButton.addEventListener('keydown',
+ this.drawerToggleHandler_.bind(this));
+
+ // Add a class if the layout has a drawer, for altering the left padding.
+ // Adds the HAS_DRAWER to the elements since this.header_ may or may
+ // not be present.
+ this.element_.classList.add(this.CssClasses_.HAS_DRAWER);
+
+ // If we have a fixed header, add the button to the header rather than
+ // the layout.
+ if (this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)) {
+ this.header_.insertBefore(drawerButton, this.header_.firstChild);
+ } else {
+ this.element_.insertBefore(drawerButton, this.content_);
+ }
+
+ var obfuscator = document.createElement('div');
+ obfuscator.classList.add(this.CssClasses_.OBFUSCATOR);
+ this.element_.appendChild(obfuscator);
+ obfuscator.addEventListener('click',
+ this.drawerToggleHandler_.bind(this));
+ this.obfuscator_ = obfuscator;
+
+ this.drawer_.addEventListener('keydown', this.keyboardEventHandler_.bind(this));
+ this.drawer_.setAttribute('aria-hidden', 'true');
+ }
+
+ // Keep an eye on screen size, and add/remove auxiliary class for styling
+ // of small screens.
+ this.screenSizeMediaQuery_ = window.matchMedia(
+ /** @type {string} */ (this.Constant_.MAX_WIDTH));
+ this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
+ this.screenSizeHandler_();
+
+ // Initialize tabs, if any.
+ if (this.header_ && this.tabBar_) {
+ this.element_.classList.add(this.CssClasses_.HAS_TABS);
+
+ var tabContainer = document.createElement('div');
+ tabContainer.classList.add(this.CssClasses_.TAB_CONTAINER);
+ this.header_.insertBefore(tabContainer, this.tabBar_);
+ this.header_.removeChild(this.tabBar_);
+
+ var leftButton = document.createElement('div');
+ leftButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
+ leftButton.classList.add(this.CssClasses_.TAB_BAR_LEFT_BUTTON);
+ var leftButtonIcon = document.createElement('i');
+ leftButtonIcon.classList.add(this.CssClasses_.ICON);
+ leftButtonIcon.textContent = this.Constant_.CHEVRON_LEFT;
+ leftButton.appendChild(leftButtonIcon);
+ leftButton.addEventListener('click', function() {
+ this.tabBar_.scrollLeft -= this.Constant_.TAB_SCROLL_PIXELS;
+ }.bind(this));
+
+ var rightButton = document.createElement('div');
+ rightButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
+ rightButton.classList.add(this.CssClasses_.TAB_BAR_RIGHT_BUTTON);
+ var rightButtonIcon = document.createElement('i');
+ rightButtonIcon.classList.add(this.CssClasses_.ICON);
+ rightButtonIcon.textContent = this.Constant_.CHEVRON_RIGHT;
+ rightButton.appendChild(rightButtonIcon);
+ rightButton.addEventListener('click', function() {
+ this.tabBar_.scrollLeft += this.Constant_.TAB_SCROLL_PIXELS;
+ }.bind(this));
+
+ tabContainer.appendChild(leftButton);
+ tabContainer.appendChild(this.tabBar_);
+ tabContainer.appendChild(rightButton);
+
+ // Add and remove tab buttons depending on scroll position and total
+ // window size.
+ var tabUpdateHandler = function() {
+ if (this.tabBar_.scrollLeft > 0) {
+ leftButton.classList.add(this.CssClasses_.IS_ACTIVE);
+ } else {
+ leftButton.classList.remove(this.CssClasses_.IS_ACTIVE);
+ }
+
+ if (this.tabBar_.scrollLeft <
+ this.tabBar_.scrollWidth - this.tabBar_.offsetWidth) {
+ rightButton.classList.add(this.CssClasses_.IS_ACTIVE);
+ } else {
+ rightButton.classList.remove(this.CssClasses_.IS_ACTIVE);
+ }
+ }.bind(this);
+
+ this.tabBar_.addEventListener('scroll', tabUpdateHandler);
+ tabUpdateHandler();
+
+ // Update tabs when the window resizes.
+ var windowResizeHandler = function() {
+ // Use timeouts to make sure it doesn't happen too often.
+ if (this.resizeTimeoutId_) {
+ clearTimeout(this.resizeTimeoutId_);
+ }
+ this.resizeTimeoutId_ = setTimeout(function() {
+ tabUpdateHandler();
+ this.resizeTimeoutId_ = null;
+ }.bind(this), /** @type {number} */ (this.Constant_.RESIZE_TIMEOUT));
+ }.bind(this);
+
+ window.addEventListener('resize', windowResizeHandler);
+
+ if (this.tabBar_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
+ this.tabBar_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+ }
+
+ // Select element tabs, document panels
+ var tabs = this.tabBar_.querySelectorAll('.' + this.CssClasses_.TAB);
+ var panels = this.content_.querySelectorAll('.' + this.CssClasses_.PANEL);
+
+ // Create new tabs for each tab element
+ for (var i = 0; i < tabs.length; i++) {
+ new MaterialLayoutTab(tabs[i], tabs, panels, this);
+ }
+ }
+
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+ }
+ };
+
+ /**
+ * Constructor for an individual tab.
+ *
+ * @constructor
+ * @param {HTMLElement} tab The HTML element for the tab.
+ * @param {!Array<HTMLElement>} tabs Array with HTML elements for all tabs.
+ * @param {!Array<HTMLElement>} panels Array with HTML elements for all panels.
+ * @param {MaterialLayout} layout The MaterialLayout object that owns the tab.
+ */
+ function MaterialLayoutTab(tab, tabs, panels, layout) {
+
+ /**
+ * Auxiliary method to programmatically select a tab in the UI.
+ */
+ function selectTab() {
+ var href = tab.href.split('#')[1];
+ var panel = layout.content_.querySelector('#' + href);
+ layout.resetTabState_(tabs);
+ layout.resetPanelState_(panels);
+ tab.classList.add(layout.CssClasses_.IS_ACTIVE);
+ panel.classList.add(layout.CssClasses_.IS_ACTIVE);
+ }
+
+ if (layout.tabBar_.classList.contains(
+ layout.CssClasses_.JS_RIPPLE_EFFECT)) {
+ var rippleContainer = document.createElement('span');
+ rippleContainer.classList.add(layout.CssClasses_.RIPPLE_CONTAINER);
+ rippleContainer.classList.add(layout.CssClasses_.JS_RIPPLE_EFFECT);
+ var ripple = document.createElement('span');
+ ripple.classList.add(layout.CssClasses_.RIPPLE);
+ rippleContainer.appendChild(ripple);
+ tab.appendChild(rippleContainer);
+ }
+
+ if (!layout.tabBar_.classList.contains(
+ layout.CssClasses_.TAB_MANUAL_SWITCH)) {
+ tab.addEventListener('click', function(e) {
+ if (tab.getAttribute('href').charAt(0) === '#') {
+ e.preventDefault();
+ selectTab();
+ }
+ });
+ }
+
+ tab.show = selectTab;
+ }
+ window['MaterialLayoutTab'] = MaterialLayoutTab;
+
+ // The component registers itself. It can assume componentHandler is available
+ // in the global scope.
+ componentHandler.register({
+ constructor: MaterialLayout,
+ classAsString: 'MaterialLayout',
+ cssClass: 'mdl-js-layout'
+ });
+})();
diff --git a/node_modules/material-design-lite/src/layout/snippets/fixed-drawer-demo.html b/node_modules/material-design-lite/src/layout/snippets/fixed-drawer-demo.html
new file mode 100644
index 0000000..6a975c8
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/fixed-drawer-demo.html
@@ -0,0 +1,15 @@
+<style>
+.demo-layout.demo-layout__fixed-drawer {
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+ 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ width: 100%;
+ position: relative;
+ height: 300px;
+}
+.demo-layout.demo-layout__fixed-drawer .mdl-layout__content {
+ background: white;
+}
+</style>
+
+{% include "fixed-drawer.html" %}
diff --git a/node_modules/material-design-lite/src/layout/snippets/fixed-drawer.html b/node_modules/material-design-lite/src/layout/snippets/fixed-drawer.html
new file mode 100644
index 0000000..d03455e
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/fixed-drawer.html
@@ -0,0 +1,15 @@
+<!-- No header, and the drawer stays open on larger screens (fixed drawer). -->
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout-title">Title</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ <main class="mdl-layout__content">
+ <div class="page-content"><!-- Your content goes here --></div>
+ </main>
+</div>
diff --git a/node_modules/material-design-lite/src/layout/snippets/fixed-header-demo.html b/node_modules/material-design-lite/src/layout/snippets/fixed-header-demo.html
new file mode 100644
index 0000000..992953a
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/fixed-header-demo.html
@@ -0,0 +1,15 @@
+<style>
+.demo-layout.demo-layout__fixed-header {
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+ 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ width: 100%;
+ position: relative;
+ height: 300px;
+}
+.demo-layout.demo-layout__fixed-header .mdl-layout__content {
+ background: white;
+}
+</style>
+
+{% include "fixed-header.html" %}
diff --git a/node_modules/material-design-lite/src/layout/snippets/fixed-header-drawer-demo.html b/node_modules/material-design-lite/src/layout/snippets/fixed-header-drawer-demo.html
new file mode 100644
index 0000000..389199e
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/fixed-header-drawer-demo.html
@@ -0,0 +1,15 @@
+<style>
+.demo-layout.demo-layout__fixed-header-drawer {
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+ 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ width: 100%;
+ position: relative;
+ height: 300px;
+}
+.demo-layout.demo-layout__fixed-header-drawer.mdl-layout__content {
+ background: white;
+}
+</style>
+
+{% include "fixed-header-drawer.html" %}
diff --git a/node_modules/material-design-lite/src/layout/snippets/fixed-header-drawer.html b/node_modules/material-design-lite/src/layout/snippets/fixed-header-drawer.html
new file mode 100644
index 0000000..9d85c30
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/fixed-header-drawer.html
@@ -0,0 +1,33 @@
+<!-- The drawer is always open in large screens. The header is always shown,
+ even in small screens. -->
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
+ 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">
+ <label class="mdl-button mdl-js-button mdl-button--icon"
+ for="fixed-header-drawer-exp">
+ <i class="material-icons">search</i>
+ </label>
+ <div class="mdl-textfield__expandable-holder">
+ <input class="mdl-textfield__input" type="text" name="sample"
+ id="fixed-header-drawer-exp">
+ </div>
+ </div>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout-title">Title</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ <main class="mdl-layout__content">
+ <div class="page-content"><!-- Your content goes here --></div>
+ </main>
+</div>
diff --git a/node_modules/material-design-lite/src/layout/snippets/fixed-header.html b/node_modules/material-design-lite/src/layout/snippets/fixed-header.html
new file mode 100644
index 0000000..43ecea3
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/fixed-header.html
@@ -0,0 +1,30 @@
+<!-- Always shows a header, even in smaller screens. -->
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout__header-row">
+ <!-- Title -->
+ <span class="mdl-layout-title">Title</span>
+ <!-- Add spacer, to align navigation to the right -->
+ <div class="mdl-layout-spacer"></div>
+ <!-- Navigation. We hide it in small screens. -->
+ <nav class="mdl-navigation mdl-layout--large-screen-only">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout-title">Title</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ <main class="mdl-layout__content">
+ <div class="page-content"><!-- Your content goes here --></div>
+ </main>
+</div>
diff --git a/node_modules/material-design-lite/src/layout/snippets/fixed-tabs-demo.html b/node_modules/material-design-lite/src/layout/snippets/fixed-tabs-demo.html
new file mode 100644
index 0000000..7091a09
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/fixed-tabs-demo.html
@@ -0,0 +1,15 @@
+<style>
+.demo-layout.demo-layout__fixed-tabs {
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+ 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ width: 100%;
+ position: relative;
+ height: 300px;
+}
+.demo-layout.demo-layout__fixed-tabs .mdl-layout__content {
+ background: white;
+}
+</style>
+
+{% include "fixed-tabs.html" %}
diff --git a/node_modules/material-design-lite/src/layout/snippets/fixed-tabs.html b/node_modules/material-design-lite/src/layout/snippets/fixed-tabs.html
new file mode 100644
index 0000000..d9e7521
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/fixed-tabs.html
@@ -0,0 +1,30 @@
+<!-- Simple header with fixed tabs. -->
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
+ mdl-layout--fixed-tabs">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout__header-row">
+ <!-- Title -->
+ <span class="mdl-layout-title">Title</span>
+ </div>
+ <!-- Tabs -->
+ <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
+ <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
+ <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
+ <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout-title">Title</span>
+ </div>
+ <main class="mdl-layout__content">
+ <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
+ <div class="page-content"><!-- Your content goes here --></div>
+ </section>
+ <section class="mdl-layout__tab-panel" id="fixed-tab-2">
+ <div class="page-content"><!-- Your content goes here --></div>
+ </section>
+ <section class="mdl-layout__tab-panel" id="fixed-tab-3">
+ <div class="page-content"><!-- Your content goes here --></div>
+ </section>
+ </main>
+</div>
diff --git a/node_modules/material-design-lite/src/layout/snippets/scrollable-tabs-demo.html b/node_modules/material-design-lite/src/layout/snippets/scrollable-tabs-demo.html
new file mode 100644
index 0000000..848dcdd
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/scrollable-tabs-demo.html
@@ -0,0 +1,15 @@
+<style>
+.demo-layout.demo-layout__scrollable-tabs {
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+ 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ width: 100%;
+ position: relative;
+ height: 300px;
+}
+.demo-layout.demo-layout__scrollable-tabs .mdl-layout__content {
+ background: white;
+}
+</style>
+
+{% include "scrollable-tabs.html" %}
diff --git a/node_modules/material-design-lite/src/layout/snippets/scrollable-tabs.html b/node_modules/material-design-lite/src/layout/snippets/scrollable-tabs.html
new file mode 100644
index 0000000..822863a
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/scrollable-tabs.html
@@ -0,0 +1,41 @@
+<!-- Simple header with scrollable tabs. -->
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout__header-row">
+ <!-- Title -->
+ <span class="mdl-layout-title">Title</span>
+ </div>
+ <!-- Tabs -->
+ <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
+ <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
+ <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
+ <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
+ <a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
+ <a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
+ <a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout-title">Title</span>
+ </div>
+ <main class="mdl-layout__content">
+ <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
+ <div class="page-content"><!-- Your content goes here --></div>
+ </section>
+ <section class="mdl-layout__tab-panel" id="scroll-tab-2">
+ <div class="page-content"><!-- Your content goes here --></div>
+ </section>
+ <section class="mdl-layout__tab-panel" id="scroll-tab-3">
+ <div class="page-content"><!-- Your content goes here --></div>
+ </section>
+ <section class="mdl-layout__tab-panel" id="scroll-tab-4">
+ <div class="page-content"><!-- Your content goes here --></div>
+ </section>
+ <section class="mdl-layout__tab-panel" id="scroll-tab-5">
+ <div class="page-content"><!-- Your content goes here --></div>
+ </section>
+ <section class="mdl-layout__tab-panel" id="scroll-tab-6">
+ <div class="page-content"><!-- Your content goes here --></div>
+ </section>
+ </main>
+</div>
diff --git a/node_modules/material-design-lite/src/layout/snippets/scrolling-header-demo.html b/node_modules/material-design-lite/src/layout/snippets/scrolling-header-demo.html
new file mode 100644
index 0000000..7a01533
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/scrolling-header-demo.html
@@ -0,0 +1,16 @@
+<style>
+.demo-layout.demo-layout__scrolling-header {
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+ 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ width: 100%;
+ position: relative;
+ height: 300px;
+}
+.demo-layout.demo-layout__scrolling-header .page-content {
+ height: 600px;
+ background: white;
+}
+</style>
+
+{% include "scrolling-header.html" %}
diff --git a/node_modules/material-design-lite/src/layout/snippets/scrolling-header.html b/node_modules/material-design-lite/src/layout/snippets/scrolling-header.html
new file mode 100644
index 0000000..6d798a7
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/scrolling-header.html
@@ -0,0 +1,31 @@
+<!-- Uses a header that scrolls with the text, rather than staying
+ locked at the top -->
+<div class="mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header mdl-layout__header--scroll">
+ <div class="mdl-layout__header-row">
+ <!-- Title -->
+ <span class="mdl-layout-title">Title</span>
+ <!-- Add spacer, to align navigation to the right -->
+ <div class="mdl-layout-spacer"></div>
+ <!-- Navigation -->
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout-title">Title</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ <main class="mdl-layout__content">
+ <div class="page-content"><!-- Your content goes here --></div>
+ </main>
+</div>
diff --git a/node_modules/material-design-lite/src/layout/snippets/transparent-demo.html b/node_modules/material-design-lite/src/layout/snippets/transparent-demo.html
new file mode 100644
index 0000000..75dc854
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/transparent-demo.html
@@ -0,0 +1,12 @@
+<style>
+.demo-layout.demo-layout__transparent {
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+ 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ width: 100%;
+ position: relative;
+ height: 300px;
+}
+</style>
+
+{% include "transparent.html" %}
diff --git a/node_modules/material-design-lite/src/layout/snippets/transparent.html b/node_modules/material-design-lite/src/layout/snippets/transparent.html
new file mode 100644
index 0000000..752b8b8
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/transparent.html
@@ -0,0 +1,41 @@
+<!-- Uses a transparent header that draws on top of the layout's background -->
+<style>
+.demo-layout-transparent {
+ background: url('../assets/demos/transparent.jpg') center / cover;
+}
+.demo-layout-transparent .mdl-layout__header,
+.demo-layout-transparent .mdl-layout__drawer-button {
+ /* This background is dark, so we set text to white. Use 87% black instead if
+ your background is light. */
+ color: white;
+}
+</style>
+
+<div class="demo-layout-transparent mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header mdl-layout__header--transparent">
+ <div class="mdl-layout__header-row">
+ <!-- Title -->
+ <span class="mdl-layout-title">Title</span>
+ <!-- Add spacer, to align navigation to the right -->
+ <div class="mdl-layout-spacer"></div>
+ <!-- Navigation -->
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout-title">Title</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ <main class="mdl-layout__content">
+ </main>
+</div>
diff --git a/node_modules/material-design-lite/src/layout/snippets/waterfall-header-demo.html b/node_modules/material-design-lite/src/layout/snippets/waterfall-header-demo.html
new file mode 100644
index 0000000..15cb494
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/waterfall-header-demo.html
@@ -0,0 +1,16 @@
+<style>
+.demo-layout.demo-layout__waterfall-header {
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+ 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ width: 100%;
+ position: relative;
+ height: 300px;
+}
+.demo-layout.demo-layout__waterfall-header .page-content {
+ height: 600px;
+ background: white;
+}
+</style>
+
+{% include "waterfall-header.html" %}
diff --git a/node_modules/material-design-lite/src/layout/snippets/waterfall-header.html b/node_modules/material-design-lite/src/layout/snippets/waterfall-header.html
new file mode 100644
index 0000000..0b2e492
--- /dev/null
+++ b/node_modules/material-design-lite/src/layout/snippets/waterfall-header.html
@@ -0,0 +1,51 @@
+<!-- Uses a header that contracts as the page scrolls down. -->
+<style>
+.demo-layout-waterfall .mdl-layout__header-row .mdl-navigation__link:last-of-type {
+ padding-right: 0;
+}
+</style>
+
+<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
+ <header class="mdl-layout__header mdl-layout__header--waterfall">
+ <!-- Top row, always visible -->
+ <div class="mdl-layout__header-row">
+ <!-- Title -->
+ <span class="mdl-layout-title">Title</span>
+ <div class="mdl-layout-spacer"></div>
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
+ mdl-textfield--floating-label mdl-textfield--align-right">
+ <label class="mdl-button mdl-js-button mdl-button--icon"
+ for="waterfall-exp">
+ <i class="material-icons">search</i>
+ </label>
+ <div class="mdl-textfield__expandable-holder">
+ <input class="mdl-textfield__input" type="text" name="sample"
+ id="waterfall-exp">
+ </div>
+ </div>
+ </div>
+ <!-- Bottom row, not visible on scroll -->
+ <div class="mdl-layout__header-row">
+ <div class="mdl-layout-spacer"></div>
+ <!-- Navigation -->
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout-title">Title</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ <main class="mdl-layout__content">
+ <div class="page-content"><!-- Your content goes here --></div>
+ </main>
+</div>