Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/_variables.scss b/node_modules/material-design-lite/src/_variables.scss
new file mode 100644
index 0000000..78be5a4
--- /dev/null
+++ b/node_modules/material-design-lite/src/_variables.scss
@@ -0,0 +1,592 @@
+/**
+ * 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.
+ */
+
+/*------------------------------------*\
+ $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+
+
+/* ========== TYPOGRAPHY ========== */
+
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+$preferred_font: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
+$performance_font: 'Helvetica', 'Arial', sans-serif !default;
+
+/* ========== COLORS ========== */
+
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+
+@import "color-definitions";
+@import "functions";
+
+/* ========== IMAGES ========== */
+$image_path: '/images' !default;
+
+/* ========== Color & Themes ========== */
+
+// Define whether individual color palette items should have classes created.
+// Setting this to true will remove individual color classes for each color in the palettes.
+// To improve overall performance (assuming they aren't used) by:
+// * Saving server bandwidth sending the extra classes
+// * Save client computation against the classes
+// it is RECOMMENDED you set this to true.
+$trim-color-classes: false !default;
+
+// Use color primarily for emphasis. Choose colors that fit with
+// your brand and provide good contrast between visual components.
+$color-primary: $palette-indigo-500 !default;
+$color-primary-dark: $palette-indigo-700 !default;
+$color-accent: $palette-pink-A200 !default;
+
+// Our primary is dark, so use $color-dark-contrast for overlaid text.
+$color-primary-contrast: $color-dark-contrast !default;
+// Our accent is dark, so use $color-dark-contrast for overlaid text.
+$color-accent-contrast: $color-dark-contrast !default;
+
+// Replace all colors with placeholders if we're generating a template.
+@if $styleguide-generate-template == true {
+ $color-primary: '$color-primary';
+ $color-primary-dark: '$color-primary-dark';
+ $color-accent: '$color-accent';
+ $color-primary-contrast: '$color-primary-contrast';
+ $color-accent-contrast: '$color-accent-contrast';
+}
+
+/* ========== Typography ========== */
+
+// We use the following default color styles: text-color-primary and
+// text-color-secondary. For light themes, use text-color-primary-inverse
+// and text-color-secondary-inverse.
+
+$text-color-primary: unquote("rgba(#{$color-black}, 0.87)") !default;
+$text-link-color: unquote("rgb(#{$color-accent})") !default;
+
+// Define whether to target elements directly for typographic enhancements.
+// Turning this off means you need to use mdl-* classes more often.
+// Other components may also fail to adhere to MD without these rules.
+// It is strongly recommended you leave this as true.
+
+$target-elements-directly: true !default;
+
+/* ========== Components ========== */
+
+/* ========== Standard Buttons ========== */
+
+// Default button colors.
+$button-primary-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
+$button-secondary-color: unquote("rgb(#{$color-black})") !default;
+$button-hover-color: $button-primary-color !default;
+$button-active-color: unquote("rgba(#{$palette-grey-500}, 0.40)") !default;
+$button-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
+
+// Colored button colors.
+$button-primary-color-alt: unquote("rgb(#{$color-primary})") !default;
+$button-secondary-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
+$button-hover-color-alt: unquote("rgb(#{$color-primary})") !default;
+$button-active-color-alt: unquote("rgb(#{$color-primary})") !default;
+$button-focus-color-alt: $button-focus-color !default;
+
+// Ripple color for colored raised buttons.
+$button-ripple-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
+
+// Disabled button colors.
+$button-primary-color-disabled: unquote("rgba(#{$color-black}, 0.12)") !default;
+$button-secondary-color-disabled: unquote("rgba(#{$color-black}, 0.26)") !default;
+
+// FAB colors and sizes.
+$button-fab-color-alt: unquote("rgb(#{$color-accent})") !default;
+$button-fab-hover-color-alt: unquote("rgb(#{$color-accent})") !default;
+$button-fab-active-color-alt: unquote("rgb(#{$color-accent})") !default;
+$button-fab-text-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
+$button-fab-ripple-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
+
+// Icon button colors and sizes.
+$button-icon-color: unquote("rgb(#{$palette-grey-700})") !default;
+$button-icon-focus-color: $button-focus-color !default;
+
+/* ========== Icon Toggles ========== */
+
+$icon-toggle-color: unquote("rgb(#{$palette-grey-700})") !default;
+$icon-toggle-focus-color: $button-focus-color !default;
+$icon-toggle-checked-color: unquote("rgb(#{$color-primary})") !default;
+$icon-toggle-checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
+$icon-toggle-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+
+/* ========== Radio Buttons ========== */
+
+$radio-color: unquote("rgb(#{$color-primary})") !default;
+$radio-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
+$radio-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+
+/* ========== Ripple effect ========== */
+
+$ripple-bg-color: unquote("rgb(#{$color-light-contrast})") !default;
+
+/* ========== Layout ========== */
+
+$layout-nav-color: unquote("rgb(#{$palette-grey-300})") !default;
+
+// Drawer
+$layout-drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
+$layout-drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
+$layout-text-color: unquote("rgb(#{$palette-grey-800})") !default;
+$layout-drawer-navigation-color: #757575 !default;
+$layout-drawer-navigation-link-active-background: unquote("rgb(#{$palette-grey-300})") !default;
+$layout-drawer-navigation-link-active-color: unquote("rgb(#{$color-light-contrast})") !default;
+
+// Header
+$layout-header-bg-color: unquote("rgb(#{$color-primary})") !default;
+$layout-header-text-color: unquote("rgb(#{$color-primary-contrast})") !default;
+$layout-header-nav-hover-color: unquote("rgba(#{$palette-grey-700}, 0.6)") !default;
+$layout-header-tab-text-color: unquote("rgba(#{$color-primary-contrast}, 0.6)") !default;
+
+// Tabs
+$layout-header-tab-highlight: unquote("rgb(#{$color-accent})") !default;
+
+/* ========== Content Tabs ========== */
+
+$tab-highlight-color: unquote("rgb(#{$color-primary})") !default;
+$tab-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
+$tab-active-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
+$tab-border-color: unquote("rgb(#{$palette-grey-300})") !default;
+
+/* ========== Checkboxes ========== */
+
+$checkbox-color: unquote("rgb(#{$color-primary})") !default;
+$checkbox-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
+$checkbox-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$checkbox-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
+$checkbox-image-path: $image_path;
+
+/* ========== Switches ========== */
+
+$switch-color: unquote("rgb(#{$color-primary})") !default;
+$switch-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
+$switch-thumb-color: $switch-color !default;
+$switch-track-color: unquote("rgba(#{$color-primary}, 0.5)") !default;
+
+$switch-off-thumb-color: unquote("rgb(#{$palette-grey-50})") !default;
+$switch-off-track-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$switch-disabled-thumb-color: unquote("rgb(#{$palette-grey-400})") !default;
+$switch-disabled-track-color: unquote("rgba(#{$color-black}, 0.12)") !default;
+
+/* ========== Spinner ========== */
+
+$spinner-color-1: unquote("rgb(#{$palette-blue-400})") !default;
+$spinner-color-2: unquote("rgb(#{$palette-red-500})") !default;
+$spinner-color-3: unquote("rgb(#{$palette-yellow-600})") !default;
+$spinner-color-4: unquote("rgb(#{$palette-green-500})") !default;
+
+$spinner-single-color: unquote("rgb(#{$color-primary})") !default;
+
+/* ========== Text fields ========== */
+
+$input-text-background-color: transparent !default;
+$input-text-label-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$input-text-bottom-border-color: unquote("rgba(#{$color-black}, 0.12)") !default;
+$input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
+$input-text-disabled-color: $input-text-bottom-border-color !default;
+$input-text-disabled-text-color: $input-text-label-color !default;
+$input-text-error-color: unquote("rgb(#{$palette-red-A700})") !default;
+
+/* ========== Card ========== */
+
+$card-background-color: unquote("rgb(#{$color-white})") !default;
+$card-text-color: unquote("rgb(#{$color-black})") !default;
+$card-image-placeholder-color: unquote("rgb(#{$color-accent})") !default;
+$card-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
+$card-border-color: rgba(0,0,0,0.1) !default;
+$card-subtitle-color: unquote("rgba(#{$color-black}, 0.54)") !default;
+
+/* ========== Sliders ========== */
+
+$range-bg-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$range-color: unquote("rgb(#{$color-primary})") !default;
+$range-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
+$range-bg-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
+
+/* ========== Progress ========== */
+$progress-main-color: unquote("rgb(#{$color-primary})") !default;
+$progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
+$progress-fallback-buffer-color: unquote("rgba(#{$color-primary-contrast}, 0.9)") !default;
+$progress-image-path: $image_path;
+
+/* ========== List ========== */
+
+$list-main-text-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
+$list-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
+$list-icon-color: unquote("rgb(#{$palette-grey-600})") !default;
+$list-avatar-color: white !default;
+
+/* ========== Item ========== */
+
+// Default Item Colors
+$default-item-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
+$default-item-outline-color: unquote("rgb(#{$palette-grey-400})") !default;
+$default-item-hover-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
+$default-item-focus-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
+$default-item-active-bg-color: unquote("rgb(#{$palette-grey-300})") !default;
+$default-item-divider-color: unquote("rgba(#{$color-black}, 0.12)") !default;
+
+// Disabled Button Colors
+$disabled-item-text-color: unquote("rgb(#{$palette-grey-400})") !default;
+
+/* ========== Dropdown menu ========== */
+
+$default-dropdown-bg-color: unquote("rgb(#{$color-white})") !default;
+
+/* ========== Tooltips ========== */
+
+$tooltip-text-color: unquote("rgb(#{$color-white})") !default;
+$tooltip-background-color: unquote("rgba(#{$palette-grey-700}, 0.9)") !default;
+
+/* ========== Footer ========== */
+
+$footer-bg-color: unquote("rgb(#{$palette-grey-800})") !default;
+$footer-color: unquote("rgb(#{$palette-grey-500})") !default;
+$footer-heading-color: unquote("rgb(#{$palette-grey-300})") !default;
+$footer-button-fill-color: $footer-color !default;
+$footer-underline-color: $footer-color !default;
+
+
+/* TEXTFIELD */
+
+$input-text-font-size: 16px !default;
+$input-text-width: 100% !default;
+$input-text-padding: 4px !default;
+$input-text-vertical-spacing: 20px !default;
+
+$input-text-button-size: 32px !default;
+$input-text-floating-label-fontsize: 12px !default;
+$input-text-expandable-icon-top: 16px !default;
+
+
+/* SWITCH */
+
+$switch-label-font-size: 16px !default;
+$switch-label-height: 24px !default;
+$switch-track-height: 14px !default;
+$switch-track-length: 36px !default;
+$switch-thumb-size: 20px !default;
+$switch-track-top: ($switch-label-height - $switch-track-height) / 2 !default;
+$switch-thumb-top: ($switch-label-height - $switch-thumb-size) / 2 !default;
+$switch-ripple-size: $switch-label-height * 2 !default;
+$switch-helper-size: 8px !default;
+
+/* SPINNER */
+
+$spinner-size: 28px !default;
+$spinner-stroke-width: 3px !default;
+
+// Amount of circle the arc takes up.
+$spinner-arc-size: 270deg !default;
+// Time it takes to expand and contract arc.
+$spinner-arc-time: 1333ms !default;
+// How much the start location of the arc should rotate each time.
+$spinner-arc-start-rot: 216deg !default;
+
+$spinner-duration: 360 * $spinner-arc-time / (
+ strip-units($spinner-arc-start-rot + (360deg - $spinner-arc-size)));
+
+
+/* RADIO */
+
+$radio-label-font-size: 16px !default;
+$radio-label-height: 24px !default;
+$radio-button-size: 16px !default;
+$radio-inner-margin: $radio-button-size / 4;
+$radio-padding: 8px !default;
+$radio-top-offset: ($radio-label-height - $radio-button-size) / 2;
+$radio-ripple-size: 42px !default;
+
+
+/* MENU */
+
+$menu-expand-duration: 0.3s !default;
+$menu-fade-duration: 0.2s !default;
+
+/* LIST */
+
+$list-border: 8px !default;
+$list-min-height: 48px !default;
+$list-min-padding: 16px !default;
+$list-bottom-padding: 20px !default;
+$list-avatar-text-left-distance: 72px !default;
+$list-icon-text-left-distance: 72px !default;
+
+$list-avatar-size: 40px !default;
+$list-icon-size: 24px !default;
+
+$list-two-line-height: 72px !default;
+$list-three-line-height: 88px !default;
+
+/* LAYOUT */
+
+$layout-drawer-narrow: 240px !default;
+$layout-drawer-wide: 456px !default;
+$layout-drawer-width: $layout-drawer-narrow !default;
+
+$layout-header-icon-size: 32px !default;
+$layout-screen-size-threshold: 1024px !default;
+$layout-header-icon-margin: 24px !default;
+$layout-drawer-button-mobile-size: 32px !default;
+$layout-drawer-button-desktop-size: 48px !default;
+
+$layout-header-mobile-row-height: 56px !default;
+$layout-mobile-header-height: $layout-header-mobile-row-height;
+$layout-header-desktop-row-height: 64px !default;
+$layout-desktop-header-height: $layout-header-desktop-row-height;
+
+$layout-header-desktop-baseline: 80px !default;
+$layout-header-mobile-baseline: 72px !default;
+$layout-header-mobile-indent: 16px !default;
+$layout-header-desktop-indent: 40px !default;
+
+$layout-tab-font-size: 14px !default;
+$layout-tab-bar-height: 48px !default;
+$layout-tab-mobile-padding: 12px !default;
+$layout-tab-desktop-padding: 24px !default;
+$layout-tab-highlight-thickness: 2px !default;
+
+
+/* ICON TOGGLE */
+
+$icon-toggle-size: 32px !default;
+$icon-toggle-font-size: 24px !default;
+$icon-toggle-ripple-size: 36px !default;
+
+/* FOOTER */
+
+/*mega-footer*/
+$footer-min-padding: 16px !default;
+$footer-padding-sides: 40px !default;
+$footer-heading-font-size: 14px !default;
+$footer-heading-line-height: (1.7 * $footer-heading-font-size) !default;
+$footer-btn-size: 36px !default;
+
+/*mini-footer*/
+$padding: 16px !default;
+$footer-heading-font-size: 24px !default;
+$footer-heading-line-height: (1.5 * $footer-heading-font-size) !default;
+$footer-btn-size: 36px !default;
+
+/* CHECKBOX */
+
+$checkbox-label-font-size: 16px !default;
+$checkbox-label-height: 24px !default;
+$checkbox-button-size: 16px !default;
+$checkbox-inner-margin: 2px !default;
+$checkbox-padding: 8px !default;
+$checkbox-top-offset:
+($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;
+$checkbox-ripple-size: $checkbox-label-height * 1.5;
+
+/* CARD */
+
+/* Card dimensions */
+$card-width: 330px !default;
+$card-height: 200px !default;
+$card-font-size: 16px !default;
+$card-title-font-size: 24px !default;
+$card-subtitle-font-size: 14px !default;
+$card-horizontal-padding: 16px !default;
+$card-vertical-padding: 16px !default;
+
+$card-title-perspective-origin-x: 165px !default;
+$card-title-perspective-origin-y: 56px !default;
+
+$card-title-transform-origin-x: 165px !default;
+$card-title-transform-origin-y: 56px !default;
+
+$card-title-text-transform-origin-x: 149px !default;
+$card-title-text-transform-origin-y: 48px !default;
+
+$card-supporting-text-font-size: 1rem !default;
+$card-supporting-text-line-height: 18px !default;
+
+$card-actions-font-size: 16px !default;
+
+$card-title-text-font-weight: 300 !default;
+$card-z-index: 1 !default;
+
+/* Cover image */
+$card-cover-image-height: 186px !default;
+$card-background-image-url: '' !default;
+
+
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+$button-min-width: 64px !default;
+$button-height: 36px !default;
+$button-padding: 16px !default;
+$button-margin: 4px !default;
+$button-border-radius: 2px !default;
+
+$button-fab-size: 56px !default;
+$button-fab-size-mini: 40px !default;
+$button-fab-font-size: 24px !default;
+
+$button-icon-size: 32px !default;
+$button-icon-size-mini: 24px !default;
+
+
+/* ANIMATION */
+$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
+$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
+
+$animation-curve-default: $animation-curve-fast-out-slow-in !default;
+
+
+/* PROGRESS */
+$bar-height: 4px !default;
+
+/* BADGE */
+$badge-font-size: 12px !default;
+$badge-color: unquote("rgb(#{$color-accent-contrast})") !default;
+$badge-color-inverse: unquote("rgb(#{$color-accent})") !default;
+$badge-background: unquote("rgb(#{$color-accent})") !default;
+$badge-background-inverse: unquote("rgba(#{$color-accent-contrast},0.2)") !default;
+$badge-size : 22px !default;
+$badge-padding: 2px !default;
+$badge-overlap: 12px !default;
+
+/* SHADOWS */
+
+$shadow-key-umbra-opacity: 0.2 !default;
+$shadow-key-penumbra-opacity: 0.14 !default;
+$shadow-ambient-shadow-opacity: 0.12 !default;
+
+/* GRID */
+
+$grid-desktop-columns: 12 !default;
+$grid-desktop-gutter: 16px !default;
+$grid-desktop-margin: 16px !default;
+
+$grid-desktop-breakpoint: 840px !default;
+
+$grid-tablet-columns: 8 !default;
+$grid-tablet-gutter: $grid-desktop-gutter !default;
+$grid-tablet-margin: $grid-desktop-margin !default;
+
+$grid-tablet-breakpoint: 480px !default;
+
+$grid-phone-columns: 4 !default;
+$grid-phone-gutter: $grid-desktop-gutter !default;
+$grid-phone-margin: $grid-desktop-margin !default;
+
+$grid-cell-default-columns: $grid-phone-columns !default;
+$grid-max-columns: $grid-desktop-columns !default;
+
+/* DATA TABLE */
+
+$data-table-font-size: 13px !default;
+$data-table-header-font-size: 12px !default;
+$data-table-header-sort-icon-size: 16px !default;
+
+$data-table-header-color: rgba(#000, 0.54) !default;
+$data-table-header-sorted-color: rgba(#000, 0.87) !default;
+$data-table-header-sorted-icon-hover-color: rgba(#000, 0.26) !default;
+$data-table-divider-color: rgba(#000, 0.12) !default;
+
+$data-table-hover-color: #eeeeee !default;
+$data-table-selection-color: #e0e0e0 !default;
+
+$data-table-dividers: 1px solid $data-table-divider-color !default;
+
+$data-table-row-height: 48px !default;
+$data-table-last-row-height: 56px !default;
+$data-table-header-height: 56px !default;
+
+$data-table-column-spacing: 36px !default;
+$data-table-column-padding: $data-table-column-spacing / 2;
+
+$data-table-card-header-height: 64px !default;
+$data-table-card-title-top: 20px !default;
+$data-table-card-padding: 24px !default;
+$data-table-button-padding-right: 16px !default;
+$data-table-cell-top: $data-table-card-padding / 2;
+
+/* DIALOG */
+$dialog-content-color: $card-supporting-text-text-color;
+
+/* SNACKBAR */
+
+// Hard coded since the color is not present in any palette.
+$snackbar-background-color: #323232 !default;
+$snackbar-tablet-breakpoint: $grid-tablet-breakpoint;
+$snackbar-action-color: unquote("rgb(#{$color-accent})") !default;
+
+/* TOOLTIP */
+$tooltip-font-size: 10px !default;
+$tooltip-font-size-large: 14px !default;
+
+/* CHIP */
+$chip-bg-color: rgb(222, 222, 222) !default;
+$chip-bg-active-color: rgb(214, 214, 214) !default;
+$chip-height: 32px !default;
+$chip-font-size: 13px !default;