]>
Commit | Line | Data |
---|---|---|
1 | @import '_variables'; | |
2 | @import '_mixins'; | |
3 | ||
4 | input { | |
5 | position: absolute; | |
6 | visibility: hidden; | |
7 | ||
8 | & + label { | |
9 | cursor: pointer; | |
10 | text-indent: -9999px; | |
11 | width: 35px; | |
12 | height: 20px; | |
13 | background: #cccccc; | |
14 | display: block; | |
15 | border-radius: 100px; | |
16 | position: relative; | |
17 | margin: 0; | |
18 | ||
19 | &:after { | |
20 | content: ''; | |
21 | position: absolute; | |
22 | top: 3px; | |
23 | left: 3px; | |
24 | width: 14px; | |
25 | height: 14px; | |
26 | background: pvar(--mainBackgroundColor); | |
27 | border-radius: 50%; | |
28 | transition: 0.3s ease-out; | |
29 | } | |
30 | ||
31 | &:active:after { | |
32 | width: 40px; | |
33 | } | |
34 | } | |
35 | ||
36 | &:checked + label { | |
37 | background: pvar(--mainColor); | |
38 | ||
39 | &:after { | |
40 | left: calc(100% - 3px); | |
41 | transform: translateX(-100%); | |
42 | } | |
43 | } | |
44 | } |