1.cl-checkbox {
2 position: relative;
3 display: inline-block;
4}
5
6/* Input */
7.cl-checkbox > input {
8 appearance: none;
9 -moz-appearance: none;
10 -webkit-appearance: none;
11 z-index: -1;
12 position: absolute;
13 left: -10px;
14 top: -8px;
15 display: block;
16 margin: 0;
17 border-radius: 50%;
18 width: 40px;
19 height: 40px;
20 background-color: rgba(0, 0, 0, 0.6);
21 box-shadow: none;
22 outline: none;
23 opacity: 0;
24 transform: scale(1);
25 pointer-events: none;
26 transition: opacity 0.3s, transform 0.2s;
27}
28
29/* Span */
30.cl-checkbox > span {
31 display: inline-block;
32 width: 100%;
33 cursor: pointer;
34}
35
36/* Box */
37.cl-checkbox > span::before {
38 content: "";
39 display: inline-block;
40 box-sizing: border-box;
41 margin: 3px 11px 3px 1px;
42 border: solid 2px;
43 /* Safari */
44 border-color: rgba(0, 0, 0, 0.6);
45 border-radius: 2px;
46 width: 18px;
47 height: 18px;
48 vertical-align: top;
49 transition: border-color 0.2s, background-color 0.2s;
50}
51
52/* Checkmark */
53.cl-checkbox > span::after {
54 content: "";
55 display: block;
56 position: absolute;
57 top: 3px;
58 left: 1px;
59 width: 10px;
60 height: 5px;
61 border: solid 2px transparent;
62 border-right: none;
63 border-top: none;
64 transform: translate(3px, 4px) rotate(-45deg);
65}
66
67/* Checked, Indeterminate */
68.cl-checkbox > input:checked,
69.cl-checkbox > input:indeterminate {
70 background-color: #018786;
71}
72
73.cl-checkbox > input:checked + span::before,
74.cl-checkbox > input:indeterminate + span::before {
75 border-color: #018786;
76 background-color: #018786;
77}
78
79.cl-checkbox > input:checked + span::after,
80.cl-checkbox > input:indeterminate + span::after {
81 border-color: #fff;
82}
83
84.cl-checkbox > input:indeterminate + span::after {
85 border-left: none;
86 transform: translate(4px, 3px);
87}
88
89/* Hover, Focus */
90.cl-checkbox:hover > input {
91 opacity: 0.04;
92}
93
94.cl-checkbox > input:focus {
95 opacity: 0.12;
96}
97
98.cl-checkbox:hover > input:focus {
99 opacity: 0.16;
100}
101
102/* Active */
103.cl-checkbox > input:active {
104 opacity: 1;
105 transform: scale(0);
106 transition: transform 0s, opacity 0s;
107}
108
109.cl-checkbox > input:active + span::before {
110 border-color: #85b8b7;
111}
112
113.cl-checkbox > input:checked:active + span::before {
114 border-color: transparent;
115 background-color: rgba(0, 0, 0, 0.6);
116}
117
118/* Disabled */
119.cl-checkbox > input:disabled {
120 opacity: 0;
121}
122
123.cl-checkbox > input:disabled + span {
124 color: rgba(0, 0, 0, 0.38);
125 cursor: initial;
126}
127
128.cl-checkbox > input:disabled + span::before {
129 border-color: currentColor;
130}
131
132.cl-checkbox > input:checked:disabled + span::before,
133.cl-checkbox > input:indeterminate:disabled + span::before {
134 border-color: transparent;
135 background-color: currentColor;
136}
137