From a9e002a218603d49eabf64c8df1074616df7378e Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Thu, 8 Feb 2018 22:39:43 +0100
Subject: [PATCH] refactor: reposition ripple container dynamically (#9773)

Right now, the ripple container for the checkbox, radio and slide-toggle are positioned using SCSS calculations. This works fine, but limits people, who want to resize the inner container (e.g. smaller checkbox).

Since resizing the checkbox to be smaller is reasonable, because MDC and the specs seem to have smaller boxes (18x18), the ripple container position can be determined using a simple CSS `calc`.

References #9244. References #9210.
---
 src/lib/checkbox/checkbox.scss         | 4 ++--
 src/lib/radio/radio.scss               | 4 ++--
 src/lib/slide-toggle/slide-toggle.scss | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
index 1b8cc83a064..ae3cfefdca5 100644
--- a/src/lib/checkbox/checkbox.scss
+++ b/src/lib/checkbox/checkbox.scss
@@ -413,8 +413,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 
 .mat-checkbox-ripple {
   position: absolute;
-  left: $mat-checkbox-size / 2 - $_mat-checkbox-ripple-radius;
-  top: $mat-checkbox-size / 2 - $_mat-checkbox-ripple-radius;
+  left: calc(50% - #{$_mat-checkbox-ripple-radius});
+  top: calc(50% - #{$_mat-checkbox-ripple-radius});
   height: $_mat-checkbox-ripple-radius * 2;
   width: $_mat_checkbox-ripple-radius * 2;
   z-index: 1;
diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
index 81f35089926..4d1a795903a 100644
--- a/src/lib/radio/radio.scss
+++ b/src/lib/radio/radio.scss
@@ -101,8 +101,8 @@ $mat-radio-ripple-radius: 25px;
 
 .mat-radio-ripple {
   position: absolute;
-  left: $mat-radio-size / 2 - $mat-radio-ripple-radius;
-  top: $mat-radio-size / 2 - $mat-radio-ripple-radius;
+  left: calc(50% - #{$mat-radio-ripple-radius});
+  top: calc(50% - #{$mat-radio-ripple-radius});
   height: $mat-radio-ripple-radius * 2;
   width: $mat-radio-ripple-radius * 2;
   z-index: 1;
diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss
index f229e6d1ca3..aaa2f198326 100644
--- a/src/lib/slide-toggle/slide-toggle.scss
+++ b/src/lib/slide-toggle/slide-toggle.scss
@@ -167,8 +167,8 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 // Ripple positioning for the slide-toggle. Moves the ripple container into the center of the thumb.
 .mat-slide-toggle-ripple {
   position: absolute;
-  top: $mat-slide-toggle-thumb-size / 2 - $mat-slide-toggle-ripple-radius;
-  left: $mat-slide-toggle-thumb-size / 2 - $mat-slide-toggle-ripple-radius;
+  top: calc(50% - #{$mat-slide-toggle-ripple-radius});
+  left: calc(50% - #{$mat-slide-toggle-ripple-radius});
   height: $mat-slide-toggle-ripple-radius * 2;
   width: $mat-slide-toggle-ripple-radius * 2;
   z-index: 1;