UNPKG

10.3 kBSCSSView Raw
1@charset "UTF-8";
2
3@import '../core/index-noreset';
4@import "scss/variable";
5@import './rtl.scss';
6
7#{$radio-prefix}-wrapper {
8 outline: 0;
9 display: inline-block;
10 #{$radio-prefix} {
11 @include box-sizing;
12 display: inline-block;
13 vertical-align: middle;
14 position: relative;
15 line-height: 1;
16
17 input[type="radio"] {
18 opacity: 0;
19 position: absolute;
20 vertical-align: middle;
21 top: 0;
22 left: 0;
23 width: $radio-width;
24 height: $radio-width;
25 margin: 0;
26 cursor: pointer;
27 }
28 }
29
30 #{$radio-prefix}-inner {
31 /* 动画待定 */
32 /* &.mouseDown { */
33 /* transform: scale3d(.7, .7, .7); */
34 /* transition: transform .2s linear; */
35 /* } */
36 /* &.mouseUp { */
37 /* transform: scale3d(1, 1, 1); */
38 /* transition: transform .2s linear; */
39 /* } */
40
41 display: block;
42 width: $radio-width;
43 height: $radio-width;
44 background: $radio-bg-color;
45 border-radius: $radio-radius-size;
46 border: $radio-circle-border-width solid $radio-border-color;
47 transition: all $motion-duration-immediately $motion-linear;
48 box-shadow: $radio-shadow;
49
50 &:after {
51 transform: scale(0);
52 position: absolute;
53 border-radius: $radio-radius-size;
54 top: 50%;
55 margin-top: calc(0px - (#{$radio-circle-size} / 2));
56 left: 50%;
57 margin-left: calc(0px - (#{$radio-circle-size} / 2));
58 background: $color-white;
59 content: '';
60 transition: all $motion-duration-immediately $motion-linear;
61 }
62 }
63
64 &.checked {
65 #{$radio-prefix}-inner {
66 border-color: $radio-checked-border-color;
67 background: $radio-checked-bg-color;
68 &:after {
69 width: $radio-circle-size;
70 height: $radio-circle-size;
71 font-weight: bold;
72 background: $radio-checked-circle-color;
73 transform: scale(1);
74 }
75 }
76 &:hover, &.hovered {
77 #{$radio-prefix}-inner {
78 border-color: $radio-checked-hovered-border-color;
79 }
80 }
81 }
82
83 &.disabled {
84 input[type="radio"] {
85 cursor: not-allowed;
86 }
87 #{$radio-prefix}-inner {
88 border-color: $radio-disabled-border-color;
89 background: $radio-disabled-bg-color;
90
91 &:after {
92 background: $radio-disabled-circle-color;
93 }
94
95 &:hover, &.hovered {
96 border-color: $radio-disabled-border-color;
97 }
98 }
99 &.checked {
100 #{$radio-prefix}-inner {
101 border-color: $radio-checked-disabled-border-color;
102 background: $radio-checked-disabled-bg-color;
103
104 &:after {
105 background: $radio-checked-disabled-circle-color;
106 }
107 }
108 }
109 #{$radio-prefix}-label {
110 color: $radio-normal-font-color-disabled;
111 }
112 }
113
114 &:not(.disabled):hover,
115 &:not(.disabled).hovered {
116 #{$radio-prefix}-inner {
117 border-color: $radio-hovered-border-color;
118 background-color: $radio-hovered-bg-color;
119 }
120 #{$radio-prefix}-label {
121 cursor: pointer;
122 }
123 }
124
125 &.checked:not(.disabled):hover,
126 &.checked:not(.disabled).hovered {
127 #{$radio-prefix}-inner {
128 border-color: $radio-checked-hovered-border-color;
129 background: $radio-checked-hovered-bg-color;
130 &:after {
131 background: $radio-checked-hovered-circle-color;
132 }
133 }
134 }
135}
136
137#{$radio-prefix} {
138 &-button {
139 #{$radio-prefix} {
140 width: 0;
141 height: 0;
142 }
143
144 input[type="radio"] {
145 width: 0;
146 height: 0;
147 }
148
149 > label {
150 display: inline-block;
151 box-sizing: border-box;
152 position: relative;
153 z-index: 1;
154 margin: 0 0 0 -1px;
155 border: 1px solid $radio-button-border-color;
156 background-color: $radio-button-bg-color;
157 transition: all $motion-duration-immediately $motion-linear;
158 vertical-align: middle;
159
160 #{$radio-prefix}-label {
161 display: block;
162 color: $radio-button-font-color;
163 margin: 0;
164 transition: all $motion-duration-immediately $motion-linear;
165 }
166
167 &:hover,
168 &.hovered {
169 z-index: 10;
170 border-color: $radio-button-border-color-hovered;
171 background-color: $radio-button-bg-color-hovered;
172
173 #{$radio-prefix}-label {
174 color: $radio-button-font-color-hovered;
175 }
176 }
177
178 &.checked {
179 z-index: 11;
180 border-color: $radio-button-border-color-checked;
181 background-color: $radio-button-bg-color-checked;
182
183 #{$radio-prefix}-label {
184 color: $radio-button-font-color-checked;
185 }
186 }
187
188 &.disabled {
189 z-index: 0;
190 cursor: not-allowed;
191 border-color: $radio-button-border-color-disabled;
192 background-color: $radio-button-bg-color-disabled;
193
194 #{$radio-prefix}-label {
195 color: $radio-button-font-color-disabled;
196 }
197 }
198
199 &.checked.disabled {
200 z-index: 0;
201 border-color: $radio-button-border-color-checked-disabled;
202 background-color: $radio-button-bg-color-checked-disabled;
203
204 #{$radio-prefix}-label {
205 color: $radio-button-font-color-checked-disabled;
206 }
207 }
208 }
209
210 &-large {
211 > label {
212 padding: 0 $radio-button-padding-large;
213 height: $radio-button-height-large;
214 line-height: $radio-button-height-large;
215 &:first-child {
216 margin-left: 0;
217 border-top-left-radius: $radio-button-corner-large;
218 border-bottom-left-radius: $radio-button-corner-large;
219 }
220 &:last-child {
221 border-top-right-radius: $radio-button-corner-large;
222 border-bottom-right-radius: $radio-button-corner-large;
223 }
224 }
225
226 #{$radio-prefix}-label {
227 height: calc(#{$radio-button-height-large} - 2px);
228 line-height: calc(#{$radio-button-height-large} - 2px);
229 font-size: $radio-button-font-size-large;
230 }
231 }
232
233 &-medium {
234 > label {
235 padding: 0 $radio-button-padding-medium;
236 height: $radio-button-height-medium;
237 line-height: $radio-button-height-medium;
238 &:first-child {
239 margin-left: 0;
240 border-top-left-radius: $radio-button-corner-medium;
241 border-bottom-left-radius: $radio-button-corner-medium;
242 }
243 &:last-child {
244 border-top-right-radius: $radio-button-corner-medium;
245 border-bottom-right-radius: $radio-button-corner-medium;
246 }
247 }
248
249 #{$radio-prefix}-label {
250 height: calc(#{$radio-button-height-medium} - 2px);
251 line-height: calc(#{$radio-button-height-medium} - 2px);
252 font-size: $radio-button-font-size-medium;
253 }
254 }
255
256 &-small {
257 > label {
258 padding: 0 $radio-button-padding-small;
259 height: $radio-button-height-small;
260 line-height: $radio-button-height-small;
261 &:first-child {
262 margin-left: 0;
263 border-top-left-radius: $radio-button-corner-small;
264 border-bottom-left-radius: $radio-button-corner-small;
265 }
266 &:last-child {
267 border-top-right-radius: $radio-button-corner-small;
268 border-bottom-right-radius: $radio-button-corner-small;
269 }
270 }
271
272 #{$radio-prefix}-label {
273 height: calc(#{$radio-button-height-small} - 2px);
274 line-height: calc(#{$radio-button-height-small} - 2px);
275 font-size: $radio-button-font-size-small;
276 }
277 }
278 }
279 &-single-input {
280 input[type="radio"] {
281 opacity: 0;
282 position: absolute;
283 top: 0;
284 left: 0;
285 margin: 0;
286 }
287 }
288 &-group {
289 display: inline-block;
290 #{$radio-prefix}-wrapper {
291 /* 表现为radio整体之间多一份间隔,checkbox表现一致 */
292 margin-right: 12px;
293 }
294 #{$radio-prefix}-wrapper:last-child {
295 margin-right: 0;
296 }
297 #{$radio-prefix}-label {
298 color: $radio-normal-font-color;
299 }
300 &.disabled #{$radio-prefix}-label {
301 color: $radio-normal-font-color-disabled;
302 }
303 }
304
305 &-group#{$radio-prefix}-button {
306 #{$radio-prefix}-wrapper {
307 margin-right: 0;
308 }
309 }
310
311 &-group-ver {
312 #{$radio-prefix}-wrapper {
313 display: block;
314 margin-bottom: 8px;
315 }
316 }
317}
318
319#{$radio-prefix}-label {
320 margin: 0;
321 margin-left: $radio-font-margin-left;
322 /* 使用已有变量$radio-font-margin-left,配左即两边都有间隔 */
323 margin-right: $radio-font-margin-left;
324 font-size: $radio-font-size;
325 vertical-align: middle;
326 line-height: 1;
327 color: $radio-normal-font-color;
328}
329
330@-moz-document url-prefix() {
331 #{$radio-prefix} {
332 margin-top: -1px;
333 }
334 @supports (animation: calc(0s)) {
335 /* firefox 57+ */
336 #{$radio-prefix} {
337 margin-top: -3px;
338 }
339 }
340}