From 48cce31942bbbfda026d30f8907de13b0fc358e4 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Sun, 4 Feb 2018 09:39:29 +0100
Subject: [PATCH] refactor: reposition ripple container dynamically

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 1b8cc83a0642..ae3cfefdca50 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 81f350899263..4d1a795903a6 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 f229e6d1ca36..aaa2f1983262 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;