From 534bd4e8b1f852ca580ea1d44a39a3b61a6d1d24 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 29 Mar 2017 20:25:33 +0200 Subject: [PATCH 1/4] 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 --- src/lib/button/_button-theme.scss | 16 ++++++++++++---- src/lib/core/theming/_theming.scss | 4 ++-- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index bc0198fed081..73fc3d7f04e2 100644 --- a/src/lib/button/_button-theme.scss +++ b/src/lib/button/_button-theme.scss @@ -23,21 +23,21 @@ } } -@mixin _mat-button-ripple-color($theme) { +@mixin _mat-button-ripple-color($theme, $hue: default) { $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, 0.26); } &.mat-accent .mat-ripple-element { - background-color: mat-color($accent, 0.26); + background-color: mat-color($accent, $hue, 0.26); } &.mat-warn .mat-ripple-element { - background-color: mat-color($warn, 0.26); + background-color: mat-color($warn, $hue, 0.26); } } @@ -97,11 +97,19 @@ @include _mat-button-theme-color($theme, 'color', default-contrast); @include _mat-button-theme-color($theme, 'background-color'); + @include _mat-button-ripple-color($theme, default-contrast); } + // 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.26); + } } } diff --git a/src/lib/core/theming/_theming.scss b/src/lib/core/theming/_theming.scss index a00e64b8de48..86c4538c58f0 100644 --- a/src/lib/core/theming/_theming.scss +++ b/src/lib/core/theming/_theming.scss @@ -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); } From 4d8fabb839694082244b8466e21ff2cc3ade2f77 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 29 Mar 2017 20:53:11 +0200 Subject: [PATCH 2/4] Address feedback --- src/lib/button/_button-theme.scss | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index 73fc3d7f04e2..37d25a2a7376 100644 --- a/src/lib/button/_button-theme.scss +++ b/src/lib/button/_button-theme.scss @@ -23,21 +23,21 @@ } } -@mixin _mat-button-ripple-color($theme, $hue: default) { +@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, $hue, 0.26); + background-color: mat-color($primary, $hue, $opacity); } &.mat-accent .mat-ripple-element { - background-color: mat-color($accent, $hue, 0.26); + background-color: mat-color($accent, $hue, $opacity); } &.mat-warn .mat-ripple-element { - background-color: mat-color($warn, $hue, 0.26); + background-color: mat-color($warn, $hue, $opacity); } } @@ -75,19 +75,17 @@ $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'); + @include _mat-button-ripple-color($theme, default, 0.1); } .mat-raised-button, .mat-fab, .mat-mini-fab { @@ -108,7 +106,7 @@ // 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.26); + background-color: mat-color($accent, default-contrast, 0.2); } } } From e9b17667e1556f7924fea499574dc6af45445456 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 29 Mar 2017 21:15:06 +0200 Subject: [PATCH 3/4] Distinguish between buttons with focus overlay --- src/lib/button/_button-theme.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index 37d25a2a7376..61d4b5fd640b 100644 --- a/src/lib/button/_button-theme.scss +++ b/src/lib/button/_button-theme.scss @@ -85,7 +85,6 @@ background: transparent; @include _mat-button-theme-color($theme, 'color'); - @include _mat-button-ripple-color($theme, default, 0.1); } .mat-raised-button, .mat-fab, .mat-mini-fab { @@ -95,8 +94,21 @@ @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 the flat button, which doesn't 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 { From 373027832d5ecf07092dff388f3a1a67bb741789 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Thu, 30 Mar 2017 17:59:51 +0200 Subject: [PATCH 4/4] Fix comment --- src/lib/button/_button-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index 61d4b5fd640b..cef82ae7788e 100644 --- a/src/lib/button/_button-theme.scss +++ b/src/lib/button/_button-theme.scss @@ -99,7 +99,7 @@ @include _mat-button-ripple-color($theme, default-contrast); } - // Add ripple effect with default color to the flat button, which doesn't have a focus overlay. + // 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); }