chore(ripple): move common ripple styles out of mixins and into @mate…

…rial/ripple/common (#1736)

BREAKING CHANGE: Please update all components which use MDC Ripple to import the new /common file

packages/mdc-button/mdc-button.scss

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+@import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/theme/mixins";
 @import "./mixins";

packages/mdc-checkbox/mdc-checkbox.scss

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+@import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/theme/mixins";
 @import "./mixins";

packages/mdc-fab/mdc-fab.scss

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/ripple/variables";
 @import "./mixins";

packages/mdc-icon-toggle/mdc-icon-toggle.scss

@@ -17,6 +17,7 @@
 /** postcss-bem-linter: define icon-toggle */
 
 @import "@material/animation/functions";
+@import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/theme/mixins";
 @import "./mixins";

packages/mdc-list/mdc-list.scss

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 @import "@material/theme/mixins";

packages/mdc-radio/mdc-radio.scss

@@ -15,6 +15,7 @@
 //
 
 @import "@material/animation/functions";
+@import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/theme/mixins";
 @import "./functions";

packages/mdc-ripple/_mixins.scss

@@ -17,36 +17,8 @@
 @import "@material/animation/variables";
 @import "@material/theme/functions";
 @import "@material/theme/mixins";
-@import "./keyframes";
 @import "./variables";
 
-// 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-ripple-keyframes_;
-
-  // Styles used to detect buggy behavior of CSS custom properties in Edge.
-  // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
-  // This is included in _mixins.scss rather than mdc-ripple.scss so that it will be
-  // present for other components which rely on ripple as well as mdc-ripple itself.
-  .mdc-ripple-surface--test-edge-var-bug {
-    --mdc-ripple-surface-test-edge-var: 1px solid #000;
-
-    visibility: hidden;
-
-    &::before {
-      border: var(--mdc-ripple-surface-test-edge-var);
-    }
-  }
-}
-
 @mixin mdc-ripple-surface() {
   --mdc-ripple-fg-size: 0;
   --mdc-ripple-left: 0;

packages/mdc-ripple/common.scss

@@ -0,0 +1,44 @@
+//
+// Copyright 2017 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.
+//
+
+@import "./keyframes";
+
+// 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-ripple-keyframes_;
+
+  // Styles used to detect buggy behavior of CSS custom properties in Edge.
+  // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
+  // This is included in _mixins.scss rather than mdc-ripple.scss so that it will be
+  // present for other components which rely on ripple as well as mdc-ripple itself.
+  .mdc-ripple-surface--test-edge-var-bug {
+    --mdc-ripple-surface-test-edge-var: 1px solid #000;
+
+    visibility: hidden;
+
+    &::before {
+      border: var(--mdc-ripple-surface-test-edge-var);
+    }
+  }
+}

packages/mdc-ripple/mdc-ripple.scss

@@ -16,6 +16,7 @@
 
 @import "@material/animation/functions";
 @import "@material/theme/mixins";
+@import "./common";
 @import "./mixins";
 @import "./variables";
 

packages/mdc-select/mdc-select.scss

@@ -18,6 +18,7 @@
 @import "@material/animation/variables";
 @import "@material/typography/mixins";
 @import "@material/theme/mixins";
+@import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 

packages/mdc-tabs/tab/mdc-tab.scss

@@ -17,6 +17,7 @@
 @import "@material/animation/functions";
 @import "@material/typography/mixins";
 @import "@material/theme/mixins";
+@import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 

packages/mdc-textfield/mdc-text-field.scss

@@ -18,6 +18,7 @@
 @import "./mixins";
 @import "./variables";
 @import "@material/animation/variables";
+@import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";