refactor: address feedback

material-components · Jan 20, 2019 · 7d64bdc · 7d64bdc
1 parent dc24250
commit 7d64bdc
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 28 deletions.
diff --git a/packages/mdc-switch/_mixins.scss b/packages/mdc-switch/_mixins.scss
@@ -21,7 +21,6 @@
 //
 
 @import "@material/theme/mixins";
-@import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 @import "@material/elevation/mixins";
@@ -35,12 +34,14 @@
 // Public
 //
 @mixin mdc-switch($query: mdc-feature-all()) {
-  // postcss-bem-linter: define checkbox
+  // postcss-bem-linter: define switch
 
   $feat-animation: mdc-feature-create-target($query, animation);
   $feat-color: mdc-feature-create-target($query, color);
   $feat-structure: mdc-feature-create-target($query, structure);
 
+  @include mdc-ripple-common($query);
+
   .mdc-switch {
     @include mdc-feature-targets($feat-structure) {
       @include mdc-switch-base_;
@@ -51,7 +52,7 @@
       @include mdc-switch-toggled-on-thumb-color($mdc-switch-baseline-theme-color);
       @include mdc-switch-toggled-off-track-color($mdc-switch-toggled-off-track-color);
       @include mdc-switch-toggled-off-thumb-color($mdc-switch-toggled-off-thumb-color);
-      @include mdc-switch-toggled-off-ripple-color($mdc-switch-toggled-off-ripple-color);
+      @include mdc-switch-toggled-off-ripple-color($mdc-switch-toggled-off-ripple-color, $query);
     }
   }
 
@@ -64,7 +65,9 @@
   }
 
   .mdc-switch__native-control {
-    @include mdc-switch__native-control_($query);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-switch__native-control_;
+    }
   }
 
   .mdc-switch__thumb {
@@ -104,16 +107,16 @@
   // postcss-bem-linter: end
 }
 
-@mixin mdc-switch-toggled-on-color($color) {
+@mixin mdc-switch-toggled-on-color($color, $query: mdc-feature-all()) {
   @include mdc-switch-toggled-on-track-color($color);
   @include mdc-switch-toggled-on-thumb-color($color);
-  @include mdc-switch-toggled-on-ripple-color($color);
+  @include mdc-switch-toggled-on-ripple-color($color, $query);
 }
 
-@mixin mdc-switch-toggled-off-color($color) {
+@mixin mdc-switch-toggled-off-color($color, $query: mdc-feature-all()) {
   @include mdc-switch-toggled-off-track-color($color);
   @include mdc-switch-toggled-off-thumb-color($color);
-  @include mdc-switch-toggled-off-ripple-color($color);
+  @include mdc-switch-toggled-off-ripple-color($color, $query);
 }
 
 @mixin mdc-switch-toggled-on-track-color($color) {
@@ -130,9 +133,9 @@
   }
 }
 
-@mixin mdc-switch-toggled-on-ripple-color($color) {
+@mixin mdc-switch-toggled-on-ripple-color($color, $query: mdc-feature-all()) {
   &.mdc-switch--checked .mdc-switch__thumb-underlay {
-    @include mdc-states($color);
+    @include mdc-states($color, false, $query);
   }
 }
 
@@ -150,9 +153,9 @@
   }
 }
 
-@mixin mdc-switch-toggled-off-ripple-color($color) {
+@mixin mdc-switch-toggled-off-ripple-color($color, $query: mdc-feature-all()) {
   &:not(.mdc-switch--checked) .mdc-switch__thumb-underlay {
-    @include mdc-states($color);
+    @include mdc-states($color, false, $query);
   }
 }
 
@@ -198,7 +201,7 @@
 
   @include mdc-feature-targets($feat-structure) {
     @include mdc-rtl-reflexive-position(left, $mdc-switch-tap-target-initial-position);
-    @include mdc-ripple-surface();
+    @include mdc-ripple-surface($query);
     @include mdc-ripple-radius-unbounded;
 
     display: flex;
@@ -220,29 +223,28 @@
   }
 }
 
-@mixin mdc-switch__native-control_($query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  @include mdc-feature-targets($feat-structure) {
-    @include mdc-rtl-reflexive-position(left, 0);
-
-    position: absolute;
-    top: 0;
-    width: $mdc-switch-native-control-width;
-    height: $mdc-switch-tap-target-size;
-    margin: 0;
-    opacity: 0;
-    cursor: pointer;
-    pointer-events: auto;
-  }
+@mixin mdc-switch__native-control_ {
+  @include mdc-rtl-reflexive-position(left, 0);
+
+  position: absolute;
+  top: 0;
+  width: $mdc-switch-native-control-width;
+  height: $mdc-switch-tap-target-size;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  pointer-events: auto;
 }
 
 @mixin mdc-switch__thumb_($query: mdc-feature-all()) {
   $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-color: mdc-feature-create-target($query, color);
 
   @include mdc-feature-targets($feat-structure) {
     @include mdc-elevation(2);
+  }
 
+  @include mdc-feature-targets($feat-structure) {
     box-sizing: border-box;
     width: $mdc-switch-thumb-diameter;
     height: $mdc-switch-thumb-diameter;

diff --git a/test/scss/feature-targeting.scss b/test/scss/feature-targeting.scss
@@ -1,3 +1,5 @@
 @import "@material/feature-targeting/functions";
 @import "@material/button/mixins";
+@import "@material/switch/mixins";
 @include mdc-button($query: mdc-feature-any());
+@include mdc-switch($query: mdc-feature-any());