{"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.
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.
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 *
Some content