1.cbx {
2 position: relative;
3 top: 1px;
4 width: 27px;
5 height: 27px;
6 border: 1px solid #c8ccd4;
7 border-radius: 3px;
8 vertical-align: middle;
9 transition: background 0.1s ease;
10 cursor: pointer;
11 display: block;
12}
13
14.cbx:after {
15 content: '';
16 position: absolute;
17 top: 2px;
18 left: 8px;
19 width: 7px;
20 height: 14px;
21 opacity: 0;
22 transform: rotate(45deg) scale(0);
23 border-right: 2px solid #fff;
24 border-bottom: 2px solid #fff;
25 transition: all 0.3s ease;
26 transition-delay: 0.15s;
27}
28
29.lbl {
30 margin-left: 5px;
31 vertical-align: middle;
32 cursor: pointer;
33}
34
35#cbx:checked ~ .cbx {
36 border-color: transparent;
37 background: #6871f1;
38 animation: jelly 0.6s ease;
39}
40
41#cbx:checked ~ .cbx:after {
42 opacity: 1;
43 transform: rotate(45deg) scale(1);
44}
45
46.cntr {
47 position: relative;
48}
49
50@keyframes jelly {
51 from {
52  transform: scale(1, 1);
53 }
54
55 30% {
56  transform: scale(1.25, 0.75);
57 }
58
59 40% {
60  transform: scale(0.75, 1.25);
61 }
62
63 50% {
64  transform: scale(1.15, 0.85);
65 }
66
67 65% {
68  transform: scale(0.95, 1.05);
69 }
70
71 75% {
72  transform: scale(1.05, 0.95);
73 }
74
75 to {
76  transform: scale(1, 1);
77 }
78}
79
80.hidden-xs-up {
81 display: none!important;
82}
83