WIP update mixins

material-components · Dec 9, 2019 · 9bf553d · 9bf553d
1 parent 312421e
commit 9bf553d
Showing 1 changed file with 16 additions and 4 deletions.
diff --git a/packages/mdc-switch/_mixins.scss b/packages/mdc-switch/_mixins.scss
@@ -87,6 +87,10 @@
       .mdc-switch__thumb-underlay {
         @include mdc-switch__thumb-underlay-checked_;
       }
+
+      .mdc-switch__native-control {
+        @include mdc-switch__native-control-checked_;
+      }
     }
   }
 
@@ -307,12 +311,11 @@
 }
 
 @mixin mdc-switch__native-control_ {
+  @include mdc-rtl-reflexive-position(left, 0);
+
   position: absolute;
-  top: 50%;
-  /* @noflip */
-  left: 50%;
+  top: 0;
   margin: 0;
-  transform: translate(-50%, -50%);
   opacity: 0;
   cursor: pointer;
   pointer-events: auto;
@@ -350,6 +353,15 @@
   }
 }
 
+@mixin mdc-switch__native-control-checked_ {
+  // Translate the native control the opposite direction so that the tap target stays the same.
+  transform: translateX(-($mdc-switch-thumb-active-margin));
+
+  @include mdc-rtl {
+    transform: translateX($mdc-switch-thumb-active-margin);
+  }
+}
+
 // Disabled state
 
 @mixin mdc-switch--disabled-base_ {