From 775ecb230b97e3bd9f7edd72dce35aa0c5235a5f Mon Sep 17 00:00:00 2001 From: Ruslan Kyba Date: Mon, 4 Jan 2016 01:42:02 +0200 Subject: [PATCH] Menu integration --- mdl-selectfield.min.css | 2 +- mdl-selectfield.min.css.map | 2 +- mdl-selectfield.min.js | 2 +- mdl-selectfield.min.js.map | 2 +- src/selectfield/selectfield.js | 46 ++++++++++++++++++++++++++++++++ src/selectfield/selectfield.scss | 40 +++++++++++++++++++++++++++ 6 files changed, 90 insertions(+), 4 deletions(-) diff --git a/mdl-selectfield.min.css b/mdl-selectfield.min.css index df72584..f6edfa9 100644 --- a/mdl-selectfield.min.css +++ b/mdl-selectfield.min.css @@ -1,3 +1,3 @@ -.mdl-selectfield{position:relative;font-size:16px;display:inline-block;box-sizing:border-box;width:300px;max-width:100%;margin:0;padding:20px 0}.mdl-selectfield--align-right{text-align:right}.mdl-selectfield--full-width{width:100%}.mdl-selectfield__select{display:block;width:100%;padding:4px 0;margin:0;color:inherit;background:transparent;font-size:16px;text-align:left;color:inherit;border:none;border-bottom:1px solid rgba(0,0,0, 0.12);border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mdl-selectfield.is-focused .mdl-selectfield__select{outline:none}.mdl-selectfield.is-invalid .mdl-selectfield__select{border-color:rgb(222, 50, 38);box-shadow:none}fieldset[disabled] .mdl-selectfield .mdl-selectfield__select,.mdl-selectfield.is-disabled .mdl-selectfield__select{background-color:transparent;border-bottom:1px dotted rgba(0,0,0, 0.12);color:rgba(0,0,0, 0.26)}.mdl-selectfield__label{bottom:0;color:rgba(0,0,0, 0.26);font-size:16px;left:0;right:0;pointer-events:none;position:absolute;display:block;top:24px;width:100%;overflow:hidden;white-space:nowrap;text-align:left}.mdl-selectfield.is-dirty .mdl-selectfield__label{visibility:hidden}.mdl-selectfield--floating-label .mdl-selectfield__label{transition-duration:0.2s;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}fieldset[disabled] .mdl-selectfield .mdl-selectfield__label,.mdl-selectfield.is-disabled.is-disabled .mdl-selectfield__label{color:rgba(0,0,0, 0.26)}.mdl-selectfield--floating-label.is-focused .mdl-selectfield__label,.mdl-selectfield--floating-label.is-dirty .mdl-selectfield__label{color:rgb(63,81,181);font-size:12px;top:4px;visibility:visible}.mdl-selectfield--floating-label.is-invalid .mdl-selectfield__label{color:rgb(222, 50, 38);font-size:12px}.mdl-selectfield__label:after{background-color:rgb(63,81,181);bottom:20px;content:'';height:2px;left:45%;position:absolute;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);visibility:hidden;width:10px}.mdl-selectfield.is-focused .mdl-selectfield__label:after{left:0;visibility:visible;width:100%}.mdl-selectfield.is-invalid .mdl-selectfield__label:after{background-color:rgb(222, 50, 38)}.mdl-selectfield__error{color:rgb(222, 50, 38);position:absolute;font-size:12px;margin-top:3px;visibility:hidden;display:block}.mdl-selectfield.is-invalid .mdl-selectfield__error{visibility:visible} +.mdl-selectfield{position:relative;font-size:16px;display:inline-block;box-sizing:border-box;width:300px;max-width:100%;margin:0;padding:20px 0}.mdl-selectfield .mdl-menu__container{max-height:256px;min-width:100%;top:12px !important}.mdl-selectfield.mdl-selectfield--floating-label .mdl-menu__container{top:24px !important}.mdl-selectfield .mdl-menu__outline{max-height:256px;transform-origin:50% 0}.mdl-selectfield .mdl-menu{min-width:100%;max-height:240px;outline:0;overflow-y:auto;width:auto !important}.mdl-selectfield .mdl-menu.is-animating{overflow:hidden}.mdl-selectfield--align-right{text-align:right}.mdl-selectfield--full-width{width:100%}.mdl-selectfield__select{display:block;width:100%;padding:4px 0;margin:0;color:inherit;background:transparent;font-size:16px;text-align:left;color:inherit;border:none;border-bottom:1px solid rgba(0,0,0, 0.12);border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mdl-selectfield.is-focused .mdl-selectfield__select{outline:none}.mdl-selectfield.is-invalid .mdl-selectfield__select{border-color:rgb(222, 50, 38);box-shadow:none}fieldset[disabled] .mdl-selectfield .mdl-selectfield__select,.mdl-selectfield.is-disabled .mdl-selectfield__select{background-color:transparent;border-bottom:1px dotted rgba(0,0,0, 0.12);color:rgba(0,0,0, 0.26)}.mdl-selectfield__label{bottom:0;color:rgba(0,0,0, 0.26);font-size:16px;left:0;right:0;pointer-events:none;position:absolute;display:block;top:24px;width:100%;overflow:hidden;white-space:nowrap;text-align:left}.mdl-selectfield.is-dirty .mdl-selectfield__label{visibility:hidden}.mdl-selectfield--floating-label .mdl-selectfield__label{transition-duration:0.2s;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}fieldset[disabled] .mdl-selectfield .mdl-selectfield__label,.mdl-selectfield.is-disabled.is-disabled .mdl-selectfield__label{color:rgba(0,0,0, 0.26)}.mdl-selectfield--floating-label.is-focused .mdl-selectfield__label,.mdl-selectfield--floating-label.is-dirty .mdl-selectfield__label{color:rgb(63,81,181);font-size:12px;top:4px;visibility:visible}.mdl-selectfield--floating-label.is-invalid .mdl-selectfield__label{color:rgb(222, 50, 38);font-size:12px}.mdl-selectfield__label:after{background-color:rgb(63,81,181);bottom:20px;content:'';height:2px;left:45%;position:absolute;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);visibility:hidden;width:10px}.mdl-selectfield.is-focused .mdl-selectfield__label:after{left:0;visibility:visible;width:100%}.mdl-selectfield.is-invalid .mdl-selectfield__label:after{background-color:rgb(222, 50, 38)}.mdl-selectfield__error{color:rgb(222, 50, 38);position:absolute;font-size:12px;margin-top:3px;visibility:hidden;display:block}.mdl-selectfield.is-invalid .mdl-selectfield__error{visibility:visible}.mdl-selectfield__placeholder{bottom:20px;cursor:pointer;color:rgba(0,0,0, 0.26);left:0;padding:2px 0;position:absolute;text-align:right;top:20px;width:100%}.mdl-selectfield__placeholder>i{outline:0} /*# sourceMappingURL=mdl-selectfield.min.css.map */ diff --git a/mdl-selectfield.min.css.map b/mdl-selectfield.min.css.map index d4cfa52..0aeef1b 100644 --- a/mdl-selectfield.min.css.map +++ b/mdl-selectfield.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["../stdin","../bower_components/material-design-lite/src/_mixins.scss","../bower_components/material-design-lite/src/_variables.scss"],"names":[],"mappings":"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","file":"mdl-selectfield.min.css","sourcesContent":["@import \"../../bower_components/material-design-lite/src/variables\";\n@import \"../../bower_components/material-design-lite/src/mixins\";\n\n$selectfield-font-size: 16px !default;\n$selectfield-padding: 4px !default;\n$selectfield-vertical-spacing: 20px !default;\n\n$selectfield-floating-label-fontsize: 12px !default;\n\n$selectfield-background-color: transparent !default;\n$selectfield-label-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n$selectfield-bottom-border-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n$selectfield-highlight-color: unquote(\"rgb(#{$color-primary})\") !default;\n$selectfield-disabled-color: $selectfield-bottom-border-color !default;\n$selectfield-disabled-text-color: $selectfield-label-color !default;\n$selectfield-error-color: unquote(\"rgb(222, 50, 38)\") !default;\n\n// The container for the whole component.\n.mdl-selectfield {\n position: relative;\n font-size: $selectfield-font-size;\n display: inline-block;\n box-sizing: border-box;\n width: 300px;\n max-width: 100%;\n margin: 0;\n padding: $selectfield-vertical-spacing 0;\n}\n\n// Optional class to align right.\n.mdl-selectfield--align-right {\n text-align: right;\n}\n\n// Optional class to display at full width.\n.mdl-selectfield--full-width {\n width: 100%;\n}\n\n// Styling for the select element.\n.mdl-selectfield__select {\n display: block;\n width: 100%;\n padding: $selectfield-padding 0;\n margin: 0;\n color: inherit;\n background: $selectfield-background-color;\n font-size: $selectfield-font-size;\n text-align: left;\n color: inherit;\n border: none;\n border-bottom: 1px solid $selectfield-bottom-border-color;\n border-radius: 0;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n\n .mdl-selectfield.is-focused & {\n outline: none;\n }\n\n .mdl-selectfield.is-invalid & {\n border-color: $selectfield-error-color;\n box-shadow: none;\n }\n\n fieldset[disabled] .mdl-selectfield &, .mdl-selectfield.is-disabled & {\n background-color: transparent;\n border-bottom: 1px dotted $selectfield-disabled-color;\n color: $selectfield-disabled-text-color;\n }\n}\n\n// Styling for the label / floating label.\n.mdl-selectfield__label {\n bottom: 0;\n color: $selectfield-label-color;\n font-size: $selectfield-font-size;\n left: 0;\n right: 0;\n pointer-events: none;\n position: absolute;\n display: block;\n top: ($selectfield-padding + $selectfield-vertical-spacing);\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-align: left;\n\n .mdl-selectfield.is-dirty & {\n visibility: hidden;\n }\n\n // Floating Label\n .mdl-selectfield--floating-label & {\n @include material-animation-default();\n }\n\n fieldset[disabled] .mdl-selectfield &,\n .mdl-selectfield.is-disabled.is-disabled & {\n color: $selectfield-disabled-text-color;\n }\n\n .mdl-selectfield--floating-label.is-focused &,\n .mdl-selectfield--floating-label.is-dirty & {\n color: $selectfield-highlight-color;\n font-size : $selectfield-floating-label-fontsize;\n top: $selectfield-vertical-spacing - ($selectfield-floating-label-fontsize + $selectfield-padding);\n visibility: visible;\n }\n\n .mdl-selectfield--floating-label.is-invalid & {\n color: $selectfield-error-color;\n font-size: $selectfield-floating-label-fontsize;\n }\n\n // The after label is the colored underline for the TextField.\n &:after {\n background-color: $selectfield-highlight-color;\n bottom: $selectfield-vertical-spacing;\n content: '';\n height: 2px;\n left: 45%;\n position: absolute;\n @include material-animation-default();\n visibility: hidden;\n width: 10px;\n }\n\n .mdl-selectfield.is-focused &:after {\n left: 0;\n visibility: visible;\n width: 100%;\n }\n\n .mdl-selectfield.is-invalid &:after {\n background-color: $selectfield-error-color;\n }\n}\n\n// SelectField Error.\n.mdl-selectfield__error {\n color: $selectfield-error-color;\n position: absolute;\n font-size: $selectfield-floating-label-fontsize;\n margin-top: 3px;\n visibility: hidden;\n display: block;\n\n .mdl-selectfield.is-invalid & {\n visibility: visible;\n }\n}\n","/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/* Typography */\n\n@mixin typo-preferred-font($usePreferred: true) {\n @if $usePreferred {\n font-family: $preferred_font;\n }\n}\n\n@mixin typo-display-4($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 112px;\n font-weight: 300;\n line-height: 1;\n letter-spacing: -0.04em;\n\n @if $colorContrast {\n opacity: 0.54;\n }\n}\n\n@mixin typo-display-3($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 56px;\n font-weight: 400;\n line-height: 1.35;\n letter-spacing: -0.02em;\n\n @if $colorContrast {\n opacity: 0.54;\n }\n}\n\n@mixin typo-display-2($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 45px;\n font-weight: 400;\n line-height: 48px;\n\n @if $colorContrast {\n opacity: 0.54;\n }\n}\n\n@mixin typo-display-1($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 34px;\n font-weight: 400;\n line-height: 40px;\n\n @if $colorContrast {\n opacity: 0.54;\n }\n}\n\n@mixin typo-headline($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 24px;\n font-weight: 400;\n line-height: 32px;\n -moz-osx-font-smoothing: grayscale;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n@mixin typo-title($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 20px;\n font-weight: 500;\n line-height: 1;\n letter-spacing: 0.02em;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n@mixin typo-subhead($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 16px;\n font-weight: 400;\n line-height: 24px;\n letter-spacing: 0.04em;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n@mixin typo-subhead-2($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 16px;\n font-weight: 400;\n line-height: 28px;\n letter-spacing: 0.04em;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n@mixin typo-body-2($colorContrast: false, $usePreferred: false) {\n @include typo-preferred-font($usePreferred);\n font-size: 14px;\n @if $usePreferred {\n font-weight: 500;\n } @else {\n font-weight: bold;\n }\n line-height: 24px;\n letter-spacing: 0;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n@mixin typo-body-1($colorContrast: false, $usePreferred: false) {\n @include typo-preferred-font($usePreferred);\n font-size: 14px;\n font-weight: 400;\n line-height: 24px;\n letter-spacing: 0;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n@mixin typo-caption($colorContrast: false, $usePreferred: false) {\n @include typo-preferred-font($usePreferred);\n font-size: 12px;\n font-weight: 400;\n line-height: 1;\n letter-spacing: 0;\n\n @if $colorContrast {\n opacity: 0.54;\n }\n}\n\n@mixin typo-blockquote($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n position: relative;\n font-size: 24px;\n font-weight: 300;\n font-style: italic;\n line-height: 1.35;\n letter-spacing: 0.08em;\n\n &:before {\n position: absolute;\n left: -0.5em;\n content: '“';\n }\n\n &:after {\n content: '”';\n margin-left: -0.05em;\n }\n\n @if $colorContrast {\n opacity: 0.54;\n }\n}\n\n@mixin typo-menu($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n letter-spacing: 0;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n@mixin typo-button($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 14px;\n font-weight: 500;\n text-transform: uppercase;\n line-height: 1;\n letter-spacing: 0;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n/* Shadows */\n\n// Focus shadow mixin.\n@mixin focus-shadow() {\n box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);\n}\n\n@mixin shadow-2dp() {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),\n 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);\n}\n@mixin shadow-3dp() {\n box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n 0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),\n 0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);\n}\n@mixin shadow-4dp() {\n box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),\n 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);\n}\n@mixin shadow-6dp() {\n box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),\n 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);\n}\n@mixin shadow-8dp() {\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),\n 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);\n}\n\n@mixin shadow-16dp() {\n box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n 0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),\n 0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);\n}\n\n/* Animations */\n\n@mixin material-animation-fast-out-slow-in($duration:0.2s) {\n transition-duration: $duration;\n transition-timing-function: $animation-curve-fast-out-slow-in;\n}\n\n@mixin material-animation-linear-out-slow-in($duration:0.2s) {\n transition-duration: $duration;\n transition-timing-function: $animation-curve-linear-out-slow-in;\n}\n\n@mixin material-animation-fast-out-linear-in($duration:0.2s) {\n transition-duration: $duration;\n transition-timing-function: $animation-curve-fast-out-linear-in;\n}\n\n@mixin material-animation-default($duration:0.2s) {\n transition-duration: $duration;\n transition-timing-function: $animation-curve-default;\n}\n","/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/*------------------------------------*\\\n $CONTENTS\n\\*------------------------------------*/\n/**\n * STYLE GUIDE VARIABLES------------------Declarations of Sass variables\n * -----Typography\n * -----Colors\n * -----Textfield\n * -----Switch\n * -----Spinner\n * -----Radio\n * -----Menu\n * -----List\n * -----Layout\n * -----Icon toggles\n * -----Footer\n * -----Column\n * -----Checkbox\n * -----Card\n * -----Button\n * -----Animation\n * -----Progress\n * -----Badge\n * -----Shadows\n * -----Grid\n * -----Data table\n */\n\n\n/* ========== TYPOGRAPHY ========== */\n\n/* We're splitting fonts into \"preferred\" and \"performance\" in order to optimize\n page loading. For important text, such as the body, we want it to load\n immediately and not wait for the web font load, whereas for other sections,\n such as headers and titles, we're OK with things taking a bit longer to load.\n We do have some optional classes and parameters in the mixins, in case you\n definitely want to make sure you're using the preferred font and don't mind\n the performance hit.\n We should be able to improve on this once CSS Font Loading L3 becomes more\n widely available.\n*/\n$preferred_font: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;\n$performance_font: 'Helvetica', 'Arial', sans-serif !default;\n\n/* ========== COLORS ========== */\n\n/**\n*\n* Material design color palettes.\n* @see http://www.google.com/design/spec/style/color.html\n*\n**/\n\n@import \"color-definitions\";\n@import \"functions\";\n\n/* ========== IMAGES ========== */\n$image_path: '/images' !default;\n\n/* ========== Color & Themes ========== */\n\n// Define whether individual color pallet items should have classes created.\n// Setting this to true will remove individual color classes for each color in the pallets.\n// To improve overall performance (assuming they aren't used) by:\n// * Saving server bandwidth sending the extra classes\n// * Save client computation against the classes\n// it is RECOMMENDED you set this to true.\n$trim-color-classes: false !default;\n\n// Use color primarily for emphasis. Choose colors that fit with\n// your brand and provide good contrast between visual components.\n$color-primary: $palette-indigo-500 !default;\n$color-primary-dark: $palette-indigo-700 !default;\n$color-accent: $palette-pink-A200 !default;\n\n// Our primary is dark, so use $color-dark-contrast for overlaid text.\n$color-primary-contrast: $color-dark-contrast !default;\n// Our accent is dark, so use $color-dark-contrast for overlaid text.\n$color-accent-contrast: $color-dark-contrast !default;\n\n// Replace all colors with placeholders if we're generating a template.\n@if $styleguide-generate-template == true {\n $color-primary: '$color-primary';\n $color-primary-dark: '$color-primary-dark';\n $color-accent: '$color-accent';\n $color-primary-contrast: '$color-primary-contrast';\n $color-accent-contrast: '$color-accent-contrast';\n}\n\n/* ========== Typography ========== */\n\n// We use the following default color styles: text-color-primary and\n// text-color-secondary. For light themes, use text-color-primary-inverse\n// and text-color-secondary-inverse.\n\n$text-color-primary: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\n$text-link-color: unquote(\"rgb(#{$color-accent})\") !default;\n\n// Define whether to target elements directly for typographic enhancements.\n// Turning this off means you need to use mdl-* classes more often.\n// Other components may also fail to adhere to MD without these rules.\n// It is strongly recommended you leave this as true.\n\n$target-elements-directly: true !default;\n\n/* ========== Components ========== */\n\n/* ========== Standard Buttons ========== */\n\n// Default button colors.\n$button-primary-color: unquote(\"rgba(#{$palette-grey-500}, 0.20)\") !default;\n$button-secondary-color: unquote(\"rgb(#{$color-black})\") !default;\n$button-hover-color: $button-primary-color !default;\n$button-active-color: unquote(\"rgba(#{$palette-grey-500}, 0.40)\") !default;\n$button-focus-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n\n// Colored button colors.\n$button-primary-color-alt: unquote(\"rgb(#{$color-primary})\") !default;\n$button-secondary-color-alt: unquote(\"rgb(#{$color-primary-contrast})\") !default;\n$button-hover-color-alt: unquote(\"rgb(#{$color-primary})\") !default;\n$button-active-color-alt: unquote(\"rgb(#{$color-primary})\") !default;\n$button-focus-color-alt: $button-focus-color !default;\n\n// Ripple color for colored raised buttons.\n$button-ripple-color-alt: unquote(\"rgb(#{$color-primary-contrast})\") !default;\n\n// Disabled button colors.\n$button-primary-color-disabled: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n$button-secondary-color-disabled: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n\n// FAB colors and sizes.\n$button-fab-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\n$button-fab-hover-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\n$button-fab-active-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\n$button-fab-text-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\n$button-fab-ripple-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\n\n// Icon button colors and sizes.\n$button-icon-color: unquote(\"rgb(#{$palette-grey-700})\") !default;\n$button-icon-focus-color: $button-focus-color !default;\n\n/* ========== Icon Toggles ========== */\n\n$icon-toggle-color: unquote(\"rgb(#{$palette-grey-700})\") !default;\n$icon-toggle-focus-color: $button-focus-color !default;\n$icon-toggle-checked-color: unquote(\"rgb(#{$color-primary})\") !default;\n$icon-toggle-checked-focus-color: unquote(\"rgba(#{$color-primary}, 0.26)\") !default;\n$icon-toggle-disabled-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n\n/* ========== Radio Buttons ========== */\n\n$radio-color: unquote(\"rgb(#{$color-primary})\") !default;\n$radio-off-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n$radio-disabled-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n\n/* ========== Ripple effect ========== */\n\n$ripple-bg-color: unquote(\"rgb(#{$color-light-contrast})\") !default;\n\n/* ========== Layout ========== */\n\n$layout-nav-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n\n// Drawer\n$layout-drawer-bg-color: unquote(\"rgb(#{$palette-grey-50})\") !default;\n$layout-drawer-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n$layout-text-color: unquote(\"rgb(#{$palette-grey-800})\") !default;\n$layout-drawer-navigation-color: #757575 !default;\n$layout-drawer-navigation-link-active-background: unquote(\"rgb(#{$color-light-contrast})\") !default;\n$layout-drawer-navigation-link-active-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n\n// Header\n$layout-header-bg-color: unquote(\"rgb(#{$color-primary})\") !default;\n$layout-header-text-color: unquote(\"rgb(#{$color-primary-contrast})\") !default;\n$layout-header-nav-hover-color: unquote(\"rgba(#{$palette-grey-700}, 0.6)\") !default;\n$layout-header-tab-text-color: unquote(\"rgba(#{$color-primary-contrast}, 0.6)\") !default;\n\n// Tabs\n$layout-header-tab-highlight: unquote(\"rgb(#{$color-accent})\") !default;\n\n/* ========== Content Tabs ========== */\n\n$tab-highlight-color: unquote(\"rgb(#{$color-primary})\") !default;\n$tab-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n$tab-active-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\n$tab-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n\n/* ========== Checkboxes ========== */\n\n$checkbox-color: unquote(\"rgb(#{$color-primary})\") !default;\n$checkbox-off-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n$checkbox-disabled-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n$checkbox-focus-color: unquote(\"rgba(#{$color-primary}, 0.26)\") !default;\n$checkbox-image-path: $image_path;\n\n/* ========== Switches ========== */\n\n$switch-color: unquote(\"rgb(#{$color-primary})\") !default;\n$switch-faded-color: unquote(\"rgba(#{$color-primary}, 0.26)\") !default;\n$switch-thumb-color: $switch-color !default;\n$switch-track-color: unquote(\"rgba(#{$color-primary}, 0.5)\") !default;\n\n$switch-off-thumb-color: unquote(\"rgb(#{$palette-grey-50})\") !default;\n$switch-off-track-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n$switch-disabled-thumb-color: unquote(\"rgb(#{$palette-grey-400})\") !default;\n$switch-disabled-track-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n\n/* ========== Spinner ========== */\n\n$spinner-color-1: unquote(\"rgb(#{$palette-blue-400})\") !default;\n$spinner-color-2: unquote(\"rgb(#{$palette-red-500})\") !default;\n$spinner-color-3: unquote(\"rgb(#{$palette-yellow-600})\") !default;\n$spinner-color-4: unquote(\"rgb(#{$palette-green-500})\") !default;\n\n$spinner-single-color: unquote(\"rgb(#{$color-primary})\") !default;\n\n/* ========== Text fields ========== */\n\n$input-text-background-color: transparent !default;\n$input-text-label-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n$input-text-bottom-border-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n$input-text-highlight-color: unquote(\"rgb(#{$color-primary})\") !default;\n$input-text-disabled-color: $input-text-bottom-border-color !default;\n$input-text-disabled-text-color: $input-text-label-color !default;\n$input-text-error-color: unquote(\"rgb(222, 50, 38)\") !default;\n\n/* ========== Card ========== */\n\n$card-background-color: unquote(\"rgb(#{$color-white})\") !default;\n$card-text-color: unquote(\"rgb(#{$color-black})\") !default;\n$card-image-placeholder-color: unquote(\"rgb(#{$color-accent})\") !default;\n$card-supporting-text-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n$card-border-color: rgba(0,0,0,0.1) !default;\n$card-subtitle-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n\n/* ========== Sliders ========== */\n\n$range-bg-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n$range-color: unquote(\"rgb(#{$color-primary})\") !default;\n$range-faded-color: unquote(\"rgba(#{$color-primary}, 0.26)\") !default;\n$range-bg-focus-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n\n/* ========== Progress ========== */\n$progress-main-color: unquote(\"rgb(#{$color-primary})\") !default;\n$progress-secondary-color: unquote(\"rgba(#{$color-primary-contrast}, 0.7)\") !default;\n$progress-fallback-buffer-color: unquote(\"rgba(#{$color-primary-contrast}, 0.9)\") !default;\n$progress-image-path: $image_path;\n\n/* ========== List ========== */\n\n$list-container-item-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n$list-container-view-background: unquote(\"rgb(#{$color-white})\") !default;\n\n/* ========== Item ========== */\n\n// Default Item Colors\n$default-item-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\n$default-item-outline-color: unquote(\"rgb(#{$palette-grey-400})\") !default;\n$default-item-hover-bg-color: unquote(\"rgb(#{$palette-grey-200})\") !default;\n$default-item-focus-bg-color: unquote(\"rgb(#{$palette-grey-200})\") !default;\n$default-item-active-bg-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n\n// Disabled Button Colors\n$disabled-item-text-color: unquote(\"rgb(#{$palette-grey-400})\") !default;\n\n/* ========== Dropdown menu ========== */\n\n$default-dropdown-bg-color: unquote(\"rgb(#{$color-white})\") !default;\n\n/* ========== Tooltips ========== */\n\n$tooltip-text-color: unquote(\"rgb(#{$color-white})\") !default;\n$tooltip-background-color: unquote(\"rgba(#{$palette-grey-700}, 0.9)\") !default;\n\n/* ========== Footer ========== */\n\n$footer-bg-color: unquote(\"rgb(#{$palette-grey-800})\") !default;\n$footer-color: unquote(\"rgb(#{$palette-grey-500})\") !default;\n$footer-heading-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n$footer-button-fill-color: $footer-color !default;\n$footer-underline-color: $footer-color !default;\n\n\n/* TEXTFIELD */\n\n$input-text-font-size: 16px;\n$input-text-width: 100%;\n$input-text-padding: 4px;\n$input-text-ripple-size: 32px;\n$input-text-vertical-spacing: 20px;\n\n$input-text-button-size: 32px;\n$input-text-floating-label-fontsize: 12px;\n$input-text-expandable-icon-top: 16px;\n\n\n/* SWITCH */\n\n$switch-label-font-size: 16px;\n$switch-label-height: 24px;\n$switch-track-height: 14px;\n$switch-track-length: 36px;\n$switch-thumb-size: 20px;\n$switch-track-top: ($switch-label-height - $switch-track-height) / 2;\n$switch-thumb-top: ($switch-label-height - $switch-thumb-size) / 2;\n$switch-ripple-size: $switch-label-height * 2;\n$switch-helper-size: 8px;\n\n/* SPINNER */\n\n$spinner-size: 28px !default;\n$spinner-stroke-width: 3px !default;\n\n// Amount of circle the arc takes up.\n$spinner-arc-size: 270deg;\n// Time it takes to expand and contract arc.\n$spinner-arc-time: 1333ms;\n// How much the start location of the arc should rotate each time.\n$spinner-arc-start-rot: 216deg;\n\n$spinner-duration: 360 * $spinner-arc-time / (\n strip-units($spinner-arc-start-rot + (360deg - $spinner-arc-size)));\n\n\n/* RADIO */\n\n$radio-label-font-size: 16px;\n$radio-label-height: 24px;\n$radio-button-size: 16px;\n$radio-inner-margin: $radio-button-size / 4;\n$radio-padding: 8px;\n$radio-top-offset: ($radio-label-height - $radio-button-size) / 2;\n$radio-ripple-size: 42px;\n\n\n/* MENU */\n\n$menu-expand-duration: 0.3s;\n$menu-fade-duration: 0.2s;\n\n/* LIST */\n\n$list-container-height: 500px;\n$list-container-width: 400px;\n$list-container-item-height: 70px;\n\n/* LAYOUT */\n\n$layout-nav-link-font-size: 13px;\n\n$layout-drawer-narrow: 240px;\n$layout-drawer-wide: 456px;\n$layout-drawer-width: $layout-drawer-narrow;\n\n$layout-header-icon-size: 32px;\n$layout-screen-size-threshold: 1024px;\n$layout-header-icon-margin: 24px;\n$layout-drawer-button-mobile-size: 32px;\n$layout-drawer-button-desktop-size: 48px;\n\n$layout-header-mobile-row-height: 56px;\n$layout-mobile-header-height: $layout-header-mobile-row-height;\n$layout-header-desktop-row-height: 64px;\n$layout-desktop-header-height: $layout-header-desktop-row-height;\n\n$layout-header-desktop-baseline: 80px;\n$layout-header-mobile-baseline: 72px;\n$layout-header-mobile-indent: 16px;\n$layout-header-desktop-indent: 40px;\n\n$layout-tab-font-size: 14px;\n$layout-tab-bar-height: 48px;\n$layout-tab-mobile-padding: 12px;\n$layout-tab-desktop-padding: 24px;\n$layout-tab-highlight-thickness: 2px;\n\n\n/* ICON TOGGLE */\n\n$icon-toggle-size: 32px !default;\n$icon-toggle-font-size: 24px !default;\n$icon-toggle-ripple-size: 36px !default;\n\n/* FOOTER */\n\n/*mega-footer*/\n$footer-min-padding: 16px !default;\n$footer-padding-sides: 40px !default;\n$footer-heading-font-size: 14px !default;\n$footer-heading-line-height: (1.7 * $footer-heading-font-size) !default;\n$footer-btn-size: 36px !default;\n\n/*mini-footer*/\n$padding: 16px !default;\n$footer-heading-font-size: 24px !default;\n$footer-heading-line-height: (1.5 * $footer-heading-font-size) !default;\n$footer-btn-size: 36px !default;\n\n/* CHECKBOX */\n\n$checkbox-label-font-size: 16px;\n$checkbox-label-height: 24px;\n$checkbox-button-size: 16px;\n$checkbox-inner-margin: 2px;\n$checkbox-padding: 8px;\n$checkbox-top-offset:\n($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;\n$checkbox-ripple-size: $checkbox-label-height * 1.5;\n\n/* CARD */\n\n/* Card dimensions */\n$card-width: 330px !default;\n$card-height: 200px !default;\n$card-font-size: 16px !default;\n$card-title-font-size: 24px !default;\n$card-subtitle-font-size: 14px !default;\n$card-horizontal-padding: 16px !default;\n$card-vertical-padding: 16px !default;\n\n$card-title-perspective-origin-x: 165px !default;\n$card-title-perspective-origin-y: 56px !default;\n\n$card-title-transform-origin-x: 165px !default;\n$card-title-transform-origin-y: 56px !default;\n\n$card-title-text-transform-origin-x: 149px !default;\n$card-title-text-transform-origin-y: 48px !default;\n\n$card-supporting-text-font-size: 13px !default;\n$card-supporting-text-line-height: 18px !default;\n\n$card-actions-font-size: 16px !default;\n\n$card-title-text-font-weight: 300 !default;\n$card-z-index: 1 !default;\n\n/* Cover image */\n$card-cover-image-height: 186px !default;\n$card-background-image-url: '' !default;\n\n\n/* BUTTON */\n/**\n *\n * Dimensions\n *\n */\n$button-min-width: 64px !default;\n$button-height: 36px !default;\n$button-padding: 16px !default;\n$button-margin: 4px !default;\n$button-border-radius: 2px !default;\n\n$button-fab-size: 56px !default;\n$button-fab-size-mini: 40px !default;\n$button-fab-font-size: 24px !default;\n\n$button-icon-size: 32px !default;\n$button-icon-size-mini: 24px !default;\n\n\n/* ANIMATION */\n$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;\n$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;\n\n$animation-curve-default: $animation-curve-fast-out-slow-in !default;\n\n\n/* PROGRESS */\n$bar-height: 4px !default;\n\n/* BADGE */\n$badge-font-size: 12px;\n$badge-color: unquote(\"rgb(#{$color-accent-contrast})\") !default;\n$badge-color-inverse: unquote(\"rgb(#{$color-accent})\") !default;\n$badge-background: unquote(\"rgb(#{$color-accent})\") !default;\n$badge-background-inverse: unquote(\"rgb(#{$color-accent-contrast})\") !default;\n$badge-size : 22px;\n$badge-padding: 2px;\n\n/* SHADOWS */\n\n$shadow-key-umbra-opacity: 0.2;\n$shadow-key-penumbra-opacity: 0.14;\n$shadow-ambient-shadow-opacity: 0.12;\n\n/* GRID */\n\n$grid-desktop-columns: 12 !default;\n$grid-desktop-gutter: 16px !default;\n$grid-desktop-margin: 16px !default;\n\n$grid-desktop-breakpoint: 840px !default;\n\n$grid-tablet-columns: 8 !default;\n$grid-tablet-gutter: $grid-desktop-gutter !default;\n$grid-tablet-margin: $grid-desktop-margin !default;\n\n$grid-tablet-breakpoint: 480px !default;\n\n$grid-phone-columns: 4 !default;\n$grid-phone-gutter: $grid-desktop-gutter !default;\n$grid-phone-margin: $grid-desktop-margin !default;\n\n$grid-cell-default-columns: $grid-phone-columns !default;\n\n/* DATA TABLE */\n\n$data-table-font-size: 13px;\n$data-table-header-font-size: 12px;\n\n$data-table-header-color: rgba(#000, 0.54);\n$data-table-divider-color: rgba(#000, 0.12);\n\n$data-table-hover-color: #eeeeee;\n$data-table-selection-color: #e0e0e0;\n\n$data-table-dividers: 1px solid $data-table-divider-color;\n\n$data-table-row-height: 48px;\n$data-table-last-row-height: 56px;\n$data-table-header-height: 56px;\n\n$data-table-column-spacing: 36px;\n$data-table-column-padding: $data-table-column-spacing / 2;\n\n$data-table-card-header-height: 64px;\n$data-table-card-title-top: 20px;\n$data-table-card-padding: 24px;\n$data-table-button-padding-right: 16px;\n$data-table-cell-top: $data-table-card-padding / 2;\n\n/* TOOLTIP */\n$tooltip-font-size: 10px !default;\n$tooltip-font-size-large: 14px !default;\n"],"sourceRoot":"/source/"} \ No newline at end of file +{"version":3,"file":"mdl-selectfield.min.css","sources":["selectfield/selectfield.scss","../bower_components/material-design-lite/src/_variables.scss","../bower_components/material-design-lite/src/_color-definitions.scss","../bower_components/material-design-lite/src/_functions.scss","../bower_components/material-design-lite/src/_mixins.scss"],"sourcesContent":["@import \"../../bower_components/material-design-lite/src/variables\";\r\n@import \"../../bower_components/material-design-lite/src/mixins\";\r\n\r\n$selectfield-font-size: 16px !default;\r\n$selectfield-padding: 4px !default;\r\n$selectfield-vertical-spacing: 20px !default;\r\n\r\n$selectfield-floating-label-fontsize: 12px !default;\r\n\r\n$selectfield-background-color: transparent !default;\r\n$selectfield-label-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\r\n$selectfield-bottom-border-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\r\n$selectfield-highlight-color: unquote(\"rgb(#{$color-primary})\") !default;\r\n$selectfield-disabled-color: $selectfield-bottom-border-color !default;\r\n$selectfield-disabled-text-color: $selectfield-label-color !default;\r\n$selectfield-error-color: unquote(\"rgb(222, 50, 38)\") !default;\r\n\r\n// The container for the whole component.\r\n.mdl-selectfield {\r\n position: relative;\r\n font-size: $selectfield-font-size;\r\n display: inline-block;\r\n box-sizing: border-box;\r\n width: 300px;\r\n max-width: 100%;\r\n margin: 0;\r\n padding: $selectfield-vertical-spacing 0;\r\n\r\n .mdl-menu__container {\r\n max-height: 256px;\r\n min-width: 100%;\r\n top: $selectfield-vertical-spacing - 8px !important;\r\n }\r\n &.mdl-selectfield--floating-label .mdl-menu__container {\r\n top: $selectfield-vertical-spacing + 4px !important;\r\n }\r\n .mdl-menu__outline {\r\n max-height: 256px;\r\n transform-origin: 50% 0;\r\n } \r\n .mdl-menu {\r\n min-width: 100%;\r\n max-height: 240px;\r\n outline: 0;\r\n overflow-y: auto;\r\n width: auto !important;\r\n\r\n &.is-animating {\r\n overflow: hidden;\r\n }\r\n }\r\n\r\n}\r\n\r\n// Optional class to align right.\r\n.mdl-selectfield--align-right {\r\n text-align: right;\r\n}\r\n\r\n// Optional class to display at full width.\r\n.mdl-selectfield--full-width {\r\n width: 100%;\r\n}\r\n\r\n// Styling for the select element.\r\n.mdl-selectfield__select {\r\n display: block;\r\n width: 100%;\r\n padding: $selectfield-padding 0;\r\n margin: 0;\r\n color: inherit;\r\n background: $selectfield-background-color;\r\n font-size: $selectfield-font-size;\r\n text-align: left;\r\n color: inherit;\r\n border: none;\r\n border-bottom: 1px solid $selectfield-bottom-border-color;\r\n border-radius: 0;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n\r\n .mdl-selectfield.is-focused & {\r\n outline: none;\r\n }\r\n\r\n .mdl-selectfield.is-invalid & {\r\n border-color: $selectfield-error-color;\r\n box-shadow: none;\r\n }\r\n\r\n fieldset[disabled] .mdl-selectfield &, .mdl-selectfield.is-disabled & {\r\n background-color: transparent;\r\n border-bottom: 1px dotted $selectfield-disabled-color;\r\n color: $selectfield-disabled-text-color;\r\n }\r\n}\r\n\r\n// Styling for the label / floating label.\r\n.mdl-selectfield__label {\r\n bottom: 0;\r\n color: $selectfield-label-color;\r\n font-size: $selectfield-font-size;\r\n left: 0;\r\n right: 0;\r\n pointer-events: none;\r\n position: absolute;\r\n display: block;\r\n top: ($selectfield-padding + $selectfield-vertical-spacing);\r\n width: 100%;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-align: left;\r\n\r\n .mdl-selectfield.is-dirty & {\r\n visibility: hidden;\r\n }\r\n\r\n // Floating Label\r\n .mdl-selectfield--floating-label & {\r\n @include material-animation-default();\r\n }\r\n\r\n fieldset[disabled] .mdl-selectfield &,\r\n .mdl-selectfield.is-disabled.is-disabled & {\r\n color: $selectfield-disabled-text-color;\r\n }\r\n\r\n .mdl-selectfield--floating-label.is-focused &,\r\n .mdl-selectfield--floating-label.is-dirty & {\r\n color: $selectfield-highlight-color;\r\n font-size : $selectfield-floating-label-fontsize;\r\n top: $selectfield-vertical-spacing - ($selectfield-floating-label-fontsize + $selectfield-padding);\r\n visibility: visible;\r\n }\r\n\r\n .mdl-selectfield--floating-label.is-invalid & {\r\n color: $selectfield-error-color;\r\n font-size: $selectfield-floating-label-fontsize;\r\n }\r\n\r\n // The after label is the colored underline for the TextField.\r\n &:after {\r\n background-color: $selectfield-highlight-color;\r\n bottom: $selectfield-vertical-spacing;\r\n content: '';\r\n height: 2px;\r\n left: 45%;\r\n position: absolute;\r\n @include material-animation-default();\r\n visibility: hidden;\r\n width: 10px;\r\n }\r\n\r\n .mdl-selectfield.is-focused &:after {\r\n left: 0;\r\n visibility: visible;\r\n width: 100%;\r\n }\r\n\r\n .mdl-selectfield.is-invalid &:after {\r\n background-color: $selectfield-error-color;\r\n }\r\n}\r\n\r\n// SelectField Error.\r\n.mdl-selectfield__error {\r\n color: $selectfield-error-color;\r\n position: absolute;\r\n font-size: $selectfield-floating-label-fontsize;\r\n margin-top: 3px;\r\n visibility: hidden;\r\n display: block;\r\n\r\n .mdl-selectfield.is-invalid & {\r\n visibility: visible;\r\n }\r\n}\r\n\r\n.mdl-selectfield__placeholder {\r\n bottom: $selectfield-vertical-spacing;\r\n cursor: pointer;\r\n color: $selectfield-label-color;\r\n left: 0;\r\n padding: 2px 0;\r\n position: absolute;\r\n text-align: right;\r\n top: $selectfield-vertical-spacing;\r\n width: 100%;\r\n & > i {\r\n outline: 0;\r\n }\r\n}","/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/*------------------------------------*\\\n $CONTENTS\n\\*------------------------------------*/\n/**\n * STYLE GUIDE VARIABLES------------------Declarations of Sass variables\n * -----Typography\n * -----Colors\n * -----Textfield\n * -----Switch\n * -----Spinner\n * -----Radio\n * -----Menu\n * -----List\n * -----Layout\n * -----Icon toggles\n * -----Footer\n * -----Column\n * -----Checkbox\n * -----Card\n * -----Button\n * -----Animation\n * -----Progress\n * -----Badge\n * -----Shadows\n * -----Grid\n * -----Data table\n */\n\n\n/* ========== TYPOGRAPHY ========== */\n\n/* We're splitting fonts into \"preferred\" and \"performance\" in order to optimize\n page loading. For important text, such as the body, we want it to load\n immediately and not wait for the web font load, whereas for other sections,\n such as headers and titles, we're OK with things taking a bit longer to load.\n We do have some optional classes and parameters in the mixins, in case you\n definitely want to make sure you're using the preferred font and don't mind\n the performance hit.\n We should be able to improve on this once CSS Font Loading L3 becomes more\n widely available.\n*/\n$preferred_font: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;\n$performance_font: 'Helvetica', 'Arial', sans-serif !default;\n\n/* ========== COLORS ========== */\n\n/**\n*\n* Material design color palettes.\n* @see http://www.google.com/design/spec/style/color.html\n*\n**/\n\n@import \"color-definitions\";\n@import \"functions\";\n\n/* ========== IMAGES ========== */\n$image_path: '/images' !default;\n\n/* ========== Color & Themes ========== */\n\n// Define whether individual color pallet items should have classes created.\n// Setting this to true will remove individual color classes for each color in the pallets.\n// To improve overall performance (assuming they aren't used) by:\n// * Saving server bandwidth sending the extra classes\n// * Save client computation against the classes\n// it is RECOMMENDED you set this to true.\n$trim-color-classes: false !default;\n\n// Use color primarily for emphasis. Choose colors that fit with\n// your brand and provide good contrast between visual components.\n$color-primary: $palette-indigo-500 !default;\n$color-primary-dark: $palette-indigo-700 !default;\n$color-accent: $palette-pink-A200 !default;\n\n// Our primary is dark, so use $color-dark-contrast for overlaid text.\n$color-primary-contrast: $color-dark-contrast !default;\n// Our accent is dark, so use $color-dark-contrast for overlaid text.\n$color-accent-contrast: $color-dark-contrast !default;\n\n// Replace all colors with placeholders if we're generating a template.\n@if $styleguide-generate-template == true {\n $color-primary: '$color-primary';\n $color-primary-dark: '$color-primary-dark';\n $color-accent: '$color-accent';\n $color-primary-contrast: '$color-primary-contrast';\n $color-accent-contrast: '$color-accent-contrast';\n}\n\n/* ========== Typography ========== */\n\n// We use the following default color styles: text-color-primary and\n// text-color-secondary. For light themes, use text-color-primary-inverse\n// and text-color-secondary-inverse.\n\n$text-color-primary: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\n$text-link-color: unquote(\"rgb(#{$color-accent})\") !default;\n\n// Define whether to target elements directly for typographic enhancements.\n// Turning this off means you need to use mdl-* classes more often.\n// Other components may also fail to adhere to MD without these rules.\n// It is strongly recommended you leave this as true.\n\n$target-elements-directly: true !default;\n\n/* ========== Components ========== */\n\n/* ========== Standard Buttons ========== */\n\n// Default button colors.\n$button-primary-color: unquote(\"rgba(#{$palette-grey-500}, 0.20)\") !default;\n$button-secondary-color: unquote(\"rgb(#{$color-black})\") !default;\n$button-hover-color: $button-primary-color !default;\n$button-active-color: unquote(\"rgba(#{$palette-grey-500}, 0.40)\") !default;\n$button-focus-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n\n// Colored button colors.\n$button-primary-color-alt: unquote(\"rgb(#{$color-primary})\") !default;\n$button-secondary-color-alt: unquote(\"rgb(#{$color-primary-contrast})\") !default;\n$button-hover-color-alt: unquote(\"rgb(#{$color-primary})\") !default;\n$button-active-color-alt: unquote(\"rgb(#{$color-primary})\") !default;\n$button-focus-color-alt: $button-focus-color !default;\n\n// Ripple color for colored raised buttons.\n$button-ripple-color-alt: unquote(\"rgb(#{$color-primary-contrast})\") !default;\n\n// Disabled button colors.\n$button-primary-color-disabled: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n$button-secondary-color-disabled: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n\n// FAB colors and sizes.\n$button-fab-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\n$button-fab-hover-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\n$button-fab-active-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\n$button-fab-text-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\n$button-fab-ripple-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\n\n// Icon button colors and sizes.\n$button-icon-color: unquote(\"rgb(#{$palette-grey-700})\") !default;\n$button-icon-focus-color: $button-focus-color !default;\n\n/* ========== Icon Toggles ========== */\n\n$icon-toggle-color: unquote(\"rgb(#{$palette-grey-700})\") !default;\n$icon-toggle-focus-color: $button-focus-color !default;\n$icon-toggle-checked-color: unquote(\"rgb(#{$color-primary})\") !default;\n$icon-toggle-checked-focus-color: unquote(\"rgba(#{$color-primary}, 0.26)\") !default;\n$icon-toggle-disabled-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n\n/* ========== Radio Buttons ========== */\n\n$radio-color: unquote(\"rgb(#{$color-primary})\") !default;\n$radio-off-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n$radio-disabled-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n\n/* ========== Ripple effect ========== */\n\n$ripple-bg-color: unquote(\"rgb(#{$color-light-contrast})\") !default;\n\n/* ========== Layout ========== */\n\n$layout-nav-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n\n// Drawer\n$layout-drawer-bg-color: unquote(\"rgb(#{$palette-grey-50})\") !default;\n$layout-drawer-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n$layout-text-color: unquote(\"rgb(#{$palette-grey-800})\") !default;\n$layout-drawer-navigation-color: #757575 !default;\n$layout-drawer-navigation-link-active-background: unquote(\"rgb(#{$color-light-contrast})\") !default;\n$layout-drawer-navigation-link-active-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n\n// Header\n$layout-header-bg-color: unquote(\"rgb(#{$color-primary})\") !default;\n$layout-header-text-color: unquote(\"rgb(#{$color-primary-contrast})\") !default;\n$layout-header-nav-hover-color: unquote(\"rgba(#{$palette-grey-700}, 0.6)\") !default;\n$layout-header-tab-text-color: unquote(\"rgba(#{$color-primary-contrast}, 0.6)\") !default;\n\n// Tabs\n$layout-header-tab-highlight: unquote(\"rgb(#{$color-accent})\") !default;\n\n/* ========== Content Tabs ========== */\n\n$tab-highlight-color: unquote(\"rgb(#{$color-primary})\") !default;\n$tab-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n$tab-active-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\n$tab-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n\n/* ========== Checkboxes ========== */\n\n$checkbox-color: unquote(\"rgb(#{$color-primary})\") !default;\n$checkbox-off-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n$checkbox-disabled-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n$checkbox-focus-color: unquote(\"rgba(#{$color-primary}, 0.26)\") !default;\n$checkbox-image-path: $image_path;\n\n/* ========== Switches ========== */\n\n$switch-color: unquote(\"rgb(#{$color-primary})\") !default;\n$switch-faded-color: unquote(\"rgba(#{$color-primary}, 0.26)\") !default;\n$switch-thumb-color: $switch-color !default;\n$switch-track-color: unquote(\"rgba(#{$color-primary}, 0.5)\") !default;\n\n$switch-off-thumb-color: unquote(\"rgb(#{$palette-grey-50})\") !default;\n$switch-off-track-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n$switch-disabled-thumb-color: unquote(\"rgb(#{$palette-grey-400})\") !default;\n$switch-disabled-track-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n\n/* ========== Spinner ========== */\n\n$spinner-color-1: unquote(\"rgb(#{$palette-blue-400})\") !default;\n$spinner-color-2: unquote(\"rgb(#{$palette-red-500})\") !default;\n$spinner-color-3: unquote(\"rgb(#{$palette-yellow-600})\") !default;\n$spinner-color-4: unquote(\"rgb(#{$palette-green-500})\") !default;\n\n$spinner-single-color: unquote(\"rgb(#{$color-primary})\") !default;\n\n/* ========== Text fields ========== */\n\n$input-text-background-color: transparent !default;\n$input-text-label-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n$input-text-bottom-border-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n$input-text-highlight-color: unquote(\"rgb(#{$color-primary})\") !default;\n$input-text-disabled-color: $input-text-bottom-border-color !default;\n$input-text-disabled-text-color: $input-text-label-color !default;\n$input-text-error-color: unquote(\"rgb(222, 50, 38)\") !default;\n\n/* ========== Card ========== */\n\n$card-background-color: unquote(\"rgb(#{$color-white})\") !default;\n$card-text-color: unquote(\"rgb(#{$color-black})\") !default;\n$card-image-placeholder-color: unquote(\"rgb(#{$color-accent})\") !default;\n$card-supporting-text-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n$card-border-color: rgba(0,0,0,0.1) !default;\n$card-subtitle-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n\n/* ========== Sliders ========== */\n\n$range-bg-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n$range-color: unquote(\"rgb(#{$color-primary})\") !default;\n$range-faded-color: unquote(\"rgba(#{$color-primary}, 0.26)\") !default;\n$range-bg-focus-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n\n/* ========== Progress ========== */\n$progress-main-color: unquote(\"rgb(#{$color-primary})\") !default;\n$progress-secondary-color: unquote(\"rgba(#{$color-primary-contrast}, 0.7)\") !default;\n$progress-fallback-buffer-color: unquote(\"rgba(#{$color-primary-contrast}, 0.9)\") !default;\n$progress-image-path: $image_path;\n\n/* ========== List ========== */\n\n$list-container-item-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n$list-container-view-background: unquote(\"rgb(#{$color-white})\") !default;\n\n/* ========== Item ========== */\n\n// Default Item Colors\n$default-item-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\n$default-item-outline-color: unquote(\"rgb(#{$palette-grey-400})\") !default;\n$default-item-hover-bg-color: unquote(\"rgb(#{$palette-grey-200})\") !default;\n$default-item-focus-bg-color: unquote(\"rgb(#{$palette-grey-200})\") !default;\n$default-item-active-bg-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n\n// Disabled Button Colors\n$disabled-item-text-color: unquote(\"rgb(#{$palette-grey-400})\") !default;\n\n/* ========== Dropdown menu ========== */\n\n$default-dropdown-bg-color: unquote(\"rgb(#{$color-white})\") !default;\n\n/* ========== Tooltips ========== */\n\n$tooltip-text-color: unquote(\"rgb(#{$color-white})\") !default;\n$tooltip-background-color: unquote(\"rgba(#{$palette-grey-700}, 0.9)\") !default;\n\n/* ========== Footer ========== */\n\n$footer-bg-color: unquote(\"rgb(#{$palette-grey-800})\") !default;\n$footer-color: unquote(\"rgb(#{$palette-grey-500})\") !default;\n$footer-heading-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n$footer-button-fill-color: $footer-color !default;\n$footer-underline-color: $footer-color !default;\n\n\n/* TEXTFIELD */\n\n$input-text-font-size: 16px;\n$input-text-width: 100%;\n$input-text-padding: 4px;\n$input-text-ripple-size: 32px;\n$input-text-vertical-spacing: 20px;\n\n$input-text-button-size: 32px;\n$input-text-floating-label-fontsize: 12px;\n$input-text-expandable-icon-top: 16px;\n\n\n/* SWITCH */\n\n$switch-label-font-size: 16px;\n$switch-label-height: 24px;\n$switch-track-height: 14px;\n$switch-track-length: 36px;\n$switch-thumb-size: 20px;\n$switch-track-top: ($switch-label-height - $switch-track-height) / 2;\n$switch-thumb-top: ($switch-label-height - $switch-thumb-size) / 2;\n$switch-ripple-size: $switch-label-height * 2;\n$switch-helper-size: 8px;\n\n/* SPINNER */\n\n$spinner-size: 28px !default;\n$spinner-stroke-width: 3px !default;\n\n// Amount of circle the arc takes up.\n$spinner-arc-size: 270deg;\n// Time it takes to expand and contract arc.\n$spinner-arc-time: 1333ms;\n// How much the start location of the arc should rotate each time.\n$spinner-arc-start-rot: 216deg;\n\n$spinner-duration: 360 * $spinner-arc-time / (\n strip-units($spinner-arc-start-rot + (360deg - $spinner-arc-size)));\n\n\n/* RADIO */\n\n$radio-label-font-size: 16px;\n$radio-label-height: 24px;\n$radio-button-size: 16px;\n$radio-inner-margin: $radio-button-size / 4;\n$radio-padding: 8px;\n$radio-top-offset: ($radio-label-height - $radio-button-size) / 2;\n$radio-ripple-size: 42px;\n\n\n/* MENU */\n\n$menu-expand-duration: 0.3s;\n$menu-fade-duration: 0.2s;\n\n/* LIST */\n\n$list-container-height: 500px;\n$list-container-width: 400px;\n$list-container-item-height: 70px;\n\n/* LAYOUT */\n\n$layout-nav-link-font-size: 13px;\n\n$layout-drawer-narrow: 240px;\n$layout-drawer-wide: 456px;\n$layout-drawer-width: $layout-drawer-narrow;\n\n$layout-header-icon-size: 32px;\n$layout-screen-size-threshold: 1024px;\n$layout-header-icon-margin: 24px;\n$layout-drawer-button-mobile-size: 32px;\n$layout-drawer-button-desktop-size: 48px;\n\n$layout-header-mobile-row-height: 56px;\n$layout-mobile-header-height: $layout-header-mobile-row-height;\n$layout-header-desktop-row-height: 64px;\n$layout-desktop-header-height: $layout-header-desktop-row-height;\n\n$layout-header-desktop-baseline: 80px;\n$layout-header-mobile-baseline: 72px;\n$layout-header-mobile-indent: 16px;\n$layout-header-desktop-indent: 40px;\n\n$layout-tab-font-size: 14px;\n$layout-tab-bar-height: 48px;\n$layout-tab-mobile-padding: 12px;\n$layout-tab-desktop-padding: 24px;\n$layout-tab-highlight-thickness: 2px;\n\n\n/* ICON TOGGLE */\n\n$icon-toggle-size: 32px !default;\n$icon-toggle-font-size: 24px !default;\n$icon-toggle-ripple-size: 36px !default;\n\n/* FOOTER */\n\n/*mega-footer*/\n$footer-min-padding: 16px !default;\n$footer-padding-sides: 40px !default;\n$footer-heading-font-size: 14px !default;\n$footer-heading-line-height: (1.7 * $footer-heading-font-size) !default;\n$footer-btn-size: 36px !default;\n\n/*mini-footer*/\n$padding: 16px !default;\n$footer-heading-font-size: 24px !default;\n$footer-heading-line-height: (1.5 * $footer-heading-font-size) !default;\n$footer-btn-size: 36px !default;\n\n/* CHECKBOX */\n\n$checkbox-label-font-size: 16px;\n$checkbox-label-height: 24px;\n$checkbox-button-size: 16px;\n$checkbox-inner-margin: 2px;\n$checkbox-padding: 8px;\n$checkbox-top-offset:\n($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;\n$checkbox-ripple-size: $checkbox-label-height * 1.5;\n\n/* CARD */\n\n/* Card dimensions */\n$card-width: 330px !default;\n$card-height: 200px !default;\n$card-font-size: 16px !default;\n$card-title-font-size: 24px !default;\n$card-subtitle-font-size: 14px !default;\n$card-horizontal-padding: 16px !default;\n$card-vertical-padding: 16px !default;\n\n$card-title-perspective-origin-x: 165px !default;\n$card-title-perspective-origin-y: 56px !default;\n\n$card-title-transform-origin-x: 165px !default;\n$card-title-transform-origin-y: 56px !default;\n\n$card-title-text-transform-origin-x: 149px !default;\n$card-title-text-transform-origin-y: 48px !default;\n\n$card-supporting-text-font-size: 13px !default;\n$card-supporting-text-line-height: 18px !default;\n\n$card-actions-font-size: 16px !default;\n\n$card-title-text-font-weight: 300 !default;\n$card-z-index: 1 !default;\n\n/* Cover image */\n$card-cover-image-height: 186px !default;\n$card-background-image-url: '' !default;\n\n\n/* BUTTON */\n/**\n *\n * Dimensions\n *\n */\n$button-min-width: 64px !default;\n$button-height: 36px !default;\n$button-padding: 16px !default;\n$button-margin: 4px !default;\n$button-border-radius: 2px !default;\n\n$button-fab-size: 56px !default;\n$button-fab-size-mini: 40px !default;\n$button-fab-font-size: 24px !default;\n\n$button-icon-size: 32px !default;\n$button-icon-size-mini: 24px !default;\n\n\n/* ANIMATION */\n$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;\n$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;\n\n$animation-curve-default: $animation-curve-fast-out-slow-in !default;\n\n\n/* PROGRESS */\n$bar-height: 4px !default;\n\n/* BADGE */\n$badge-font-size: 12px;\n$badge-color: unquote(\"rgb(#{$color-accent-contrast})\") !default;\n$badge-color-inverse: unquote(\"rgb(#{$color-accent})\") !default;\n$badge-background: unquote(\"rgb(#{$color-accent})\") !default;\n$badge-background-inverse: unquote(\"rgb(#{$color-accent-contrast})\") !default;\n$badge-size : 22px;\n$badge-padding: 2px;\n\n/* SHADOWS */\n\n$shadow-key-umbra-opacity: 0.2;\n$shadow-key-penumbra-opacity: 0.14;\n$shadow-ambient-shadow-opacity: 0.12;\n\n/* GRID */\n\n$grid-desktop-columns: 12 !default;\n$grid-desktop-gutter: 16px !default;\n$grid-desktop-margin: 16px !default;\n\n$grid-desktop-breakpoint: 840px !default;\n\n$grid-tablet-columns: 8 !default;\n$grid-tablet-gutter: $grid-desktop-gutter !default;\n$grid-tablet-margin: $grid-desktop-margin !default;\n\n$grid-tablet-breakpoint: 480px !default;\n\n$grid-phone-columns: 4 !default;\n$grid-phone-gutter: $grid-desktop-gutter !default;\n$grid-phone-margin: $grid-desktop-margin !default;\n\n$grid-cell-default-columns: $grid-phone-columns !default;\n\n/* DATA TABLE */\n\n$data-table-font-size: 13px;\n$data-table-header-font-size: 12px;\n\n$data-table-header-color: rgba(#000, 0.54);\n$data-table-divider-color: rgba(#000, 0.12);\n\n$data-table-hover-color: #eeeeee;\n$data-table-selection-color: #e0e0e0;\n\n$data-table-dividers: 1px solid $data-table-divider-color;\n\n$data-table-row-height: 48px;\n$data-table-last-row-height: 56px;\n$data-table-header-height: 56px;\n\n$data-table-column-spacing: 36px;\n$data-table-column-padding: $data-table-column-spacing / 2;\n\n$data-table-card-header-height: 64px;\n$data-table-card-title-top: 20px;\n$data-table-card-padding: 24px;\n$data-table-button-padding-right: 16px;\n$data-table-cell-top: $data-table-card-padding / 2;\n\n/* TOOLTIP */\n$tooltip-font-size: 10px !default;\n$tooltip-font-size-large: 14px !default;\n","/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/* ========== Color Palettes ========== */\n\n// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200,\n// A400, A700.\n\n$palette-red:\n\"255,235,238\"\n\"255,205,210\"\n\"239,154,154\"\n\"229,115,115\"\n\"239,83,80\"\n\"244,67,54\"\n\"229,57,53\"\n\"211,47,47\"\n\"198,40,40\"\n\"183,28,28\"\n\"255,138,128\"\n\"255,82,82\"\n\"255,23,68\"\n\"213,0,0\";\n\n$palette-red-50: nth($palette-red, 1);\n$palette-red-100: nth($palette-red, 2);\n$palette-red-200: nth($palette-red, 3);\n$palette-red-300: nth($palette-red, 4);\n$palette-red-400: nth($palette-red, 5);\n$palette-red-500: nth($palette-red, 6);\n$palette-red-600: nth($palette-red, 7);\n$palette-red-700: nth($palette-red, 8);\n$palette-red-800: nth($palette-red, 9);\n$palette-red-900: nth($palette-red, 10);\n$palette-red-A100: nth($palette-red, 11);\n$palette-red-A200: nth($palette-red, 12);\n$palette-red-A400: nth($palette-red, 13);\n$palette-red-A700: nth($palette-red, 14);\n\n$palette-pink:\n\"252,228,236\"\n\"248,187,208\"\n\"244,143,177\"\n\"240,98,146\"\n\"236,64,122\"\n\"233,30,99\"\n\"216,27,96\"\n\"194,24,91\"\n\"173,20,87\"\n\"136,14,79\"\n\"255,128,171\"\n\"255,64,129\"\n\"245,0,87\"\n\"197,17,98\";\n\n$palette-pink-50: nth($palette-pink, 1);\n$palette-pink-100: nth($palette-pink, 2);\n$palette-pink-200: nth($palette-pink, 3);\n$palette-pink-300: nth($palette-pink, 4);\n$palette-pink-400: nth($palette-pink, 5);\n$palette-pink-500: nth($palette-pink, 6);\n$palette-pink-600: nth($palette-pink, 7);\n$palette-pink-700: nth($palette-pink, 8);\n$palette-pink-800: nth($palette-pink, 9);\n$palette-pink-900: nth($palette-pink, 10);\n$palette-pink-A100: nth($palette-pink, 11);\n$palette-pink-A200: nth($palette-pink, 12);\n$palette-pink-A400: nth($palette-pink, 13);\n$palette-pink-A700: nth($palette-pink, 14);\n\n$palette-purple:\n\"243,229,245\"\n\"225,190,231\"\n\"206,147,216\"\n\"186,104,200\"\n\"171,71,188\"\n\"156,39,176\"\n\"142,36,170\"\n\"123,31,162\"\n\"106,27,154\"\n\"74,20,140\"\n\"234,128,252\"\n\"224,64,251\"\n\"213,0,249\"\n\"170,0,255\";\n\n$palette-purple-50: nth($palette-purple, 1);\n$palette-purple-100: nth($palette-purple, 2);\n$palette-purple-200: nth($palette-purple, 3);\n$palette-purple-300: nth($palette-purple, 4);\n$palette-purple-400: nth($palette-purple, 5);\n$palette-purple-500: nth($palette-purple, 6);\n$palette-purple-600: nth($palette-purple, 7);\n$palette-purple-700: nth($palette-purple, 8);\n$palette-purple-800: nth($palette-purple, 9);\n$palette-purple-900: nth($palette-purple, 10);\n$palette-purple-A100: nth($palette-purple, 11);\n$palette-purple-A200: nth($palette-purple, 12);\n$palette-purple-A400: nth($palette-purple, 13);\n$palette-purple-A700: nth($palette-purple, 14);\n\n$palette-deep-purple:\n\"237,231,246\"\n\"209,196,233\"\n\"179,157,219\"\n\"149,117,205\"\n\"126,87,194\"\n\"103,58,183\"\n\"94,53,177\"\n\"81,45,168\"\n\"69,39,160\"\n\"49,27,146\"\n\"179,136,255\"\n\"124,77,255\"\n\"101,31,255\"\n\"98,0,234\";\n\n$palette-deep-purple-50: nth($palette-deep-purple, 1);\n$palette-deep-purple-100: nth($palette-deep-purple, 2);\n$palette-deep-purple-200: nth($palette-deep-purple, 3);\n$palette-deep-purple-300: nth($palette-deep-purple, 4);\n$palette-deep-purple-400: nth($palette-deep-purple, 5);\n$palette-deep-purple-500: nth($palette-deep-purple, 6);\n$palette-deep-purple-600: nth($palette-deep-purple, 7);\n$palette-deep-purple-700: nth($palette-deep-purple, 8);\n$palette-deep-purple-800: nth($palette-deep-purple, 9);\n$palette-deep-purple-900: nth($palette-deep-purple, 10);\n$palette-deep-purple-A100: nth($palette-deep-purple, 11);\n$palette-deep-purple-A200: nth($palette-deep-purple, 12);\n$palette-deep-purple-A400: nth($palette-deep-purple, 13);\n$palette-deep-purple-A700: nth($palette-deep-purple, 14);\n\n$palette-indigo:\n\"232,234,246\"\n\"197,202,233\"\n\"159,168,218\"\n\"121,134,203\"\n\"92,107,192\"\n\"63,81,181\"\n\"57,73,171\"\n\"48,63,159\"\n\"40,53,147\"\n\"26,35,126\"\n\"140,158,255\"\n\"83,109,254\"\n\"61,90,254\"\n\"48,79,254\";\n\n$palette-indigo-50: nth($palette-indigo, 1);\n$palette-indigo-100: nth($palette-indigo, 2);\n$palette-indigo-200: nth($palette-indigo, 3);\n$palette-indigo-300: nth($palette-indigo, 4);\n$palette-indigo-400: nth($palette-indigo, 5);\n$palette-indigo-500: nth($palette-indigo, 6);\n$palette-indigo-600: nth($palette-indigo, 7);\n$palette-indigo-700: nth($palette-indigo, 8);\n$palette-indigo-800: nth($palette-indigo, 9);\n$palette-indigo-900: nth($palette-indigo, 10);\n$palette-indigo-A100: nth($palette-indigo, 11);\n$palette-indigo-A200: nth($palette-indigo, 12);\n$palette-indigo-A400: nth($palette-indigo, 13);\n$palette-indigo-A700: nth($palette-indigo, 14);\n\n$palette-blue:\n\"227,242,253\"\n\"187,222,251\"\n\"144,202,249\"\n\"100,181,246\"\n\"66,165,245\"\n\"33,150,243\"\n\"30,136,229\"\n\"25,118,210\"\n\"21,101,192\"\n\"13,71,161\"\n\"130,177,255\"\n\"68,138,255\"\n\"41,121,255\"\n\"41,98,255\";\n\n$palette-blue-50: nth($palette-blue, 1);\n$palette-blue-100: nth($palette-blue, 2);\n$palette-blue-200: nth($palette-blue, 3);\n$palette-blue-300: nth($palette-blue, 4);\n$palette-blue-400: nth($palette-blue, 5);\n$palette-blue-500: nth($palette-blue, 6);\n$palette-blue-600: nth($palette-blue, 7);\n$palette-blue-700: nth($palette-blue, 8);\n$palette-blue-800: nth($palette-blue, 9);\n$palette-blue-900: nth($palette-blue, 10);\n$palette-blue-A100: nth($palette-blue, 11);\n$palette-blue-A200: nth($palette-blue, 12);\n$palette-blue-A400: nth($palette-blue, 13);\n$palette-blue-A700: nth($palette-blue, 14);\n\n$palette-light-blue:\n\"225,245,254\"\n\"179,229,252\"\n\"129,212,250\"\n\"79,195,247\"\n\"41,182,246\"\n\"3,169,244\"\n\"3,155,229\"\n\"2,136,209\"\n\"2,119,189\"\n\"1,87,155\"\n\"128,216,255\"\n\"64,196,255\"\n\"0,176,255\"\n\"0,145,234\";\n\n$palette-light-blue-50: nth($palette-light-blue, 1);\n$palette-light-blue-100: nth($palette-light-blue, 2);\n$palette-light-blue-200: nth($palette-light-blue, 3);\n$palette-light-blue-300: nth($palette-light-blue, 4);\n$palette-light-blue-400: nth($palette-light-blue, 5);\n$palette-light-blue-500: nth($palette-light-blue, 6);\n$palette-light-blue-600: nth($palette-light-blue, 7);\n$palette-light-blue-700: nth($palette-light-blue, 8);\n$palette-light-blue-800: nth($palette-light-blue, 9);\n$palette-light-blue-900: nth($palette-light-blue, 10);\n$palette-light-blue-A100: nth($palette-light-blue, 11);\n$palette-light-blue-A200: nth($palette-light-blue, 12);\n$palette-light-blue-A400: nth($palette-light-blue, 13);\n$palette-light-blue-A700: nth($palette-light-blue, 14);\n\n$palette-cyan:\n\"224,247,250\"\n\"178,235,242\"\n\"128,222,234\"\n\"77,208,225\"\n\"38,198,218\"\n\"0,188,212\"\n\"0,172,193\"\n\"0,151,167\"\n\"0,131,143\"\n\"0,96,100\"\n\"132,255,255\"\n\"24,255,255\"\n\"0,229,255\"\n\"0,184,212\";\n\n$palette-cyan-50: nth($palette-cyan, 1);\n$palette-cyan-100: nth($palette-cyan, 2);\n$palette-cyan-200: nth($palette-cyan, 3);\n$palette-cyan-300: nth($palette-cyan, 4);\n$palette-cyan-400: nth($palette-cyan, 5);\n$palette-cyan-500: nth($palette-cyan, 6);\n$palette-cyan-600: nth($palette-cyan, 7);\n$palette-cyan-700: nth($palette-cyan, 8);\n$palette-cyan-800: nth($palette-cyan, 9);\n$palette-cyan-900: nth($palette-cyan, 10);\n$palette-cyan-A100: nth($palette-cyan, 11);\n$palette-cyan-A200: nth($palette-cyan, 12);\n$palette-cyan-A400: nth($palette-cyan, 13);\n$palette-cyan-A700: nth($palette-cyan, 14);\n\n$palette-teal:\n\"224,242,241\"\n\"178,223,219\"\n\"128,203,196\"\n\"77,182,172\"\n\"38,166,154\"\n\"0,150,136\"\n\"0,137,123\"\n\"0,121,107\"\n\"0,105,92\"\n\"0,77,64\"\n\"167,255,235\"\n\"100,255,218\"\n\"29,233,182\"\n\"0,191,165\";\n\n$palette-teal-50: nth($palette-teal, 1);\n$palette-teal-100: nth($palette-teal, 2);\n$palette-teal-200: nth($palette-teal, 3);\n$palette-teal-300: nth($palette-teal, 4);\n$palette-teal-400: nth($palette-teal, 5);\n$palette-teal-500: nth($palette-teal, 6);\n$palette-teal-600: nth($palette-teal, 7);\n$palette-teal-700: nth($palette-teal, 8);\n$palette-teal-800: nth($palette-teal, 9);\n$palette-teal-900: nth($palette-teal, 10);\n$palette-teal-A100: nth($palette-teal, 11);\n$palette-teal-A200: nth($palette-teal, 12);\n$palette-teal-A400: nth($palette-teal, 13);\n$palette-teal-A700: nth($palette-teal, 14);\n\n$palette-green:\n\"232,245,233\"\n\"200,230,201\"\n\"165,214,167\"\n\"129,199,132\"\n\"102,187,106\"\n\"76,175,80\"\n\"67,160,71\"\n\"56,142,60\"\n\"46,125,50\"\n\"27,94,32\"\n\"185,246,202\"\n\"105,240,174\"\n\"0,230,118\"\n\"0,200,83\";\n\n$palette-green-50: nth($palette-green, 1);\n$palette-green-100: nth($palette-green, 2);\n$palette-green-200: nth($palette-green, 3);\n$palette-green-300: nth($palette-green, 4);\n$palette-green-400: nth($palette-green, 5);\n$palette-green-500: nth($palette-green, 6);\n$palette-green-600: nth($palette-green, 7);\n$palette-green-700: nth($palette-green, 8);\n$palette-green-800: nth($palette-green, 9);\n$palette-green-900: nth($palette-green, 10);\n$palette-green-A100: nth($palette-green, 11);\n$palette-green-A200: nth($palette-green, 12);\n$palette-green-A400: nth($palette-green, 13);\n$palette-green-A700: nth($palette-green, 14);\n\n$palette-light-green:\n\"241,248,233\"\n\"220,237,200\"\n\"197,225,165\"\n\"174,213,129\"\n\"156,204,101\"\n\"139,195,74\"\n\"124,179,66\"\n\"104,159,56\"\n\"85,139,47\"\n\"51,105,30\"\n\"204,255,144\"\n\"178,255,89\"\n\"118,255,3\"\n\"100,221,23\";\n\n$palette-light-green-50: nth($palette-light-green, 1);\n$palette-light-green-100: nth($palette-light-green, 2);\n$palette-light-green-200: nth($palette-light-green, 3);\n$palette-light-green-300: nth($palette-light-green, 4);\n$palette-light-green-400: nth($palette-light-green, 5);\n$palette-light-green-500: nth($palette-light-green, 6);\n$palette-light-green-600: nth($palette-light-green, 7);\n$palette-light-green-700: nth($palette-light-green, 8);\n$palette-light-green-800: nth($palette-light-green, 9);\n$palette-light-green-900: nth($palette-light-green, 10);\n$palette-light-green-A100: nth($palette-light-green, 11);\n$palette-light-green-A200: nth($palette-light-green, 12);\n$palette-light-green-A400: nth($palette-light-green, 13);\n$palette-light-green-A700: nth($palette-light-green, 14);\n\n$palette-lime:\n\"249,251,231\"\n\"240,244,195\"\n\"230,238,156\"\n\"220,231,117\"\n\"212,225,87\"\n\"205,220,57\"\n\"192,202,51\"\n\"175,180,43\"\n\"158,157,36\"\n\"130,119,23\"\n\"244,255,129\"\n\"238,255,65\"\n\"198,255,0\"\n\"174,234,0\";\n\n$palette-lime-50: nth($palette-lime, 1);\n$palette-lime-100: nth($palette-lime, 2);\n$palette-lime-200: nth($palette-lime, 3);\n$palette-lime-300: nth($palette-lime, 4);\n$palette-lime-400: nth($palette-lime, 5);\n$palette-lime-500: nth($palette-lime, 6);\n$palette-lime-600: nth($palette-lime, 7);\n$palette-lime-700: nth($palette-lime, 8);\n$palette-lime-800: nth($palette-lime, 9);\n$palette-lime-900: nth($palette-lime, 10);\n$palette-lime-A100: nth($palette-lime, 11);\n$palette-lime-A200: nth($palette-lime, 12);\n$palette-lime-A400: nth($palette-lime, 13);\n$palette-lime-A700: nth($palette-lime, 14);\n\n$palette-yellow:\n\"255,253,231\"\n\"255,249,196\"\n\"255,245,157\"\n\"255,241,118\"\n\"255,238,88\"\n\"255,235,59\"\n\"253,216,53\"\n\"251,192,45\"\n\"249,168,37\"\n\"245,127,23\"\n\"255,255,141\"\n\"255,255,0\"\n\"255,234,0\"\n\"255,214,0\";\n\n$palette-yellow-50: nth($palette-yellow, 1);\n$palette-yellow-100: nth($palette-yellow, 2);\n$palette-yellow-200: nth($palette-yellow, 3);\n$palette-yellow-300: nth($palette-yellow, 4);\n$palette-yellow-400: nth($palette-yellow, 5);\n$palette-yellow-500: nth($palette-yellow, 6);\n$palette-yellow-600: nth($palette-yellow, 7);\n$palette-yellow-700: nth($palette-yellow, 8);\n$palette-yellow-800: nth($palette-yellow, 9);\n$palette-yellow-900: nth($palette-yellow, 10);\n$palette-yellow-A100: nth($palette-yellow, 11);\n$palette-yellow-A200: nth($palette-yellow, 12);\n$palette-yellow-A400: nth($palette-yellow, 13);\n$palette-yellow-A700: nth($palette-yellow, 14);\n\n$palette-amber:\n\"255,248,225\"\n\"255,236,179\"\n\"255,224,130\"\n\"255,213,79\"\n\"255,202,40\"\n\"255,193,7\"\n\"255,179,0\"\n\"255,160,0\"\n\"255,143,0\"\n\"255,111,0\"\n\"255,229,127\"\n\"255,215,64\"\n\"255,196,0\"\n\"255,171,0\";\n\n$palette-amber-50: nth($palette-amber, 1);\n$palette-amber-100: nth($palette-amber, 2);\n$palette-amber-200: nth($palette-amber, 3);\n$palette-amber-300: nth($palette-amber, 4);\n$palette-amber-400: nth($palette-amber, 5);\n$palette-amber-500: nth($palette-amber, 6);\n$palette-amber-600: nth($palette-amber, 7);\n$palette-amber-700: nth($palette-amber, 8);\n$palette-amber-800: nth($palette-amber, 9);\n$palette-amber-900: nth($palette-amber, 10);\n$palette-amber-A100: nth($palette-amber, 11);\n$palette-amber-A200: nth($palette-amber, 12);\n$palette-amber-A400: nth($palette-amber, 13);\n$palette-amber-A700: nth($palette-amber, 14);\n\n$palette-orange:\n\"255,243,224\"\n\"255,224,178\"\n\"255,204,128\"\n\"255,183,77\"\n\"255,167,38\"\n\"255,152,0\"\n\"251,140,0\"\n\"245,124,0\"\n\"239,108,0\"\n\"230,81,0\"\n\"255,209,128\"\n\"255,171,64\"\n\"255,145,0\"\n\"255,109,0\";\n\n$palette-orange-50: nth($palette-orange, 1);\n$palette-orange-100: nth($palette-orange, 2);\n$palette-orange-200: nth($palette-orange, 3);\n$palette-orange-300: nth($palette-orange, 4);\n$palette-orange-400: nth($palette-orange, 5);\n$palette-orange-500: nth($palette-orange, 6);\n$palette-orange-600: nth($palette-orange, 7);\n$palette-orange-700: nth($palette-orange, 8);\n$palette-orange-800: nth($palette-orange, 9);\n$palette-orange-900: nth($palette-orange, 10);\n$palette-orange-A100: nth($palette-orange, 11);\n$palette-orange-A200: nth($palette-orange, 12);\n$palette-orange-A400: nth($palette-orange, 13);\n$palette-orange-A700: nth($palette-orange, 14);\n\n$palette-deep-orange:\n\"251,233,231\"\n\"255,204,188\"\n\"255,171,145\"\n\"255,138,101\"\n\"255,112,67\"\n\"255,87,34\"\n\"244,81,30\"\n\"230,74,25\"\n\"216,67,21\"\n\"191,54,12\"\n\"255,158,128\"\n\"255,110,64\"\n\"255,61,0\"\n\"221,44,0\";\n\n$palette-deep-orange-50: nth($palette-deep-orange, 1);\n$palette-deep-orange-100: nth($palette-deep-orange, 2);\n$palette-deep-orange-200: nth($palette-deep-orange, 3);\n$palette-deep-orange-300: nth($palette-deep-orange, 4);\n$palette-deep-orange-400: nth($palette-deep-orange, 5);\n$palette-deep-orange-500: nth($palette-deep-orange, 6);\n$palette-deep-orange-600: nth($palette-deep-orange, 7);\n$palette-deep-orange-700: nth($palette-deep-orange, 8);\n$palette-deep-orange-800: nth($palette-deep-orange, 9);\n$palette-deep-orange-900: nth($palette-deep-orange, 10);\n$palette-deep-orange-A100: nth($palette-deep-orange, 11);\n$palette-deep-orange-A200: nth($palette-deep-orange, 12);\n$palette-deep-orange-A400: nth($palette-deep-orange, 13);\n$palette-deep-orange-A700: nth($palette-deep-orange, 14);\n\n\n// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.\n\n$palette-brown:\n\"239,235,233\"\n\"215,204,200\"\n\"188,170,164\"\n\"161,136,127\"\n\"141,110,99\"\n\"121,85,72\"\n\"109,76,65\"\n\"93,64,55\"\n\"78,52,46\"\n\"62,39,35\";\n\n$palette-brown-50: nth($palette-brown, 1);\n$palette-brown-100: nth($palette-brown, 2);\n$palette-brown-200: nth($palette-brown, 3);\n$palette-brown-300: nth($palette-brown, 4);\n$palette-brown-400: nth($palette-brown, 5);\n$palette-brown-500: nth($palette-brown, 6);\n$palette-brown-600: nth($palette-brown, 7);\n$palette-brown-700: nth($palette-brown, 8);\n$palette-brown-800: nth($palette-brown, 9);\n$palette-brown-900: nth($palette-brown, 10);\n\n$palette-grey:\n\"250,250,250\"\n\"245,245,245\"\n\"238,238,238\"\n\"224,224,224\"\n\"189,189,189\"\n\"158,158,158\"\n\"117,117,117\"\n\"97,97,97\"\n\"66,66,66\"\n\"33,33,33\";\n\n$palette-grey-50: nth($palette-grey, 1);\n$palette-grey-100: nth($palette-grey, 2);\n$palette-grey-200: nth($palette-grey, 3);\n$palette-grey-300: nth($palette-grey, 4);\n$palette-grey-400: nth($palette-grey, 5);\n$palette-grey-500: nth($palette-grey, 6);\n$palette-grey-600: nth($palette-grey, 7);\n$palette-grey-700: nth($palette-grey, 8);\n$palette-grey-800: nth($palette-grey, 9);\n$palette-grey-900: nth($palette-grey, 10);\n\n$palette-blue-grey:\n\"236,239,241\"\n\"207,216,220\"\n\"176,190,197\"\n\"144,164,174\"\n\"120,144,156\"\n\"96,125,139\"\n\"84,110,122\"\n\"69,90,100\"\n\"55,71,79\"\n\"38,50,56\";\n\n$palette-blue-grey-50: nth($palette-blue-grey, 1);\n$palette-blue-grey-100: nth($palette-blue-grey, 2);\n$palette-blue-grey-200: nth($palette-blue-grey, 3);\n$palette-blue-grey-300: nth($palette-blue-grey, 4);\n$palette-blue-grey-400: nth($palette-blue-grey, 5);\n$palette-blue-grey-500: nth($palette-blue-grey, 6);\n$palette-blue-grey-600: nth($palette-blue-grey, 7);\n$palette-blue-grey-700: nth($palette-blue-grey, 8);\n$palette-blue-grey-800: nth($palette-blue-grey, 9);\n$palette-blue-grey-900: nth($palette-blue-grey, 10);\n\n$color-black: \"0,0,0\";\n$color-white: \"255,255,255\";\n\n\n/* colors.scss */\n$styleguide-generate-template: false !default;\n\n// The two possible colors for overlayed text.\n$color-dark-contrast: $color-white !default;\n$color-light-contrast: $color-black !default;\n","/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@function strip-units($number) {\n @return $number / ($number * 0 + 1);\n}\n","/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/* Typography */\n\n@mixin typo-preferred-font($usePreferred: true) {\n @if $usePreferred {\n font-family: $preferred_font;\n }\n}\n\n@mixin typo-display-4($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 112px;\n font-weight: 300;\n line-height: 1;\n letter-spacing: -0.04em;\n\n @if $colorContrast {\n opacity: 0.54;\n }\n}\n\n@mixin typo-display-3($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 56px;\n font-weight: 400;\n line-height: 1.35;\n letter-spacing: -0.02em;\n\n @if $colorContrast {\n opacity: 0.54;\n }\n}\n\n@mixin typo-display-2($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 45px;\n font-weight: 400;\n line-height: 48px;\n\n @if $colorContrast {\n opacity: 0.54;\n }\n}\n\n@mixin typo-display-1($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 34px;\n font-weight: 400;\n line-height: 40px;\n\n @if $colorContrast {\n opacity: 0.54;\n }\n}\n\n@mixin typo-headline($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 24px;\n font-weight: 400;\n line-height: 32px;\n -moz-osx-font-smoothing: grayscale;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n@mixin typo-title($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 20px;\n font-weight: 500;\n line-height: 1;\n letter-spacing: 0.02em;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n@mixin typo-subhead($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 16px;\n font-weight: 400;\n line-height: 24px;\n letter-spacing: 0.04em;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n@mixin typo-subhead-2($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 16px;\n font-weight: 400;\n line-height: 28px;\n letter-spacing: 0.04em;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n@mixin typo-body-2($colorContrast: false, $usePreferred: false) {\n @include typo-preferred-font($usePreferred);\n font-size: 14px;\n @if $usePreferred {\n font-weight: 500;\n } @else {\n font-weight: bold;\n }\n line-height: 24px;\n letter-spacing: 0;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n@mixin typo-body-1($colorContrast: false, $usePreferred: false) {\n @include typo-preferred-font($usePreferred);\n font-size: 14px;\n font-weight: 400;\n line-height: 24px;\n letter-spacing: 0;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n@mixin typo-caption($colorContrast: false, $usePreferred: false) {\n @include typo-preferred-font($usePreferred);\n font-size: 12px;\n font-weight: 400;\n line-height: 1;\n letter-spacing: 0;\n\n @if $colorContrast {\n opacity: 0.54;\n }\n}\n\n@mixin typo-blockquote($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n position: relative;\n font-size: 24px;\n font-weight: 300;\n font-style: italic;\n line-height: 1.35;\n letter-spacing: 0.08em;\n\n &:before {\n position: absolute;\n left: -0.5em;\n content: '“';\n }\n\n &:after {\n content: '”';\n margin-left: -0.05em;\n }\n\n @if $colorContrast {\n opacity: 0.54;\n }\n}\n\n@mixin typo-menu($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n letter-spacing: 0;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n@mixin typo-button($colorContrast: false, $usePreferred: true) {\n @include typo-preferred-font($usePreferred);\n font-size: 14px;\n font-weight: 500;\n text-transform: uppercase;\n line-height: 1;\n letter-spacing: 0;\n\n @if $colorContrast {\n opacity: 0.87;\n }\n}\n\n/* Shadows */\n\n// Focus shadow mixin.\n@mixin focus-shadow() {\n box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);\n}\n\n@mixin shadow-2dp() {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),\n 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);\n}\n@mixin shadow-3dp() {\n box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n 0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),\n 0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);\n}\n@mixin shadow-4dp() {\n box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),\n 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);\n}\n@mixin shadow-6dp() {\n box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),\n 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);\n}\n@mixin shadow-8dp() {\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),\n 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);\n}\n\n@mixin shadow-16dp() {\n box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n 0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),\n 0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);\n}\n\n/* Animations */\n\n@mixin material-animation-fast-out-slow-in($duration:0.2s) {\n transition-duration: $duration;\n transition-timing-function: $animation-curve-fast-out-slow-in;\n}\n\n@mixin material-animation-linear-out-slow-in($duration:0.2s) {\n transition-duration: $duration;\n transition-timing-function: $animation-curve-linear-out-slow-in;\n}\n\n@mixin material-animation-fast-out-linear-in($duration:0.2s) {\n transition-duration: $duration;\n transition-timing-function: $animation-curve-fast-out-linear-in;\n}\n\n@mixin material-animation-default($duration:0.2s) {\n transition-duration: $duration;\n transition-timing-function: $animation-curve-default;\n}\n"],"mappings":"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","names":[],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/mdl-selectfield.min.js b/mdl-selectfield.min.js index 0580c7b..a255a9e 100644 --- a/mdl-selectfield.min.js +++ b/mdl-selectfield.min.js @@ -1,2 +1,2 @@ -!function(){"use strict";var e=function(e){this.element_=e,this.init()};window.MaterialSelectfield=e,e.prototype.Constant_={},e.prototype.CssClasses_={LABEL:"mdl-selectield__label",SELECT:"mdl-selectfield__select",IS_DIRTY:"is-dirty",IS_FOCUSED:"is-focused",IS_DISABLED:"is-disabled",IS_INVALID:"is-invalid",IS_UPGRADED:"is-upgraded"},e.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},e.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},e.prototype.onReset_=function(e){this.updateClasses_()},e.prototype.updateClasses_=function(){this.checkDisabled(),this.checkValidity(),this.checkDirty()},e.prototype.checkDisabled=function(){this.select_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},e.prototype.checkDisabled=e.prototype.checkDisabled,e.prototype.checkValidity=function(){this.select_.validity.valid?this.element_.classList.remove(this.CssClasses_.IS_INVALID):this.element_.classList.add(this.CssClasses_.IS_INVALID)},e.prototype.checkValidity=e.prototype.checkValidity,e.prototype.checkDirty=function(){this.select_.value&&this.select_.value.length>0?this.element_.classList.add(this.CssClasses_.IS_DIRTY):this.element_.classList.remove(this.CssClasses_.IS_DIRTY)},e.prototype.checkDirty=e.prototype.checkDirty,e.prototype.disable=function(){this.select_.disabled=!0,this.updateClasses_()},e.prototype.disable=e.prototype.disable,e.prototype.enable=function(){this.select_.disabled=!1,this.updateClasses_()},e.prototype.enable=e.prototype.enable,e.prototype.change=function(e){e&&(this.select_.value=e),this.updateClasses_()},e.prototype.change=e.prototype.change,e.prototype.init=function(){this.element_&&(this.label_=this.element_.querySelector("."+this.CssClasses_.LABEL),this.select_=this.element_.querySelector("."+this.CssClasses_.SELECT),this.select_&&(this.boundUpdateClassesHandler=this.updateClasses_.bind(this),this.boundFocusHandler=this.onFocus_.bind(this),this.boundBlurHandler=this.onBlur_.bind(this),this.select_.addEventListener("change",this.boundUpdateClassesHandler),this.select_.addEventListener("focus",this.boundFocusHandler),this.select_.addEventListener("blur",this.boundBlurHandler),this.updateClasses_(),this.element_.classList.add(this.CssClasses_.IS_UPGRADED)))},e.prototype.mdlDowngrade_=function(){this.select_.removeEventListener("change",this.boundUpdateClassesHandler),this.select_.removeEventListener("focus",this.boundFocusHandler),this.select_.removeEventListener("blur",this.boundBlurHandler)},componentHandler.register({constructor:e,classAsString:"MaterialSelectfield",cssClass:"mdl-js-selectfield",widget:!0})}(); +!function(){"use strict";var e=function(e){this.element_=e,this.init()};window.MaterialSelectfield=e,e.prototype.Constant_={},e.prototype.CssClasses_={LABEL:"mdl-selectield__label",SELECT:"mdl-selectfield__select",IS_DIRTY:"is-dirty",IS_FOCUSED:"is-focused",IS_DISABLED:"is-disabled",IS_INVALID:"is-invalid",IS_UPGRADED:"is-upgraded"},e.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},e.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},e.prototype.onReset_=function(e){this.updateClasses_()},e.prototype.updateClasses_=function(){this.checkDisabled(),this.checkValidity(),this.checkDirty()},e.prototype.checkDisabled=function(){this.select_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},e.prototype.checkDisabled=e.prototype.checkDisabled,e.prototype.checkValidity=function(){this.select_.validity.valid?this.element_.classList.remove(this.CssClasses_.IS_INVALID):this.element_.classList.add(this.CssClasses_.IS_INVALID)},e.prototype.checkValidity=e.prototype.checkValidity,e.prototype.checkDirty=function(){this.select_.value&&this.select_.value.length>0?this.element_.classList.add(this.CssClasses_.IS_DIRTY):this.element_.classList.remove(this.CssClasses_.IS_DIRTY)},e.prototype.checkDirty=e.prototype.checkDirty,e.prototype.disable=function(){this.select_.disabled=!0,this.updateClasses_()},e.prototype.disable=e.prototype.disable,e.prototype.enable=function(){this.select_.disabled=!1,this.updateClasses_()},e.prototype.enable=e.prototype.enable,e.prototype.change=function(e){e&&(this.select_.value=e),this.updateClasses_()},e.prototype.change=e.prototype.change,e.prototype.init=function(){if(this.element_&&(this.label_=this.element_.querySelector("."+this.CssClasses_.LABEL),this.select_=this.element_.querySelector("."+this.CssClasses_.SELECT),this.select_)){if(this.boundUpdateClassesHandler=this.updateClasses_.bind(this),this.boundFocusHandler=this.onFocus_.bind(this),this.boundBlurHandler=this.onBlur_.bind(this),this.boundResetHandler=this.onReset_.bind(this),this.select_.addEventListener("change",this.boundUpdateClassesHandler),this.select_.addEventListener("focus",this.boundFocusHandler),this.select_.addEventListener("blur",this.boundBlurHandler),this.select_.addEventListener("reset",this.boundResetHandler),"function"==typeof MaterialMenu){var e=this,t="plc-"+(new Date).getTime(),s=document.createElement("div");if(s.id=t,s.classList.add("mdl-selectfield__placeholder"),s.innerHTML='arrow_drop_down',s.addEventListener("click",function(){e.select_.focus()}),this.element_.appendChild(s),this.options_=this.select_.querySelectorAll("option"),this.options_.length){var i=document.createElement("ul");i.classList.add("mdl-menu"),i.classList.add("mdl-js-menu"),i.classList.add("mdl-js-ripple-effect"),i.tabIndex="-1",i.setAttribute("for",t),i.addEventListener("mousewheel",function(e){(this.scrollTop===this.scrollHeight-this.offsetHeight&&e.wheelDelta<0||0===this.scrollTop&&e.wheelDelta>0)&&e.preventDefault()});for(var l=0;l 0)) { + e.preventDefault(); + } + }); + for (var i = 0; i < this.options_.length; i++) { + var item = this.options_[i] + ,itemText = (item.textContent || '').toUpperCase().replace(/( )|(\n)/g, ""); + var li = document.createElement('li'); + li.textContent = item.textContent; + li.classList.add('mdl-menu__item'); + li.setAttribute('data-value', i); + li.tabIndex = '-1'; + li.addEventListener('mousedown', function() { + that.select_.selectedIndex = this.getAttribute('data-value'); + that.updateClasses_(); + }); + ul.appendChild(li); + this.element_.appendChild(ul); + } + } + componentHandler.upgradeDom('MaterialMenu'); + } + this.updateClasses_(); this.element_.classList.add(this.CssClasses_.IS_UPGRADED); } diff --git a/src/selectfield/selectfield.scss b/src/selectfield/selectfield.scss index a724073..e447c0a 100644 --- a/src/selectfield/selectfield.scss +++ b/src/selectfield/selectfield.scss @@ -25,6 +25,31 @@ $selectfield-error-color: unquote("rgb(222, 50, 38)") !default; max-width: 100%; margin: 0; padding: $selectfield-vertical-spacing 0; + + .mdl-menu__container { + max-height: 256px; + min-width: 100%; + top: $selectfield-vertical-spacing - 8px !important; + } + &.mdl-selectfield--floating-label .mdl-menu__container { + top: $selectfield-vertical-spacing + 4px !important; + } + .mdl-menu__outline { + max-height: 256px; + transform-origin: 50% 0; + } + .mdl-menu { + min-width: 100%; + max-height: 240px; + outline: 0; + overflow-y: auto; + width: auto !important; + + &.is-animating { + overflow: hidden; + } + } + } // Optional class to align right. @@ -151,3 +176,18 @@ $selectfield-error-color: unquote("rgb(222, 50, 38)") !default; visibility: visible; } } + +.mdl-selectfield__placeholder { + bottom: $selectfield-vertical-spacing; + cursor: pointer; + color: $selectfield-label-color; + left: 0; + padding: 2px 0; + position: absolute; + text-align: right; + top: $selectfield-vertical-spacing; + width: 100%; + & > i { + outline: 0; + } +} \ No newline at end of file