diff --git a/packages/mdc-base/_mixins.scss b/packages/mdc-base/_mixins.scss new file mode 100644 index 00000000000..66923f3dcdf --- /dev/null +++ b/packages/mdc-base/_mixins.scss @@ -0,0 +1,27 @@ +// +// Copyright 2018 Google Inc. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// + +// This variable is not intended to be overridden externally; it uses !default to avoid being reset +// every time this file is imported. +$mdc-base-styles-emitted_: () !default; + +@mixin mdc-base-emit-once($key) { + @debug $mdc-base-styles-emitted_; + @if not index($mdc-base-styles-emitted_, $key) { + $mdc-base-styles-emitted_: append($mdc-base-styles-emitted_, $key, comma) !global; + @content; + } +} diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss index cbc12fbf9e4..48ce133272b 100644 --- a/packages/mdc-floating-label/mdc-floating-label.scss +++ b/packages/mdc-floating-label/mdc-floating-label.scss @@ -14,6 +14,7 @@ // limitations under the License. // +@import "@material/base/mixins"; @import "@material/rtl/mixins"; @import "@material/theme/variables"; @import "@material/theme/mixins"; @@ -22,32 +23,35 @@ @import "./mixins"; @import "./variables"; -// postcss-bem-linter: define floating-label -.mdc-floating-label { - @include mdc-typography(subtitle1); +// Floating Label is intended for use by multiple components, but its styles should only be emitted once when bundled +@include mdc-base-emit-once("mdc-floating-label") { + // postcss-bem-linter: define floating-label + .mdc-floating-label { + @include mdc-typography(subtitle1); - position: absolute; - bottom: 8px; - left: 0; - transform-origin: left top; - transition: mdc-floating-label-transition(transform), mdc-floating-label-transition(color); - line-height: 1.15rem; - cursor: text; + position: absolute; + bottom: 8px; + left: 0; + transform-origin: left top; + transition: mdc-floating-label-transition(transform), mdc-floating-label-transition(color); + line-height: 1.15rem; + cursor: text; - @include mdc-rtl { - right: 0; - left: auto; - transform-origin: right top; + @include mdc-rtl { + right: 0; + left: auto; + transform-origin: right top; + } } -} -.mdc-floating-label--float-above { - cursor: auto; -} + .mdc-floating-label--float-above { + cursor: auto; + } -@at-root { - @include mdc-floating-label-float-position($mdc-floating-label-position-y); - @include mdc-floating-label-shake-animation(standard); -} + @at-root { + @include mdc-floating-label-float-position($mdc-floating-label-position-y); + @include mdc-floating-label-shake-animation(standard); + } -@include mdc-floating-label-shake-keyframes(standard, $mdc-floating-label-position-y); + @include mdc-floating-label-shake-keyframes(standard, $mdc-floating-label-position-y); +} diff --git a/packages/mdc-line-ripple/mdc-line-ripple.scss b/packages/mdc-line-ripple/mdc-line-ripple.scss index 137d5f72bea..515588fa8aa 100644 --- a/packages/mdc-line-ripple/mdc-line-ripple.scss +++ b/packages/mdc-line-ripple/mdc-line-ripple.scss @@ -14,28 +14,32 @@ // limitations under the License. // +@import "@material/base/mixins"; +@import "@material/theme/mixins"; @import "./functions"; @import "./mixins"; -@import "@material/theme/mixins"; -// postcss-bem-linter: define line-ripple -.mdc-line-ripple { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 2px; - transform: scaleX(0); - transition: mdc-line-ripple-transition-value(transform), mdc-line-ripple-transition-value(opacity); - opacity: 0; - z-index: 2; -} +// Line Ripple is intended for use by multiple components, but its styles should only be emitted once when bundled +@include mdc-base-emit-once("mdc-line-ripple") { + // postcss-bem-linter: define line-ripple + .mdc-line-ripple { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + transform: scaleX(0); + transition: mdc-line-ripple-transition-value(transform), mdc-line-ripple-transition-value(opacity); + opacity: 0; + z-index: 2; + } -.mdc-line-ripple--active { - transform: scaleX(1); - opacity: 1; -} + .mdc-line-ripple--active { + transform: scaleX(1); + opacity: 1; + } -.mdc-line-ripple--deactivating { - opacity: 0; + .mdc-line-ripple--deactivating { + opacity: 0; + } } diff --git a/packages/mdc-notched-outline/mdc-notched-outline.scss b/packages/mdc-notched-outline/mdc-notched-outline.scss index 1363b5fd5de..30c6f6f6813 100644 --- a/packages/mdc-notched-outline/mdc-notched-outline.scss +++ b/packages/mdc-notched-outline/mdc-notched-outline.scss @@ -14,57 +14,61 @@ // limitations under the License. // +@import "@material/base/mixins"; @import "@material/ripple/mixins"; @import "@material/ripple/variables"; @import "@material/textfield/functions"; @import "@material/theme/mixins"; @import "./mixins"; -.mdc-notched-outline { - position: absolute; - top: 0; - left: 0; - width: calc(100% - 1px); - height: calc(100% - 2px); - transition: mdc-text-field-transition(opacity); - opacity: 0; - overflow: hidden; - - // stylelint-disable selector-max-type - svg { +// 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 { position: absolute; - width: 100%; - height: 100%; + top: 0; + left: 0; + width: calc(100% - 1px); + height: calc(100% - 2px); + transition: mdc-text-field-transition(opacity); + opacity: 0; + overflow: hidden; + + // stylelint-disable selector-max-type + svg { + position: absolute; + width: 100%; + height: 100%; + } + // stylelint-enable selector-max-type } - // stylelint-enable selector-max-type -} -.mdc-notched-outline__idle { - position: absolute; - top: 0; - left: 0; - width: calc(100% - 4px); - height: calc(100% - 4px); - transition: opacity 100ms ease; - border: 1px solid; - opacity: 1; -} + .mdc-notched-outline__idle { + position: absolute; + top: 0; + left: 0; + width: calc(100% - 4px); + height: calc(100% - 4px); + transition: opacity 100ms ease; + border: 1px solid; + opacity: 1; + } -.mdc-notched-outline__path { - stroke-width: 1px; + .mdc-notched-outline__path { + stroke-width: 1px; - // TODO(mattgoo): remove this text-field dep from notched-outline - transition: - mdc-text-field-transition(stroke), - mdc-text-field-transition(stroke-width), - mdc-text-field-transition(opacity); - fill: transparent; -} + // TODO(mattgoo): remove this text-field dep from notched-outline + transition: + mdc-text-field-transition(stroke), + mdc-text-field-transition(stroke-width), + mdc-text-field-transition(opacity); + fill: transparent; + } -.mdc-notched-outline--notched { - opacity: 1; -} + .mdc-notched-outline--notched { + opacity: 1; + } -.mdc-notched-outline--notched ~ .mdc-notched-outline__idle { - opacity: 0; + .mdc-notched-outline--notched ~ .mdc-notched-outline__idle { + opacity: 0; + } } diff --git a/packages/mdc-ripple/common.scss b/packages/mdc-ripple/common.scss index 999fd2d6ec3..4eebf4e374d 100644 --- a/packages/mdc-ripple/common.scss +++ b/packages/mdc-ripple/common.scss @@ -15,17 +15,11 @@ // @import "./keyframes"; +@import "@material/base/mixins"; // Ensure that styles needed by any component using MDC Ripple are emitted, but only once. // (Every component using MDC Ripple imports these mixins, but doesn't necessarily import mdc-ripple.scss.) - -// This variable is not intended to be overridden externally; it uses !default to avoid being reset -// every time this file is imported. -$mdc-ripple-common-styles-emitted_: false !default; - -@if not $mdc-ripple-common-styles-emitted_ { - $mdc-ripple-common-styles-emitted_: true; - +@include mdc-base-emit-once("mdc-ripple/common") { @include mdc-ripple-keyframes_; // Styles used to detect buggy behavior of CSS custom properties in Edge.