1 | @import "../../themes/ionic.globals.wp";
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | $fab-wp-background-color: color($colors-wp, primary) !default;
|
8 |
|
9 |
|
10 | $fab-wp-text-color: color-contrast($colors-wp, $fab-wp-background-color) !default;
|
11 |
|
12 |
|
13 | $fab-wp-background-color-activated: color-shade($fab-wp-background-color) !default;
|
14 |
|
15 |
|
16 | $fab-wp-list-button-background-color: $fab-list-button-background-color !default;
|
17 |
|
18 |
|
19 | $fab-wp-list-button-text-color: color-contrast($colors-wp, $fab-wp-list-button-background-color) !default;
|
20 |
|
21 |
|
22 | $fab-wp-list-button-background-color-activated: color-shade($fab-wp-list-button-background-color) !default;
|
23 |
|
24 |
|
25 | $fab-wp-list-button-transition-duration: 200ms !default;
|
26 |
|
27 |
|
28 | $fab-wp-list-button-transition-timing-function: ease !default;
|
29 |
|
30 |
|
31 | $fab-wp-list-button-transition-delay: 10ms !default;
|
32 |
|
33 |
|
34 | .fab-wp {
|
35 | color: $fab-wp-text-color;
|
36 | background-color: $fab-wp-background-color;
|
37 | }
|
38 |
|
39 | .fab-wp.activated {
|
40 | background-color: $fab-wp-background-color-activated;
|
41 | }
|
42 |
|
43 | .fab-wp-in-list {
|
44 | color: $fab-wp-list-button-text-color;
|
45 | background-color: $fab-wp-list-button-background-color;
|
46 |
|
47 | transition: transform $fab-wp-list-button-transition-duration $fab-wp-list-button-transition-timing-function $fab-wp-list-button-transition-delay,
|
48 | opacity $fab-wp-list-button-transition-duration $fab-wp-list-button-transition-timing-function $fab-wp-list-button-transition-delay;
|
49 | }
|
50 |
|
51 | .fab-wp-in-list.activated {
|
52 | background-color: $fab-wp-list-button-background-color-activated;
|
53 | }
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 | @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
60 |
|
61 | $bg-color: $color-base;
|
62 | $bg-color-activated: color-shade($bg-color);
|
63 | $fg-color: $color-contrast;
|
64 |
|
65 | .fab-wp-#{$color-name} {
|
66 | color: $fg-color;
|
67 | background-color: $bg-color;
|
68 | }
|
69 |
|
70 | .fab-wp-#{$color-name}.activated {
|
71 | background-color: $bg-color-activated;
|
72 | }
|
73 | }
|