-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathtoggle.css
114 lines (101 loc) · 2.16 KB
/
toggle.css
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
.item-input--switch {
height: 3em;
padding: 0 1em;
display: flex;
cursor: pointer;
align-items: center;
}
.item-input--switch:hover {
background: #f5f5f5;
}
.item-input--switch input[type=checkbox] {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.item-input--switch .switch {
display: inline-block;
width: 37px;
height: 14px;
position: relative;
margin-right: .5em;
}
.item-input--switch .switch .track {
border-radius: 19px;
position: absolute;
top: 0;
bottom: 0;
left: 1px;
right: 1px;
background: rgba(0,0,0,0.26);
transform: translateZ(0);
overflow: hidden;
}
.item-input--switch .switch .track::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #9FA8DA;
opacity: 0;
transition: opacity 0.15s ease-out;
transform: translateZ(0);
border-radius: 19px;
}
@supports (transform: none) {
.item-input--switch .switch .track::before {
border-radius: 0;
}
}
.item-input--switch .switch .handle {
position: absolute;
top: -3px;
left: 0;
min-width: 20px;
min-height: 20px;
border-radius: 20px;
background: #fafafa;
box-shadow: 0 1px 3px rgba(0,0,0,0.5),inset 0 0 0 2px transparent;
overflow: hidden;
box-sizing: border-box;
transition: all 0.15s ease-out;
transform: translateZ(0);
}
.item-input--switch .switch .handle::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #3F51B5;
opacity: 0;
transition: opacity 0.15s ease-out;
transform: translateZ(0);
border-radius: 10px;
}
@supports (transform: none) {
.item-input--switch .switch .handle::before {
border-radius: 0;
}
}
.item-input--switch input:focus+.switch .handle {
box-shadow: 0 1px 3px rgba(0,0,0,0.5),
inset 0 0 0 2px #3F51B5,
0 0 0 8px rgba(63,81,181,.26);
}
.item-input--switch :checked+.switch .track::before {
opacity: 1;
}
.item-input--switch :checked+.switch .handle {
transform: translate3d(17px, 0, 0);
box-shadow: 0 1px 3px rgba(0,0,0,0.5),
inset 0 0 0 2px transparent;
}
.item-input--switch :checked+.switch .handle::before {
opacity: 1;
}