Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/card/README.md b/node_modules/material-design-lite/src/card/README.md
new file mode 100755
index 0000000..2611892
--- /dev/null
+++ b/node_modules/material-design-lite/src/card/README.md
@@ -0,0 +1,128 @@
+## Introduction
+
+The Material Design Lite (MDL) **card** component is a user interface element representing a virtual piece of paper that contains related data — such as a photo, some text, and a link — that are all about a single subject.
+
+Cards are a convenient means of coherently displaying related content that is composed of different types of objects. They are also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length. Cards have a constant width and a variable height, depending on their content.
+
+Cards are a fairly new feature in user interfaces, and allow users an access point to more complex and detailed information. Their design and use is an important factor in the overall user experience. See the card component's [Material Design specifications page](http://www.google.com/design/spec/components/cards.html) for details.
+
+### To include an MDL **card** component:
+
+ 1. Code a `<div>` element; this is the "outer" container, intended to hold all of the card's content.
+```html
+<div>
+</div>
+```
+ 2. Inside the div, code one or more "inner" divs, one for each desired content block. A card containing a title, an image, some text, and an action bar would contain four "inner" divs, all siblings.
+```html
+<div>
+ <div>
+ ...
+ </div>
+ <div>
+ ...
+ </div>
+ <div>
+ ...
+ </div>
+ <div>
+ ...
+ </div>
+</div>
+```
+ 3. Add one or more MDL classes, separated by spaces, to the "outer" div and the "inner" divs (depending on their intended use) using the `class` attribute.
+```html
+<div class="mdl-card">
+ <div class="mdl-card__title">
+ ...
+ </div>
+ <div class="mdl-card__media">
+ ...
+ </div>
+ <div class="mdl-card__supporting-text">
+ ...
+ </div>
+ <div class="mdl-card__actions">
+ ...
+ </div>
+</div>
+```
+ 4. Add content to each "inner" div, again depending on its intended use, using standard HTML elements and, optionally, additional MDL classes.
+```html
+<div class="mdl-card">
+ <div class="mdl-card__title">
+ <h2 class="mdl-card__title-text">title Text Goes Here</h2>
+ </div>
+ <div class="mdl-card__media">
+ <img src="photo.jpg" width="220" height="140" border="0" alt="" style="padding:20px;">
+ </div>
+ <div class="mdl-card__supporting-text">
+ This text might describe the photo and provide further information, such as where and
+ when it was taken.
+ </div>
+ <div class="mdl-card__actions">
+ <a href="(URL or function)">Related Action</a>
+ </div>
+</div>
+```
+
+The card component is ready for use.
+
+#### Examples
+
+A card (no shadow) with a title, image, text, and action.
+
+```html
+<div class="mdl-card">
+ <div class="mdl-card__title">
+ <h2 class="mdl-card__title-text">Auckland Sky Tower<br>Auckland, New Zealand</h2>
+ </div>
+ <div class="mdl-card__media">
+ <img src="skytower.jpg" width="173" height="157" border="0" alt=""
+ style="padding:10px;">
+ </div>
+ <div class="mdl-card__supporting-text">
+ The Sky Tower is an observation and telecommunications tower located in Auckland,
+ New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
+ in the Southern Hemisphere.
+ </div>
+ <div class="mdl-card__actions">
+ <a href="http://en.wikipedia.org/wiki/Sky_Tower_%28Auckland%29">Wikipedia entry</a>
+ </div>
+</div>
+```
+
+Card (level-3 shadow) with an image, caption, and text:
+
+```html
+<div class="mdl-card mdl-shadow--4dp">
+ <div class="mdl-card__media"><img src="skytower.jpg" width="173" height="157" border="0"
+ alt="" style="padding:10px;">
+ </div>
+ <div class="mdl-card__supporting-text">
+ Auckland Sky Tower, taken March 24th, 2014
+ </div>
+ <div class="mdl-card__supporting-text">
+ The Sky Tower is an observation and telecommunications tower located in Auckland,
+ New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
+ in the Southern Hemisphere.
+ </div>
+</div>
+```
+
+## Configuration options
+
+The MDL CSS classes apply various predefined visual and behavioral enhancements to the card. The table below lists the available classes and their effects.
+
+| MDL class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-card` | Defines div element as an MDL card container | Required on "outer" div |
+| `mdl-card--border` | Adds a border to the card section that it's applied to | Used on the "inner" divs |
+| `mdl-shadow--2dp through mdl-shadow--16dp` | Assigns variable shadow depths (2, 3, 4, 6, 8, or 16) to card | Optional, goes on "outer" div; if omitted, no shadow is present |
+| `mdl-card__title` | Defines div as a card title container | Required on "inner" title div |
+| `mdl-card__title-text` | Assigns appropriate text characteristics to card title | Required on head tag (H1 - H6) inside title div |
+| `mdl-card__subtitle-text` | Assigns text characteristics to a card subtitle | Optional. Should be a child of the title element. |
+| `mdl-card__media` | Defines div as a card media container | Required on "inner" media div |
+| `mdl-card__supporting-text` | Defines div as a card body text container and assigns appropriate text characteristics to body text | Required on "inner" body text div; text goes directly inside the div with no intervening containers |
+| `mdl-card__actions` | Defines div as a card actions container and assigns appropriate text characteristics to actions text | Required on "inner" actions div; content goes directly inside the div with no intervening containers |
+| `mdl-card__menu` | Defines element as top right menu button | Optional. Should be a child of the `mdl-card` element. |
diff --git a/node_modules/material-design-lite/src/card/_card.scss b/node_modules/material-design-lite/src/card/_card.scss
new file mode 100644
index 0000000..6f8c19f
--- /dev/null
+++ b/node_modules/material-design-lite/src/card/_card.scss
@@ -0,0 +1,115 @@
+/**
+ * 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-card {
+ display: flex;
+ flex-direction: column;
+ font-size: $card-font-size;
+ font-weight: 400;
+ min-height: $card-height;
+ overflow: hidden;
+ width: $card-width;
+ z-index: $card-z-index;
+ position: relative;
+ background: $card-background-color;
+ border-radius: 2px;
+ box-sizing: border-box;
+}
+
+.mdl-card__media {
+ background-color: $card-image-placeholder-color;
+ background-repeat: repeat;
+ background-position: 50% 50%;
+ background-size: cover;
+ background-origin: padding-box;
+ background-attachment: scroll;
+ box-sizing: border-box;
+}
+
+.mdl-card__title {
+ align-items: center;
+ color: $card-text-color;
+ display: block;
+ display: flex;
+ justify-content: stretch;
+ line-height: normal;
+ padding: $card-vertical-padding $card-horizontal-padding;
+ perspective-origin: $card-title-perspective-origin-x $card-title-perspective-origin-y;
+ transform-origin: $card-title-transform-origin-x $card-title-transform-origin-y;
+ box-sizing: border-box;
+
+ &.mdl-card--border {
+ border-bottom: 1px solid $card-border-color;
+ }
+}
+
+.mdl-card__title-text {
+ align-self: flex-end;
+ color: inherit;
+ display: block;
+ display: flex;
+ font-size: $card-title-font-size;
+ font-weight: $card-title-text-font-weight;
+ line-height: normal;
+ overflow: hidden;
+ transform-origin: $card-title-text-transform-origin-x $card-title-text-transform-origin-y;
+ margin: 0;
+}
+
+.mdl-card__subtitle-text {
+ font-size: $card-subtitle-font-size;
+ color: $card-subtitle-color;
+ margin: 0;
+}
+
+.mdl-card__supporting-text {
+ color: $card-supporting-text-text-color;
+ font-size: $card-supporting-text-font-size;
+ line-height: $card-supporting-text-line-height;
+ overflow: hidden;
+ padding: $card-vertical-padding $card-horizontal-padding;
+ width: 90%;
+
+ &.mdl-card--border {
+ border-bottom: 1px solid $card-border-color;
+ }
+}
+
+.mdl-card__actions {
+ font-size: $card-actions-font-size;
+ line-height: normal;
+ width: 100%;
+ background-color: rgba(0,0,0,0);
+ padding: 8px;
+ box-sizing: border-box;
+
+ &.mdl-card--border {
+ border-top: 1px solid $card-border-color;
+ }
+}
+
+.mdl-card--expand {
+ flex-grow: 1;
+}
+
+
+.mdl-card__menu {
+ position: absolute;
+ right: 16px;
+ top: 16px;
+}
diff --git a/node_modules/material-design-lite/src/card/snippets/event.html b/node_modules/material-design-lite/src/card/snippets/event.html
new file mode 100644
index 0000000..b5407c3
--- /dev/null
+++ b/node_modules/material-design-lite/src/card/snippets/event.html
@@ -0,0 +1,47 @@
+<!-- Event card -->
+<style>
+.demo-card-event.mdl-card {
+ width: 256px;
+ height: 256px;
+ background: #3E4EB8;
+}
+.demo-card-event > .mdl-card__actions {
+ border-color: rgba(255, 255, 255, 0.2);
+}
+.demo-card-event > .mdl-card__title {
+ align-items: flex-start;
+}
+.demo-card-event > .mdl-card__title > h4 {
+ margin-top: 0;
+}
+.demo-card-event > .mdl-card__actions {
+ display: flex;
+ box-sizing:border-box;
+ align-items: center;
+}
+.demo-card-event > .mdl-card__actions > .material-icons {
+ padding-right: 10px;
+}
+.demo-card-event > .mdl-card__title,
+.demo-card-event > .mdl-card__actions,
+.demo-card-event > .mdl-card__actions > .mdl-button {
+ color: #fff;
+}
+</style>
+
+<div class="demo-card-event mdl-card mdl-shadow--2dp">
+ <div class="mdl-card__title mdl-card--expand">
+ <h4>
+ Featured event:<br>
+ May 24, 2016<br>
+ 7-11pm
+ </h4>
+ </div>
+ <div class="mdl-card__actions mdl-card--border">
+ <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+ Add to Calendar
+ </a>
+ <div class="mdl-layout-spacer"></div>
+ <i class="material-icons">event</i>
+ </div>
+</div>
diff --git a/node_modules/material-design-lite/src/card/snippets/image.html b/node_modules/material-design-lite/src/card/snippets/image.html
new file mode 100644
index 0000000..f9cb645
--- /dev/null
+++ b/node_modules/material-design-lite/src/card/snippets/image.html
@@ -0,0 +1,25 @@
+<!-- Image card -->
+<style>
+.demo-card-image.mdl-card {
+ width: 256px;
+ height: 256px;
+ background: url('../assets/demos/image_card.jpg') center / cover;
+}
+.demo-card-image > .mdl-card__actions {
+ height: 52px;
+ padding: 16px;
+ background: rgba(0, 0, 0, 0.2);
+}
+.demo-card-image__filename {
+ color: #fff;
+ font-size: 14px;
+ font-weight: 500;
+}
+</style>
+
+<div class="demo-card-image mdl-card mdl-shadow--2dp">
+ <div class="mdl-card__title mdl-card--expand"></div>
+ <div class="mdl-card__actions">
+ <span class="demo-card-image__filename">Image.jpg</span>
+ </div>
+</div>
diff --git a/node_modules/material-design-lite/src/card/snippets/square.html b/node_modules/material-design-lite/src/card/snippets/square.html
new file mode 100644
index 0000000..93d13f5
--- /dev/null
+++ b/node_modules/material-design-lite/src/card/snippets/square.html
@@ -0,0 +1,27 @@
+<!-- Square card -->
+<style>
+.demo-card-square.mdl-card {
+ width: 320px;
+ height: 320px;
+}
+.demo-card-square > .mdl-card__title {
+ color: #fff;
+ background:
+ url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
+}
+</style>
+
+<div class="demo-card-square mdl-card mdl-shadow--2dp">
+ <div class="mdl-card__title mdl-card--expand">
+ <h2 class="mdl-card__title-text">Update</h2>
+ </div>
+ <div class="mdl-card__supporting-text">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Aenan convallis.
+ </div>
+ <div class="mdl-card__actions mdl-card--border">
+ <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+ View Updates
+ </a>
+ </div>
+</div>
diff --git a/node_modules/material-design-lite/src/card/snippets/wide.html b/node_modules/material-design-lite/src/card/snippets/wide.html
new file mode 100644
index 0000000..0ee9240
--- /dev/null
+++ b/node_modules/material-design-lite/src/card/snippets/wide.html
@@ -0,0 +1,34 @@
+<!-- Wide card with share menu button -->
+<style>
+.demo-card-wide.mdl-card {
+ width: 512px;
+}
+.demo-card-wide > .mdl-card__title {
+ color: #fff;
+ height: 176px;
+ background: url('../assets/demos/welcome_card.jpg') center / cover;
+}
+.demo-card-wide > .mdl-card__menu {
+ color: #fff;
+}
+</style>
+
+<div class="demo-card-wide mdl-card mdl-shadow--2dp">
+ <div class="mdl-card__title">
+ <h2 class="mdl-card__title-text">Welcome</h2>
+ </div>
+ <div class="mdl-card__supporting-text">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Mauris sagittis pellentesque lacus eleifend lacinia...
+ </div>
+ <div class="mdl-card__actions mdl-card--border">
+ <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+ Get Started
+ </a>
+ </div>
+ <div class="mdl-card__menu">
+ <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+ <i class="material-icons">share</i>
+ </button>
+ </div>
+</div>