feat(line-ripple): add feature targeting for styles (material-compone…

…nts#5292)
lasalvavida · Dec 18, 2019 · 391674a · 391674a
1 parent 47949b0
commit 391674a
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 25 deletions.
diff --git a/packages/mdc-line-ripple/_mixins.scss b/packages/mdc-line-ripple/_mixins.scss
@@ -20,8 +20,53 @@
 // THE SOFTWARE.
 //
 
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
+@import "@material/theme/mixins";
+@import "./functions";
+
 // Public
 
-@mixin mdc-line-ripple-color($color) {
-  @include mdc-theme-prop(background-color, $color);
+@mixin mdc-line-ripple-core-styles($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-animation: mdc-feature-create-target($query, animation);
+
+  // postcss-bem-linter: define line-ripple
+  .mdc-line-ripple {
+    @include mdc-feature-targets($feat-structure) {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      transform: scaleX(0);
+      opacity: 0;
+      z-index: 2;
+    }
+
+    @include mdc-feature-targets($feat-animation) {
+      transition: mdc-line-ripple-transition-value(transform), mdc-line-ripple-transition-value(opacity);
+    }
+  }
+
+  .mdc-line-ripple--active {
+    @include mdc-feature-targets($feat-structure) {
+      transform: scaleX(1);
+      opacity: 1;
+    }
+  }
+
+  .mdc-line-ripple--deactivating {
+    @include mdc-feature-targets($feat-structure) {
+      opacity: 0;
+    }
+  }
+}
+
+@mixin mdc-line-ripple-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  @include mdc-feature-targets($feat-color) {
+    @include mdc-theme-prop(background-color, $color);
+  }
 }
diff --git a/packages/mdc-line-ripple/mdc-line-ripple.scss b/packages/mdc-line-ripple/mdc-line-ripple.scss
@@ -21,31 +21,9 @@
 //
 
 @import "@material/base/mixins";
-@import "@material/theme/mixins";
-@import "./functions";
 @import "./mixins";
 
 // 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--deactivating {
-    opacity: 0;
-  }
+  @include mdc-line-ripple-core-styles;
 }
diff --git a/packages/mdc-line-ripple/package.json b/packages/mdc-line-ripple/package.json
@@ -24,6 +24,7 @@
   "dependencies": {
     "@material/animation": "^4.0.0",
     "@material/base": "^4.0.0",
+    "@material/feature-targeting": "^4.0.0",
     "@material/theme": "^4.0.0",
     "tslib": "^1.9.3"
   }

diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss
@@ -11,6 +11,7 @@
 @import "@material/icon-button/mixins";
 @import "@material/image-list/mixins";
 @import "@material/linear-progress/mixins";
+@import "@material/line-ripple/mixins";
 @import "@material/list/mixins";
 @import "@material/menu-surface/mixins";
 @import "@material/menu/mixins";
@@ -201,6 +202,10 @@
     @include mdc-linear-progress-bar-color(red, $query: $query);
     @include mdc-linear-progress-buffer-color(red, $query: $query);
 
+    // Line ripple
+    @include mdc-line-ripple-core-styles($query: $query);
+    @include mdc-line-ripple-color(red, $query: $query);
+
     // List
     @include mdc-list-core-styles($query: $query);
     @include mdc-list-item-primary-text-ink-color(red, $query: $query);