1.checkbox-wrapper-12 {
2  position: relative;
3}
4
5.checkbox-wrapper-12 > svg {
6  position: absolute;
7  top: -130%;
8  left: -170%;
9  width: 110px;
10  pointer-events: none;
11}
12
13.checkbox-wrapper-12 * {
14  box-sizing: border-box;
15}
16
17.checkbox-wrapper-12 input[type="checkbox"] {
18  -webkit-appearance: none;
19  -moz-appearance: none;
20  appearance: none;
21  -webkit-tap-highlight-color: transparent;
22  cursor: pointer;
23  margin: 0;
24}
25
26.checkbox-wrapper-12 input[type="checkbox"]:focus {
27  outline: 0;
28}
29
30.checkbox-wrapper-12 .cbx {
31  width: 24px;
32  height: 24px;
33  top: calc(100px - 12px);
34  left: calc(100px - 12px);
35}
36
37.checkbox-wrapper-12 .cbx input {
38  position: absolute;
39  top: 0;
40  left: 0;
41  width: 24px;
42  height: 24px;
43  border: 2px solid #bfbfc0;
44  border-radius: 50%;
45}
46
47.checkbox-wrapper-12 .cbx label {
48  width: 24px;
49  height: 24px;
50  background: none;
51  border-radius: 50%;
52  position: absolute;
53  top: 0;
54  left: 0;
55  transform: trasnlate3d(0, 0, 0);
56  pointer-events: none;
57}
58
59.checkbox-wrapper-12 .cbx svg {
60  position: absolute;
61  top: 5px;
62  left: 4px;
63  z-index: 1;
64  pointer-events: none;
65}
66
67.checkbox-wrapper-12 .cbx svg path {
68  stroke: #fff;
69  stroke-width: 3;
70  stroke-linecap: round;
71  stroke-linejoin: round;
72  stroke-dasharray: 19;
73  stroke-dashoffset: 19;
74  transition: stroke-dashoffset 0.3s ease;
75  transition-delay: 0.2s;
76}
77
78.checkbox-wrapper-12 .cbx input:checked + label {
79  animation: splash-12 0.6s ease forwards;
80}
81
82.checkbox-wrapper-12 .cbx input:checked + label + svg path {
83  stroke-dashoffset: 0;
84}
85
86@-moz-keyframes splash-12 {
87  40% {
88    background: #866efb;
89    box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb;
90  }
91
92  100% {
93    background: #866efb;
94    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
95  }
96}
97
98@-webkit-keyframes splash-12 {
99  40% {
100    background: #866efb;
101    box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb;
102  }
103
104  100% {
105    background: #866efb;
106    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
107  }
108}
109
110@-o-keyframes splash-12 {
111  40% {
112    background: #866efb;
113    box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb;
114  }
115
116  100% {
117    background: #866efb;
118    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
119  }
120}
121
122@keyframes splash-12 {
123  40% {
124    background: #866efb;
125    box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb;
126  }
127
128  100% {
129    background: #866efb;
130    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
131  }
132}