1 |
|
2 | @mixin md-button-theme($property, $color: 'default', $opacity: 1) {
|
3 | &.md-primary {
|
4 | #{$property}: md-color($md-primary, $color, $opacity);
|
5 | }
|
6 | &.md-accent {
|
7 | #{$property}: md-color($md-accent, $color, $opacity);
|
8 | }
|
9 | &.md-warn {
|
10 | #{$property}: md-color($md-warn, $color, $opacity);
|
11 | }
|
12 |
|
13 | &.md-primary, &.md-accent, &.md-warn, &[disabled] {
|
14 | &[disabled] {
|
15 | $palette: if($property == 'color', $md-foreground, $md-background);
|
16 | #{$property}: md-color($palette, disabled-button);
|
17 | }
|
18 | }
|
19 | }
|
20 |
|
21 |
|
22 | @mixin md-button-focus {
|
23 | &::after {
|
24 |
|
25 |
|
26 |
|
27 | position: absolute;
|
28 | top: 0;
|
29 | left: 0;
|
30 | bottom: 0;
|
31 | right: 0;
|
32 | content: '';
|
33 | background-color: rgba(black, 0.12);
|
34 | border-radius: inherit;
|
35 | pointer-events: none;
|
36 | }
|
37 |
|
38 | &.md-primary::after {
|
39 | background-color: md-color($md-primary, 0.12);
|
40 | }
|
41 |
|
42 | &.md-accent::after {
|
43 | background-color: md-color($md-accent, 0.12);
|
44 | }
|
45 |
|
46 | &.md-warn::after {
|
47 | background-color: md-color($md-warn, 0.12);
|
48 | }
|
49 | }
|