diff --git a/packages/mdc-form-field/_mixins.scss b/packages/mdc-form-field/_mixins.scss new file mode 100644 index 00000000000..b6c41ce6d0c --- /dev/null +++ b/packages/mdc-form-field/_mixins.scss @@ -0,0 +1,95 @@ +// +// Copyright 2019 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 "@material/rtl/mixins"; +@import "@material/theme/mixins"; +@import "@material/typography/mixins"; +@import "./variables"; + +@mixin mdc-form-field-core-styles($query: mdc-feature-all()) { + $feat-color: mdc-feature-create-target($query, color); + $feat-structure: mdc-feature-create-target($query, structure); + + .mdc-form-field { + @include mdc-typography(body2, $query); + + @include mdc-feature-targets($feat-color) { + @include mdc-theme-prop(color, text-primary-on-background); + } + + @include mdc-feature-targets($feat-structure) { + display: inline-flex; + align-items: center; + vertical-align: middle; + } + + // stylelint-disable-next-line selector-max-type + > label { + @include mdc-feature-targets($feat-structure) { + order: 0; + /* @noflip */ + margin-right: auto; + /* @noflip */ + padding-left: $mdc-form-field-item-spacing; + } + } + + @include mdc-rtl { + // stylelint-disable-next-line selector-max-type + > label { + @include mdc-feature-targets($feat-structure) { + /* @noflip */ + margin-left: auto; + /* @noflip */ + padding-right: $mdc-form-field-item-spacing; + } + } + } + } + + .mdc-form-field--align-end { + // stylelint-disable-next-line selector-max-type + > label { + @include mdc-feature-targets($feat-structure) { + order: -1; + /* @noflip */ + margin-left: auto; + /* @noflip */ + padding-right: $mdc-form-field-item-spacing; + } + } + + @include mdc-rtl { + // stylelint-disable-next-line selector-max-type + > label { + @include mdc-feature-targets($feat-structure) { + /* @noflip */ + margin-right: auto; + /* @noflip */ + padding-left: $mdc-form-field-item-spacing; + } + } + } + } +} diff --git a/packages/mdc-form-field/_variables.scss b/packages/mdc-form-field/_variables.scss new file mode 100644 index 00000000000..3cff2ddb67c --- /dev/null +++ b/packages/mdc-form-field/_variables.scss @@ -0,0 +1,23 @@ +// +// Copyright 2019 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. +// + +$mdc-form-field-item-spacing: 4px; diff --git a/packages/mdc-form-field/mdc-form-field.scss b/packages/mdc-form-field/mdc-form-field.scss index 2576aedbd60..f29f5b8befc 100644 --- a/packages/mdc-form-field/mdc-form-field.scss +++ b/packages/mdc-form-field/mdc-form-field.scss @@ -20,55 +20,5 @@ // THE SOFTWARE. // -@import "@material/rtl/mixins"; -@import "@material/theme/mixins"; -@import "@material/typography/mixins"; - -$mdc-form-field-item-spacing: 4px; - -// stylelint-disable selector-max-type -.mdc-form-field { - @include mdc-typography(body2); - @include mdc-theme-prop(color, text-primary-on-background); - - display: inline-flex; - align-items: center; - vertical-align: middle; - - > label { - order: 0; - /* @noflip */ - margin-right: auto; - /* @noflip */ - padding-left: $mdc-form-field-item-spacing; - } - - @include mdc-rtl { - > label { - /* @noflip */ - margin-left: auto; - /* @noflip */ - padding-right: $mdc-form-field-item-spacing; - } - } -} - -.mdc-form-field--align-end { - > label { - order: -1; - /* @noflip */ - margin-left: auto; - /* @noflip */ - padding-right: $mdc-form-field-item-spacing; - } - - @include mdc-rtl { - > label { - /* @noflip */ - margin-right: auto; - /* @noflip */ - padding-left: $mdc-form-field-item-spacing; - } - } -} -// stylelint-enable selector-max-type +@import "./mixins"; +@include mdc-form-field-core-styles; diff --git a/test/scss/feature-targeting.scss b/test/scss/feature-targeting.scss index b9630369e81..eace7af2233 100644 --- a/test/scss/feature-targeting.scss +++ b/test/scss/feature-targeting.scss @@ -3,6 +3,7 @@ @import "@material/checkbox/mixins"; @import "@material/elevation/mixins"; @import "@material/feature-targeting/functions"; +@import "@material/form-field/mixins"; @import "@material/list/mixins"; @import "@material/menu-surface/mixins"; @import "@material/menu/mixins"; @@ -48,6 +49,9 @@ @include mdc-elevation-core-styles($query: mdc-feature-any()); @include mdc-elevation(0, $query: mdc-feature-any()); + // Form Field + @include mdc-form-field-core-styles($query: mdc-feature-any()); + // List @include mdc-list-core-styles($query: mdc-feature-any()); @include mdc-list-item-primary-text-ink-color(red, $query: mdc-feature-any());