1.checkbox-wrapper-4 * {
2  box-sizing: border-box;
3  color: white;
4}
5
6.checkbox-wrapper-4 .cbx {
7  -webkit-user-select: none;
8  user-select: none;
9  cursor: pointer;
10  padding: 6px 8px;
11  border-radius: 6px;
12  overflow: hidden;
13  transition: all 0.2s ease;
14  display: inline-block;
15}
16
17.checkbox-wrapper-4 .cbx:not(:last-child) {
18  margin-right: 6px;
19}
20
21.checkbox-wrapper-4 .cbx:hover {
22  background: rgba(0,119,255,0.06);
23}
24
25.checkbox-wrapper-4 .cbx span {
26  float: left;
27  vertical-align: middle;
28  transform: translate3d(0, 0, 0);
29}
30
31.checkbox-wrapper-4 .cbx span:first-child {
32  position: relative;
33  width: 18px;
34  height: 18px;
35  border-radius: 4px;
36  transform: scale(1);
37  border: 1px solid #cccfdb;
38  transition: all 0.2s ease;
39  box-shadow: 0 1px 1px rgba(0,16,75,0.05);
40}
41
42.checkbox-wrapper-4 .cbx span:first-child svg {
43  position: absolute;
44  top: 3px;
45  left: 2px;
46  fill: none;
47  stroke: #fff;
48  stroke-width: 2;
49  stroke-linecap: round;
50  stroke-linejoin: round;
51  stroke-dasharray: 16px;
52  stroke-dashoffset: 16px;
53  transition: all 0.3s ease;
54  transition-delay: 0.1s;
55  transform: translate3d(0, 0, 0);
56}
57
58.checkbox-wrapper-4 .cbx span:last-child {
59  padding-left: 8px;
60  line-height: 18px;
61}
62
63.checkbox-wrapper-4 .cbx:hover span:first-child {
64  border-color: #07f;
65}
66
67.checkbox-wrapper-4 .inp-cbx {
68  position: absolute;
69  visibility: hidden;
70}
71
72.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child {
73  background: #07f;
74  border-color: #07f;
75  animation: wave-4 0.4s ease;
76}
77
78.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child svg {
79  stroke-dashoffset: 0;
80}
81
82.checkbox-wrapper-4 .inline-svg {
83  position: absolute;
84  width: 0;
85  height: 0;
86  pointer-events: none;
87  user-select: none;
88}
89
90@media screen and (max-width: 640px) {
91  .checkbox-wrapper-4 .cbx {
92    width: 100%;
93    display: inline-block;
94  }
95}
96
97@-moz-keyframes wave-4 {
98  50% {
99    transform: scale(0.9);
100  }
101}
102
103@-webkit-keyframes wave-4 {
104  50% {
105    transform: scale(0.9);
106  }
107}
108
109@-o-keyframes wave-4 {
110  50% {
111    transform: scale(0.9);
112  }
113}
114
115@keyframes wave-4 {
116  50% {
117    transform: scale(0.9);
118  }
119}