From d7967765c2509160a260e741a1696c35df3bc35a Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Fri, 20 Jul 2018 20:25:12 +0200 Subject: [PATCH] feat(ripple): no longer require additional setup when using MatRipple directive (#11913) --- src/lib/button-toggle/button-toggle.scss | 4 +++- src/lib/button/button.scss | 7 +++++-- src/lib/checkbox/checkbox.scss | 4 +++- src/lib/core/option/option.scss | 4 +++- src/lib/core/ripple/_ripple.scss | 7 ++++++- src/lib/menu/menu.scss | 4 +++- src/lib/radio/radio.scss | 4 +++- src/lib/slide-toggle/slide-toggle.scss | 4 +++- src/lib/stepper/step-header.scss | 4 +++- .../ripple-overview/ripple-overview-example.css | 3 --- 10 files changed, 32 insertions(+), 13 deletions(-) diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss index 0d9623b3cc0..e1b9c69ab1e 100644 --- a/src/lib/button-toggle/button-toggle.scss +++ b/src/lib/button-toggle/button-toggle.scss @@ -93,7 +93,9 @@ $mat-button-toggle-border-radius: 2px !default; } } -.mat-button-toggle-ripple { +// Increase specificity because ripple styles are part of the `mat-core` mixin and can +// potentially overwrite the absolute position of the container. +.mat-button-toggle .mat-button-toggle-ripple { @include mat-fill; // Disable pointer events for the ripple container, because the container will overlay the user diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index 565ffcb5379..e8a2dbdd60c 100644 --- a/src/lib/button/button.scss +++ b/src/lib/button/button.scss @@ -75,8 +75,11 @@ } } -// The ripple container should match the bounds of the entire button. -.mat-button-ripple, .mat-button-focus-overlay { +// The ripple container and focus overlay should match the bounds of the entire button. +// Increase specificity for the ripple container because ripple styles are part of +// the `mat-core` mixin and can potentially overwrite the absolute position of the container. +.mat-button-ripple.mat-ripple, +.mat-button-focus-overlay { @include mat-fill; // Disable pointer events for the ripple container and focus overlay because the container diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss index fb936292c03..5090761738d 100644 --- a/src/lib/checkbox/checkbox.scss +++ b/src/lib/checkbox/checkbox.scss @@ -431,7 +431,9 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default; left: 50%; } -.mat-checkbox-ripple { +// Increase specificity because ripple styles are part of the `mat-core` mixin and can +// potentially overwrite the absolute position of the container. +.mat-checkbox .mat-checkbox-ripple { position: absolute; left: calc(50% - #{$_mat-checkbox-ripple-radius}); top: calc(50% - #{$_mat-checkbox-ripple-radius}); diff --git a/src/lib/core/option/option.scss b/src/lib/core/option/option.scss index bb8789c52ed..d1d03547dc3 100644 --- a/src/lib/core/option/option.scss +++ b/src/lib/core/option/option.scss @@ -58,7 +58,9 @@ text-overflow: ellipsis; } -.mat-option-ripple { +// Increase specificity because ripple styles are part of the `mat-core` mixin and can +// potentially overwrite the absolute position of the container. +.mat-option .mat-option-ripple { @include mat-fill; // Disable pointer events for the ripple container because the container will overlay the diff --git a/src/lib/core/ripple/_ripple.scss b/src/lib/core/ripple/_ripple.scss index 8c66ce92ffd..084bb547bbb 100644 --- a/src/lib/core/ripple/_ripple.scss +++ b/src/lib/core/ripple/_ripple.scss @@ -4,10 +4,15 @@ $mat-ripple-color-opacity: 0.1; @mixin mat-ripple() { + // The host element of an mat-ripple directive should always have a position of "absolute" or - // "relative" so that the ripple divs it creates inside itself are correctly positioned. + // "relative" so that the ripples inside are correctly positioned relatively to the container. .mat-ripple { overflow: hidden; + + // By default, every ripple container should have position: relative in favor of creating an + // easy API for developers using the MatRipple directive. + position: relative; } .mat-ripple.mat-ripple-unbounded { diff --git a/src/lib/menu/menu.scss b/src/lib/menu/menu.scss index cebbfb9283a..177fbcdec97 100644 --- a/src/lib/menu/menu.scss +++ b/src/lib/menu/menu.scss @@ -83,7 +83,9 @@ button.mat-menu-item { width: 100%; } -.mat-menu-ripple { +// Increase specificity because ripple styles are part of the `mat-core` mixin and can +// potentially overwrite the absolute position of the container. +.mat-menu-item .mat-menu-ripple { @include mat-fill; // Prevent any pointer events on the ripple container for a menu item. The ripple container is diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss index c613cc8684e..3086d87833d 100644 --- a/src/lib/radio/radio.scss +++ b/src/lib/radio/radio.scss @@ -115,7 +115,9 @@ $mat-radio-ripple-radius: 25px; cursor: default; } -.mat-radio-ripple { +// Increase specificity because ripple styles are part of the `mat-core` mixin and can +// potentially overwrite the absolute position of the container. +.mat-radio-button .mat-radio-ripple { position: absolute; left: calc(50% - #{$mat-radio-ripple-radius}); top: calc(50% - #{$mat-radio-ripple-radius}); diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss index 6980ba5e232..d6b285469c0 100644 --- a/src/lib/slide-toggle/slide-toggle.scss +++ b/src/lib/slide-toggle/slide-toggle.scss @@ -179,7 +179,9 @@ $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 { +// Increase specificity because ripple styles are part of the `mat-core` mixin and can +// potentially overwrite the absolute position of the container. +.mat-slide-toggle .mat-slide-toggle-ripple { position: absolute; top: calc(50% - #{$mat-slide-toggle-ripple-radius}); left: calc(50% - #{$mat-slide-toggle-ripple-radius}); diff --git a/src/lib/stepper/step-header.scss b/src/lib/stepper/step-header.scss index a1516987f67..c2cc8610871 100644 --- a/src/lib/stepper/step-header.scss +++ b/src/lib/stepper/step-header.scss @@ -52,7 +52,9 @@ $mat-step-header-icon-size: 16px !default; overflow: hidden; } -.mat-step-header-ripple { +// Increase specificity because ripple styles are part of the `mat-core` mixin and can +// potentially overwrite the absolute position of the container. +.mat-step-header .mat-step-header-ripple { @include mat-fill; pointer-events: none; } diff --git a/src/material-examples/ripple-overview/ripple-overview-example.css b/src/material-examples/ripple-overview/ripple-overview-example.css index 559376924a7..7c5b887ee3c 100644 --- a/src/material-examples/ripple-overview/ripple-overview-example.css +++ b/src/material-examples/ripple-overview/ripple-overview-example.css @@ -1,7 +1,4 @@ .example-ripple-container { - /** Necessary until: https://github.com/angular/material2/pull/11913*/ - position: relative; - cursor: pointer; text-align: center;