blob: 9c51846777c3234105ba231d649f70688e62f866 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
.sdc-radio {
line-height: 14px;
label {
position: relative;
display: block;
padding-left: 14px;
}
.sdc-radio__input {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
position: absolute;
z-index: -1;
opacity: 0;
// Radio not checked
+ .sdc-radio__label:before {
display: inline-block;
position: absolute;
left: 0;
top: 0;
content: "";
width: 14px;
height: 14px;
box-sizing: content-box;
background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C8.35813029%2C0%209.62592397%2C0.386776975%2010.699241%2C1.0561909%20C12.6811805%2C2.29230086%2014%2C4.49213704%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M7%2C13%20C10.3137085%2C13%2013%2C10.3137085%2013%2C7%20C13%2C3.6862915%2010.3137085%2C1%207%2C1%20C3.6862915%2C1%201%2C3.6862915%201%2C7%20C1%2C10.3137085%203.6862915%2C13%207%2C13%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
// Radio disabled and not checked
&:disabled:not(:checked) {
+ .sdc-radio__label:before {
background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C8.35813029%2C0%209.62592397%2C0.386776975%2010.699241%2C1.0561909%20C12.6811805%2C2.29230086%2014%2C4.49213704%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%22%2F%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M7%2C13%20C10.3137085%2C13%2013%2C10.3137085%2013%2C7%20C13%2C3.6862915%2010.3137085%2C1%207%2C1%20C3.6862915%2C1%201%2C3.6862915%201%2C7%20C1%2C10.3137085%203.6862915%2C13%207%2C13%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
}
&:checked {
// Radio checked
+ .sdc-radio__label:before {
background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23009fdb%22%20fill-rule%3D%22nonzero%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C10.8659932%2C0%2014%2C3.13400675%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%20M7%2C13.1764706%20C10.4111705%2C13.1764706%2013.1764706%2C10.4111705%2013.1764706%2C7%20C13.1764706%2C3.58882949%2010.4111705%2C0.823529412%207%2C0.823529412%20C3.58882949%2C0.823529412%200.823529412%2C3.58882949%200.823529412%2C7%20C0.823529412%2C10.4111705%203.58882949%2C13.1764706%207%2C13.1764706%20Z%22%2F%3E%3Ccircle%20fill%3D%22%23009fdb%22%20cx%3D%227%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
// Radio disabled and checked
&:disabled {
+ .sdc-radio__label:before {
background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20fill-rule%3D%22nonzero%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C10.8659932%2C0%2014%2C3.13400675%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%20M7%2C13.1764706%20C10.4111705%2C13.1764706%2013.1764706%2C10.4111705%2013.1764706%2C7%20C13.1764706%2C3.58882949%2010.4111705%2C0.823529412%207%2C0.823529412%20C3.58882949%2C0.823529412%200.823529412%2C3.58882949%200.823529412%2C7%20C0.823529412%2C10.4111705%203.58882949%2C13.1764706%207%2C13.1764706%20Z%22%2F%3E%3Ccircle%20fill%3D%22%23d2d2d2%22%20cx%3D%227%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
}
}
&:not(:disabled) {
+ .sdc-radio__label {
cursor: pointer;
}
}
&:disabled {
+ .sdc-radio__label {
color: $gray;
}
}
}
.sdc-radio__label:not(:empty) {
padding-left: 14px;
@include body-1;
}
}
|
