Skip to content

fix(button): ripple color not correct for standard, icon and stroked buttons #13235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 8, 2018
Merged

fix(button): ripple color not correct for standard, icon and stroked buttons #13235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/demo-app/toolbar/toolbar-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<span>Default Toolbar</span>
<span class="demo-fill-remaining"></span>

<button mat-button color="accent">Text</button>
<button mat-button>Text</button>
<button mat-icon-button>
<mat-icon>code</mat-icon>
Expand Down
20 changes: 10 additions & 10 deletions src/lib/button/_button-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
@import '../core/style/elevation';
@import '../core/typography/typography-utils';

$_mat-button-ripple-opacity: 0.1;

// Applies a focus style to an mat-button element for each of the supported palettes.
@mixin _mat-button-focus-overlay-color($theme) {
$primary: map-get($theme, primary);
Expand All @@ -25,7 +27,7 @@
}
}

@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.1) {
@mixin _mat-button-ripple-color($theme, $hue, $opacity: $_mat-button-ripple-opacity) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
Expand Down Expand Up @@ -87,9 +89,13 @@
@include _mat-button-theme-property($theme, 'color', default);
@include _mat-button-focus-overlay-color($theme);

// Setup the ripple color to be based on the color palette. The opacity can be a bit weaker
// than for icon-buttons, because normal and stroked buttons have a focus overlay.
@include _mat-button-ripple-color($theme, default);
// Setup the ripple color to be based on the text color. This ensures that the ripples
// are matching with the current theme palette and are in contrast to the background color
// (e.g in themed toolbars).
.mat-ripple-element {
opacity: $_mat-button-ripple-opacity;
background-color: currentColor;
}
}

.mat-button-focus-overlay {
Expand All @@ -112,12 +118,6 @@
@include _mat-button-ripple-color($theme, default-contrast);
}

// Since icon buttons don't have a focus overlay, the ripple opacity should be the higher
// than the default value.
.mat-icon-button {
@include _mat-button-ripple-color($theme, default, 0.2);
}

.mat-stroked-button, .mat-flat-button {
@include _mat-theme-overridable-elevation(0, $theme);
}
Expand Down