From 10affcf796ff0297c75bb7a0d963458237dafe99 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Sun, 24 Jun 2018 16:55:23 +0200 Subject: [PATCH] feat(ripple): no longer require additional setup when using MatRipple directive Currently if a developer wants to use the `matRipple` directive, he needs to set the position of the element to either `absolute` or `relative`. This makes the `matRipple` directive kind of not intuitive. Developers should be just able to place the `matRipple` directive, and everything works. Developers should not ask themselves at some point: _Why do my ripples don't display at all? ... Ahh I need to apply `position: relative` to the host element_ ```html Toolbar with ripple Card with ripple ``` --- 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 0d9623b3cc0b..e1b9c69ab1e6 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 565ffcb53796..e8a2dbdd60c2 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 fb936292c039..5090761738d9 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 bb8789c52ed0..d1d03547dc37 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 6c03b9ae0980..5886d4a7fb05 100644 --- a/src/lib/core/ripple/_ripple.scss +++ b/src/lib/core/ripple/_ripple.scss @@ -4,11 +4,16 @@ $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; + // In high contrast mode the ripple is opaque, causing it to obstruct the content. @include cdk-high-contrast { display: none; diff --git a/src/lib/menu/menu.scss b/src/lib/menu/menu.scss index f55b8657baf9..d4dfe7b632df 100644 --- a/src/lib/menu/menu.scss +++ b/src/lib/menu/menu.scss @@ -74,7 +74,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 c613cc8684e4..3086d87833d4 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 e9a76247e63e..db17055c793a 100644 --- a/src/lib/slide-toggle/slide-toggle.scss +++ b/src/lib/slide-toggle/slide-toggle.scss @@ -172,7 +172,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 a1516987f67d..c2cc86108715 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 559376924a70..7c5b887ee3c2 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;