]>
Commit | Line | Data |
---|---|---|
4f926722 C |
1 | @import '_variables'; |
2 | @import '_mixins'; | |
3 | ||
4 | input { | |
5 | position: absolute; | |
6 | visibility: hidden; | |
7 | ||
931d3430 | 8 | + label { |
4f926722 C |
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 | ||
931d3430 | 19 | &::after { |
4f926722 C |
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 | ||
931d3430 | 31 | &:active::after { |
4f926722 C |
32 | width: 40px; |
33 | } | |
34 | } | |
35 | ||
36 | &:checked + label { | |
37 | background: pvar(--mainColor); | |
38 | ||
931d3430 | 39 | &::after { |
4f926722 C |
40 | left: calc(100% - 3px); |
41 | transform: translateX(-100%); | |
42 | } | |
43 | } | |
44 | } |