@material-git/all/core/theming/prebuilt/purple-green.css.map

Angular 2 Material

{"version":3,"file":"core/theming/prebuilt/purple-green.css","sources":["core/theming/prebuilt/purple-green.scss","core/theming/_all-theme.scss","core/_core.scss","core/a11y/_a11y.scss","core/style/_elevation.scss","core/style/_variables.scss","core/typography/_typography.scss","core/overlay/overlay.scss","core/theming/_palette.scss","core/theming/_theming.scss","core/ripple/_ripple.scss","button/_button-theme.scss","button-toggle/_button-toggle-theme.scss","card/_card-theme.scss","checkbox/_checkbox-theme.scss","dialog/_dialog-theme.scss","grid-list/_grid-list-theme.scss","icon/_icon-theme.scss","input/_input-theme.scss","list/_list-theme.scss","menu/_menu-theme.scss","progress-bar/_progress-bar-theme.scss","progress-circle/_progress-circle-theme.scss","radio/_radio-theme.scss","sidenav/_sidenav-theme.scss","slide-toggle/_slide-toggle-theme.scss","slider/_slider-theme.scss","tabs/_tabs-theme.scss","toolbar/_toolbar-theme.scss","tooltip/_tooltip-theme.scss"],"sourcesContent":["@import '../all-theme';\r\n\r\n\r\n// Include non-theme styles for core.\r\n@include md-core();\r\n\r\n// Define a theme.\r\n$primary: md-palette($md-purple, 700, 500, 800);\r\n$accent:  md-palette($md-green, A200, A100, A400);\r\n\r\n$theme: md-dark-theme($primary, $accent);\r\n\r\n// Include all theme styles for the components.\r\n@include angular-material-theme($theme);\r\n","// Import all the theming functionality.\r\n@import '../core';\r\n@import '../../button/button-theme';\r\n@import '../../button-toggle/button-toggle-theme';\r\n@import '../../card/card-theme';\r\n@import '../../checkbox/checkbox-theme';\r\n@import '../../dialog/dialog-theme';\r\n@import '../../grid-list/grid-list-theme';\r\n@import '../../icon/icon-theme';\r\n@import '../../input/input-theme';\r\n@import '../../list/list-theme';\r\n@import '../../menu/menu-theme';\r\n@import '../../progress-bar/progress-bar-theme';\r\n@import '../../progress-circle/progress-circle-theme';\r\n@import '../../radio/radio-theme';\r\n@import '../../sidenav/sidenav-theme';\r\n@import '../../slide-toggle/slide-toggle-theme';\r\n@import '../../slider/slider-theme';\r\n@import '../../tabs/tabs-theme';\r\n@import '../../toolbar/toolbar-theme';\r\n@import '../../tooltip/tooltip-theme';\r\n\r\n\r\n// Create a theme.\r\n@mixin angular-material-theme($theme) {\r\n  @include md-core-theme($theme);\r\n  @include md-button-theme($theme);\r\n  @include md-button-toggle-theme($theme);\r\n  @include md-card-theme($theme);\r\n  @include md-checkbox-theme($theme);\r\n  @include md-dialog-theme($theme);\r\n  @include md-grid-list-theme($theme);\r\n  @include md-icon-theme($theme);\r\n  @include md-input-theme($theme);\r\n  @include md-list-theme($theme);\r\n  @include md-menu-theme($theme);\r\n  @include md-progress-bar-theme($theme);\r\n  @include md-progress-circle-theme($theme);\r\n  @include md-radio-theme($theme);\r\n  @include md-sidenav-theme($theme);\r\n  @include md-slide-toggle-theme($theme);\r\n  @include md-slider-theme($theme);\r\n  @include md-tabs-theme($theme);\r\n  @include md-toolbar-theme($theme);\r\n  @include md-tooltip-theme($theme);\r\n}\r\n","// Core styles that can be used to apply material design treatments to any element.\r\n@import 'a11y/a11y';\r\n@import 'style/elevation';\r\n@import 'overlay/overlay';\r\n@import 'ripple/ripple';\r\n\r\n\r\n// Mixin that renders all of the core styles that are not theme-dependent.\r\n@mixin md-core() {\r\n  // Provides external CSS classes for each elevation value. Each CSS class is formatted as\r\n  // `md-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is\r\n  // elevated.\r\n  @for $zValue from 0 through 24 {\r\n    .md-elevation-z#{$zValue} {\r\n      @include md-elevation($zValue);\r\n    }\r\n  }\r\n\r\n  @include md-ripple();\r\n  @include md-a11y();\r\n  @include md-overlay();\r\n}\r\n\r\n// Mixin that renders all of the core styles that depend on the theme.\r\n@mixin md-core-theme($theme) {\r\n  @include md-ripple-theme($theme);\r\n}\r\n","@mixin md-a11y {\r\n  .md-visually-hidden {\r\n    border: 0;\r\n    clip: rect(0 0 0 0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    text-transform: none;\r\n    width: 1px;\r\n  }\r\n}\r\n","@import 'variables';\r\n\r\n\r\n// A collection of mixins and CSS classes that can be used to apply elevation to a material\r\n// element.\r\n// See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html\r\n// Examples:\r\n//\r\n//\r\n// .md-foo {\r\n//   @include $md-elevation(2);\r\n//\r\n//   &:active {\r\n//     @include $md-elevation(8);\r\n//   }\r\n// }\r\n//\r\n// <div id=\"external-card\" class=\"md-elevation-z2\"><p>Some content</p></div>\r\n//\r\n// For an explanation of the design behind how elevation is implemented, see the design doc at\r\n// https://goo.gl/Kq0k9Z.\r\n\r\n// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation\r\n// level is created using a set of 3 shadow values, one for umbra (the shadow representing the\r\n// space completely obscured by an object relative to its light source), one for penumbra (the\r\n// space partially obscured by an object), and one for ambient (the space which contains the object\r\n// itself). For a further explanation of these terms and their meanings, see\r\n// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.\r\n\r\n$_umbra-color: rgba(black, 0.2);\r\n$_penumbra-color: rgba(black, 0.14);\r\n$_ambient-color: rgba(black, 0.12);\r\n\r\n// Maps for the different shadow sets and their values within each z-space. These values were\r\n// created by taking a few reference shadow sets created by Google's Designers and interpolating\r\n// all of the values between them.\r\n\r\n$_umbra-elevation-map: (\r\n  0: '0px 0px 0px 0px #{$_umbra-color}',\r\n  1: '0px 2px 1px -1px #{$_umbra-color}',\r\n  2: '0px 3px 1px -2px #{$_umbra-color}',\r\n  3: '0px 3px 3px -2px #{$_umbra-color}',\r\n  4: '0px 2px 4px -1px #{$_umbra-color}',\r\n  5: '0px 3px 5px -1px #{$_umbra-color}',\r\n  6: '0px 3px 5px -1px #{$_umbra-color}',\r\n  7: '0px 4px 5px -2px #{$_umbra-color}',\r\n  8: '0px 5px 5px -3px #{$_umbra-color}',\r\n  9: '0px 5px 6px -3px #{$_umbra-color}',\r\n  10: '0px 6px 6px -3px #{$_umbra-color}',\r\n  11: '0px 6px 7px -4px #{$_umbra-color}',\r\n  12: '0px 7px 8px -4px #{$_umbra-color}',\r\n  13: '0px 7px 8px -4px #{$_umbra-color}',\r\n  14: '0px 7px 9px -4px #{$_umbra-color}',\r\n  15: '0px 8px 9px -5px #{$_umbra-color}',\r\n  16: '0px 8px 10px -5px #{$_umbra-color}',\r\n  17: '0px 8px 11px -5px #{$_umbra-color}',\r\n  18: '0px 9px 11px -5px #{$_umbra-color}',\r\n  19: '0px 9px 12px -6px #{$_umbra-color}',\r\n  20: '0px 10px 13px -6px #{$_umbra-color}',\r\n  21: '0px 10px 13px -6px #{$_umbra-color}',\r\n  22: '0px 10px 14px -6px #{$_umbra-color}',\r\n  23: '0px 11px 14px -7px #{$_umbra-color}',\r\n  24: '0px 11px 15px -7px #{$_umbra-color}'\r\n);\r\n\r\n$_penumbra-elevation-map: (\r\n  0: '0px 0px 0px 0px #{$_penumbra-color}',\r\n  1: '0px 1px 1px 0px #{$_penumbra-color}',\r\n  2: '0px 2px 2px 0px #{$_penumbra-color}',\r\n  3: '0px 3px 4px 0px #{$_penumbra-color}',\r\n  4: '0px 4px 5px 0px #{$_penumbra-color}',\r\n  5: '0px 5px 8px 0px #{$_penumbra-color}',\r\n  6: '0px 6px 10px 0px #{$_penumbra-color}',\r\n  7: '0px 7px 10px 1px #{$_penumbra-color}',\r\n  8: '0px 8px 10px 1px #{$_penumbra-color}',\r\n  9: '0px 9px 12px 1px #{$_penumbra-color}',\r\n  10: '0px 10px 14px 1px #{$_penumbra-color}',\r\n  11: '0px 11px 15px 1px #{$_penumbra-color}',\r\n  12: '0px 12px 17px 2px #{$_penumbra-color}',\r\n  13: '0px 13px 19px 2px #{$_penumbra-color}',\r\n  14: '0px 14px 21px 2px #{$_penumbra-color}',\r\n  15: '0px 15px 22px 2px #{$_penumbra-color}',\r\n  16: '0px 16px 24px 2px #{$_penumbra-color}',\r\n  17: '0px 17px 26px 2px #{$_penumbra-color}',\r\n  18: '0px 18px 28px 2px #{$_penumbra-color}',\r\n  19: '0px 19px 29px 2px #{$_penumbra-color}',\r\n  20: '0px 20px 31px 3px #{$_penumbra-color}',\r\n  21: '0px 21px 33px 3px #{$_penumbra-color}',\r\n  22: '0px 22px 35px 3px #{$_penumbra-color}',\r\n  23: '0px 23px 36px 3px #{$_penumbra-color}',\r\n  24: '0px 24px 38px 3px #{$_penumbra-color}'\r\n);\r\n\r\n$_ambient-elevation-map: (\r\n  0: '0px 0px 0px 0px #{$_ambient-color}',\r\n  1: '0px 1px 3px 0px #{$_ambient-color}',\r\n  2: '0px 1px 5px 0px #{$_ambient-color}',\r\n  3: '0px 1px 8px 0px #{$_ambient-color}',\r\n  4: '0px 1px 10px 0px #{$_ambient-color}',\r\n  5: '0px 1px 14px 0px #{$_ambient-color}',\r\n  6: '0px 1px 18px 0px #{$_ambient-color}',\r\n  7: '0px 2px 16px 1px #{$_ambient-color}',\r\n  8: '0px 3px 14px 2px #{$_ambient-color}',\r\n  9: '0px 3px 16px 2px #{$_ambient-color}',\r\n  10: '0px 4px 18px 3px #{$_ambient-color}',\r\n  11: '0px 4px 20px 3px #{$_ambient-color}',\r\n  12: '0px 5px 22px 4px #{$_ambient-color}',\r\n  13: '0px 5px 24px 4px #{$_ambient-color}',\r\n  14: '0px 5px 26px 4px #{$_ambient-color}',\r\n  15: '0px 6px 28px 5px #{$_ambient-color}',\r\n  16: '0px 6px 30px 5px #{$_ambient-color}',\r\n  17: '0px 6px 32px 5px #{$_ambient-color}',\r\n  18: '0px 7px 34px 6px #{$_ambient-color}',\r\n  19: '0px 7px 36px 6px #{$_ambient-color}',\r\n  20: '0px 8px 38px 7px #{$_ambient-color}',\r\n  21: '0px 8px 40px 7px #{$_ambient-color}',\r\n  22: '0px 8px 42px 7px #{$_ambient-color}',\r\n  23: '0px 9px 44px 8px #{$_ambient-color}',\r\n  24: '0px 9px 46px 8px #{$_ambient-color}'\r\n);\r\n\r\n\r\n// The css property used for elevation. In most cases this should not be changed. It is exposed\r\n// as a variable for abstraction / easy use when needing to reference the property directly, for\r\n// example in a will-change rule.\r\n$md-elevation-property: box-shadow !default;\r\n\r\n// The default duration value for elevation transitions.\r\n$md-elevation-transition-duration: 280ms !default;\r\n\r\n// The default easing value for elevation transitions.\r\n$md-elevation-transition-timing-function: $md-fast-out-slow-in-timing-function;\r\n\r\n// Applies the correct css rules to an element to give it the elevation specified by $zValue.\r\n// The $zValue must be between 0 and 24.\r\n@mixin md-elevation($zValue) {\r\n  @if type-of($zValue) != number or not unitless($zValue) {\r\n    @error '$zValue must be a unitless number';\r\n  }\r\n  @if $zValue < 0 or $zValue > 24 {\r\n    @error '$zValue must be between 0 and 24';\r\n  }\r\n\r\n  #{$md-elevation-property}: #{map-get($_umbra-elevation-map, $zValue)},\r\n                             #{map-get($_penumbra-elevation-map, $zValue)},\r\n                             #{map-get($_ambient-elevation-map, $zValue)};\r\n}\r\n\r\n// Returns a string that can be used as the value for a transition property for elevation.\r\n// Calling this function directly is useful in situations where a component needs to transition\r\n// more than one property.\r\n//\r\n// .foo {\r\n//   transition: md-elevation-transition-property-value(), opacity 100ms ease;\r\n//   will-change: $md-elevation-property, opacity;\r\n// }\r\n@function md-elevation-transition-property-value(\r\n    $duration: $md-elevation-transition-duration,\r\n    $easing: $md-elevation-transition-timing-function) {\r\n  @return #{$md-elevation-property} #{$duration} #{$easing};\r\n}\r\n\r\n// Applies the correct css rules needed to have an element transition between elevations.\r\n// This mixin should be applied to elements whose elevation values will change depending on their\r\n// context (e.g. when active or disabled).\r\n//\r\n// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can\r\n// be used in the same way by clients.\r\n@mixin md-elevation-transition(\r\n    $duration: $md-elevation-transition-duration,\r\n    $easing: $md-elevation-transition-timing-function) {\r\n  transition: md-elevation-transition-property-value($duration, $easing);\r\n  will-change: $md-elevation-property;\r\n}\r\n","@import '../typography/typography';\r\n\r\n\r\n// Typography\r\n$md-body-font-size-base: rem(1.4) !default;\r\n$md-font-family: Roboto, 'Helvetica Neue', sans-serif !default;\r\n\r\n// Media queries\r\n$md-xsmall: 'max-width: 600px';\r\n\r\n// TODO: Revisit all z-indices before beta\r\n// z-index master list\r\n\r\n$z-index-fab: 20 !default;\r\n$z-index-drawer: 100 !default;\r\n\r\n// Overlay z indices.\r\n$md-z-index-overlay: 1000;\r\n$md-z-index-overlay-container: 1;\r\n$md-z-index-overlay-backdrop: 1;\r\n\r\n\r\n// Global constants\r\n$pi: 3.14159265;\r\n\r\n// Padding between input toggles and their labels\r\n$md-toggle-padding: 8px !default;\r\n// Width and height of input toggles\r\n$md-toggle-size: 20px !default;\r\n\r\n// Easing Curves\r\n// TODO(jelbourn): all of these need to be revisited\r\n\r\n// The default animation curves used by material design.\r\n$md-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\r\n$md-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\r\n$md-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\r\n\r\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\r\n\r\n$swift-ease-out-duration: 400ms !default;\r\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\r\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\r\n\r\n$swift-ease-in-duration: 300ms !default;\r\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\r\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\r\n\r\n$swift-ease-in-out-duration: 500ms !default;\r\n$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;\r\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\r\n\r\n$swift-linear-duration: 80ms !default;\r\n$swift-linear-timing-function: linear !default;\r\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\r\n","// Implement the rem unit with SCSS so we don't have to actually set a font-size on\r\n// the user's body element.\r\n@function rem($multiplier) {\r\n  $font-size: 10px;\r\n  @return $multiplier * $font-size;\r\n}\r\n","@import '../style/variables';\r\n@import '../theming/palette';\r\n@import '../theming/theming';\r\n\r\n\r\n@mixin md-overlay() {\r\n  $md-backdrop-color: md-color($md-grey, 900);\r\n\r\n  // TODO(jelbourn): change from the `md` prefix to something else for everything in the toolkit.\r\n\r\n  // The overlay-container is an invisible element which contains all individual overlays.\r\n  .md-overlay-container {\r\n    position: absolute;\r\n\r\n    // Disable events from being captured on the overlay container.\r\n    pointer-events: none;\r\n\r\n    // The container should be the size of the viewport.\r\n    top: 0;\r\n    left: 0;\r\n    height: 100%;\r\n    width: 100%;\r\n    z-index: $md-z-index-overlay-container;\r\n  }\r\n\r\n  // A single overlay pane.\r\n  .md-overlay-pane {\r\n    position: absolute;\r\n    pointer-events: auto;\r\n    box-sizing: border-box;\r\n    z-index: $md-z-index-overlay;\r\n  }\r\n\r\n  .md-overlay-backdrop {\r\n    // TODO(jelbourn): reuse sidenav fullscreen mixin.\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n\r\n    z-index: $md-z-index-overlay-backdrop;\r\n    pointer-events: auto;\r\n\r\n    // TODO(jelbourn): figure out if there are actually spec'ed colors for both light and dark\r\n    // themes here. Currently using the values from Angular Material 1.\r\n    transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;\r\n    background: $md-backdrop-color;\r\n    opacity: 0;\r\n  }\r\n\r\n  .md-overlay-backdrop.md-overlay-backdrop-showing {\r\n    opacity: 0.48;\r\n  }\r\n}\r\n","// Color palettes from the Material Design spec.\r\n// See https://www.google.com/design/spec/style/color.html\r\n//\r\n// Contrast colors are hard-coded because it is too difficult (probably impossible) to\r\n// calculate them. These contrast colors are pulled from the public Material Design spec swatches.\r\n// While the contrast colors in the spec are not prescriptive, we use them for convenience.\r\n\r\n\r\n$black-87-opacity: rgba(black, 0.87);\r\n$white-87-opacity: rgba(white, 0.87);\r\n\r\n$md-red: (\r\n  50: #ffebee,\r\n  100: #ffcdd2,\r\n  200: #ef9a9a,\r\n  300: #e57373,\r\n  400: #ef5350,\r\n  500: #f44336,\r\n  600: #e53935,\r\n  700: #d32f2f,\r\n  800: #c62828,\r\n  900: #b71c1c,\r\n  A100: #ff8a80,\r\n  A200: #ff5252,\r\n  A400: #ff1744,\r\n  A700: #d50000,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: $black-87-opacity,\r\n    500: white,\r\n    600: white,\r\n    700: white,\r\n    800: $white-87-opacity,\r\n    900: $white-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: white,\r\n    A400: white,\r\n    A700: white,\r\n  )\r\n);\r\n\r\n$md-pink: (\r\n  50: #fce4ec,\r\n  100: #f8bbd0,\r\n  200: #f48fb1,\r\n  300: #f06292,\r\n  400: #ec407a,\r\n  500: #e91e63,\r\n  600: #d81b60,\r\n  700: #c2185b,\r\n  800: #ad1457,\r\n  900: #880e4f,\r\n  A100: #ff80ab,\r\n  A200: #ff4081,\r\n  A400: #f50057,\r\n  A700: #c51162,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: $black-87-opacity,\r\n    500: white,\r\n    600: white,\r\n    700: $white-87-opacity,\r\n    800: $white-87-opacity,\r\n    900: $white-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: white,\r\n    A400: white,\r\n    A700: white,\r\n  )\r\n);\r\n\r\n$md-purple: (\r\n  50: #f3e5f5,\r\n  100: #e1bee7,\r\n  200: #ce93d8,\r\n  300: #ba68c8,\r\n  400: #ab47bc,\r\n  500: #9c27b0,\r\n  600: #8e24aa,\r\n  700: #7b1fa2,\r\n  800: #6a1b9a,\r\n  900: #4a148c,\r\n  A100: #ea80fc,\r\n  A200: #e040fb,\r\n  A400: #d500f9,\r\n  A700: #aa00ff,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: white,\r\n    400: white,\r\n    500: $white-87-opacity,\r\n    600: $white-87-opacity,\r\n    700: $white-87-opacity,\r\n    800: $white-87-opacity,\r\n    900: $white-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: white,\r\n    A400: white,\r\n    A700: white,\r\n  )\r\n);\r\n\r\n$md-deep-purple: (\r\n  50: #ede7f6,\r\n  100: #d1c4e9,\r\n  200: #b39ddb,\r\n  300: #9575cd,\r\n  400: #7e57c2,\r\n  500: #673ab7,\r\n  600: #5e35b1,\r\n  700: #512da8,\r\n  800: #4527a0,\r\n  900: #311b92,\r\n  A100: #b388ff,\r\n  A200: #7c4dff,\r\n  A400: #651fff,\r\n  A700: #6200ea,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: white,\r\n    400: white,\r\n    500: $white-87-opacity,\r\n    600: $white-87-opacity,\r\n    700: $white-87-opacity,\r\n    800: $white-87-opacity,\r\n    900: $white-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: white,\r\n    A400: $white-87-opacity,\r\n    A700: $white-87-opacity,\r\n  )\r\n);\r\n\r\n$md-indigo: (\r\n  50: #e8eaf6,\r\n  100: #c5cae9,\r\n  200: #9fa8da,\r\n  300: #7986cb,\r\n  400: #5c6bc0,\r\n  500: #3f51b5,\r\n  600: #3949ab,\r\n  700: #303f9f,\r\n  800: #283593,\r\n  900: #1a237e,\r\n  A100: #8c9eff,\r\n  A200: #536dfe,\r\n  A400: #3d5afe,\r\n  A700: #304ffe,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: white,\r\n    400: white,\r\n    500: $white-87-opacity,\r\n    600: $white-87-opacity,\r\n    700: $white-87-opacity,\r\n    800: $white-87-opacity,\r\n    900: $white-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: white,\r\n    A400: white,\r\n    A700: $white-87-opacity,\r\n  )\r\n);\r\n\r\n$md-blue: (\r\n  50: #e3f2fd,\r\n  100: #bbdefb,\r\n  200: #90caf9,\r\n  300: #64b5f6,\r\n  400: #42a5f5,\r\n  500: #2196f3,\r\n  600: #1e88e5,\r\n  700: #1976d2,\r\n  800: #1565c0,\r\n  900: #0d47a1,\r\n  A100: #82b1ff,\r\n  A200: #448aff,\r\n  A400: #2979ff,\r\n  A700: #2962ff,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: $black-87-opacity,\r\n    500: white,\r\n    600: white,\r\n    700: white,\r\n    800: $white-87-opacity,\r\n    900: $white-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: white,\r\n    A400: white,\r\n    A700: white,\r\n  )\r\n);\r\n\r\n$md-light-blue: (\r\n  50: #e1f5fe,\r\n  100: #b3e5fc,\r\n  200: #81d4fa,\r\n  300: #4fc3f7,\r\n  400: #29b6f6,\r\n  500: #03a9f4,\r\n  600: #039be5,\r\n  700: #0288d1,\r\n  800: #0277bd,\r\n  900: #01579b,\r\n  A100: #80d8ff,\r\n  A200: #40c4ff,\r\n  A400: #00b0ff,\r\n  A700: #0091ea,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: $black-87-opacity,\r\n    500: white,\r\n    600: white,\r\n    700: white,\r\n    800: white,\r\n    900: $white-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: $black-87-opacity,\r\n    A400: $black-87-opacity,\r\n    A700: white,\r\n  )\r\n);\r\n\r\n$md-cyan: (\r\n  50: #e0f7fa,\r\n  100: #b2ebf2,\r\n  200: #80deea,\r\n  300: #4dd0e1,\r\n  400: #26c6da,\r\n  500: #00bcd4,\r\n  600: #00acc1,\r\n  700: #0097a7,\r\n  800: #00838f,\r\n  900: #006064,\r\n  A100: #84ffff,\r\n  A200: #18ffff,\r\n  A400: #00e5ff,\r\n  A700: #00b8d4,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: $black-87-opacity,\r\n    500: white,\r\n    600: white,\r\n    700: white,\r\n    800: white,\r\n    900: $white-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: $black-87-opacity,\r\n    A400: $black-87-opacity,\r\n    A700: $black-87-opacity,\r\n  )\r\n);\r\n\r\n$md-teal: (\r\n  50: #e0f2f1,\r\n  100: #b2dfdb,\r\n  200: #80cbc4,\r\n  300: #4db6ac,\r\n  400: #26a69a,\r\n  500: #009688,\r\n  600: #00897b,\r\n  700: #00796b,\r\n  800: #00695c,\r\n  900: #004d40,\r\n  A100: #a7ffeb,\r\n  A200: #64ffda,\r\n  A400: #1de9b6,\r\n  A700: #00bfa5,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: $black-87-opacity,\r\n    500: white,\r\n    600: white,\r\n    700: white,\r\n    800: $white-87-opacity,\r\n    900: $white-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: $black-87-opacity,\r\n    A400: $black-87-opacity,\r\n    A700: $black-87-opacity,\r\n  )\r\n);\r\n\r\n$md-green: (\r\n  50: #e8f5e9,\r\n  100: #c8e6c9,\r\n  200: #a5d6a7,\r\n  300: #81c784,\r\n  400: #66bb6a,\r\n  500: #4caf50,\r\n  600: #43a047,\r\n  700: #388e3c,\r\n  800: #2e7d32,\r\n  900: #1b5e20,\r\n  A100: #b9f6ca,\r\n  A200: #69f0ae,\r\n  A400: #00e676,\r\n  A700: #00c853,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: $black-87-opacity,\r\n    500: white,\r\n    600: white,\r\n    700: white,\r\n    800: $white-87-opacity,\r\n    900: $white-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: $black-87-opacity,\r\n    A400: $black-87-opacity,\r\n    A700: $black-87-opacity,\r\n  )\r\n);\r\n\r\n$md-light-green: (\r\n  50: #f1f8e9,\r\n  100: #dcedc8,\r\n  200: #c5e1a5,\r\n  300: #aed581,\r\n  400: #9ccc65,\r\n  500: #8bc34a,\r\n  600: #7cb342,\r\n  700: #689f38,\r\n  800: #558b2f,\r\n  900: #33691e,\r\n  A100: #ccff90,\r\n  A200: #b2ff59,\r\n  A400: #76ff03,\r\n  A700: #64dd17,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: $black-87-opacity,\r\n    500: $black-87-opacity,\r\n    600: $black-87-opacity,\r\n    700: $black-87-opacity,\r\n    800: white,\r\n    900: white,\r\n    A100: $black-87-opacity,\r\n    A200: $black-87-opacity,\r\n    A400: $black-87-opacity,\r\n    A700: $black-87-opacity,\r\n  )\r\n);\r\n\r\n$md-lime: (\r\n  50: #f9fbe7,\r\n  100: #f0f4c3,\r\n  200: #e6ee9c,\r\n  300: #dce775,\r\n  400: #d4e157,\r\n  500: #cddc39,\r\n  600: #c0ca33,\r\n  700: #afb42b,\r\n  800: #9e9d24,\r\n  900: #827717,\r\n  A100: #f4ff81,\r\n  A200: #eeff41,\r\n  A400: #c6ff00,\r\n  A700: #aeea00,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: $black-87-opacity,\r\n    500: $black-87-opacity,\r\n    600: $black-87-opacity,\r\n    700: $black-87-opacity,\r\n    800: $black-87-opacity,\r\n    900: white,\r\n    A100: $black-87-opacity,\r\n    A200: $black-87-opacity,\r\n    A400: $black-87-opacity,\r\n    A700: $black-87-opacity,\r\n  )\r\n);\r\n\r\n$md-yellow: (\r\n  50: #fffde7,\r\n  100: #fff9c4,\r\n  200: #fff59d,\r\n  300: #fff176,\r\n  400: #ffee58,\r\n  500: #ffeb3b,\r\n  600: #fdd835,\r\n  700: #fbc02d,\r\n  800: #f9a825,\r\n  900: #f57f17,\r\n  A100: #ffff8d,\r\n  A200: #ffff00,\r\n  A400: #ffea00,\r\n  A700: #ffd600,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: $black-87-opacity,\r\n    500: $black-87-opacity,\r\n    600: $black-87-opacity,\r\n    700: $black-87-opacity,\r\n    800: $black-87-opacity,\r\n    900: $black-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: $black-87-opacity,\r\n    A400: $black-87-opacity,\r\n    A700: $black-87-opacity,\r\n  )\r\n);\r\n\r\n$md-amber: (\r\n  50: #fff8e1,\r\n  100: #ffecb3,\r\n  200: #ffe082,\r\n  300: #ffd54f,\r\n  400: #ffca28,\r\n  500: #ffc107,\r\n  600: #ffb300,\r\n  700: #ffa000,\r\n  800: #ff8f00,\r\n  900: #ff6f00,\r\n  A100: #ffe57f,\r\n  A200: #ffd740,\r\n  A400: #ffc400,\r\n  A700: #ffab00,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: $black-87-opacity,\r\n    500: $black-87-opacity,\r\n    600: $black-87-opacity,\r\n    700: $black-87-opacity,\r\n    800: $black-87-opacity,\r\n    900: $black-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: $black-87-opacity,\r\n    A400: $black-87-opacity,\r\n    A700: $black-87-opacity,\r\n  )\r\n);\r\n\r\n$md-orange: (\r\n  50: #fff3e0,\r\n  100: #ffe0b2,\r\n  200: #ffcc80,\r\n  300: #ffb74d,\r\n  400: #ffa726,\r\n  500: #ff9800,\r\n  600: #fb8c00,\r\n  700: #f57c00,\r\n  800: #ef6c00,\r\n  900: #e65100,\r\n  A100: #ffd180,\r\n  A200: #ffab40,\r\n  A400: #ff9100,\r\n  A700: #ff6d00,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: $black-87-opacity,\r\n    500: $black-87-opacity,\r\n    600: $black-87-opacity,\r\n    700: $black-87-opacity,\r\n    800: white,\r\n    900: white,\r\n    A100: $black-87-opacity,\r\n    A200: $black-87-opacity,\r\n    A400: $black-87-opacity,\r\n    A700: black,\r\n  )\r\n);\r\n\r\n$md-deep-orange: (\r\n  50: #fbe9e7,\r\n  100: #ffccbc,\r\n  200: #ffab91,\r\n  300: #ff8a65,\r\n  400: #ff7043,\r\n  500: #ff5722,\r\n  600: #f4511e,\r\n  700: #e64a19,\r\n  800: #d84315,\r\n  900: #bf360c,\r\n  A100: #ff9e80,\r\n  A200: #ff6e40,\r\n  A400: #ff3d00,\r\n  A700: #dd2c00,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: $black-87-opacity,\r\n    500: white,\r\n    600: white,\r\n    700: white,\r\n    800: white,\r\n    900: white,\r\n    A100: $black-87-opacity,\r\n    A200: $black-87-opacity,\r\n    A400: white,\r\n    A700: white,\r\n  )\r\n);\r\n\r\n$md-brown: (\r\n  50: #efebe9,\r\n  100: #d7ccc8,\r\n  200: #bcaaa4,\r\n  300: #a1887f,\r\n  400: #8d6e63,\r\n  500: #795548,\r\n  600: #6d4c41,\r\n  700: #5d4037,\r\n  800: #4e342e,\r\n  900: #3e2723,\r\n  A100: #d7ccc8,\r\n  A200: #bcaaa4,\r\n  A400: #8d6e63,\r\n  A700: #5d4037,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: white,\r\n    400: white,\r\n    500: $white-87-opacity,\r\n    600: $white-87-opacity,\r\n    700: $white-87-opacity,\r\n    800: $white-87-opacity,\r\n    900: $white-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: $black-87-opacity,\r\n    A400: white,\r\n    A700: $white-87-opacity,\r\n  )\r\n);\r\n\r\n$md-grey: (\r\n  0: #ffffff,\r\n  50: #fafafa,\r\n  100: #f5f5f5,\r\n  200: #eeeeee,\r\n  300: #e0e0e0,\r\n  400: #bdbdbd,\r\n  500: #9e9e9e,\r\n  600: #757575,\r\n  700: #616161,\r\n  800: #424242,\r\n  900: #212121,\r\n  1000: #000000,\r\n  A100: #ffffff,\r\n  A200: #eeeeee,\r\n  A400: #bdbdbd,\r\n  A700: #616161,\r\n  contrast: (\r\n    0: $black-87-opacity,\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: $black-87-opacity,\r\n    500: $black-87-opacity,\r\n    600: $white-87-opacity,\r\n    700: $white-87-opacity,\r\n    800: $white-87-opacity,\r\n    900: $white-87-opacity,\r\n    1000: $white-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: $black-87-opacity,\r\n    A400: $black-87-opacity,\r\n    A700: $white-87-opacity,\r\n  )\r\n);\r\n\r\n$md-blue-grey: (\r\n  50: #eceff1,\r\n  100: #cfd8dc,\r\n  200: #b0bec5,\r\n  300: #90a4ae,\r\n  400: #78909c,\r\n  500: #607d8b,\r\n  600: #546e7a,\r\n  700: #455a64,\r\n  800: #37474f,\r\n  900: #263238,\r\n  A100: #cfd8dc,\r\n  A200: #b0bec5,\r\n  A400: #78909c,\r\n  A700: #455a64,\r\n  contrast: (\r\n    50: $black-87-opacity,\r\n    100: $black-87-opacity,\r\n    200: $black-87-opacity,\r\n    300: $black-87-opacity,\r\n    400: white,\r\n    500: white,\r\n    600: $white-87-opacity,\r\n    700: $white-87-opacity,\r\n    800: $white-87-opacity,\r\n    900: $white-87-opacity,\r\n    A100: $black-87-opacity,\r\n    A200: $black-87-opacity,\r\n    A400: white,\r\n    A700: $white-87-opacity,\r\n  )\r\n);\r\n\r\n\r\n// Background palette for light themes.\r\n$md-light-theme-background: (\r\n  status-bar: map_get($md-grey, 300),\r\n  app-bar:    map_get($md-grey, 100),\r\n  background: map_get($md-grey, 50),\r\n  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX\r\n  card:       white,\r\n  dialog:     white,\r\n  disabled-button:   rgba(black, 0.12)\r\n);\r\n\r\n// Background palette for dark themes.\r\n$md-dark-theme-background: (\r\n  status-bar: black,\r\n  app-bar:    map_get($md-grey, 900),\r\n  background: #303030,\r\n  hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX\r\n  card:       map_get($md-grey, 800),\r\n  dialog:     map_get($md-grey, 800),\r\n  disabled-button: rgba(white, 0.12)\r\n);\r\n\r\n// Foreground palette for light themes.\r\n$md-light-theme-foreground: (\r\n  base:            black,\r\n  divider:         rgba(black, 0.12),\r\n  dividers:        rgba(black, 0.12),\r\n  disabled:        rgba(black, 0.38),\r\n  disabled-button: rgba(black, 0.38),\r\n  disabled-text:   rgba(black, 0.38),\r\n  hint-text:       rgba(black, 0.38),\r\n  secondary-text:  rgba(black, 0.54),\r\n  icon:            rgba(black, 0.54),\r\n  icons:           rgba(black, 0.54),\r\n  text:            rgba(black, 0.87)\r\n);\r\n\r\n// Foreground palette for dark themes.\r\n$md-dark-theme-foreground: (\r\n  base:            white,\r\n  divider:         rgba(white, 0.12),\r\n  dividers:        rgba(white, 0.12),\r\n  disabled:        rgba(white, 0.3),\r\n  disabled-button: rgba(white, 0.3),\r\n  disabled-text:   rgba(white, 0.3),\r\n  hint-text:       rgba(white, 0.3),\r\n  secondary-text:  rgba(white, 0.7),\r\n  icon:            white,\r\n  icons:           white,\r\n  text:            white\r\n);\r\n","@import 'palette';\r\n\r\n\r\n// For a given hue in a palette, return the contrast color from the map of contrast palettes.\r\n// @param $color-map\r\n// @param $hue\r\n@function md-contrast($palette, $hue) {\r\n  @return map-get(map-get($palette, contrast), $hue);\r\n}\r\n\r\n\r\n// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms\r\n// of the Material Design hues.\r\n// @param $color-map\r\n// @param $primary\r\n// @param $lighter\r\n@function md-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {\r\n  $result: map_merge($base-palette, (\r\n    default: map-get($base-palette, $default),\r\n    lighter: map-get($base-palette, $lighter),\r\n    darker: map-get($base-palette, $darker),\r\n\r\n    default-contrast: md-contrast($base-palette, $default),\r\n    lighter-contrast: md-contrast($base-palette, $lighter),\r\n    darker-contrast: md-contrast($base-palette, $darker)\r\n  ));\r\n\r\n  // For each hue in the palette, add a \"-contrast\" color to the map.\r\n  @each $hue, $color in $base-palette {\r\n    $result: map_merge($result, (\r\n      '#{$hue}-contrast': md-contrast($base-palette, $hue)\r\n    ));\r\n  }\r\n\r\n  @return $result;\r\n}\r\n\r\n\r\n// Gets a color from a theme palette (the output of md-palette).\r\n// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured\r\n// hues (default, lighter, darker), or any of the aforementioned prefixed with \"-contrast\".\r\n//\r\n// @param $color-map The theme palette (output of md-palette).\r\n// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will\r\n//     be treated as opacity.\r\n// @param $opacity The alpha channel value for the color.\r\n@function md-color($palette, $hue: default, $opacity: 1) {\r\n  // If hueKey is a number between zero and one, then it actually contains an\r\n  // opacity value, so recall this function with the default hue and that given opacity.\r\n  @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {\r\n    @return md-color($palette, default, $hue);\r\n  }\r\n\r\n  $color: map-get($palette, $hue);\r\n  $opacity: if(opacity($color) < 1, opacity($color), $opacity);\r\n\r\n  @return rgba($color, $opacity);\r\n}\r\n\r\n\r\n// Creates a container object for a light theme to be given to individual component theme mixins.\r\n@function md-light-theme($primary, $accent, $warn: md-palette($md-red)) {\r\n  @return (\r\n    primary: $primary,\r\n    accent: $accent,\r\n    warn: $warn,\r\n    is-dark: false,\r\n    foreground: $md-light-theme-foreground,\r\n    background: $md-light-theme-background,\r\n  );\r\n}\r\n\r\n\r\n// Creates a container object for a dark theme to be given to individual component theme mixins.\r\n@function md-dark-theme($primary, $accent, $warn: md-palette($md-red)) {\r\n  @return (\r\n    primary: $primary,\r\n    accent: $accent,\r\n    warn: $warn,\r\n    is-dark: true,\r\n    foreground: $md-dark-theme-foreground,\r\n    background: $md-dark-theme-background,\r\n  );\r\n}\r\n","@import '../theming/theming';\r\n\r\n\r\n$md-ripple-focused-opacity: 0.1;\r\n$md-ripple-background-fade-duration: 300ms;\r\n$md-ripple-background-default-color: rgba(0, 0, 0, 0.0588);\r\n$md-ripple-foreground-initial-opacity: 0.25;\r\n$md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);\r\n\r\n\r\n@mixin md-ripple() {\r\n  // The host element of an md-ripple directive should always have a position of \"absolute\" or\r\n  // \"relative\" so that the ripple divs it creates inside itself are correctly positioned.\r\n  [md-ripple] {\r\n    overflow: hidden;\r\n  }\r\n\r\n  [md-ripple].md-ripple-unbounded {\r\n    overflow: visible;\r\n  }\r\n\r\n  .md-ripple-background {\r\n    background-color: $md-ripple-background-default-color;\r\n    opacity: 0;\r\n    transition: opacity $md-ripple-background-fade-duration linear;\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n  }\r\n\r\n  .md-ripple-unbounded .md-ripple-background {\r\n    display: none;\r\n  }\r\n\r\n  .md-ripple-background.md-ripple-active {\r\n    opacity: 1;\r\n  }\r\n\r\n  .md-ripple-focused .md-ripple-background {\r\n    opacity: 1;\r\n  }\r\n\r\n  .md-ripple-foreground {\r\n    background-color: $md-ripple-foreground-default-color;\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n    opacity: $md-ripple-foreground-initial-opacity;\r\n    position: absolute;\r\n    // The transition duration is manually set based on the ripple size.\r\n    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);\r\n  }\r\n\r\n  .md-ripple-foreground.md-ripple-fade-in {\r\n    opacity: 1;\r\n  }\r\n\r\n  .md-ripple-foreground.md-ripple-fade-out {\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n@mixin md-ripple-theme($theme) {\r\n  $accent: map-get($theme, accent);\r\n\r\n  .md-ripple-focused .md-ripple-background {\r\n    background-color: md-color($accent, $md-ripple-focused-opacity);\r\n  }\r\n}\r\n\r\n\r\n// A mixin, which generates temporary ink ripple on a given component.\r\n// To be removed once the real ripple is applied to all elements.\r\n// When $bindToParent is set to true, it will check for the focused class on the same selector as you included\r\n// that mixin.\r\n// It is also possible to specify the color palette of the temporary ripple. By default it uses the\r\n// accent palette for its background.\r\n@mixin md-temporary-ink-ripple($component, $bindToParent: false) {\r\n  // TODO(mtlin): Replace when ink ripple component is implemented.\r\n  // A placeholder ink ripple, shown when keyboard focused.\r\n  .md-ink-ripple {\r\n    border-radius: 50%;\r\n    opacity: 0;\r\n    height: 48px;\r\n    left: 50%;\r\n    overflow: hidden;\r\n    pointer-events: none;\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translate(-50%, -50%);\r\n    transition: opacity ease 280ms, background-color ease 280ms;\r\n    width: 48px;\r\n  }\r\n\r\n  // Fade in when radio focused.\r\n  #{if($bindToParent, '&', '')}.md-#{$component}-focused .md-ink-ripple {\r\n    opacity: 1;\r\n  }\r\n\r\n  // TODO(mtlin): This corresponds to disabled focus state, but it's unclear how to enter into\r\n  // this state.\r\n  #{if($bindToParent, '&', '')}.md-#{$component}-disabled .md-ink-ripple {\r\n    background-color: #000;\r\n  }\r\n}\r\n","@import '../core/theming/theming';\r\n\r\n\r\n// Applies a focus style to an md-button element for each of the supported palettes.\r\n@mixin _md-button-focus-color($theme) {\r\n  $primary: map-get($theme, primary);\r\n  $accent: map-get($theme, accent);\r\n  $warn: map-get($theme, warn);\r\n\r\n  &.md-primary::after {\r\n    background-color: md-color($primary, 0.12);\r\n  }\r\n\r\n  &.md-accent::after {\r\n    background-color: md-color($accent, 0.12);\r\n  }\r\n\r\n  &.md-warn::after {\r\n    background-color: md-color($warn, 0.12);\r\n  }\r\n}\r\n\r\n// Applies a property to an md-button element for each of the supported palettes.\r\n@mixin _md-button-theme-color($theme, $property, $color: 'default') {\r\n  $primary: map-get($theme, primary);\r\n  $accent: map-get($theme, accent);\r\n  $warn: map-get($theme, warn);\r\n  $background: map-get($theme, background);\r\n  $foreground: map-get($theme, foreground);\r\n\r\n  &.md-primary {\r\n    #{$property}: md-color($primary, $color);\r\n  }\r\n  &.md-accent {\r\n    #{$property}: md-color($accent, $color);\r\n  }\r\n  &.md-warn {\r\n    #{$property}: md-color($warn, $color);\r\n  }\r\n\r\n  &.md-primary, &.md-accent, &.md-warn, &[disabled] {\r\n    &[disabled] {\r\n      $palette: if($property == 'color', $foreground, $background);\r\n      #{$property}: md-color($palette, disabled-button);\r\n    }\r\n  }\r\n}\r\n\r\n@mixin md-button-theme($theme) {\r\n  $primary: map-get($theme, primary);\r\n  $accent: map-get($theme, accent);\r\n  $warn: map-get($theme, warn);\r\n  $background: map-get($theme, background);\r\n  $foreground: map-get($theme, foreground);\r\n\r\n  [md-button], [md-icon-button], [md-raised-button], [md-fab], [md-mini-fab] {\r\n    &.md-button-focus {\r\n      @include _md-button-focus-color($theme);\r\n    }\r\n  }\r\n\r\n  [md-button], [md-icon-button] {\r\n    @include _md-button-theme-color($theme, 'color');\r\n    background: transparent;\r\n\r\n    // Only flat buttons and icon buttons (not raised or fabs) have a hover style.\r\n    // Use the same visual treatment for hover as for focus.\r\n    &:hover {\r\n      @include _md-button-focus-color($theme);\r\n    }\r\n  }\r\n\r\n  [md-raised-button], [md-fab], [md-mini-fab] {\r\n    @include _md-button-theme-color($theme, 'color', default-contrast);\r\n    @include _md-button-theme-color($theme, 'background-color');\r\n    background-color: md-color($background, background);\r\n  }\r\n\r\n  [md-fab], [md-mini-fab] {\r\n    background-color: md-color($accent);\r\n    color: md-color($accent, default-contrast);\r\n  }\r\n}\r\n\r\n\r\n","@import '../core/theming/palette';\r\n@import '../core/theming/theming';\r\n\r\n\r\n@mixin md-button-toggle-theme($theme) {\r\n  $foreground: map-get($theme, foreground);\r\n\r\n  .md-button-toggle-checked .md-button-toggle-label-content {\r\n    background-color: md-color($md-grey, 300);\r\n  }\r\n  .md-button-toggle-disabled .md-button-toggle-label-content {\r\n    background-color: md-color($foreground, disabled);\r\n  }\r\n}\r\n","@import '../core/theming/palette';\r\n@import '../core/theming/theming';\r\n\r\n\r\n@mixin md-card-theme($theme) {\r\n  $background: map-get($theme, background);\r\n  $foreground: map-get($theme, foreground);\r\n\r\n  md-card {\r\n    background: md-color($background, card);\r\n    color: md-color($foreground, base);\r\n  }\r\n\r\n  md-card-subtitle {\r\n    color: md-color($foreground, secondary-text);\r\n  }\r\n}\r\n","@import '../core/theming/theming';\r\n\r\n\r\n@mixin md-checkbox-theme($theme) {\r\n  $is-dark-theme: map-get($theme, is-dark);\r\n  $primary: map-get($theme, primary);\r\n  $accent: map-get($theme, accent);\r\n  $background: map-get($theme, background);\r\n\r\n\r\n  // The color of the checkbox border.\r\n  $checkbox-border-color: if($is-dark-theme, rgba(white, 0.7), rgba(black, 0.54)) !default;\r\n\r\n  // The color of the checkbox's checkmark / mixedmark.\r\n  $checkbox-mark-color: md-color($background, background);\r\n\r\n  // The color that is used as the checkbox background when it is checked.\r\n  $checkbox-background-color: md-color($accent, 500);\r\n\r\n  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,\r\n  // this does not work well with elements layered on top of one another. To get around this we\r\n  // blend the colors together based on the base color and the theme background.\r\n  $white-30pct-opacity-on-dark: #686868;\r\n  $black-26pct-opacity-on-light: #b0b0b0;\r\n  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);\r\n\r\n  .md-checkbox-frame {\r\n    border-color: $checkbox-border-color;\r\n  }\r\n\r\n  .md-checkbox-checkmark {\r\n    fill: $checkbox-mark-color;\r\n  }\r\n\r\n  .md-checkbox-checkmark-path {\r\n    // !important is needed here because a stroke must be set as an attribute on the SVG in order\r\n    // for line animation to work properly.\r\n    stroke: $checkbox-mark-color !important;\r\n  }\r\n\r\n  .md-checkbox-mixedmark {\r\n    background-color: $checkbox-mark-color;\r\n  }\r\n\r\n  .md-checkbox-indeterminate, .md-checkbox-checked {\r\n    .md-checkbox-background {\r\n      background-color: $checkbox-background-color;\r\n    }\r\n  }\r\n\r\n  .md-checkbox-disabled {\r\n    &.md-checkbox-checked, &.md-checkbox-indeterminate {\r\n      .md-checkbox-background {\r\n        background-color: $disabled-color;\r\n      }\r\n    }\r\n\r\n    &:not(.md-checkbox-checked) {\r\n      .md-checkbox-frame {\r\n        border-color: $disabled-color;\r\n      }\r\n    }\r\n  }\r\n\r\n  // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied.\r\n  .md-checkbox-focused .md-ink-ripple {\r\n    background-color: md-color($accent, 0.26);\r\n  }\r\n}\r\n","@import '../core/theming/palette';\r\n@import '../core/theming/theming';\r\n\r\n\r\n@mixin md-dialog-theme($theme) {\r\n  $background: map-get($theme, background);\r\n\r\n  md-dialog-container {\r\n    background: md-color($background, dialog);\r\n  }\r\n}\r\n","@import '../core/theming/palette';\r\n@import '../core/theming/theming';\r\n\r\n\r\n// Include this empty mixin for consistency with the other components.\r\n@mixin md-grid-list-theme($theme) { }\r\n","@import '../core/theming/palette';\r\n@import '../core/theming/theming';\r\n\r\n\r\n// Include this empty mixin for consistency with the other components.\r\n@mixin md-icon-theme($theme) { }\r\n","@import '../core/theming/palette';\r\n@import '../core/theming/theming';\r\n\r\n\r\n@mixin md-input-theme($theme) {\r\n  $primary: map-get($theme, primary);\r\n  $accent: map-get($theme, accent);\r\n  $warn: map-get($theme, warn);\r\n  $background: map-get($theme, background);\r\n  $foreground: map-get($theme, foreground);\r\n  \r\n  // Placeholder colors. Required is used for the `*` star shown in the placeholder.\r\n  $input-placeholder-color: md-color($foreground, hint-text);\r\n  $input-floating-placeholder-color: md-color($primary);\r\n  $input-required-placeholder-color: md-color($accent);\r\n  \r\n  // Underline colors.\r\n  $input-underline-color: md-color($foreground, hint-text);\r\n  $input-underline-color-accent: md-color($accent);\r\n  $input-underline-color-warn: md-color($warn);\r\n  $input-underline-disabled-color: md-color($foreground, hint-text);\r\n  $input-underline-focused-color: md-color($primary);\r\n\r\n  .md-input-placeholder {\r\n    color: $input-placeholder-color;\r\n\r\n    // :focus is applied to the input, but we apply md-focused to the other elements\r\n    // that need to listen to it.\r\n    &.md-focused {\r\n      color: $input-floating-placeholder-color;\r\n\r\n      &.md-accent {\r\n        color: $input-underline-color-accent;\r\n      }\r\n      &.md-warn {\r\n        color: $input-underline-color-warn;\r\n      }\r\n    }\r\n  }\r\n\r\n  // See md-input-placeholder-floating mixin in input.scss\r\n  md-input input:-webkit-autofill + .md-input-placeholder,\r\n  .md-input-placeholder.md-float:not(.md-empty), .md-input-placeholder.md-float.md-focused {\r\n\r\n    .md-placeholder-required {\r\n      color: $input-required-placeholder-color;\r\n    }\r\n  }\r\n\r\n  .md-input-underline {\r\n    border-color: $input-underline-color;\r\n\r\n    .md-input-ripple {\r\n      background-color: $input-underline-focused-color;\r\n\r\n      &.md-accent {\r\n        background-color: $input-underline-color-accent;\r\n      }\r\n      &.md-warn {\r\n        background-color: $input-underline-color-warn;\r\n      }\r\n    }\r\n  }\r\n}\r\n","@import '../core/theming/palette';\r\n@import '../core/theming/theming';\r\n\r\n\r\n@mixin md-list-theme($theme) {\r\n  $background: map-get($theme, background);\r\n  $foreground: map-get($theme, foreground);\r\n\r\n  md-list, md-nav-list {\r\n    md-list-item, a[md-list-item] {\r\n      color: md-color($foreground, base);\r\n    }\r\n\r\n    [md-subheader] {\r\n      color: md-color($foreground, secondary-text);\r\n    }\r\n  }\r\n\r\n  md-divider {\r\n    border-top-color: md-color($foreground, divider);\r\n  }\r\n\r\n  md-nav-list .md-list-item {\r\n    &:hover, &.md-list-item-focus {\r\n      background: md-color($background, 'hover');\r\n    }\r\n  }\r\n}\r\n","@import '../core/theming/palette';\r\n@import '../core/theming/theming';\r\n\r\n\r\n@mixin md-menu-theme($theme) {\r\n  $background: map-get($theme, background);\r\n  $foreground: map-get($theme, foreground);\r\n\r\n  .md-menu {\r\n    background: md-color($background, 'card');\r\n  }\r\n\r\n  [md-menu-item] {\r\n    background: transparent;\r\n    color: md-color($foreground, 'text');\r\n\r\n    &[disabled] {\r\n      color: md-color($foreground, 'disabled');\r\n    }\r\n\r\n    &:hover:not([disabled]), &:focus:not([disabled]) {\r\n      background: md-color($background, 'hover');\r\n    }\r\n  }\r\n}\r\n","@import '../core/theming/palette';\r\n@import '../core/theming/theming';\r\n\r\n\r\n@mixin md-progress-bar-theme($theme) {\r\n  $primary: map-get($theme, primary);\r\n  $accent: map-get($theme, accent);\r\n  $warn: map-get($theme, warn);\r\n\r\n  // TODO(josephperrott): Find better way to inline svgs.\r\n  // In buffer mode a repeated SVG object is used as a background.\r\n  //  Each of the following defines the SVG object for each of the class defined colors.\r\n  //\r\n  //  Each string is a URL encoded version of:\r\n  //\r\n  //  <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n  //       version=\"1.1\" x=\"0px\" y=\"0px\" enable-background=\"new 0 0 5 2\"\r\n  //       xml:space=\"preserve\" viewBox=\"0 0 5 2\" preserveAspectRatio=\"none slice\">\r\n  //    <circle cx=\"1\" cy=\"1\" r=\"1\" fill=\"{INJECTED_COLOR}\"/>\r\n  //  </svg>\r\n  //\r\n  $buffer-bubbles-primary-url: url(\r\n    'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +\r\n    '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +\r\n    'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +\r\n    '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +\r\n    md-color($primary, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;\r\n  $buffer-bubbles-accent-url: url(\r\n    'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +\r\n    '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +\r\n    'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +\r\n    '%3D%27none%