skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: reposition ripple container dynamically (#9773)

Browse Source 
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.
This commit is contained in:
Paul Gschwendtner
2018-02-08 22:39:43 +01:00
committed by mmalerba
parent 6f680d5d9e
commit a9e002a218
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/checkbox/checkbox.scss
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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;