Skip to content

Commit 94e2411

Browse files
committed
Address feedback
1 parent 6f4950a commit 94e2411

File tree

1 file changed

+8
-10
lines changed

1 file changed

+8
-10
lines changed

src/lib/button/_button-theme.scss

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,21 @@
2323
}
2424
}
2525

26-
@mixin _mat-button-ripple-color($theme, $hue: default) {
26+
@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.2) {
2727
$primary: map-get($theme, primary);
2828
$accent: map-get($theme, accent);
2929
$warn: map-get($theme, warn);
3030

3131
&.mat-primary .mat-ripple-element {
32-
background-color: mat-color($primary, $hue, 0.26);
32+
background-color: mat-color($primary, $hue, $opacity);
3333
}
3434

3535
&.mat-accent .mat-ripple-element {
36-
background-color: mat-color($accent, $hue, 0.26);
36+
background-color: mat-color($accent, $hue, $opacity);
3737
}
3838

3939
&.mat-warn .mat-ripple-element {
40-
background-color: mat-color($warn, $hue, 0.26);
40+
background-color: mat-color($warn, $hue, $opacity);
4141
}
4242
}
4343

@@ -75,19 +75,17 @@
7575
$foreground: map-get($theme, foreground);
7676

7777
.mat-button, .mat-icon-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
78-
// Appy color to focus overlay.
78+
// Apply color to focus overlay.
7979
// The focus overlay will be visible when any button type is focused or when
8080
// flat buttons or icon buttons are hovered.
8181
@include _mat-button-focus-color($theme);
8282
}
8383

8484
.mat-button, .mat-icon-button {
85-
@include _mat-button-theme-color($theme, 'color');
8685
background: transparent;
87-
}
8886

89-
.mat-icon-button {
90-
@include _mat-button-ripple-color($theme);
87+
@include _mat-button-theme-color($theme, 'color');
88+
@include _mat-button-ripple-color($theme, default, 0.1);
9189
}
9290

9391
.mat-raised-button, .mat-fab, .mat-mini-fab {
@@ -108,7 +106,7 @@
108106
// Button fab elements are using the accent palette by default. The color classes won't
109107
// be set on the element. To have a proper ripple color for those, we set the ripple color.
110108
.mat-ripple-element {
111-
background-color: mat-color($accent, default-contrast, 0.26);
109+
background-color: mat-color($accent, default-contrast, 0.2);
112110
}
113111
}
114112
}

0 commit comments

Comments
 (0)