// // 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/base/mixins"; @import "@material/rtl/mixins"; @import "./mixins"; @import "./variables"; // Notched Outline is intended for use by multiple components, but its styles should only be emitted once when bundled @include mdc-base-emit-once("mdc-notched-outline") { .mdc-notched-outline { display: flex; position: absolute; right: 0; left: 0; box-sizing: border-box; width: 100%; max-width: 100%; height: 100%; /* @noflip */ text-align: left; pointer-events: none; @include mdc-rtl { /* @noflip */ text-align: right; } &__leading, &__notch, &__trailing { box-sizing: border-box; height: 100%; border-top: $mdc-notched-outline-border-width solid; border-bottom: $mdc-notched-outline-border-width solid; pointer-events: none; } &__leading { @include mdc-rtl-reflexive-property(border, $mdc-notched-outline-border-width solid, none); width: $mdc-notched-outline-leading-width; } &__trailing { @include mdc-rtl-reflexive-property(border, none, $mdc-notched-outline-border-width solid); flex-grow: 1; } &__notch { flex: 0 0 auto; width: auto; max-width: calc(100% - #{$mdc-notched-outline-leading-width} * 2); } .mdc-floating-label { display: inline-block; position: relative; max-width: 100%; } .mdc-floating-label--float-above { text-overflow: clip; } &--upgraded .mdc-floating-label--float-above { max-width: calc(100% / .75); } } .mdc-notched-outline--notched { .mdc-notched-outline__notch { @include mdc-rtl-reflexive-box(padding, right, 8px); border-top: none; } } .mdc-notched-outline--no-label { .mdc-notched-outline__notch { padding: 0; } } }