UNPKG

1.44 kBSCSSView Raw
1/** Applies a property to an md-button element for each of the supported palettes. */
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/** Applies a focus style to an md-button element for each of the supported palettes. */
22@mixin md-button-focus {
23 &::after {
24 // The button spec calls for focus on raised buttons (and FABs) to be indicated with a
25 // black, 12% opacity shade over the normal color (for both light and dark themes).
26 // We do this by placing an :after psuedo-element with the appropriate shade over the button.
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}