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 for raised buttons (#3829)

Browse Source 
* fix(button): ripple color for raised buttons

* Fixes the incorrect ripple color for raised buttons. Currently the ripple color is always based on black. This is incorrect on palettes like Indigo.

Fixes #2901

* Address feedback

* Distinguish between buttons with focus overlay

* Fix comment
This commit is contained in:
Paul Gschwendtner
2017-04-11 08:42:26 -07:00
committed by Jeremy Elbourn
parent da33c03c70
commit 7f65f31ef8
2 changed files with 29 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/button/_button-theme.scss
+27 -9
View File
@@ -23,21 +23,21 @@
}
}
@mixin _mat-button-ripple-color($theme) {
@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.2) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
&.mat-primary .mat-ripple-element {
background-color: mat-color($primary, 0.26);
background-color: mat-color($primary, $hue, $opacity);
}
&.mat-accent .mat-ripple-element {
background-color: mat-color($accent, 0.26);
background-color: mat-color($accent, $hue, $opacity);
}
&.mat-warn .mat-ripple-element {
background-color: mat-color($warn, 0.26);
background-color: mat-color($warn, $hue, $opacity);
}
}
@@ -75,19 +75,16 @@
$foreground: map-get($theme, foreground);
.mat-button, .mat-icon-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
// Appy color to focus overlay.
// Apply color to focus overlay.
// The focus overlay will be visible when any button type is focused or when
// flat buttons or icon buttons are hovered.
@include _mat-button-focus-color($theme);
}
.mat-button, .mat-icon-button {
@include _mat-button-theme-color($theme, 'color');
background: transparent;
}
.mat-icon-button {
@include _mat-button-ripple-color($theme);
@include _mat-button-theme-color($theme, 'color');
}
.mat-raised-button, .mat-fab, .mat-mini-fab {
@@ -97,11 +94,32 @@
@include _mat-button-theme-color($theme, 'color', default-contrast);
@include _mat-button-theme-color($theme, 'background-color');
// Add ripple effect with contrast color to buttons that don't have a focus overlay.
@include _mat-button-ripple-color($theme, default-contrast);
}
// Add ripple effect with default color to flat buttons, which also have a focus overlay.
.mat-button {
@include _mat-button-ripple-color($theme, default, 0.1);
}
// Add ripple effect with default color to the icon button. Ripple color needs to be stronger
// since the icon button doesn't have a focus overlay.
.mat-icon-button {
@include _mat-button-ripple-color($theme, default);
}
// TODO(devversion): The color class accent should be just set from TS code. No need for this.
.mat-fab, .mat-mini-fab {
background-color: mat-color($accent);
color: mat-color($accent, default-contrast);
// Button fab elements are using the accent palette by default. The color classes won't
// be set on the element. To have a proper ripple color for those, we set the ripple color.
.mat-ripple-element {
background-color: mat-color($accent, default-contrast, 0.2);
}
}
}
src/lib/core/theming/_theming.scss
+2 -2
View File
@@ -44,7 +44,7 @@
// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
// be treated as opacity.
// @param $opacity The alpha channel value for the color.
@function mat-color($palette, $hue: default, $opacity: 1) {
@function mat-color($palette, $hue: default, $opacity: null) {
// If hueKey is a number between zero and one, then it actually contains an
// opacity value, so recall this function with the default hue and that given opacity.
@if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
@@ -52,7 +52,7 @@
}
$color: map-get($palette, $hue);
$opacity: if(opacity($color) < 1, opacity($color), $opacity);
$opacity: if($opacity == null, opacity($color), $opacity);
@return rgba($color, $opacity);
}