1.cl-toggle-switch {
2 position: relative;
3}
4
5.cl-switch {
6 position: relative;
7 display: inline-block;
8}
9/* Input */
10.cl-switch > input {
11 appearance: none;
12 -moz-appearance: none;
13 -webkit-appearance: none;
14 z-index: -1;
15 position: absolute;
16 right: 6px;
17 top: -8px;
18 display: block;
19 margin: 0;
20 border-radius: 50%;
21 width: 40px;
22 height: 40px;
23 background-color: rgb(0, 0, 0, 0.38);
24 outline: none;
25 opacity: 0;
26 transform: scale(1);
27 pointer-events: none;
28 transition: opacity 0.3s 0.1s, transform 0.2s 0.1s;
29}
30/* Track */
31.cl-switch > span::before {
32 content: "";
33 float: right;
34 display: inline-block;
35 margin: 5px 0 5px 10px;
36 border-radius: 7px;
37 width: 36px;
38 height: 14px;
39 background-color: rgb(0, 0, 0, 0.38);
40 vertical-align: top;
41 transition: background-color 0.2s, opacity 0.2s;
42}
43/* Thumb */
44.cl-switch > span::after {
45 content: "";
46 position: absolute;
47 top: 2px;
48 right: 16px;
49 border-radius: 50%;
50 width: 20px;
51 height: 20px;
52 background-color: #fff;
53 box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
54 transition: background-color 0.2s, transform 0.2s;
55}
56/* Checked */
57.cl-switch > input:checked {
58 right: -10px;
59 background-color: #85b8b7;
60}
61
62.cl-switch > input:checked + span::before {
63 background-color: #85b8b7;
64}
65
66.cl-switch > input:checked + span::after {
67 background-color: #018786;
68 transform: translateX(16px);
69}
70/* Hover, Focus */
71.cl-switch:hover > input {
72 opacity: 0.04;
73}
74
75.cl-switch > input:focus {
76 opacity: 0.12;
77}
78
79.cl-switch:hover > input:focus {
80 opacity: 0.16;
81}
82/* Active */
83.cl-switch > input:active {
84 opacity: 1;
85 transform: scale(0);
86 transition: transform 0s, opacity 0s;
87}
88
89.cl-switch > input:active + span::before {
90 background-color: #8f8f8f;
91}
92
93.cl-switch > input:checked:active + span::before {
94 background-color: #85b8b7;
95}
96/* Disabled */
97.cl-switch > input:disabled {
98 opacity: 0;
99}
100
101.cl-switch > input:disabled + span::before {
102 background-color: #ddd;
103}
104
105.cl-switch > input:checked:disabled + span::before {
106 background-color: #bfdbda;
107}
108
109.cl-switch > input:checked:disabled + span::after {
110 background-color: #61b5b4;
111}