// // 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. // // stylelint-disable selector-class-pattern -- // Selector '.mdc-*' should only be used in this project. @use '@material/feature-targeting/feature-targeting'; @use '@material/rtl/rtl'; @use './notched-outline-theme'; @mixin core-styles($query: feature-targeting.all()) { @include static-styles($query); @include notched-outline-theme.theme-styles($query); } @mixin static-styles($query: feature-targeting.all()) { $feat-structure: feature-targeting.create-target($query, structure); .mdc-notched-outline { @include feature-targeting.targets($feat-structure) { display: flex; position: absolute; top: 0; right: 0; left: 0; box-sizing: border-box; width: 100%; max-width: 100%; height: 100%; @include rtl.ignore-next-line(); text-align: left; pointer-events: none; @include rtl.rtl { @include rtl.ignore-next-line(); text-align: right; } } &__leading, &__notch, &__trailing { @include feature-targeting.targets($feat-structure) { box-sizing: border-box; height: 100%; pointer-events: none; } } &__trailing { @include feature-targeting.targets($feat-structure) { flex-grow: 1; } } &__notch { @include feature-targeting.targets($feat-structure) { flex: 0 0 auto; width: auto; } } .mdc-floating-label { @include feature-targeting.targets($feat-structure) { display: inline-block; position: relative; max-width: 100%; } } .mdc-floating-label--float-above { @include feature-targeting.targets($feat-structure) { text-overflow: clip; } } &--upgraded .mdc-floating-label--float-above { @include feature-targeting.targets($feat-structure) { max-width: calc(100% / 0.75); } } } .mdc-notched-outline--notched { .mdc-notched-outline__notch { @include feature-targeting.targets($feat-structure) { @include rtl.reflexive-box(padding, right, 8px); border-top: none; } } } .mdc-notched-outline--no-label { .mdc-notched-outline__notch { @include feature-targeting.targets($feat-structure) { display: none; } } } }