Checkbox by LeonKohli

1.bookmark-checkbox {
2  display: inline-block;
3}
4
5.bookmark-checkbox__input {
6  display: none;
7}
8
9.bookmark-checkbox__label {
10  cursor: pointer;
11}
12
13.bookmark-checkbox__icon {
14  width: 2em;
15  height: 2em;
16  fill: none;
17  stroke-width: 2;
18  stroke-linecap: round;
19  stroke-linejoin: round;
20  transition: stroke 0.3s, fill 0.3s;
21}
22
23.bookmark-checkbox__icon-back {
24  stroke: #333;
25  transition: transform 0.3s;
26}
27
28.bookmark-checkbox__icon-check {
29  stroke: #fff;
30  stroke-dasharray: 16;
31  stroke-dashoffset: 16;
32  transition: stroke-dashoffset 0.3s, transform 0.3s;
33  transform: translateX(2px);
34}
35
36.bookmark-checkbox__input:checked
37  + .bookmark-checkbox__label
38  .bookmark-checkbox__icon {
39  fill: #ff5a5f;
40}
41
42.bookmark-checkbox__input:checked
43  + .bookmark-checkbox__label
44  .bookmark-checkbox__icon-back {
45  stroke: #ff5a5f;
46  transform: scale(1.1);
47  animation: bookmark-pop 0.4s ease;
48}
49
50.bookmark-checkbox__input:checked
51  + .bookmark-checkbox__label
52  .bookmark-checkbox__icon-check {
53  stroke-dashoffset: 0;
54  transition-delay: 0.2s;
55}
56
57@keyframes bookmark-pop {
58  0% {
59    transform: scale(1);
60  }
61  50% {
62    transform: scale(1.2);
63  }
64  100% {
65    transform: scale(1.1);
66  }
67}
68