1/* checkbox settings 👇 */
2
3.ui-checkbox {
4  --primary-color: #1677ff;
5  --secondary-color: #fff;
6  --primary-hover-color: #4096ff;
7  /* checkbox */
8  --checkbox-diameter: 20px;
9  --checkbox-border-radius: 5px;
10  --checkbox-border-color: #d9d9d9;
11  --checkbox-border-width: 1px;
12  --checkbox-border-style: solid;
13  /* checkmark */
14  --checkmark-size: 1.2;
15}
16
17.ui-checkbox, 
18.ui-checkbox *, 
19.ui-checkbox *::before, 
20.ui-checkbox *::after {
21  -webkit-box-sizing: border-box;
22  box-sizing: border-box;
23}
24
25.ui-checkbox {
26  -webkit-appearance: none;
27  -moz-appearance: none;
28  appearance: none;
29  width: var(--checkbox-diameter);
30  height: var(--checkbox-diameter);
31  border-radius: var(--checkbox-border-radius);
32  background: var(--secondary-color);
33  border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
34  -webkit-transition: all 0.3s;
35  -o-transition: all 0.3s;
36  transition: all 0.3s;
37  cursor: pointer;
38  position: relative;
39}
40
41.ui-checkbox::after {
42  content: "";
43  position: absolute;
44  top: 0;
45  left: 0;
46  right: 0;
47  bottom: 0;
48  -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
49  box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
50  border-radius: inherit;
51  opacity: 0;
52  -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
53  -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
54  transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
55}
56
57.ui-checkbox::before {
58  top: 40%;
59  left: 50%;
60  content: "";
61  position: absolute;
62  width: 4px;
63  height: 7px;
64  border-right: 2px solid var(--secondary-color);
65  border-bottom: 2px solid var(--secondary-color);
66  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
67  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
68  transform: translate(-50%, -50%) rotate(45deg) scale(0);
69  opacity: 0;
70  -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
71  -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
72  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
73}
74
75/* actions */
76
77.ui-checkbox:hover {
78  border-color: var(--primary-color);
79}
80
81.ui-checkbox:checked {
82  background: var(--primary-color);
83  border-color: transparent;
84}
85
86.ui-checkbox:checked::before {
87  opacity: 1;
88  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
89  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
90  transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
91  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
92  -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
93  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
94}
95
96.ui-checkbox:active:not(:checked)::after {
97  -webkit-transition: none;
98  -o-transition: none;
99  -webkit-box-shadow: none;
100  box-shadow: none;
101  transition: none;
102  opacity: 1;
103}