UNPKG

35.7 kBSource Map (JSON)View Raw
1{"version":3,"file":"card/card.css","sources":["card/card.scss","core/style/_variables.scss","core/style/_theme-functions.scss","core/style/_elevation.scss","core/style/_default-theme.scss","core/style/_palette.scss"],"sourcesContent":["\n@import 'variables';\n@import 'elevation';\n@import 'default-theme'; // TODO: Remove this\n\n$md-card-default-padding: 24px !default;\n$md-card-mobile-padding: 24px 16px !default;\n$md-card-border-radius: 2px !default;\n$md-card-header-size: 40px !default;\n\nmd-card {\n @include md-elevation(1);\n @include md-elevation-transition;\n display: block;\n position: relative;\n padding: $md-card-default-padding;\n border-radius: $md-card-border-radius;\n font-family: $md-font-family;\n background: md-color($md-background, card);\n color: md-color($md-foreground, base);\n}\n\nmd-card:hover {\n @include md-elevation(2);\n}\n\n.md-card-flat {\n box-shadow: none;\n}\n\n// base styles for each card section preset (md-card-content, etc)\n%md-card-section-base {\n display: block;\n margin-bottom: 16px;\n}\n\nmd-card-title {\n @extend %md-card-section-base;\n font-size: 24px;\n font-weight: 400;\n}\n\nmd-card-subtitle {\n @extend %md-card-section-base;\n font-size: $md-body-font-size-base;\n color: md-color($md-foreground, secondary-text);\n}\n\nmd-card-content {\n @extend %md-card-section-base;\n font-size: $md-body-font-size-base;\n}\n\nmd-card-actions {\n @extend %md-card-section-base;\n margin-left: -16px;\n margin-right: -16px;\n padding: 8px 0;\n\n &[align='end'] {\n display: flex;\n justify-content: flex-end;\n }\n}\n\n[md-card-image] {\n width: calc(100% + 48px);\n margin: 0 -24px 16px -24px;\n}\n\n[md-card-xl-image] {\n width: 240px;\n height: 240px;\n margin: -8px;\n}\n\nmd-card-footer {\n position: absolute;\n bottom: 0;\n}\n\nmd-card-actions {\n [md-button], [md-raised-button] {\n margin: 0 4px;\n }\n}\n\n/* HEADER STYLES */\n\nmd-card-header {\n display: flex;\n flex-direction: row;\n height: $md-card-header-size;\n margin: -8px 0 16px 0;\n}\n\n.md-card-header-text {\n height: $md-card-header-size;\n margin: 0 8px;\n}\n\n[md-card-avatar] {\n height: $md-card-header-size;\n width: $md-card-header-size;\n border-radius: 50%;\n}\n\nmd-card-header md-card-title {\n font-size: $md-body-font-size-base;\n}\n\n/* TITLE-GROUP STYLES */\n\n// images grouped with title in title-group layout\n%md-card-title-img {\n margin: -8px 0;\n}\n\nmd-card-title-group {\n display: flex;\n justify-content: space-between;\n margin: 0 -8px;\n}\n\n[md-card-sm-image] {\n @extend %md-card-title-img;\n width: 80px;\n height: 80px;\n}\n\n[md-card-md-image] {\n @extend %md-card-title-img;\n width: 112px;\n height: 112px;\n}\n\n[md-card-lg-image] {\n @extend %md-card-title-img;\n width: 152px;\n height: 152px;\n}\n\n/* MEDIA QUERIES */\n\n@media ($md-xsmall) {\n md-card {\n padding: $md-card-mobile-padding;\n }\n\n [md-card-image] {\n width: calc(100% + 32px);\n margin: 16px -16px;\n }\n\n md-card-title-group {\n margin: 0;\n }\n\n [md-card-xl-image] {\n margin-left: 0;\n margin-right: 0;\n }\n\n md-card-header {\n margin: -8px 0 0 0;\n }\n\n}\n\n/* FIRST/LAST CHILD ADJUSTMENTS */\n\n// top els in md-card-content and md-card can't have their default margin-tops (e.g. <p> tags)\n// or they'll incorrectly add to card's top padding\nmd-card > :first-child, md-card-content > :first-child {\n margin-top: 0;\n}\n\n// last els in md-card-content and md-card can't have their default margin-bottoms (e.g. <p> tags)\n// or they'll incorrectly add to card's bottom padding\nmd-card > :last-child, md-card-content > :last-child {\n margin-bottom: 0;\n}\n\n// if main image is on top, need to place it flush against top\n// (by stripping card's default 24px padding)\n[md-card-image]:first-child {\n margin-top: -24px;\n}\n\n// actions panel on bottom should be 8px from bottom of card\n// so must strip 16px from default card padding of 24px\nmd-card > md-card-actions:last-child {\n margin-bottom: -16px;\n padding-bottom: 0;\n}\n\n// actions panel should always be 8px from sides,\n// so the first button in the actions panel can't add its own margins\nmd-card-actions [md-button]:first-child,\nmd-card-actions [md-raised-button]:first-child {\n margin-left: 0;\n margin-right: 0;\n}\n\n// should be 12px space between titles and subtitles generally\n// default margin-bottom is 16px, so need to move lower title up 4px\nmd-card-title:not(:first-child), md-card-subtitle:not(:first-child) {\n margin-top: -4px;\n}\n\n// should be 8px space between titles and subtitles in header\n// default margin-bottom is 16px, so need to move subtitle in header up 4px\nmd-card-header md-card-subtitle:not(:first-child) {\n margin-top: -8px;\n}\n\n// xl image should always have 16px on top.\n// when it's the first el, it'll need to remove 8px from default card padding of 24px\nmd-card > [md-card-xl-image]:first-child {\n margin-top: -8px;\n}\n\n// xl image should always have 16px on bottom\n// when it's the last el, it'll need to remove 8px from default card padding of 24px\nmd-card > [md-card-xl-image]:last-child {\n margin-bottom: -8px;\n}\n","@import 'theme-functions';\n\n\n// Typography\n$md-body-font-size-base: rem(1.4) !default;\n$md-font-family: Roboto, 'Helvetica Neue', sans-serif !default;\n\n// Media queries\n$md-xsmall: 'max-width: 600px';\n\n// TODO: Revisit all z-indices before beta\n// z-index master list\n$z-index-fab: 20 !default;\n$z-index-drawer: 100 !default;\n$z-index-overlay: 1000 !default;\n\n// Global constants\n$pi: 3.14159265;\n\n// Padding between input toggles and their labels\n$md-toggle-padding: 8px !default;\n// Width and height of input toggles\n$md-toggle-size: 20px !default;\n\n// Easing Curves\n// TODO(jelbourn): all of these need to be revisited\n\n// The default animation curves used by material design.\n$md-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\n$md-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$md-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\n\n$swift-ease-out-duration: 400ms !default;\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\n\n$swift-ease-in-duration: 300ms !default;\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\n\n$swift-ease-in-out-duration: 500ms !default;\n$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\n\n$swift-linear-duration: 80ms !default;\n$swift-linear-timing-function: linear !default;\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\n","// ** Two main functions for users **\n// md-palette: used for defining your theme in terms of Material hues.\n// md-color: apply colors to components from the palette. Consumes the output of md-palette\n\n// Implement the rem unit with SCSS so we don't have to actually set a font-size on\n// the user's body element.\n@function rem($multiplier) {\n $font-size: 10px;\n @return $multiplier * $font-size;\n}\n\n// For a given hue in a palette, return the contrast color from the map of contrast palettes.\n@function md-contrast($color-map, $hue, $contrast-color-map) {\n @return map-get(map-get($contrast-color-map, $color-map), $hue);\n}\n\n\n// Creates a map of hues to colors for a theme.\n// $color-map\n// $primary\n// $lighter\n// $darker\n@function md-palette($color-map, $primary, $lighter, $darker, $contrast-color-map) {\n $result: map_merge($color-map, (\n default: map-get($color-map, $primary),\n lighter: map-get($color-map, $lighter),\n darker: map-get($color-map, $darker),\n\n default-contrast: md-contrast($color-map, $primary, $contrast-color-map),\n lighter-contrast: md-contrast($color-map, $lighter, $contrast-color-map),\n darker-contrast: md-contrast($color-map, $darker, $contrast-color-map)\n ));\n\n // For each hue in the palette, add a \"-contrast\" color to the map.\n @each $hue, $color in $color-map {\n $result: map_merge($result, (\n '#{$hue}-contrast': md-contrast($color-map, $hue, $contrast-color-map)\n ));\n }\n\n @return $result;\n}\n\n// Gets a color for a material design component.\n// $color-map: a map of {key: color}.\n// $hue-key: key used to lookup the color in $colorMap. Defaults to 'default'\n// If $hue-key is a number between 0 and 1, it will be treated as $opacity.\n// $opacity: the opacity to apply to the color.\n@function md-color($color-map, $hue-key: default, $opacity: 1) {\n // If hueKey is a number between zero and one, then it actually contains an\n // opacity value, so recall this function with the default hue and that given opacity.\n @if type-of($hue-key) == number and $hue-key >= 0 and $hue-key <= 1 {\n @return md-color($color-map, default, $hue-key);\n }\n\n $color: map-get($color-map, $hue-key);\n $opacity: if(opacity($color) < 1, opacity($color), $opacity);\n\n @return rgba($color, $opacity);\n}\n\n\n","@import 'variables';\n\n/**\n * A collection of mixins and CSS classes that can be used to apply elevation to a material\n * element.\n * See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html\n * Examples:\n *\n *\n * .md-foo {\n * @include $md-elevation(2);\n *\n * &:active {\n * @include $md-elevation(8);\n * }\n * }\n *\n * <div id=\"external-card\" class=\"md-elevation-z2\"><p>Some content</p></div>\n *\n * For an explanation of the design behind how elevation is implemented, see the design doc at\n * https://goo.gl/Kq0k9Z.\n */\n\n// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation\n// level is created using a set of 3 shadow values, one for umbra (the shadow representing the\n// space completely obscured by an object relative to its light source), one for penumbra (the\n// space partially obscured by an object), and one for ambient (the space which contains the object\n// itself). For a further explanation of these terms and their meanings, see\n// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.\n\n$_umbra-color: rgba(black, 0.2);\n$_penumbra-color: rgba(black, 0.14);\n$_ambient-color: rgba(black, 0.12);\n\n// Maps for the different shadow sets and their values within each z-space. These values were\n// created by taking a few reference shadow sets created by Google's Designers and interpolating\n// all of the values between them.\n\n$_umbra-elevation-map: (\n 0: '0px 0px 0px 0px #{$_umbra-color}',\n 1: '0px 2px 1px -1px #{$_umbra-color}',\n 2: '0px 3px 1px -2px #{$_umbra-color}',\n 3: '0px 3px 3px -2px #{$_umbra-color}',\n 4: '0px 2px 4px -1px #{$_umbra-color}',\n 5: '0px 3px 5px -1px #{$_umbra-color}',\n 6: '0px 3px 5px -1px #{$_umbra-color}',\n 7: '0px 4px 5px -2px #{$_umbra-color}',\n 8: '0px 5px 5px -3px #{$_umbra-color}',\n 9: '0px 5px 6px -3px #{$_umbra-color}',\n 10: '0px 6px 6px -3px #{$_umbra-color}',\n 11: '0px 6px 7px -4px #{$_umbra-color}',\n 12: '0px 7px 8px -4px #{$_umbra-color}',\n 13: '0px 7px 8px -4px #{$_umbra-color}',\n 14: '0px 7px 9px -4px #{$_umbra-color}',\n 15: '0px 8px 9px -5px #{$_umbra-color}',\n 16: '0px 8px 10px -5px #{$_umbra-color}',\n 17: '0px 8px 11px -5px #{$_umbra-color}',\n 18: '0px 9px 11px -5px #{$_umbra-color}',\n 19: '0px 9px 12px -6px #{$_umbra-color}',\n 20: '0px 10px 13px -6px #{$_umbra-color}',\n 21: '0px 10px 13px -6px #{$_umbra-color}',\n 22: '0px 10px 14px -6px #{$_umbra-color}',\n 23: '0px 11px 14px -7px #{$_umbra-color}',\n 24: '0px 11px 15px -7px #{$_umbra-color}'\n);\n\n$_penumbra-elevation-map: (\n 0: '0px 0px 0px 0px #{$_penumbra-color}',\n 1: '0px 1px 1px 0px #{$_penumbra-color}',\n 2: '0px 2px 2px 0px #{$_penumbra-color}',\n 3: '0px 3px 4px 0px #{$_penumbra-color}',\n 4: '0px 4px 5px 0px #{$_penumbra-color}',\n 5: '0px 5px 8px 0px #{$_penumbra-color}',\n 6: '0px 6px 10px 0px #{$_penumbra-color}',\n 7: '0px 7px 10px 1px #{$_penumbra-color}',\n 8: '0px 8px 10px 1px #{$_penumbra-color}',\n 9: '0px 9px 12px 1px #{$_penumbra-color}',\n 10: '0px 10px 14px 1px #{$_penumbra-color}',\n 11: '0px 11px 15px 1px #{$_penumbra-color}',\n 12: '0px 12px 17px 2px #{$_penumbra-color}',\n 13: '0px 13px 19px 2px #{$_penumbra-color}',\n 14: '0px 14px 21px 2px #{$_penumbra-color}',\n 15: '0px 15px 22px 2px #{$_penumbra-color}',\n 16: '0px 16px 24px 2px #{$_penumbra-color}',\n 17: '0px 17px 26px 2px #{$_penumbra-color}',\n 18: '0px 18px 28px 2px #{$_penumbra-color}',\n 19: '0px 19px 29px 2px #{$_penumbra-color}',\n 20: '0px 20px 31px 3px #{$_penumbra-color}',\n 21: '0px 21px 33px 3px #{$_penumbra-color}',\n 22: '0px 22px 35px 3px #{$_penumbra-color}',\n 23: '0px 23px 36px 3px #{$_penumbra-color}',\n 24: '0px 24px 38px 3px #{$_penumbra-color}'\n);\n\n$_ambient-elevation-map: (\n 0: '0px 0px 0px 0px #{$_ambient-color}',\n 1: '0px 1px 3px 0px #{$_ambient-color}',\n 2: '0px 1px 5px 0px #{$_ambient-color}',\n 3: '0px 1px 8px 0px #{$_ambient-color}',\n 4: '0px 1px 10px 0px #{$_ambient-color}',\n 5: '0px 1px 14px 0px #{$_ambient-color}',\n 6: '0px 1px 18px 0px #{$_ambient-color}',\n 7: '0px 2px 16px 1px #{$_ambient-color}',\n 8: '0px 3px 14px 2px #{$_ambient-color}',\n 9: '0px 3px 16px 2px #{$_ambient-color}',\n 10: '0px 4px 18px 3px #{$_ambient-color}',\n 11: '0px 4px 20px 3px #{$_ambient-color}',\n 12: '0px 5px 22px 4px #{$_ambient-color}',\n 13: '0px 5px 24px 4px #{$_ambient-color}',\n 14: '0px 5px 26px 4px #{$_ambient-color}',\n 15: '0px 6px 28px 5px #{$_ambient-color}',\n 16: '0px 6px 30px 5px #{$_ambient-color}',\n 17: '0px 6px 32px 5px #{$_ambient-color}',\n 18: '0px 7px 34px 6px #{$_ambient-color}',\n 19: '0px 7px 36px 6px #{$_ambient-color}',\n 20: '0px 8px 38px 7px #{$_ambient-color}',\n 21: '0px 8px 40px 7px #{$_ambient-color}',\n 22: '0px 8px 42px 7px #{$_ambient-color}',\n 23: '0px 9px 44px 8px #{$_ambient-color}',\n 24: '0px 9px 46px 8px #{$_ambient-color}'\n);\n\n/**\n * The css property used for elevation. In most cases this should not be changed. It is exposed\n * as a variable for abstraction / easy use when needing to reference the property directly, for\n * example in a will-change rule.\n */\n$md-elevation-property: box-shadow !default;\n\n/** The default duration value for elevation transitions. */\n$md-elevation-transition-duration: 280ms !default;\n\n/** The default easing value for elevation transitions. */\n$md-elevation-transition-timing-function: $md-fast-out-slow-in-timing-function;\n\n/**\n * Applies the correct css rules to an element to give it the elevation specified by $zValue.\n * The $zValue must be between 0 and 24.\n */\n@mixin md-elevation($zValue) {\n @if type-of($zValue) != number or not unitless($zValue) {\n @error '$zValue must be a unitless number';\n }\n @if $zValue < 0 or $zValue > 24 {\n @error '$zValue must be between 0 and 24';\n }\n\n #{$md-elevation-property}: #{map-get($_umbra-elevation-map, $zValue)},\n #{map-get($_penumbra-elevation-map, $zValue)},\n #{map-get($_ambient-elevation-map, $zValue)};\n}\n\n/**\n * Returns a string that can be used as the value for a transition property for elevation.\n * Calling this function directly is useful in situations where a component needs to transition\n * more than one property.\n *\n * .foo {\n * transition: md-elevation-transition-property-value(), opacity 100ms ease;\n * will-change: $md-elevation-property, opacity;\n * }\n */\n@function md-elevation-transition-property-value(\n $duration: $md-elevation-transition-duration,\n $easing: $md-elevation-transition-timing-function) {\n @return #{$md-elevation-property} #{$duration} #{$easing};\n}\n\n/**\n * Applies the correct css rules needed to have an element transition between elevations.\n * This mixin should be applied to elements whose elevation values will change depending on their\n * context (e.g. when active or disabled).\n */\n// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can\n// be used in the same way by clients.\n@mixin md-elevation-transition(\n $duration: $md-elevation-transition-duration,\n $easing: $md-elevation-transition-timing-function) {\n transition: md-elevation-transition-property-value($duration, $easing);\n will-change: $md-elevation-property;\n}\n","@import 'theme-functions';\n@import 'palette';\n\n\n// Person creating a theme writes variables like this:\n$md-is-dark-theme: false;\n\n\n$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes);\n$md-accent: md-palette($md-purple, 500, 300, 800, $md-contrast-palettes);\n$md-warn: md-palette($md-red, 500, 300, 900, $md-contrast-palettes);\n$md-foreground: if($md-is-dark-theme, $md-dark-theme-foreground, $md-light-theme-foreground);\n$md-background: if($md-is-dark-theme, $md-dark-theme-background, $md-light-theme-background);\n","// Color palettes from the Material Design spec.\n// See https://www.google.com/design/spec/style/color.html\n\n$md-red: (\n 50: #ffebee,\n 100: #ffcdd2,\n 200: #ef9a9a,\n 300: #e57373,\n 400: #ef5350,\n 500: #f44336,\n 600: #e53935,\n 700: #d32f2f,\n 800: #c62828,\n 900: #b71c1c,\n A100: #ff8a80,\n A200: #ff5252,\n A400: #ff1744,\n A700: #d50000,\n);\n\n$md-pink: (\n 50: #fce4ec,\n 100: #f8bbd0,\n 200: #f48fb1,\n 300: #f06292,\n 400: #ec407a,\n 500: #e91e63,\n 600: #d81b60,\n 700: #c2185b,\n 800: #ad1457,\n 900: #880e4f,\n A100: #ff80ab,\n A200: #ff4081,\n A400: #f50057,\n A700: #c51162,\n);\n\n$md-purple: (\n 50: #f3e5f5,\n 100: #e1bee7,\n 200: #ce93d8,\n 300: #ba68c8,\n 400: #ab47bc,\n 500: #9c27b0,\n 600: #8e24aa,\n 700: #7b1fa2,\n 800: #6a1b9a,\n 900: #4a148c,\n A100: #ea80fc,\n A200: #e040fb,\n A400: #d500f9,\n A700: #aa00ff,\n);\n\n$md-deep-purple: (\n 50: #ede7f6,\n 100: #d1c4e9,\n 200: #b39ddb,\n 300: #9575cd,\n 400: #7e57c2,\n 500: #673ab7,\n 600: #5e35b1,\n 700: #512da8,\n 800: #4527a0,\n 900: #311b92,\n A100: #b388ff,\n A200: #7c4dff,\n A400: #651fff,\n A700: #6200ea,\n);\n\n$md-indigo: (\n 50: #e8eaf6,\n 100: #c5cae9,\n 200: #9fa8da,\n 300: #7986cb,\n 400: #5c6bc0,\n 500: #3f51b5,\n 600: #3949ab,\n 700: #303f9f,\n 800: #283593,\n 900: #1a237e,\n A100: #8c9eff,\n A200: #536dfe,\n A400: #3d5afe,\n A700: #304ffe,\n);\n\n$md-blue: (\n 50: #e3f2fd,\n 100: #bbdefb,\n 200: #90caf9,\n 300: #64b5f6,\n 400: #42a5f5,\n 500: #2196f3,\n 600: #1e88e5,\n 700: #1976d2,\n 800: #1565c0,\n 900: #0d47a1,\n A100: #82b1ff,\n A200: #448aff,\n A400: #2979ff,\n A700: #2962ff,\n);\n\n$md-light-blue: (\n 50: #e1f5fe,\n 100: #b3e5fc,\n 200: #81d4fa,\n 300: #4fc3f7,\n 400: #29b6f6,\n 500: #03a9f4,\n 600: #039be5,\n 700: #0288d1,\n 800: #0277bd,\n 900: #01579b,\n A100: #80d8ff,\n A200: #40c4ff,\n A400: #00b0ff,\n A700: #0091ea,\n);\n\n$md-cyan: (\n 50: #e0f7fa,\n 100: #b2ebf2,\n 200: #80deea,\n 300: #4dd0e1,\n 400: #26c6da,\n 500: #00bcd4,\n 600: #00acc1,\n 700: #0097a7,\n 800: #00838f,\n 900: #006064,\n A100: #84ffff,\n A200: #18ffff,\n A400: #00e5ff,\n A700: #00b8d4,\n);\n\n$md-teal: (\n 50: #e0f2f1,\n 100: #b2dfdb,\n 200: #80cbc4,\n 300: #4db6ac,\n 400: #26a69a,\n 500: #009688,\n 600: #00897b,\n 700: #00796b,\n 800: #00695c,\n 900: #004d40,\n A100: #a7ffeb,\n A200: #64ffda,\n A400: #1de9b6,\n A700: #00bfa5,\n);\n\n$md-green: (\n 50: #e8f5e9,\n 100: #c8e6c9,\n 200: #a5d6a7,\n 300: #81c784,\n 400: #66bb6a,\n 500: #4caf50,\n 600: #43a047,\n 700: #388e3c,\n 800: #2e7d32,\n 900: #1b5e20,\n A100: #b9f6ca,\n A200: #69f0ae,\n A400: #00e676,\n A700: #00c853,\n);\n\n$md-light-green: (\n 50: #f1f8e9,\n 100: #dcedc8,\n 200: #c5e1a5,\n 300: #aed581,\n 400: #9ccc65,\n 500: #8bc34a,\n 600: #7cb342,\n 700: #689f38,\n 800: #558b2f,\n 900: #33691e,\n A100: #ccff90,\n A200: #b2ff59,\n A400: #76ff03,\n A700: #64dd17,\n);\n\n$md-lime: (\n 50: #f9fbe7,\n 100: #f0f4c3,\n 200: #e6ee9c,\n 300: #dce775,\n 400: #d4e157,\n 500: #cddc39,\n 600: #c0ca33,\n 700: #afb42b,\n 800: #9e9d24,\n 900: #827717,\n A100: #f4ff81,\n A200: #eeff41,\n A400: #c6ff00,\n A700: #aeea00,\n);\n\n$md-yellow: (\n 50: #fffde7,\n 100: #fff9c4,\n 200: #fff59d,\n 300: #fff176,\n 400: #ffee58,\n 500: #ffeb3b,\n 600: #fdd835,\n 700: #fbc02d,\n 800: #f9a825,\n 900: #f57f17,\n A100: #ffff8d,\n A200: #ffff00,\n A400: #ffea00,\n A700: #ffd600,\n);\n\n$md-amber: (\n 50: #fff8e1,\n 100: #ffecb3,\n 200: #ffe082,\n 300: #ffd54f,\n 400: #ffca28,\n 500: #ffc107,\n 600: #ffb300,\n 700: #ffa000,\n 800: #ff8f00,\n 900: #ff6f00,\n A100: #ffe57f,\n A200: #ffd740,\n A400: #ffc400,\n A700: #ffab00,\n);\n\n$md-orange: (\n 50: #fff3e0,\n 100: #ffe0b2,\n 200: #ffcc80,\n 300: #ffb74d,\n 400: #ffa726,\n 500: #ff9800,\n 600: #fb8c00,\n 700: #f57c00,\n 800: #ef6c00,\n 900: #e65100,\n A100: #ffd180,\n A200: #ffab40,\n A400: #ff9100,\n A700: #ff6d00,\n);\n\n$md-deep-orange: (\n 50: #fbe9e7,\n 100: #ffccbc,\n 200: #ffab91,\n 300: #ff8a65,\n 400: #ff7043,\n 500: #ff5722,\n 600: #f4511e,\n 700: #e64a19,\n 800: #d84315,\n 900: #bf360c,\n A100: #ff9e80,\n A200: #ff6e40,\n A400: #ff3d00,\n A700: #dd2c00,\n);\n\n$md-brown: (\n 50: #efebe9,\n 100: #d7ccc8,\n 200: #bcaaa4,\n 300: #a1887f,\n 400: #8d6e63,\n 500: #795548,\n 600: #6d4c41,\n 700: #5d4037,\n 800: #4e342e,\n 900: #3e2723,\n A100: #d7ccc8,\n A200: #bcaaa4,\n A400: #8d6e63,\n A700: #5d4037,\n);\n\n$md-grey: (\n 0: #ffffff,\n 50: #fafafa,\n 100: #f5f5f5,\n 200: #eeeeee,\n 300: #e0e0e0,\n 400: #bdbdbd,\n 500: #9e9e9e,\n 600: #757575,\n 700: #616161,\n 800: #424242,\n 900: #212121,\n 1000: #000000,\n A100: #ffffff,\n A200: #eeeeee,\n A400: #bdbdbd,\n A700: #616161,\n);\n\n$md-blue-grey: (\n 50: #eceff1,\n 100: #cfd8dc,\n 200: #b0bec5,\n 300: #90a4ae,\n 400: #78909c,\n 500: #607d8b,\n 600: #546e7a,\n 700: #455a64,\n 800: #37474f,\n 900: #263238,\n A100: #cfd8dc,\n A200: #b0bec5,\n A400: #78909c,\n A700: #455a64,\n);\n\n\n// Background palette for light themes.\n$md-light-theme-background: (\n status-bar: map_get($md-grey, 300),\n app-bar: map_get($md-grey, 100),\n background: map_get($md-grey, 50),\n hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX\n card: white,\n dialog: white,\n disabled-button: rgba(black, 0.12)\n);\n\n// Background palette for dark themes.\n$md-dark-theme-background: (\n status-bar: black,\n app-bar: map_get($md-grey, 900),\n background: #303030,\n hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX\n card: map_get($md-grey, 800),\n dialog: map_get($md-grey, 800),\n disabled-button: rgba(white, 0.12)\n);\n\n// Foreground palette for light themes.\n$md-light-theme-foreground: (\n base: black,\n divider: rgba(black, 0.12),\n dividers: rgba(black, 0.12),\n disabled: rgba(black, 0.38),\n disabled-button: rgba(black, 0.38),\n disabled-text: rgba(black, 0.38),\n hint-text: rgba(black, 0.38),\n secondary-text: rgba(black, 0.54),\n icon: rgba(black, 0.54),\n icons: rgba(black, 0.54),\n text: rgba(black, 0.87)\n);\n\n// Foreground palette for dark themes.\n$md-dark-theme-foreground: (\n base: white,\n divider: rgba(white, 0.12),\n dividers: rgba(white, 0.12),\n disabled: rgba(white, 0.3),\n disabled-button: rgba(white, 0.3),\n disabled-text: rgba(white, 0.3),\n hint-text: rgba(white, 0.3),\n secondary-text: rgba(white, 0.7),\n icon: white,\n icons: white,\n text: white\n);\n\n\n\n// TODO(jelbourn): Do we actually need these any more? Updates to the spec about how foreground\n// colors are used may have made this obsolete.\n\n// Contrast colors. These are hard-coded because it is too difficult (probably impossible) to\n// calculate them. These contrast colors are pulled from the public Material Design spec swatches.\n// While the contrast colors in the spec are not perscriptive, we will use them for convenience.\n$black-87-opacity: rgba(black, 0.870588);\n$white-87-opacity: rgba(white, 0.870588);\n\n$md-contrast-palettes: (\n $md-red: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n ),\n $md-pink: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n ),\n $md-purple: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n ),\n $md-deep-purple: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: $white-87-opacity,\n A700: $white-87-opacity,\n ),\n $md-indigo: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: $white-87-opacity,\n ),\n $md-blue: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n ),\n $md-light-blue: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: white,\n ),\n $md-cyan: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n ),\n $md-teal: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n ),\n $md-green: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n ),\n $md-light-green: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n ),\n $md-lime: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n ),\n $md-yellow: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: $black-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n ),\n $md-amber: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: $black-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n ),\n $md-orange: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: black,\n ),\n $md-deep-orange: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: white,\n ),\n $md-brown: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: $white-87-opacity,\n ),\n $md-grey: (\n 0: $black-87-opacity,\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n 1000: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $white-87-opacity,\n ),\n $md-blue-grey: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: white,\n 500: white,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: $white-87-opacity,\n ),\n);\n"],"mappings":"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","names":[],"sourceRoot":"/source/"}
\No newline at end of file