// // 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 './floating-label-theme'; @mixin core-styles($query: feature-targeting.all()) { @include static-styles($query); @include floating-label-theme.theme-styles($query); } @mixin static-styles($query: feature-targeting.all()) { $feat-structure: feature-targeting.create-target($query, structure); // postcss-bem-linter: define floating-label .mdc-floating-label { @include feature-targeting.targets($feat-structure) { position: absolute; @include rtl.ignore-next-line(); left: 0; @include rtl.ignore-next-line(); -webkit-transform-origin: left top; @include rtl.ignore-next-line(); transform-origin: left top; line-height: 1.15rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: text; overflow: hidden; /* @alternate */ // Force the label into its own layer to prevent visible layer promotion adjustments // when the ripple is activated behind it. will-change: transform; @include rtl.rtl { @include rtl.ignore-next-line(); right: 0; @include rtl.ignore-next-line(); left: auto; @include rtl.ignore-next-line(); -webkit-transform-origin: right top; @include rtl.ignore-next-line(); transform-origin: right top; @include rtl.ignore-next-line(); text-align: right; } } } .mdc-floating-label--float-above { @include feature-targeting.targets($feat-structure) { cursor: auto; } } .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker) { &::after { @include feature-targeting.targets($feat-structure) { @include rtl.ignore-next-line(); margin-left: 1px; @include rtl.ignore-next-line(); margin-right: 0px; content: '*'; } } @include rtl.rtl { &::after { // Need to specify LTR/RTL manually since rtl mixins will add ::after[dir=rtl] // selector and that breaks some browsers @include feature-targeting.targets($feat-structure) { @include rtl.ignore-next-line(); margin-left: 0; @include rtl.ignore-next-line(); margin-right: 1px; } } } } }