1.checkbox-wrapper-44 input[type="checkbox"] {
2  display: none;
3  visibility: hidden;
4}
5
6.checkbox-wrapper-44 *,
7  .checkbox-wrapper-44 *::before,
8  .checkbox-wrapper-44 *::after {
9  box-sizing: border-box;
10}
11
12.checkbox-wrapper-44 .toggleButton {
13  cursor: pointer;
14  display: block;
15  transform-origin: 50% 50%;
16  transform-style: preserve-3d;
17  transition: transform 0.14s ease;
18}
19
20.checkbox-wrapper-44 .toggleButton:active {
21  transform: rotateX(30deg);
22}
23
24.checkbox-wrapper-44 .toggleButton input + div {
25  border: 3px solid rgba(0, 0, 0, 0.2);
26  border-radius: 50%;
27  position: relative;
28  width: 44px;
29  height: 44px;
30}
31
32.checkbox-wrapper-44 .toggleButton input + div svg {
33  fill: none;
34  stroke-width: 3.6;
35  stroke: #000;
36  stroke-linecap: round;
37  stroke-linejoin: round;
38  width: 44px;
39  height: 44px;
40  display: block;
41  position: absolute;
42  left: -3px;
43  top: -3px;
44  right: -3px;
45  bottom: -3px;
46  z-index: 1;
47  stroke-dashoffset: 124.6;
48  stroke-dasharray: 0 162.6 133 29.6;
49  transition: all 0.4s ease 0s;
50}
51
52.checkbox-wrapper-44 .toggleButton input + div:before,
53  .checkbox-wrapper-44 .toggleButton input + div:after {
54  content: "";
55  width: 3px;
56  height: 16px;
57  background: #000;
58  position: absolute;
59  left: 50%;
60  top: 50%;
61  border-radius: 5px;
62}
63
64.checkbox-wrapper-44 .toggleButton input + div:before {
65  opacity: 0;
66  transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
67  -webkit-animation: bounceInBefore-44 0.3s linear forwards 0.3s;
68  animation: bounceInBefore-44 0.3s linear forwards 0.3s;
69}
70
71.checkbox-wrapper-44 .toggleButton input + div:after {
72  opacity: 0;
73  transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
74  -webkit-animation: bounceInAfter-44 0.3s linear forwards 0.3s;
75  animation: bounceInAfter-44 0.3s linear forwards 0.3s;
76}
77
78.checkbox-wrapper-44 .toggleButton input:checked + div svg {
79  stroke-dashoffset: 162.6;
80  stroke-dasharray: 0 162.6 28 134.6;
81  transition: all 0.4s ease 0.2s;
82}
83
84.checkbox-wrapper-44 .toggleButton input:checked + div:before {
85  opacity: 0;
86  transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
87  -webkit-animation: bounceInBeforeDont-44 0.3s linear forwards 0s;
88  animation: bounceInBeforeDont-44 0.3s linear forwards 0s;
89}
90
91.checkbox-wrapper-44 .toggleButton input:checked + div:after {
92  opacity: 0;
93  transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
94  -webkit-animation: bounceInAfterDont-44 0.3s linear forwards 0s;
95  animation: bounceInAfterDont-44 0.3s linear forwards 0s;
96}
97
98@-webkit-keyframes bounceInBefore-44 {
99  0% {
100    opacity: 0;
101    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
102  }
103
104  50% {
105    opacity: 0.9;
106    transform: scale(1.1) translate(-50%, -50%) rotate(45deg);
107  }
108
109  80% {
110    opacity: 1;
111    transform: scale(0.89) translate(-50%, -50%) rotate(45deg);
112  }
113
114  100% {
115    opacity: 1;
116    transform: scale(1) translate(-50%, -50%) rotate(45deg);
117  }
118}
119
120@keyframes bounceInBefore-44 {
121  0% {
122    opacity: 0;
123    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
124  }
125
126  50% {
127    opacity: 0.9;
128    transform: scale(1.1) translate(-50%, -50%) rotate(45deg);
129  }
130
131  80% {
132    opacity: 1;
133    transform: scale(0.89) translate(-50%, -50%) rotate(45deg);
134  }
135
136  100% {
137    opacity: 1;
138    transform: scale(1) translate(-50%, -50%) rotate(45deg);
139  }
140}
141
142@-webkit-keyframes bounceInAfter-44 {
143  0% {
144    opacity: 0;
145    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
146  }
147
148  50% {
149    opacity: 0.9;
150    transform: scale(1.1) translate(-50%, -50%) rotate(-45deg);
151  }
152
153  80% {
154    opacity: 1;
155    transform: scale(0.89) translate(-50%, -50%) rotate(-45deg);
156  }
157
158  100% {
159    opacity: 1;
160    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
161  }
162}
163
164@keyframes bounceInAfter-44 {
165  0% {
166    opacity: 0;
167    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
168  }
169
170  50% {
171    opacity: 0.9;
172    transform: scale(1.1) translate(-50%, -50%) rotate(-45deg);
173  }
174
175  80% {
176    opacity: 1;
177    transform: scale(0.89) translate(-50%, -50%) rotate(-45deg);
178  }
179
180  100% {
181    opacity: 1;
182    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
183  }
184}
185
186@-webkit-keyframes bounceInBeforeDont-44 {
187  0% {
188    opacity: 1;
189    transform: scale(1) translate(-50%, -50%) rotate(45deg);
190  }
191
192  100% {
193    opacity: 0;
194    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
195  }
196}
197
198@keyframes bounceInBeforeDont-44 {
199  0% {
200    opacity: 1;
201    transform: scale(1) translate(-50%, -50%) rotate(45deg);
202  }
203
204  100% {
205    opacity: 0;
206    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
207  }
208}
209
210@-webkit-keyframes bounceInAfterDont-44 {
211  0% {
212    opacity: 1;
213    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
214  }
215
216  100% {
217    opacity: 0;
218    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
219  }
220}
221
222@keyframes bounceInAfterDont-44 {
223  0% {
224    opacity: 1;
225    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
226  }
227
228  100% {
229    opacity: 0;
230    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
231  }
232}