// // Copyright 2018 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/theme/mixins"; @import "@material/shape/mixins"; @import "@material/shape/functions"; @import "@material/rtl/mixins"; @import "./variables"; @mixin mdc-notched-outline-color($color) { .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing { @include mdc-theme-prop(border-color, $color); } } @mixin mdc-notched-outline-stroke-width($width) { .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing { border-width: $width; } } /// /// Adds top offset to compensate for border width box size when it is notched. /// Use this when floating label is aligned to center to prevent label jump on focus. /// @param {Number} $stroke-width Stroke width of notched outline that needs to be offset. /// @mixin mdc-notched-outline-notch-offset($stroke-width) { .mdc-notched-outline--notched .mdc-notched-outline__notch { padding-top: $stroke-width; } } @mixin mdc-notched-outline-shape-radius($radius, $rtl-reflexive: false) { $radius: mdc-shape-prop-value($radius); @if (length($radius) > 1) { // stylelint-disable-next-line max-line-length @warn "mdc-notched-outline-shape-radius only supports a single radius; see https://github.com/material-components/material-components-web/issues/4140"; } $radius: nth($radius, 1); .mdc-notched-outline__leading { @include mdc-shape-radius(mdc-shape-mask-radius($radius, 1 0 0 1), $rtl-reflexive: true); @if ($radius > $mdc-notched-outline-leading-width) { width: $radius; } } @if ($radius > $mdc-notched-outline-leading-width) { .mdc-notched-outline__notch { max-width: calc(100% - #{$radius} * 2); } } .mdc-notched-outline__trailing { @include mdc-shape-radius(mdc-shape-mask-radius($radius, 0 1 1 0), $rtl-reflexive: true); } } @mixin mdc-notched-outline-floating-label-float-position($positionY, $positionX: 0%, $scale: .75) { @include mdc-floating-label-float-position($positionY + $mdc-notched-outline-label-adjust, $positionX, 1); .mdc-floating-label--float-above { font-size: ($scale * 1rem); } // Two selectors to ensure we select the appropriate class when applied from this component or a parent component. &.mdc-notched-outline--upgraded, .mdc-notched-outline--upgraded { @include mdc-floating-label-float-position($positionY, $positionX, $scale); // stylelint-disable-next-line no-descending-specificity .mdc-floating-label--float-above { font-size: 1rem; } } } /// /// Sets floating label position in notched outline when label is afloat. /// /// @param {Number} $positionY Absolute Y-axis position in `px`. /// @param {Number} $positionX Absolute X-axis position in `px`. Defaults to `0`. /// @param {Number} $scale Defaults to `.75`. /// /// @todo Replace mixin `mdc-notched-outline-floating-label-float-position` with this mixin when floating label is /// center aligned in all the places. /// @mixin mdc-notched-outline-floating-label-float-position-absolute($positionY, $positionX: 0, $scale: .75) { @include mdc-floating-label-float-position($positionY + $mdc-notched-outline-label-adjust-absolute, $positionX, 1); .mdc-floating-label--float-above { font-size: ($scale * 1rem); } // Two selectors to ensure we select the appropriate class when applied from this component or a parent component. &.mdc-notched-outline--upgraded, .mdc-notched-outline--upgraded { @include mdc-floating-label-float-position( $positionY, $positionX, $scale); // stylelint-disable-next-line no-descending-specificity .mdc-floating-label--float-above { font-size: 1rem; } } }