// // Copyright 2017 Google Inc. // // Permission is hereby granted, free of charge, to any person obtaining a copy // of this software and associated documentation files (the "Software"), to deal // in the Software without restriction, including without limitation the rights // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell // copies of the Software, and to permit persons to whom the Software is // furnished to do so, subject to the following conditions: // // The above copyright notice and this permission notice shall be included in // all copies or substantial portions of the Software. // // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. // @import "@material/feature-targeting/functions"; @import "@material/feature-targeting/mixins"; @import "./variables"; @mixin mdc-typography-core-styles($query: mdc-feature-all()) { .mdc-typography { @include mdc-typography-base($query: $query); } @each $style in map-keys($mdc-typography-styles) { .mdc-typography--#{$style} { @include mdc-typography($style, $query: $query); } } } @mixin mdc-typography-base($query: mdc-feature-all()) { $feat-typography: mdc-feature-create-target($query, typography); @include mdc-feature-targets($feat-typography) { @each $key, $value in $mdc-typography-base { #{$key}: $value; } } } @mixin mdc-typography($style, $query: mdc-feature-all(), $exclude-props: ()) { $feat-typography: mdc-feature-create-target($query, typography); $style-props: map-get($mdc-typography-styles, $style); @if not map-has-key($mdc-typography-styles, $style) { @error "Invalid style specified! #{$style} doesn't exist. Choose one of #{map-keys($mdc-typography-styles)}"; } @include mdc-feature-targets($feat-typography) { @each $key, $value in $style-props { @if index($exclude-props, $key) == null { #{$key}: $value; } } } } // Element must be `display: block` or `display: inline-block` for this to work. @mixin mdc-typography-overflow-ellipsis($query: mdc-feature-all()) { $feat-structure: mdc-feature-create-target($query, structure); @include mdc-feature-targets($feat-structure) { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } @mixin mdc-typography-baseline-top($distance, $query: mdc-feature-all()) { $feat-structure: mdc-feature-create-target($query, structure); @include mdc-feature-targets($feat-structure) { display: block; margin-top: 0; /* @alternate */ line-height: normal; } &::before { @include mdc-feature-targets($feat-structure) { @include mdc-typography-baseline-strut_($distance); vertical-align: 0; } } } @mixin mdc-typography-baseline-bottom($distance, $query: mdc-feature-all()) { $feat-structure: mdc-feature-create-target($query, structure); @include mdc-feature-targets($feat-structure) { margin-bottom: -1 * $distance; } &::after { @include mdc-feature-targets($feat-structure) { @include mdc-typography-baseline-strut_($distance); vertical-align: -1 * $distance; } } } @mixin mdc-typography-baseline-strut_($distance) { display: inline-block; width: 0; height: $distance; content: ""; }