File tree Expand file tree Collapse file tree 1 file changed +61
-0
lines changed
Expand file tree Collapse file tree 1 file changed +61
-0
lines changed Original file line number Diff line number Diff line change 1+ .switch {
2+ position : relative;
3+ display : inline-block;
4+ width : 60px ;
5+ height : 34px ;
6+ }
7+
8+ /* Hide default HTML checkbox */
9+ .switch input {
10+ opacity : 0 ;
11+ width : 0 ;
12+ height : 0 ;
13+ }
14+
15+ /* The slider */
16+ .slider {
17+ position : absolute;
18+ cursor : pointer;
19+ top : 0 ;
20+ left : 0 ;
21+ right : 0 ;
22+ bottom : 0 ;
23+ background-color : # ccc ;
24+ -webkit-transition : .4s ;
25+ transition : .4s ;
26+ }
27+
28+ .slider : before {
29+ position : absolute;
30+ content : "" ;
31+ height : 26px ;
32+ width : 26px ;
33+ left : 4px ;
34+ bottom : 4px ;
35+ background-color : white;
36+ -webkit-transition : .4s ;
37+ transition : .4s ;
38+ }
39+
40+ input : checked + .slider {
41+ background-color : # 2196F3 ;
42+ }
43+
44+ input : focus + .slider {
45+ box-shadow : 0 0 1px # 2196F3 ;
46+ }
47+
48+ input : checked + .slider : before {
49+ -webkit-transform : translateX (26px );
50+ -ms-transform : translateX (26px );
51+ transform : translateX (26px );
52+ }
53+
54+ /* Rounded sliders */
55+ .slider .round {
56+ border-radius : 34px ;
57+ }
58+
59+ .slider .round : before {
60+ border-radius : 50% ;
61+ }
You can’t perform that action at this time.
0 commit comments