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