| 1 | {"version":3,"file":"sidenav/sidenav.css","sources":["sidenav/sidenav.scss","core/style/_default-theme.scss","core/style/_theme-functions.scss","core/style/_palette.scss","core/style/_mixins.scss","core/style/_variables.scss","core/style/_elevation.scss","core/style/_sidenav-mixins.scss"],"sourcesContent":["@import 'default-theme';\n@import 'mixins';\n@import 'variables';\n@import 'elevation';\n@import 'sidenav-mixins';\n\n// We use invert() here to have the darken the background color expected to be used. If the\n// background is light, we use a dark backdrop. If the background is dark, we use a light backdrop.\n$md-sidenav-backdrop-color: invert(md-color($md-background, card, 0.6)) !default;\n$md-sidenav-background-color: md-color($md-background, dialog) !default;\n$md-sidenav-push-background-color: md-color($md-background, dialog) !default;\n\n\n/**\n * Mixin to help with defining LTR/RTL 'transform: translate3d()' values.\n * @param $open The translation value when the sidenav is opened.\n * @param $close The translation value when the sidenav is closed.\n */\n@mixin md-sidenav-transition($open, $close) {\n transform: translate3d($close, 0, 0);\n\n &.md-sidenav-closed {\n // We use 'visibility: hidden | visible' because 'display: none' will not animate any\n // transitions, while visibility will interpolate transitions properly.\n // see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility, the Interpolation\n // section.\n visibility: hidden;\n }\n &.md-sidenav-closing {\n transform: translate3d($close, 0, 0);\n will-change: transform;\n }\n &.md-sidenav-opening {\n @include md-elevation(1);\n visibility: visible;\n transform: translate3d($open, 0, 0);\n will-change: transform;\n }\n &.md-sidenav-opened {\n @include md-elevation(1);\n transform: translate3d($open, 0, 0);\n }\n}\n\nmd-sidenav-layout {\n // We need a stacking context here so that the backdrop and drawers are clipped to the\n // MdSidenavLayout. This creates a new z-index stack so we use low numbered z-indices.\n // We create another stacking context in the '.md-sidenav-content' and in each sidenav so that\n // the application content does not get messed up with our own CSS.\n @include md-stacking-context();\n\n box-sizing: border-box;\n -webkit-overflow-scrolling: touch;\n\n // Need this to take up space in the layout.\n display: block;\n\n // Hide the sidenavs when they're closed.\n overflow: hidden;\n\n // TODO(hansl): Update this with a more robust solution.\n &[fullscreen] {\n @include md-fullscreen();\n\n &.md-sidenav-opened {\n overflow: hidden;\n }\n }\n}\n\n.md-sidenav-backdrop {\n @include md-fullscreen();\n\n display: block;\n\n // Because of the new stacking context, the z-index stack is new and we can use our own\n // numbers.\n z-index: 2;\n\n // We use 'visibility: hidden | visible' because 'display: none' will not animate any\n // transitions, while visibility will interpolate transitions properly.\n // see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility, the Interpolation\n // section.\n visibility: hidden;\n\n &.md-sidenav-shown {\n visibility: visible;\n background-color: $md-sidenav-backdrop-color;\n }\n}\n\n.md-sidenav-content {\n @include md-stacking-context();\n\n display: block;\n height: 100%;\n overflow: auto;\n}\n\nmd-sidenav {\n @include md-stacking-context();\n\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: 3;\n min-width: 5%;\n\n // TODO(kara): revisit scrolling behavior for sidenavs\n overflow-y: auto;\n\n background-color: $md-sidenav-background-color;\n\n @include md-sidenav-transition(0, -100%);\n\n &.md-sidenav-push {\n background-color: $md-sidenav-push-background-color;\n }\n\n &.md-sidenav-side {\n z-index: 1;\n }\n\n &.md-sidenav-end {\n right: 0;\n\n @include md-sidenav-transition(0, 100%);\n }\n\n [dir='rtl'] & {\n @include md-sidenav-transition(0, 100%);\n\n &.md-sidenav-end {\n left: 0;\n right: auto;\n\n @include md-sidenav-transition(0, -100%);\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","// ** 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","// 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","\n/**\n * Mixin that creates a new stacking context.\n * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n */\n@mixin md-stacking-context() {\n position: relative;\n\n // Use a transform to create a new stacking context.\n transform: translate3d(0, 0, 0);\n}\n\n/**\n * This mixin hides an element visually.\n * That means it's still accessible for screen-readers but not visible in view.\n */\n@mixin md-visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n text-transform: none;\n width: 1px;\n}\n\n/**\n * Forces an element to grow to fit floated contents; used as as an alternative to\n * `overflow: hidden;` because it doesn't cut off contents.\n */\n@mixin md-clearfix {\n &::before, &::after {\n content: '';\n clear: both;\n display: table;\n }\n}\n\n/**\n * A mixin, which generates temporary ink ripple on a given component.\n * When $bindToParent is set to true, it will check for the focused class on the same selector as you included\n * that mixin.\n * It is also possible to specify the color palette of the temporary ripple. By default it uses the\n * accent palette for its background.\n */\n@mixin md-temporary-ink-ripple($component, $bindToParent: false, $palette: $md-accent) {\n // TODO(mtlin): Replace when ink ripple component is implemented.\n // A placeholder ink ripple, shown when keyboard focused.\n .md-ink-ripple {\n border-radius: 50%;\n opacity: 0;\n height: 48px;\n left: 50%;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n transition: opacity ease 280ms, background-color ease 280ms;\n width: 48px;\n }\n\n // Fade in when radio focused.\n #{if($bindToParent, '&', '')}.md-#{$component}-focused .md-ink-ripple {\n opacity: 1;\n background-color: md-color($palette, 0.26);\n }\n\n // TODO(mtlin): This corresponds to disabled focus state, but it's unclear how to enter into\n // this state.\n #{if($bindToParent, '&', '')}.md-#{$component}-disabled .md-ink-ripple {\n background-color: #000;\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","@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","/* This mixin ensures an element spans the whole viewport.*/\n@mixin md-fullscreen {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}"],"mappings":"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","names":[],"sourceRoot":"/source/"} |