1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | @import "../variables";
|
18 | @import "../mixins";
|
19 |
|
20 | .mdl-radio {
|
21 | position: relative;
|
22 |
|
23 | font-size: $radio-label-font-size;
|
24 | line-height: $radio-label-height;
|
25 |
|
26 | display: inline-block;
|
27 |
|
28 | box-sizing: border-box;
|
29 | margin: 0;
|
30 | padding-left: 0;
|
31 |
|
32 | &.is-upgraded {
|
33 | padding-left: $radio-button-size + $radio-padding;
|
34 | }
|
35 | }
|
36 |
|
37 | .mdl-radio__button {
|
38 | line-height: $radio-label-height;
|
39 |
|
40 | .mdl-radio.is-upgraded & {
|
41 |
|
42 | position: absolute;
|
43 | width: 0;
|
44 | height: 0;
|
45 | margin: 0;
|
46 | padding: 0;
|
47 | opacity: 0;
|
48 | -ms-appearance: none;
|
49 | -moz-appearance: none;
|
50 | -webkit-appearance: none;
|
51 | appearance: none;
|
52 | border: none;
|
53 | }
|
54 | }
|
55 |
|
56 | .mdl-radio__outer-circle {
|
57 | position: absolute;
|
58 | top: $radio-top-offset;
|
59 | left: 0;
|
60 |
|
61 | display: inline-block;
|
62 |
|
63 | box-sizing: border-box;
|
64 | width: $radio-button-size;
|
65 | height: $radio-button-size;
|
66 | margin: 0;
|
67 |
|
68 | cursor: pointer;
|
69 |
|
70 | border: 2px solid $radio-off-color;
|
71 | border-radius: 50%;
|
72 |
|
73 | z-index: 2;
|
74 |
|
75 | .mdl-radio.is-checked & {
|
76 | border: 2px solid $radio-color;
|
77 | }
|
78 |
|
79 | fieldset[disabled] .mdl-radio,
|
80 | .mdl-radio.is-disabled & {
|
81 | border: 2px solid $radio-disabled-color;
|
82 | cursor: auto;
|
83 | }
|
84 | }
|
85 |
|
86 | .mdl-radio__inner-circle {
|
87 | position: absolute;
|
88 | z-index: 1;
|
89 | margin: 0;
|
90 | top: $radio-top-offset + $radio-inner-margin;
|
91 | left: $radio-inner-margin;
|
92 |
|
93 | box-sizing: border-box;
|
94 | width: $radio-button-size - ($radio-inner-margin * 2);
|
95 | height: $radio-button-size - ($radio-inner-margin * 2);
|
96 |
|
97 | cursor: pointer;
|
98 |
|
99 | @include material-animation-default(0.28s);
|
100 | transition-property: transform;
|
101 | transform: scale3d(0, 0, 0);
|
102 |
|
103 | border-radius: 50%;
|
104 | background: $radio-color;
|
105 |
|
106 | .mdl-radio.is-checked & {
|
107 | transform: scale3d(1, 1, 1);
|
108 | }
|
109 |
|
110 | fieldset[disabled] .mdl-radio &,
|
111 | .mdl-radio.is-disabled & {
|
112 | background: $radio-disabled-color;
|
113 | cursor: auto;
|
114 | }
|
115 |
|
116 | .mdl-radio.is-focused & {
|
117 | box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1);
|
118 | }
|
119 | }
|
120 |
|
121 | .mdl-radio__label {
|
122 | cursor: pointer;
|
123 |
|
124 | fieldset[disabled] .mdl-radio &,
|
125 | .mdl-radio.is-disabled & {
|
126 | color: $radio-disabled-color;
|
127 | cursor: auto;
|
128 | }
|
129 | }
|
130 |
|
131 | .mdl-radio__ripple-container {
|
132 | position: absolute;
|
133 | z-index: 2;
|
134 | top: -(($radio-ripple-size - $radio-label-height) / 2);
|
135 | left: -(($radio-ripple-size - $radio-button-size) / 2);
|
136 |
|
137 | box-sizing: border-box;
|
138 | width: $radio-ripple-size;
|
139 | height: $radio-ripple-size;
|
140 | border-radius: 50%;
|
141 |
|
142 | cursor: pointer;
|
143 |
|
144 | overflow: hidden;
|
145 | -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
146 |
|
147 | & .mdl-ripple {
|
148 | background: $radio-color;
|
149 | }
|
150 |
|
151 | fieldset[disabled] .mdl-radio &,
|
152 | .mdl-radio.is-disabled & {
|
153 | cursor: auto;
|
154 | }
|
155 |
|
156 | fieldset[disabled] .mdl-radio & .mdl-ripple,
|
157 | .mdl-radio.is-disabled & .mdl-ripple {
|
158 | background: transparent;
|
159 | }
|
160 | }
|