fix(material-experimental/slide-toggle): fix focus indictor position (#19551)

andrewseguin · web-flow · commit 6c212b74c4f1 · 2020-06-09T12:58:45.000-07:00
diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.scss b/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
@@ -28,6 +28,14 @@
     }
   }
 
+  // The thumb-underlay element has `mat-mdc-focus-indicator` which sets
+  // a relative position. This element must have absolute positioning. This
+  // has increased specificity than the style set in MDC to guarantee that
+  // it will be absolutely positioned.
+  .mdc-switch__thumb-underlay {
+    position: absolute;
+  }
+
   // The MDC switch styles related to the hover state are intertwined with the MDC ripple styles.
   // We currently don't use the MDC ripple due to size concerns, therefore we need to add some
   // additional styles to restore the hover state.

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,14 @@`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`
	`31`	+ // The thumb-underlay element has `mat-mdc-focus-indicator` which sets
	`32`	`+ // a relative position. This element must have absolute positioning. This`
	`33`	`+ // has increased specificity than the style set in MDC to guarantee that`
	`34`	`+ // it will be absolutely positioned.`
	`35`	`+ .mdc-switch__thumb-underlay {`
	`36`	`+ position: absolute;`
	`37`	`+ }`
	`38`	`+`
`31`	`39`	`// The MDC switch styles related to the hover state are intertwined with the MDC ripple styles.`
`32`	`40`	`// We currently don't use the MDC ripple due to size concerns, therefore we need to add some`
`33`	`41`	`// additional styles to restore the hover state.`