fix(switch): misaligned handle when inside some flex containers

PiperOrigin-RevId: 386654956
material-components · Jul 24, 2021 · ea1e1b8 · ea1e1b8
1 parent 3f36ac7
commit ea1e1b8
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/packages/mdc-switch/_switch-theme.scss b/packages/mdc-switch/_switch-theme.scss
@@ -653,7 +653,5 @@ $forced-colors-theme: (
 }
 
 @mixin _track-width($width) {
-  .mdc-switch__track {
-    @include theme.property(width, $width);
-  }
+  @include theme.property(width, $width);
 }
diff --git a/packages/mdc-switch/_switch.scss b/packages/mdc-switch/_switch.scss
@@ -105,6 +105,7 @@ $ripple-target: '.mdc-switch__ripple';
 }
 
 @mixin root() {
+  align-items: center;
   background: none;
   border: none;
   display: inline-flex;
@@ -122,6 +123,7 @@ $ripple-target: '.mdc-switch__ripple';
 @mixin track() {
   overflow: hidden;
   position: relative;
+  width: 100%;
 
   &::before,
   &::after {
@@ -174,6 +176,7 @@ $ripple-target: '.mdc-switch__ripple';
   // pointer events.
   pointer-events: none;
   position: absolute;
+  top: 0; // Needed for IE11
   transition: animation.standard(transform, $animation-duration);
   // IE11 needs explicit left/right
   @include rtl.reflexive(left, 0, right, auto);