|
23 | 23 | } |
24 | 24 | } |
25 | 25 |
|
26 | | -@mixin _mat-button-ripple-color($theme, $hue: default) { |
| 26 | +@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.2) { |
27 | 27 | $primary: map-get($theme, primary); |
28 | 28 | $accent: map-get($theme, accent); |
29 | 29 | $warn: map-get($theme, warn); |
30 | 30 |
|
31 | 31 | &.mat-primary .mat-ripple-element { |
32 | | - background-color: mat-color($primary, $hue, 0.26); |
| 32 | + background-color: mat-color($primary, $hue, $opacity); |
33 | 33 | } |
34 | 34 |
|
35 | 35 | &.mat-accent .mat-ripple-element { |
36 | | - background-color: mat-color($accent, $hue, 0.26); |
| 36 | + background-color: mat-color($accent, $hue, $opacity); |
37 | 37 | } |
38 | 38 |
|
39 | 39 | &.mat-warn .mat-ripple-element { |
40 | | - background-color: mat-color($warn, $hue, 0.26); |
| 40 | + background-color: mat-color($warn, $hue, $opacity); |
41 | 41 | } |
42 | 42 | } |
43 | 43 |
|
|
75 | 75 | $foreground: map-get($theme, foreground); |
76 | 76 |
|
77 | 77 | .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. |
79 | 79 | // The focus overlay will be visible when any button type is focused or when |
80 | 80 | // flat buttons or icon buttons are hovered. |
81 | 81 | @include _mat-button-focus-color($theme); |
82 | 82 | } |
83 | 83 |
|
84 | 84 | .mat-button, .mat-icon-button { |
85 | | - @include _mat-button-theme-color($theme, 'color'); |
86 | 85 | background: transparent; |
87 | | - } |
88 | 86 |
|
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); |
91 | 89 | } |
92 | 90 |
|
93 | 91 | .mat-raised-button, .mat-fab, .mat-mini-fab { |
|
108 | 106 | // Button fab elements are using the accent palette by default. The color classes won't |
109 | 107 | // be set on the element. To have a proper ripple color for those, we set the ripple color. |
110 | 108 | .mat-ripple-element { |
111 | | - background-color: mat-color($accent, default-contrast, 0.26); |
| 109 | + background-color: mat-color($accent, default-contrast, 0.2); |
112 | 110 | } |
113 | 111 | } |
114 | 112 | } |
|
0 commit comments