UNPKG

35.9 kBSource Map (JSON)View Raw
1{"version":3,"file":"progress-bar/progress-bar.css","sources":["progress-bar/progress-bar.scss","core/style/_variables.scss","core/style/_theme-functions.scss","core/style/_default-theme.scss","core/style/_palette.scss"],"sourcesContent":["@import 'variables';\n@import 'default-theme';\n\n$md-progress-bar-height: 5px !default;\n$md-progress-bar-full-animation-duration: 2000ms !default;\n$md-progress-bar-piece-animation-duration: 250ms !default;\n\n// TODO(josephperrott): Find better way to inline svgs.\n/** In buffer mode a repeated SVG object is used as a background. Each of the following defines the SVG object for each\n of the class defined colors.\n\n Each string is a URL encoded version of:\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n version=\"1.1\" x=\"0px\" y=\"0px\" enable-background=\"new 0 0 5 2\"\n xml:space=\"preserve\" viewBox=\"0 0 5 2\" preserveAspectRatio=\"none slice\">\n <circle cx=\"1\" cy=\"1\" r=\"1\" fill=\"{INJECTED_COLOR}\"/>\n </svg>\n\n */\n$md-buffer-bubbles-primary-url: url(\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' +\n '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +\n 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +\n '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +\n md-color($md-primary, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;\n$md-buffer-bubbles-accent-url: url(\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' +\n '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +\n 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +\n '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +\n md-color($md-accent, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;\n$md-buffer-bubbles-warn-url: url(\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' +\n '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +\n 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +\n '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +\n md-color($md-warn, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;\n\n:host {\n display: block;\n // Height is provided for md-progress-bar to act as a default.\n height: $md-progress-bar-height;\n overflow: hidden;\n position: relative;\n // translateZ is added to force the md-progress-bar into its own GPU layer.\n transform: translateZ(0);\n transition: opacity $md-progress-bar-piece-animation-duration linear;\n width: 100%;\n\n // The progress bar background is used to show the bubble animation scrolling behind a buffering progress bar.\n .md-progress-bar-background {\n background: $md-buffer-bubbles-primary-url;\n background-repeat: repeat-x;\n background-size: 10px 4px;\n height: 100%;\n position: absolute;\n visibility: hidden;\n width: 100%;\n }\n\n /**\n * The progress bar buffer is the bar indicator showing the buffer value and is only visible beyond the current value\n * of the primary progress bar.\n */\n .md-progress-bar-buffer {\n background-color: md-color($md-primary, 100);\n height: 100%;\n position: absolute;\n transform-origin: top left;\n transition: transform $md-progress-bar-piece-animation-duration ease;\n width: 100%;\n }\n\n /**\n * The secondary progress bar is only used in the indeterminate animation, because of this it is hidden in other uses.\n */\n .md-progress-bar-secondary {\n visibility: hidden;\n }\n\n /**\n * The progress bar fill fills the progress bar with the indicator color.\n */\n .md-progress-bar-fill {\n animation: none;\n height: 100%;\n position: absolute;\n transform-origin: top left;\n transition: transform $md-progress-bar-piece-animation-duration ease;\n width: 100%;\n }\n\n /**\n * A pseudo element is created for each progress bar bar that fills with the indicator color.\n */\n .md-progress-bar-fill::after {\n animation: none;\n background-color: md-color($md-primary, 600);\n content: '';\n display: inline-block;\n height: 100%;\n position: absolute;\n width: 100%;\n }\n\n &[color='accent'] {\n .md-progress-bar-background {\n background: $md-buffer-bubbles-accent-url;\n background-repeat: repeat-x;\n background-size: 10px 4px;\n }\n .md-progress-bar-buffer {\n background-color: md-color($md-accent, 100);\n }\n .md-progress-bar-fill::after {\n background-color: md-color($md-accent, 600);\n }\n }\n\n &[color='warn'] {\n .md-progress-bar-background {\n background: $md-buffer-bubbles-warn-url;\n background-repeat: repeat-x;\n background-size: 10px 4px;\n }\n .md-progress-bar-buffer {\n background-color: md-color($md-warn, 100);\n }\n .md-progress-bar-fill::after {\n background-color: md-color($md-warn, 600);\n }\n }\n\n &[mode='query'] {\n transform: rotateZ(180deg);\n }\n\n &[mode='indeterminate'],\n &[mode='query'] {\n .md-progress-bar-fill {\n transition: none;\n }\n .md-progress-bar-primary {\n animation: md-progress-bar-primary-indeterminate-translate $md-progress-bar-full-animation-duration infinite linear;\n left: -145.166611%;\n }\n .md-progress-bar-primary.md-progress-bar-fill::after {\n animation: md-progress-bar-primary-indeterminate-scale $md-progress-bar-full-animation-duration infinite linear;\n }\n .md-progress-bar-secondary {\n animation: md-progress-bar-secondary-indeterminate-translate $md-progress-bar-full-animation-duration infinite linear;\n left: -54.888891%;\n visibility: visible;\n }\n .md-progress-bar-secondary.md-progress-bar-fill::after {\n animation: md-progress-bar-secondary-indeterminate-scale $md-progress-bar-full-animation-duration infinite linear;\n }\n }\n\n &[mode='buffer'] {\n .md-progress-bar-background {\n animation: md-progress-bar-background-scroll $md-progress-bar-piece-animation-duration infinite linear;\n visibility: visible;\n }\n }\n}\n\n\n// Reverse the apparent directionality of progress vars for rtl.\n:host-context([dir='rtl']) {\n transform: rotateY(180deg);\n}\n\n\n/** The values used for animations in md-progress-bar, both timing and transformation, can be considered magic values.\n They are sourced from the Material Design example spec and duplicate the values of the original designers\n definitions.\n\n\n The indeterminate state is essentially made up of two progress bars, one primary (the one that is shown in both the\n determinate and indeterminate states) and one secondary, which essentially mirrors the primary progress bar in\n appearance but is only shown to assist with the indeterminate animations.\n\n\n KEYFRAME BLOCK\t DESCRIPTION\n primary-indeterminate-translate Translation of the primary progressbar across the screen\n primary-indeterminate-scale Scaling of the primary progressbar as it's being translated across the screen\n secondary-indeterminate-translate Translation of the secondary progressbar across the screen\n secondary-indeterminate-scale Scaling of the secondary progressbar as it's being translated across the screen\n\n Because two different transform animations need to be applied at once, the translation is applied to the outer\n element and the scaling is applied to the inner element, which provides the illusion necessary to make the animation\n work.\n*/\n\n// Progress Bar Timing functions:\n// $md-progress-bar-primary-indeterminate-translate-step-1 has no timing function.\n$md-progress-bar-primary-indeterminate-translate-step-2: cubic-bezier(0.5, 0, 0.701732, 0.495819) !default;\n$md-progress-bar-primary-indeterminate-translate-step-3: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352) !default;\n// $md-progress-bar-primary-indeterminate-translate-step-4 has no timing function.\n\n// $md-progress-bar-primary-indeterminate-scale-step-1 has no timing function\n$md-progress-bar-primary-indeterminate-scale-step-2: cubic-bezier(0.334731, 0.12482, 0.785844, 1) !default;\n$md-progress-bar-primary-indeterminate-scale-step-3: cubic-bezier(0.06, 0.11, 0.6, 1) !default;\n// $md-progress-bar-primary-indeterminate-scale-step-4 has no timing function\n\n$md-progress-bar-secondary-indeterminate-translate-step-1: cubic-bezier(0.15, 0, 0.515058, 0.409685) !default;\n$md-progress-bar-secondary-indeterminate-translate-step-2: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default;\n$md-progress-bar-secondary-indeterminate-translate-step-3: cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;\n// $md-progress-bar-secondary-indeterminate-translate-step-4 has no timing function\n\n$md-progress-bar-secondary-indeterminate-scale-step-1: cubic-bezier(0.15, 0, 0.515058, 0.409685) !default;\n$md-progress-bar-secondary-indeterminate-scale-step-2: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default;\n$md-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;\n// $md-progress-bar-secondary-indeterminate-scale-step-4 has no timing function\n\n/** Animations for indeterminate and query mode. */\n// Primary indicator.\n@keyframes md-progress-bar-primary-indeterminate-translate {\n 0% {\n transform: translateX(0);\n }\n 20% {\n animation-timing-function: $md-progress-bar-primary-indeterminate-translate-step-2;\n transform: translateX(0);\n }\n 59.15% {\n animation-timing-function: $md-progress-bar-primary-indeterminate-translate-step-3;\n transform: translateX(83.67142%);\n }\n 100% {\n transform: translateX(200.611057%);\n }\n}\n\n@keyframes md-progress-bar-primary-indeterminate-scale {\n 0% {\n transform: scaleX(0.08);\n }\n 36.65% {\n animation-timing-function: $md-progress-bar-primary-indeterminate-scale-step-2;\n transform: scaleX(0.08);\n }\n 69.15% {\n animation-timing-function: $md-progress-bar-primary-indeterminate-scale-step-3;\n transform: scaleX(0.661479);\n }\n 100% {\n transform: scaleX(0.08);\n }\n}\n\n// Secondary indicator.\n@keyframes md-progress-bar-secondary-indeterminate-translate {\n 0% {\n animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-1;\n transform: translateX(0);\n }\n 25% {\n animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-2;\n\n transform: translateX(37.651913%);\n }\n 48.35% {\n animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-3;\n transform: translateX(84.386165%);\n }\n 100% {\n transform: translateX(160.277782%);\n }\n}\n\n@keyframes md-progress-bar-secondary-indeterminate-scale {\n 0% {\n animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-1;\n transform: scaleX(0.08);\n }\n 19.15% {\n animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-2;\n transform: scaleX(0.457104);\n }\n 44.15% {\n animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-3;\n transform: scaleX(0.72796);\n }\n 100% {\n transform: scaleX(0.08);\n }\n}\n\n/** Animation for buffer mode. */\n@keyframes md-progress-bar-background-scroll {\n to {\n transform: translateX(-10px);\n }\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 '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