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

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

Browse Source 
With https://github.com/angular/material2/commit/c3a8d0cab118cadf647954f610cb54df5cac6bf0, we already ensured that the text color is **inherited** in order to make sure that buttons without a background color are readable on various themed backgrounds (e.g. themed toolbars)

This is a follow-up that ensures that the ripple color for such transparent buttons is contrasting to the background color (e.g. in themed toolbars).

Fixes #13232
This commit is contained in:
Paul Gschwendtner
2018-11-08 18:05:06 +00:00
committed by vivian-hu
parent caf65e560d
commit b104e75bea
2 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo-app/toolbar/toolbar-demo.html
+1
View File
@@ -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>
src/lib/button/_button-theme.scss
+10 -10
View File
@@ -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);
@@ -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);
@@ -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 {
@@ -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);
}