Switch by vihstorck

1.switch {
2  /* switch */
3  --switch-width: 46px;
4  --switch-height: 24px;
5  --switch-bg: rgb(131, 131, 131);
6  --switch-checked-bg: #1676df;
7  --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
8  --switch-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
9  /* circle */
10  --circle-diameter: 18px;
11  --circle-bg: #fff;
12  --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
13  --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
14  --circle-transition: var(--switch-transition);
15  /* icon */
16  --icon-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
17  --icon-cross-color: var(--switch-bg);
18  --icon-cross-size: 6px;
19  --icon-checkmark-color: var(--switch-checked-bg);
20  --icon-checkmark-size: 10px;
21  /* effect line */
22  --effect-width: calc(var(--circle-diameter) / 2);
23  --effect-height: calc(var(--effect-width) / 2 - 1px);
24  --effect-bg: var(--circle-bg);
25  --effect-border-radius: 1px;
26  --effect-transition: all 0.2s ease-in-out;
27}
28
29.switch input {
30  display: none;
31}
32
33.switch {
34  display: inline-block;
35}
36
37.switch svg {
38  -webkit-transition: var(--icon-transition);
39  -o-transition: var(--icon-transition);
40  transition: var(--icon-transition);
41  position: absolute;
42  height: auto;
43}
44
45.switch .checkmark {
46  width: var(--icon-checkmark-size);
47  color: var(--icon-checkmark-color);
48  -webkit-transform: scale(0);
49  -ms-transform: scale(0);
50  transform: scale(0);
51}
52
53.switch .cross {
54  width: var(--icon-cross-size);
55  color: var(--icon-cross-color);
56}
57
58.slider {
59  -webkit-box-sizing: border-box;
60  box-sizing: border-box;
61  width: var(--switch-width);
62  height: var(--switch-height);
63  background: var(--switch-bg);
64  border-radius: 999px;
65  display: -webkit-box;
66  display: -ms-flexbox;
67  display: flex;
68  -webkit-box-align: center;
69  -ms-flex-align: center;
70  align-items: center;
71  position: relative;
72  -webkit-transition: var(--switch-transition);
73  -o-transition: var(--switch-transition);
74  transition: var(--switch-transition);
75  cursor: pointer;
76}
77
78.circle {
79  width: var(--circle-diameter);
80  height: var(--circle-diameter);
81  background: var(--circle-bg);
82  border-radius: inherit;
83  -webkit-box-shadow: var(--circle-shadow);
84  box-shadow: var(--circle-shadow);
85  display: -webkit-box;
86  display: -ms-flexbox;
87  display: flex;
88  -webkit-box-align: center;
89  -ms-flex-align: center;
90  align-items: center;
91  -webkit-box-pack: center;
92  -ms-flex-pack: center;
93  justify-content: center;
94  -webkit-transition: var(--circle-transition);
95  -o-transition: var(--circle-transition);
96  transition: var(--circle-transition);
97  z-index: 1;
98  position: absolute;
99  left: var(--switch-offset);
100}
101
102.slider::before {
103  content: "";
104  position: absolute;
105  width: var(--effect-width);
106  height: var(--effect-height);
107  left: calc(var(--switch-offset) + (var(--effect-width) / 2));
108  background: var(--effect-bg);
109  border-radius: var(--effect-border-radius);
110  -webkit-transition: var(--effect-transition);
111  -o-transition: var(--effect-transition);
112  transition: var(--effect-transition);
113}
114
115/* actions */
116
117.switch input:checked + .slider {
118  background: var(--switch-checked-bg);
119}
120
121.switch input:checked + .slider .checkmark {
122  -webkit-transform: scale(1);
123  -ms-transform: scale(1);
124  transform: scale(1);
125}
126
127.switch input:checked + .slider .cross {
128  -webkit-transform: scale(0);
129  -ms-transform: scale(0);
130  transform: scale(0);
131}
132
133.switch input:checked + .slider::before {
134  left: calc(
135    100% - var(--effect-width) - (var(--effect-width) / 2) -
136      var(--switch-offset)
137  );
138}
139
140.switch input:checked + .slider .circle {
141  left: calc(100% - var(--circle-diameter) - var(--switch-offset));
142  -webkit-box-shadow: var(--circle-checked-shadow);
143  box-shadow: var(--circle-checked-shadow);
144}
145