Skip to content
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

Jump to bottom

fix(button): ripple color for raised buttons #3829

Merged
merged 4 commits into from
Apr 11, 2017
Merged

fix(button): ripple color for raised buttons #3829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
534bd4e
fix(button): ripple color for raised buttons
devversion Mar 29, 2017
4d8fabb
Address feedback
devversion Mar 29, 2017
e9b1766
Distinguish between buttons with focus overlay
devversion Mar 29, 2017
3730278
Fix comment
devversion Mar 30, 2017
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
36 changes: 27 additions & 9 deletions src/lib/button/_button-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down Expand Up @@ -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 {
Expand All @@ -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);
}
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/lib/core/theming/_theming.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,15 @@
// @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 {
@return mat-color($palette, default, $hue);
}

$color: map-get($palette, $hue);
$opacity: if(opacity($color) < 1, opacity($color), $opacity);
$opacity: if($opacity == null, opacity($color), $opacity);

@return rgba($color, $opacity);
}
Expand Down