1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | @import "../variables";
|
18 |
|
19 | .mdl-icon-toggle {
|
20 | position: relative;
|
21 |
|
22 | z-index: 1;
|
23 |
|
24 | vertical-align: middle;
|
25 |
|
26 | display: inline-block;
|
27 | height: $icon-toggle-size;
|
28 | margin: 0;
|
29 | padding: 0;
|
30 | }
|
31 |
|
32 | .mdl-icon-toggle__input {
|
33 | line-height: $icon-toggle-size;
|
34 |
|
35 | .mdl-icon-toggle.is-upgraded & {
|
36 |
|
37 | position: absolute;
|
38 | width: 0;
|
39 | height: 0;
|
40 | margin: 0;
|
41 | padding: 0;
|
42 | opacity: 0;
|
43 | -ms-appearance: none;
|
44 | -moz-appearance: none;
|
45 | -webkit-appearance: none;
|
46 | appearance: none;
|
47 | border: none;
|
48 | }
|
49 | }
|
50 |
|
51 | .mdl-icon-toggle__label {
|
52 | display: inline-block;
|
53 | position: relative;
|
54 | cursor: pointer;
|
55 | height: $icon-toggle-size;
|
56 | width: $icon-toggle-size;
|
57 | min-width: $icon-toggle-size;
|
58 | color: $icon-toggle-color;
|
59 | border-radius: 50%;
|
60 | padding: 0;
|
61 | margin-left: 0;
|
62 | margin-right: 0;
|
63 | text-align: center;
|
64 | background-color: transparent;
|
65 | will-change: background-color;
|
66 | transition: background-color 0.2s $animation-curve-default,
|
67 | color 0.2s $animation-curve-default;
|
68 |
|
69 | &.material-icons {
|
70 | line-height: $icon-toggle-size;
|
71 | font-size: $icon-toggle-font-size;
|
72 | }
|
73 |
|
74 | .mdl-icon-toggle.is-checked & {
|
75 | color: $icon-toggle-checked-color;
|
76 | }
|
77 |
|
78 | .mdl-icon-toggle.is-disabled & {
|
79 | color: $icon-toggle-disabled-color;
|
80 | cursor: auto;
|
81 | transition: none;
|
82 | }
|
83 |
|
84 | .mdl-icon-toggle.is-focused & {
|
85 | background-color: $icon-toggle-focus-color;
|
86 | }
|
87 |
|
88 | .mdl-icon-toggle.is-focused.is-checked & {
|
89 | background-color: $icon-toggle-checked-focus-color;
|
90 | }
|
91 | }
|
92 |
|
93 |
|
94 | .mdl-icon-toggle__ripple-container {
|
95 | position: absolute;
|
96 | z-index: 2;
|
97 | top: -(($icon-toggle-ripple-size - $icon-toggle-size) / 2);
|
98 | left: -(($icon-toggle-ripple-size - $icon-toggle-size) / 2);
|
99 |
|
100 | box-sizing: border-box;
|
101 | width: $icon-toggle-ripple-size;
|
102 | height: $icon-toggle-ripple-size;
|
103 | border-radius: 50%;
|
104 |
|
105 | cursor: pointer;
|
106 |
|
107 | overflow: hidden;
|
108 | -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
109 |
|
110 | & .mdl-ripple {
|
111 | background: $icon-toggle-color;
|
112 | }
|
113 |
|
114 | .mdl-icon-toggle.is-disabled & {
|
115 | cursor: auto;
|
116 | }
|
117 |
|
118 | .mdl-icon-toggle.is-disabled & .mdl-ripple {
|
119 | background: transparent;
|
120 | }
|
121 | }
|