| /** |
| * Copyright 2017 Google Inc. All Rights Reserved. |
| * |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| **/ |
| /** |
| * The css property used for elevation. In most cases this should not be changed. It is exposed |
| * as a variable for abstraction / easy use when needing to reference the property directly, for |
| * example in a `will-change` rule. |
| */ |
| /** |
| * The default duration value for elevation transitions. |
| */ |
| /** |
| * The default easing value for elevation transitions. |
| */ |
| /** |
| * Applies the correct css rules to an element to give it the elevation specified by $z-value. |
| * The $z-value must be between 0 and 24. |
| */ |
| /** |
| * Returns a string that can be used as the value for a `transition` property for elevation. |
| * Calling this function directly is useful in situations where a component needs to transition |
| * more than one property. |
| * |
| * ```scss |
| * .foo { |
| * transition: mdc-elevation-transition-rule(), opacity 100ms ease; |
| * will-change: $mdc-elevation-property, opacity; |
| * } |
| * ``` |
| */ |
| /** |
| * Applies the correct css rules needed to have an element transition between elevations. |
| * This mixin should be applied to elements whose elevation values will change depending on their |
| * context (e.g. when active or disabled). |
| */ |
| /* |
| Precomputed linear color channel values, for use in contrast calculations. |
| See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests |
| |
| Algorithm, for c in 0 to 255: |
| f(c) { |
| c = c / 255; |
| return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); |
| } |
| |
| This lookup table is needed since there is no `pow` in SASS. |
| */ |
| /** |
| * Calculate the luminance for a color. |
| * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests |
| */ |
| /** |
| * Calculate the contrast ratio between two colors. |
| * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests |
| */ |
| /** |
| * Determine whether to use dark or light text on top of given color. |
| * Returns "dark" for dark text and "light" for light text. |
| */ |
| /* |
| Main theme colors. |
| If you're a user customizing your color scheme in SASS, these are probably the only variables you need to change. |
| */ |
| /* Indigo 500 */ |
| /* Pink A200 */ |
| /* White */ |
| /* Which set of text colors to use for each main theme color (light or dark) */ |
| /* Text colors according to light vs dark and text type */ |
| /* Primary text colors for each of the theme colors */ |
| /** |
| * Applies the correct theme color style to the specified property. |
| * $property is typically color or background-color, but can be any CSS property that accepts color values. |
| * $style should be one of the map keys in $mdc-theme-property-values (_variables.scss). |
| */ |
| /** |
| * Creates a rule to be used in MDC-Web components for dark theming, and applies the provided contents. |
| * Should provide the $root-selector option if applied to anything other than the root selector. |
| * When used with a modifier class, provide a second argument of `true` for the $compound parameter |
| * to specify that this should be attached as a compound class. |
| * |
| * Usage example: |
| * |
| * ```scss |
| * .mdc-foo { |
| * color: black; |
| * |
| * @include mdc-theme-dark { |
| * color: white; |
| * } |
| * |
| * &__bar { |
| * background: black; |
| * |
| * @include mdc-theme-dark(".mdc-foo") { |
| * background: white; |
| * } |
| * } |
| * } |
| * |
| * .mdc-foo--disabled { |
| * opacity: .38; |
| * |
| * @include mdc-theme-dark(".mdc-foo", true) { |
| * opacity: .5; |
| * } |
| * } |
| * ``` |
| */ |
| /* TODO(sgomes): Figure out what to do about desktop font sizes. */ |
| /* TODO(sgomes): Figure out what to do about i18n and i18n font sizes. */ |
| /** |
| * Creates a rule that will be applied when an MDC-Web component is within the context of an RTL layout. |
| * |
| * Usage Example: |
| * ```scss |
| * .mdc-foo { |
| * position: absolute; |
| * left: 0; |
| * |
| * @include mdc-rtl { |
| * left: auto; |
| * right: 0; |
| * } |
| * |
| * &__bar { |
| * margin-left: 4px; |
| * @include mdc-rtl(".mdc-foo") { |
| * margin-left: auto; |
| * margin-right: 4px; |
| * } |
| * } |
| * } |
| * |
| * .mdc-foo--mod { |
| * padding-left: 4px; |
| * |
| * @include mdc-rtl { |
| * padding-left: auto; |
| * padding-right: 4px; |
| * } |
| * } |
| * ``` |
| * |
| * Note that this works by checking for [dir="rtl"] on an ancestor element. While this will work |
| * in most cases, it will in some cases lead to false negatives, e.g. |
| * |
| * ```html |
| * <html dir="rtl"> |
| * <!-- ... --> |
| * <div dir="ltr"> |
| * <div class="mdc-foo">Styled incorrectly as RTL!</div> |
| * </div> |
| * </html> |
| * ``` |
| * |
| * In the future, selectors such as :dir (http://mdn.io/:dir) will help us mitigate this. |
| */ |
| /** |
| * Takes a base box-model property - e.g. margin / border / padding - along with a default |
| * direction and value, and emits rules which apply the value to the |
| * "<base-property>-<default-direction>" property by default, but flips the direction |
| * when within an RTL context. |
| * |
| * For example: |
| * |
| * ```scss |
| * .mdc-foo { |
| * @include mdc-rtl-reflexive-box(margin, left, 8px); |
| * } |
| * ``` |
| * is equivalent to: |
| * |
| * ```scss |
| * .mdc-foo { |
| * margin-left: 8px; |
| * |
| * @include mdc-rtl { |
| * margin-right: 8px; |
| * margin-left: 0; |
| * } |
| * } |
| * ``` |
| * whereas: |
| * |
| * ```scss |
| * .mdc-foo { |
| * @include mdc-rtl-reflexive-box(margin, right, 8px); |
| * } |
| * ``` |
| * is equivalent to: |
| * |
| * ```scss |
| * .mdc-foo { |
| * margin-right: 8px; |
| * |
| * @include mdc-rtl { |
| * margin-right: 0; |
| * margin-left: 8px; |
| * } |
| * } |
| * ``` |
| * |
| * You can also pass a 4th optional $root-selector argument which will be forwarded to `mdc-rtl`, |
| * e.g. `@include mdc-rtl-reflexive-box-property(margin, left, 8px, ".mdc-component")`. |
| * |
| * Note that this function will always zero out the original value in an RTL context. If you're |
| * trying to flip the values, use mdc-rtl-reflexive-property(). |
| */ |
| /** |
| * Takes a base property and emits rules that assign <base-property>-left to <left-value> and |
| * <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context. |
| * For example: |
| * |
| * ```scss |
| * .mdc-foo { |
| * @include mdc-rtl-reflexive-property(margin, auto, 12px); |
| * } |
| * ``` |
| * is equivalent to: |
| * |
| * ```scss |
| * .mdc-foo { |
| * margin-left: auto; |
| * margin-right: 12px; |
| * |
| * @include mdc-rtl { |
| * margin-left: 12px; |
| * margin-right: auto; |
| * } |
| * } |
| * ``` |
| * |
| * A 4th optional $root-selector argument can be given, which will be passed to `mdc-rtl`. |
| */ |
| /** |
| * Takes an argument specifying a horizontal position property (either "left" or "right") as well |
| * as a value, and applies that value to the specified position in a LTR context, and flips it in a |
| * RTL context. For example: |
| * |
| * ```scss |
| * .mdc-foo { |
| * @include mdc-rtl-reflexive-position(left, 0); |
| * position: absolute; |
| * } |
| * ``` |
| * is equivalent to: |
| * |
| * ```scss |
| * .mdc-foo { |
| * position: absolute; |
| * left: 0; |
| * right: initial; |
| * |
| * @include mdc-rtl { |
| * right: 0; |
| * left: initial; |
| * } |
| * } |
| * ``` |
| * An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`. |
| */ |
| .mdc-card { |
| box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14); |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-end; |
| padding: 0; |
| box-sizing: border-box; } |
| .mdc-card__primary { |
| padding: 16px; } |
| .mdc-card__primary .mdc-card__title--large { |
| padding-top: 8px; } |
| .mdc-card__primary:last-child { |
| padding-bottom: 24px; } |
| .mdc-card__supporting-text { |
| padding: 8px 16px; |
| box-sizing: border-box; |
| font-family: Roboto, sans-serif; |
| -moz-osx-font-smoothing: grayscale; |
| -webkit-font-smoothing: antialiased; |
| font-size: 0.875rem; |
| font-weight: 400; |
| letter-spacing: 0.04em; |
| line-height: 1.25rem; |
| color: rgba(0, 0, 0, 0.87); |
| color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87)); } |
| .mdc-card--theme-dark .mdc-card__supporting-text, .mdc-theme--dark .mdc-card__supporting-text { |
| color: white; |
| color: var(--mdc-theme-text-primary-on-dark, white); } |
| .mdc-card__primary + .mdc-card__supporting-text { |
| margin-top: -8px; |
| padding-top: 0; } |
| .mdc-card__supporting-text:last-child { |
| padding-bottom: 24px; } |
| .mdc-card__actions { |
| display: flex; |
| padding: 8px; |
| box-sizing: border-box; } |
| .mdc-card--theme-dark .mdc-card__actions, .mdc-theme--dark .mdc-card__actions { |
| color: white; |
| color: var(--mdc-theme-text-primary-on-dark, white); } |
| .mdc-card__actions .mdc-card__action { |
| margin: 0 8px 0 0; } |
| [dir="rtl"] .mdc-card__actions .mdc-card__action, .mdc-card__actions .mdc-card__action[dir="rtl"] { |
| margin: 0 0 0 8px; } |
| .mdc-card__actions .mdc-card__action:last-child { |
| margin-left: 0; |
| margin-right: 0; } |
| [dir="rtl"] .mdc-card__actions .mdc-card__action:last-child, .mdc-card__actions .mdc-card__action:last-child[dir="rtl"] { |
| margin-left: 0; |
| margin-right: 0; } |
| .mdc-card__actions--vertical { |
| flex-flow: column; |
| align-items: flex-start; } |
| .mdc-card__actions--vertical .mdc-card__action { |
| margin: 0 0 4px; } |
| .mdc-card__actions--vertical .mdc-card__action:last-child { |
| margin-bottom: 0; } |
| .mdc-card__media { |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-end; |
| padding: 16px; |
| box-sizing: border-box; } |
| .mdc-card__media-item { |
| display: inline-block; |
| width: auto; |
| height: 80px; |
| margin: 16px 0 0; |
| padding: 0; } |
| .mdc-card__media-item--1dot5x { |
| width: auto; |
| height: 120px; } |
| .mdc-card__media-item--2x { |
| width: auto; |
| height: 160px; } |
| .mdc-card__media-item--3x { |
| width: auto; |
| height: 240px; } |
| .mdc-card__title { |
| font-family: Roboto, sans-serif; |
| -moz-osx-font-smoothing: grayscale; |
| -webkit-font-smoothing: antialiased; |
| font-size: 0.875rem; |
| font-weight: 500; |
| letter-spacing: 0.04em; |
| line-height: 1.5rem; |
| color: rgba(0, 0, 0, 0.87); |
| color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87)); |
| margin: -.063rem 0; } |
| .mdc-card--theme-dark .mdc-card__title, .mdc-theme--dark .mdc-card__title { |
| color: white; |
| color: var(--mdc-theme-text-primary-on-dark, white); } |
| .mdc-card__title--large { |
| font-family: Roboto, sans-serif; |
| -moz-osx-font-smoothing: grayscale; |
| -webkit-font-smoothing: antialiased; |
| font-size: 1.5rem; |
| font-weight: 400; |
| letter-spacing: normal; |
| line-height: 2rem; |
| margin: 0; } |
| .mdc-card__subtitle { |
| font-family: Roboto, sans-serif; |
| -moz-osx-font-smoothing: grayscale; |
| -webkit-font-smoothing: antialiased; |
| font-size: 0.875rem; |
| font-weight: 400; |
| letter-spacing: 0.04em; |
| line-height: 1.25rem; |
| color: rgba(0, 0, 0, 0.87); |
| color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87)); |
| margin: -.063rem 0; } |
| .mdc-card--theme-dark .mdc-card__subtitle, .mdc-theme--dark .mdc-card__subtitle { |
| color: white; |
| color: var(--mdc-theme-text-primary-on-dark, white); } |
| .mdc-card__horizontal-block { |
| display: flex; |
| flex-direction: row; |
| align-items: flex-start; |
| justify-content: space-between; |
| box-sizing: border-box; |
| padding: 0; |
| padding-left: 0; |
| padding-right: 16px; } |
| [dir="rtl"] .mdc-card__horizontal-block, .mdc-card__horizontal-block[dir="rtl"] { |
| padding-left: 16px; |
| padding-right: 0; } |
| .mdc-card__horizontal-block .mdc-card__actions--vertical { |
| margin: 16px; } |
| .mdc-card__horizontal-block .mdc-card__media-item { |
| margin-left: 16px; |
| margin-right: 0; } |
| [dir="rtl"] .mdc-card__horizontal-block .mdc-card__media-item, .mdc-card__horizontal-block .mdc-card__media-item[dir="rtl"] { |
| margin-left: 0; |
| margin-right: 16px; } |
| .mdc-card__horizontal-block .mdc-card__media-item--3x { |
| margin-bottom: 16px; } |
| |
| /*# sourceMappingURL=mdc-card.css.map */ |
