Skip to content

Commit a91ae72

Browse files
devversionandrewseguin
authored andcommitted
fix(ripple): fix ripple color in dark theme (#3094)
* Fixes the incorrect color for ripple elements in dark-themes.
1 parent 3beccb9 commit a91ae72

File tree

1 file changed

+10
-4
lines changed

1 file changed

+10
-4
lines changed

src/lib/core/ripple/_ripple.scss

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import '../theming/theming';
22

3-
$mat-ripple-element-color: rgba(0, 0, 0, 0.1);
3+
$mat-ripple-color-opacity: 0.1;
44

55
@mixin mat-ripple() {
66
// The host element of an md-ripple directive should always have a position of "absolute" or
@@ -18,14 +18,20 @@ $mat-ripple-element-color: rgba(0, 0, 0, 0.1);
1818
border-radius: 50%;
1919
pointer-events: none;
2020

21-
background-color: $mat-ripple-element-color;
22-
2321
transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
2422
transform: scale(0);
2523
}
2624
}
2725

28-
@mixin mat-ripple-theme($theme) {}
26+
/* Theme for the ripple elements.*/
27+
@mixin mat-ripple-theme($theme) {
28+
$foreground: map_get($theme, foreground);
29+
$foreground-base: map_get($foreground, base);
30+
31+
.mat-ripple-element {
32+
background-color: rgba($foreground-base, $mat-ripple-color-opacity);
33+
}
34+
}
2935

3036

3137
// A mixin, which generates temporary ink ripple on a given component.

0 commit comments

Comments
 (0)