1 | @import "../../themes/ionic.globals.md";
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | $fab-md-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
|
8 |
|
9 |
|
10 | $fab-md-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
|
11 |
|
12 |
|
13 | $fab-md-background-color: color($colors-md, primary) !default;
|
14 |
|
15 |
|
16 | $fab-md-text-color: color-contrast($colors-md, $fab-md-background-color) !default;
|
17 |
|
18 |
|
19 | $fab-md-background-color-activated: color-shade($fab-md-background-color) !default;
|
20 |
|
21 |
|
22 | $fab-md-list-button-background-color: $fab-list-button-background-color !default;
|
23 |
|
24 |
|
25 | $fab-md-list-button-text-color: color-contrast($colors-md, $fab-md-list-button-background-color) !default;
|
26 |
|
27 |
|
28 | $fab-md-list-button-background-color-activated: color-shade($fab-md-list-button-background-color) !default;
|
29 |
|
30 |
|
31 | $fab-md-list-button-transition-duration: 200ms !default;
|
32 |
|
33 |
|
34 | $fab-md-list-button-transition-timing-function: ease !default;
|
35 |
|
36 |
|
37 | $fab-md-list-button-transition-delay: 10ms !default;
|
38 |
|
39 | $fab-button-md-transition-duration: 300ms !default;
|
40 |
|
41 | $fab-button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
|
42 |
|
43 |
|
44 | .fab-md {
|
45 | color: $fab-md-text-color;
|
46 | background-color: $fab-md-background-color;
|
47 |
|
48 | box-shadow: $fab-md-box-shadow;
|
49 |
|
50 | transition: box-shadow $fab-button-md-transition-duration $fab-button-md-transition-timing-function,
|
51 | background-color $fab-button-md-transition-duration $fab-button-md-transition-timing-function,
|
52 | color $fab-button-md-transition-duration $fab-button-md-transition-timing-function;
|
53 | }
|
54 |
|
55 | .fab-md.activated {
|
56 | background-color: $fab-md-background-color-activated;
|
57 | box-shadow: $fab-md-box-shadow-activated;
|
58 | }
|
59 |
|
60 | .fab-md-in-list {
|
61 | color: $fab-md-list-button-text-color;
|
62 | background-color: $fab-md-list-button-background-color;
|
63 |
|
64 | transition: transform $fab-md-list-button-transition-duration $fab-md-list-button-transition-timing-function $fab-md-list-button-transition-delay,
|
65 | opacity $fab-md-list-button-transition-duration $fab-md-list-button-transition-timing-function $fab-md-list-button-transition-delay,
|
66 | box-shadow $fab-button-md-transition-duration $fab-button-md-transition-timing-function,
|
67 | background-color $fab-button-md-transition-duration $fab-button-md-transition-timing-function,
|
68 | color $fab-button-md-transition-duration $fab-button-md-transition-timing-function;
|
69 | }
|
70 |
|
71 | .fab-md-in-list.activated {
|
72 | background-color: $fab-md-list-button-background-color-activated;
|
73 | }
|
74 |
|
75 |
|
76 |
|
77 |
|
78 | .fab-md .button-effect {
|
79 | background-color: color-contrast($colors-md, $fab-md-background-color);
|
80 | }
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 | @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
87 |
|
88 | $bg-color: $color-base;
|
89 | $bg-color-activated: color-shade($bg-color);
|
90 | $fg-color: $color-contrast;
|
91 |
|
92 | .fab-md-#{$color-name} {
|
93 | color: $fg-color;
|
94 | background-color: $bg-color;
|
95 | }
|
96 |
|
97 | .fab-md-#{$color-name}.activated {
|
98 | background-color: $bg-color-activated;
|
99 | }
|
100 |
|
101 | .fab-md-#{$color-name} .button-effect {
|
102 | background-color: $fg-color;
|
103 | }
|
104 | }
|
105 |
|