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.

Author: devversion

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;

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;

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;