Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/button/README.md b/node_modules/material-design-lite/src/button/README.md
new file mode 100755
index 0000000..1ad5186
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/README.md
@@ -0,0 +1,59 @@
+## Introduction
+
+The Material Design Lite (MDL) **button** component is an enhanced version of the standard HTML `<button>` element. A button consists of text and/or an image that clearly communicates what action will occur when the user clicks or touches it. The MDL button component provides various types of buttons, and allows you to add both display and click effects.
+
+Buttons are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the button component's [Material Design specifications page](http://www.google.com/design/spec/components/buttons.html) for details.
+
+The available button display types are *flat* (default), *raised*, *fab*, *mini-fab*, and *icon*; any of these types may be plain (light gray) or *colored*, and may be initially or programmatically *disabled*. The *fab*, *mini-fab*, and *icon* button types typically use a small image as their caption rather than text.
+
+### To include an MDL **button** component:
+
+ 1. Code a `<button>` element. Include any desired attributes and values, such as an id or event handler, and add a text caption or image as appropriate.
+```html
+<button>Save</button>
+```
+ 2. Add one or more MDL classes, separated by spaces, to the button using the `class` attribute.
+```html
+<button class="mdl-button mdl-js-button mdl-button--raised">Save</button>
+```
+
+The button component is ready for use.
+
+#### Examples
+
+A button with the "raised" effect.
+```html
+<button class="mdl-button mdl-js-button mdl-button--raised">Save</button>
+```
+
+A button with the "fab" effect.
+```html
+<button class="mdl-button mdl-js-button mdl-button--fab">OK</button>
+```
+
+A button with the "icon" and "colored" effects.
+```html
+<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">?</button>
+```
+
+
+## Configuration options
+
+The MDL CSS classes apply various predefined visual and behavioral enhancements to the button. The table below lists the available classes and their effects.
+
+| MDL class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-button` | Defines button as an MDL component | Required |
+| `mdl-js-button` | Assigns basic MDL behavior to button | Required |
+| (none) | Applies *flat* display effect to button (default) | |
+| `mdl-button--raised` | Applies *raised* display effect | Mutually exclusive with *fab*, *mini-fab*, and *icon* |
+| `mdl-button--fab` | Applies *fab* (circular) display effect | Mutually exclusive with *raised*, *mini-fab*, and *icon* |
+| `mdl-button--mini-fab` | Applies *mini-fab* (small fab circular) display effect | Mutually exclusive with *raised*, *fab*, and *icon* |
+| `mdl-button--icon` | Applies *icon* (small plain circular) display effect | Mutually exclusive with *raised*, *fab*, and *mini-fab* |
+| `mdl-button--colored` | Applies *colored* display effect (primary or accent color, depending on the type of button) | Colors are defined in `material.min.css` |
+| `mdl-button--primary` | Applies *primary* color display effect | Colors are defined in `material.min.css` |
+| `mdl-button--accent` | Applies *accent* color display effect | Colors are defined in `material.min.css` |
+| `mdl-js-ripple-effect` | Applies *ripple* click effect | May be used in combination with any other classes |
+
+>**Note:** Disabled versions of all the available button types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised Ripples Disabled</button>`. Alternatively, the `mdl-button--disabled` class can be used to achieve the same style but it does not disable the functionality of the element.
+>This attribute may be added or removed programmatically via scripting.
diff --git a/node_modules/material-design-lite/src/button/_button.scss b/node_modules/material-design-lite/src/button/_button.scss
new file mode 100644
index 0000000..25bb3b3
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/_button.scss
@@ -0,0 +1,305 @@
+/**
+ * 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";
+
+// The button component. Defaults to a flat button.
+.mdl-button {
+ background: transparent;
+ border: none;
+ border-radius: $button-border-radius;
+ color: $button-secondary-color;
+ position: relative;
+ height: $button-height;
+ margin: 0;
+ min-width: $button-min-width;
+ padding: 0 $button-padding;
+ display: inline-block;
+ @include typo-button();
+ overflow: hidden;
+ will-change: box-shadow;
+ transition: box-shadow 0.2s $animation-curve-fast-out-linear-in,
+ background-color 0.2s $animation-curve-default,
+ color 0.2s $animation-curve-default;
+ outline: none;
+ cursor: pointer;
+ text-decoration: none;
+ text-align: center;
+ line-height: $button-height;
+ vertical-align: middle;
+
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &:hover {
+ background-color: $button-hover-color;
+ }
+
+ &:focus:not(:active) {
+ background-color: $button-focus-color;
+ }
+
+ &:active {
+ background-color: $button-active-color;
+ }
+
+ &.mdl-button--colored {
+ color: $button-primary-color-alt;
+
+ &:focus:not(:active) {
+ background-color: $button-focus-color-alt;
+ }
+ }
+}
+
+input.mdl-button[type="submit"] {
+ -webkit-appearance:none;
+}
+
+ // Raised buttons
+ .mdl-button--raised {
+ background: $button-primary-color;
+ @include shadow-2dp();
+
+ &:active {
+ @include shadow-4dp();
+ background-color: $button-active-color;
+ }
+
+ &:focus:not(:active) {
+ @include focus-shadow();
+ background-color: $button-active-color;
+ }
+
+ &.mdl-button--colored {
+ background: $button-primary-color-alt;
+ color: $button-secondary-color-alt;
+
+ &:hover {
+ background-color: $button-hover-color-alt;
+ }
+
+ &:active {
+ background-color: $button-active-color-alt;
+ }
+
+ &:focus:not(:active) {
+ background-color: $button-active-color-alt;
+ }
+
+ & .mdl-ripple {
+ background: $button-ripple-color-alt;
+ }
+ }
+ }
+
+
+ // FABs
+ .mdl-button--fab {
+ border-radius: 50%;
+ font-size: $button-fab-font-size;
+ height: $button-fab-size;
+ margin: auto;
+ min-width: $button-fab-size;
+ width: $button-fab-size;
+ padding: 0;
+ overflow: hidden;
+ background: $button-primary-color;
+ box-shadow: 0 1px 1.5px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
+ position: relative;
+ line-height: normal;
+
+ & .material-icons {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
+ line-height: $button-fab-font-size;
+ width: $button-fab-font-size;
+ }
+
+ &.mdl-button--mini-fab {
+ height: $button-fab-size-mini;
+ min-width: $button-fab-size-mini;
+ width: $button-fab-size-mini;
+ }
+
+ & .mdl-button__ripple-container {
+ border-radius: 50%;
+ // Fixes clipping bug in Safari.
+ -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
+ }
+
+ &:active {
+ @include shadow-4dp();
+ background-color: $button-active-color;
+ }
+
+ &:focus:not(:active) {
+ @include focus-shadow();
+ background-color: $button-active-color;
+ }
+
+ &.mdl-button--colored {
+ background: $button-fab-color-alt;
+ color: $button-fab-text-color-alt;
+
+ &:hover {
+ background-color: $button-fab-hover-color-alt;
+ }
+
+ &:focus:not(:active) {
+ background-color: $button-fab-active-color-alt;
+ }
+
+ &:active {
+ background-color: $button-fab-active-color-alt;
+ }
+
+ & .mdl-ripple {
+ background: $button-fab-ripple-color-alt;
+ }
+ }
+ }
+
+
+ // Icon buttons
+ .mdl-button--icon {
+ border-radius: 50%;
+ font-size: $button-fab-font-size;
+ height: $button-icon-size;
+ margin-left: 0;
+ margin-right: 0;
+ min-width: $button-icon-size;
+ width: $button-icon-size;
+ padding: 0;
+ overflow: hidden;
+ color: inherit;
+ line-height: normal;
+
+ & .material-icons {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
+ line-height: $button-fab-font-size;
+ width: $button-fab-font-size;
+ }
+
+ &.mdl-button--mini-icon {
+ height: $button-icon-size-mini;
+ min-width: $button-icon-size-mini;
+ width: $button-icon-size-mini;
+
+ & .material-icons {
+ top: ($button-icon-size-mini - $button-fab-font-size) / 2;
+ left: ($button-icon-size-mini - $button-fab-font-size) / 2;
+ }
+ }
+
+ & .mdl-button__ripple-container {
+ border-radius: 50%;
+ // Fixes clipping bug in Safari.
+ -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
+ }
+ }
+
+
+ // Ripples
+ .mdl-button__ripple-container {
+ display: block;
+ height: 100%;
+ left: 0px;
+ position: absolute;
+ top: 0px;
+ width: 100%;
+ z-index: 0;
+ overflow: hidden;
+
+ .mdl-button[disabled] & .mdl-ripple,
+ .mdl-button.mdl-button--disabled & .mdl-ripple {
+ background-color: transparent;
+ }
+ }
+
+// Colorized buttons
+
+.mdl-button--primary.mdl-button--primary {
+ color: $button-primary-color-alt;
+ & .mdl-ripple {
+ background: $button-secondary-color-alt;
+ }
+ &.mdl-button--raised, &.mdl-button--fab {
+ color: $button-secondary-color-alt;
+ background-color: $button-primary-color-alt;
+ }
+}
+
+.mdl-button--accent.mdl-button--accent {
+ color: $button-fab-color-alt;
+ & .mdl-ripple {
+ background: $button-fab-text-color-alt;
+ }
+ &.mdl-button--raised, &.mdl-button--fab {
+ color: $button-fab-text-color-alt;
+ background-color: $button-fab-color-alt;
+ }
+}
+
+// Disabled buttons
+
+.mdl-button {
+ // Bump up specificity by using [disabled] twice.
+ &[disabled][disabled],
+ &.mdl-button--disabled.mdl-button--disabled {
+ color: $button-secondary-color-disabled;
+ cursor: default;
+ background-color: transparent;
+ }
+
+ &--fab {
+ // Bump up specificity by using [disabled] twice.
+ &[disabled][disabled],
+ &.mdl-button--disabled.mdl-button--disabled {
+ background-color: $button-primary-color-disabled;
+ color: $button-secondary-color-disabled;
+ }
+ }
+
+ &--raised {
+ // Bump up specificity by using [disabled] twice.
+ &[disabled][disabled],
+ &.mdl-button--disabled.mdl-button--disabled {
+ background-color: $button-primary-color-disabled;
+ color: $button-secondary-color-disabled;
+ box-shadow: none;
+ }
+ }
+ &--colored {
+ // Bump up specificity by using [disabled] twice.
+ &[disabled][disabled],
+ &.mdl-button--disabled.mdl-button--disabled {
+ color: $button-secondary-color-disabled;
+ }
+ }
+}
+
+// Align icons inside buttons with text
+.mdl-button .material-icons {
+ vertical-align: middle;
+}
diff --git a/node_modules/material-design-lite/src/button/button.js b/node_modules/material-design-lite/src/button/button.js
new file mode 100644
index 0000000..cc9ba8d
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/button.js
@@ -0,0 +1,123 @@
+/**
+ * @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 Button MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+ var MaterialButton = function MaterialButton(element) {
+ this.element_ = element;
+
+ // Initialize instance.
+ this.init();
+ };
+ window['MaterialButton'] = MaterialButton;
+
+ /**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+ MaterialButton.prototype.Constant_ = {
+ // None for now.
+ };
+
+ /**
+ * 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
+ */
+ MaterialButton.prototype.CssClasses_ = {
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_CONTAINER: 'mdl-button__ripple-container',
+ RIPPLE: 'mdl-ripple'
+ };
+
+ /**
+ * Handle blur of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+ MaterialButton.prototype.blurHandler_ = function(event) {
+ if (event) {
+ this.element_.blur();
+ }
+ };
+
+ // Public methods.
+
+ /**
+ * Disable button.
+ *
+ * @public
+ */
+ MaterialButton.prototype.disable = function() {
+ this.element_.disabled = true;
+ };
+ MaterialButton.prototype['disable'] = MaterialButton.prototype.disable;
+
+ /**
+ * Enable button.
+ *
+ * @public
+ */
+ MaterialButton.prototype.enable = function() {
+ this.element_.disabled = false;
+ };
+ MaterialButton.prototype['enable'] = MaterialButton.prototype.enable;
+
+ /**
+ * Initialize element.
+ */
+ MaterialButton.prototype.init = function() {
+ if (this.element_) {
+ if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+ var rippleContainer = document.createElement('span');
+ rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+ this.rippleElement_ = document.createElement('span');
+ this.rippleElement_.classList.add(this.CssClasses_.RIPPLE);
+ rippleContainer.appendChild(this.rippleElement_);
+ this.boundRippleBlurHandler = this.blurHandler_.bind(this);
+ this.rippleElement_.addEventListener('mouseup', this.boundRippleBlurHandler);
+ this.element_.appendChild(rippleContainer);
+ }
+ this.boundButtonBlurHandler = this.blurHandler_.bind(this);
+ this.element_.addEventListener('mouseup', this.boundButtonBlurHandler);
+ this.element_.addEventListener('mouseleave', this.boundButtonBlurHandler);
+ }
+ };
+
+ // The component registers itself. It can assume componentHandler is available
+ // in the global scope.
+ componentHandler.register({
+ constructor: MaterialButton,
+ classAsString: 'MaterialButton',
+ cssClass: 'mdl-js-button',
+ widget: true
+ });
+})();
diff --git a/node_modules/material-design-lite/src/button/snippets/fab-colored-ripple.html b/node_modules/material-design-lite/src/button/snippets/fab-colored-ripple.html
new file mode 100644
index 0000000..df2d39a
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/fab-colored-ripple.html
@@ -0,0 +1,4 @@
+<!-- Colored FAB button with ripple -->
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
+ <i class="material-icons">add</i>
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/fab-colored.html b/node_modules/material-design-lite/src/button/snippets/fab-colored.html
new file mode 100644
index 0000000..b25e8da
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/fab-colored.html
@@ -0,0 +1,4 @@
+<!-- Colored FAB button -->
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+ <i class="material-icons">add</i>
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/fab-disabled.html b/node_modules/material-design-lite/src/button/snippets/fab-disabled.html
new file mode 100644
index 0000000..3dc9cb4
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/fab-disabled.html
@@ -0,0 +1,4 @@
+<!-- Disabled FAB button -->
+<button class="mdl-button mdl-js-button mdl-button--fab" disabled>
+ <i class="material-icons">add</i>
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/fab-mini-colored.html b/node_modules/material-design-lite/src/button/snippets/fab-mini-colored.html
new file mode 100644
index 0000000..3e35a15
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/fab-mini-colored.html
@@ -0,0 +1,4 @@
+<!-- Colored mini FAB button -->
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
+ <i class="material-icons">add</i>
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/fab-mini.html b/node_modules/material-design-lite/src/button/snippets/fab-mini.html
new file mode 100644
index 0000000..8b5c5ca
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/fab-mini.html
@@ -0,0 +1,4 @@
+<!-- Mini FAB button -->
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
+ <i class="material-icons">add</i>
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/fab-ripple.html b/node_modules/material-design-lite/src/button/snippets/fab-ripple.html
new file mode 100644
index 0000000..02c42f9
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/fab-ripple.html
@@ -0,0 +1,4 @@
+<!-- FAB button with ripple -->
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
+ <i class="material-icons">add</i>
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/fab.html b/node_modules/material-design-lite/src/button/snippets/fab.html
new file mode 100644
index 0000000..0874925
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/fab.html
@@ -0,0 +1,4 @@
+<!-- FAB button -->
+<button class="mdl-button mdl-js-button mdl-button--fab">
+ <i class="material-icons">add</i>
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/flat-accent.html b/node_modules/material-design-lite/src/button/snippets/flat-accent.html
new file mode 100644
index 0000000..b650bc2
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/flat-accent.html
@@ -0,0 +1,4 @@
+<!-- Accent-colored flat button -->
+<button class="mdl-button mdl-js-button mdl-button--accent">
+ Button
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/flat-disabled.html b/node_modules/material-design-lite/src/button/snippets/flat-disabled.html
new file mode 100644
index 0000000..9139038
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/flat-disabled.html
@@ -0,0 +1,4 @@
+<!-- Disabled flat button -->
+<button class="mdl-button mdl-js-button" disabled>
+ Button
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/flat-primary.html b/node_modules/material-design-lite/src/button/snippets/flat-primary.html
new file mode 100644
index 0000000..780ce48
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/flat-primary.html
@@ -0,0 +1,4 @@
+<!-- Primary-colored flat button -->
+<button class="mdl-button mdl-js-button mdl-button--primary">
+ Button
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/flat-ripple.html b/node_modules/material-design-lite/src/button/snippets/flat-ripple.html
new file mode 100644
index 0000000..c8c37a8
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/flat-ripple.html
@@ -0,0 +1,4 @@
+<!-- Flat button with ripple -->
+<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
+ Button
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/flat.html b/node_modules/material-design-lite/src/button/snippets/flat.html
new file mode 100644
index 0000000..19da613
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/flat.html
@@ -0,0 +1,4 @@
+<!-- Flat button -->
+<button class="mdl-button mdl-js-button">
+ Button
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/icon-colored.html b/node_modules/material-design-lite/src/button/snippets/icon-colored.html
new file mode 100644
index 0000000..cabcb5a
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/icon-colored.html
@@ -0,0 +1,4 @@
+<!-- Colored icon button -->
+<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
+ <i class="material-icons">mood</i>
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/icon.html b/node_modules/material-design-lite/src/button/snippets/icon.html
new file mode 100644
index 0000000..122023a
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/icon.html
@@ -0,0 +1,4 @@
+<!-- Icon button -->
+<button class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">mood</i>
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/raised-accent.html b/node_modules/material-design-lite/src/button/snippets/raised-accent.html
new file mode 100644
index 0000000..cb547f1
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/raised-accent.html
@@ -0,0 +1,4 @@
+<!-- Accent-colored raised button -->
+<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
+ Button
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/raised-colored.html b/node_modules/material-design-lite/src/button/snippets/raised-colored.html
new file mode 100644
index 0000000..713c2f5
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/raised-colored.html
@@ -0,0 +1,4 @@
+<!-- Colored raised button -->
+<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+ Button
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/raised-disabled.html b/node_modules/material-design-lite/src/button/snippets/raised-disabled.html
new file mode 100644
index 0000000..545bec7
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/raised-disabled.html
@@ -0,0 +1,4 @@
+<!-- Raised disabled button -->
+<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+ Button
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/raised-ripple-accent.html b/node_modules/material-design-lite/src/button/snippets/raised-ripple-accent.html
new file mode 100644
index 0000000..9d33d8b
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/raised-ripple-accent.html
@@ -0,0 +1,4 @@
+<!-- Accent-colored raised button with ripple -->
+<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
+ Button
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/raised-ripple.html b/node_modules/material-design-lite/src/button/snippets/raised-ripple.html
new file mode 100644
index 0000000..6b38c0b
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/raised-ripple.html
@@ -0,0 +1,4 @@
+<!-- Raised button with ripple -->
+<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
+ Button
+</button>
diff --git a/node_modules/material-design-lite/src/button/snippets/raised.html b/node_modules/material-design-lite/src/button/snippets/raised.html
new file mode 100644
index 0000000..a939733
--- /dev/null
+++ b/node_modules/material-design-lite/src/button/snippets/raised.html
@@ -0,0 +1,4 @@
+<!-- Raised button -->
+<button class="mdl-button mdl-js-button mdl-button--raised">
+ Button
+</button>