1.checkbox-wrapper-8 .tgl {
2  display: none;
3}
4
5.checkbox-wrapper-8 .tgl,
6  .checkbox-wrapper-8 .tgl:after,
7  .checkbox-wrapper-8 .tgl:before,
8  .checkbox-wrapper-8 .tgl *,
9  .checkbox-wrapper-8 .tgl *:after,
10  .checkbox-wrapper-8 .tgl *:before,
11  .checkbox-wrapper-8 .tgl + .tgl-btn {
12  box-sizing: border-box;
13}
14
15.checkbox-wrapper-8 .tgl::-moz-selection,
16  .checkbox-wrapper-8 .tgl:after::-moz-selection,
17  .checkbox-wrapper-8 .tgl:before::-moz-selection,
18  .checkbox-wrapper-8 .tgl *::-moz-selection,
19  .checkbox-wrapper-8 .tgl *:after::-moz-selection,
20  .checkbox-wrapper-8 .tgl *:before::-moz-selection,
21  .checkbox-wrapper-8 .tgl + .tgl-btn::-moz-selection,
22  .checkbox-wrapper-8 .tgl::selection,
23  .checkbox-wrapper-8 .tgl:after::selection,
24  .checkbox-wrapper-8 .tgl:before::selection,
25  .checkbox-wrapper-8 .tgl *::selection,
26  .checkbox-wrapper-8 .tgl *:after::selection,
27  .checkbox-wrapper-8 .tgl *:before::selection,
28  .checkbox-wrapper-8 .tgl + .tgl-btn::selection {
29  background: none;
30}
31
32.checkbox-wrapper-8 .tgl + .tgl-btn {
33  outline: 0;
34  display: block;
35  width: 4em;
36  height: 2em;
37  position: relative;
38  cursor: pointer;
39  -webkit-user-select: none;
40  -moz-user-select: none;
41  -ms-user-select: none;
42  user-select: none;
43}
44
45.checkbox-wrapper-8 .tgl + .tgl-btn:after,
46  .checkbox-wrapper-8 .tgl + .tgl-btn:before {
47  position: relative;
48  display: block;
49  content: "";
50  width: 50%;
51  height: 100%;
52}
53
54.checkbox-wrapper-8 .tgl + .tgl-btn:after {
55  left: 0;
56}
57
58.checkbox-wrapper-8 .tgl + .tgl-btn:before {
59  display: none;
60}
61
62.checkbox-wrapper-8 .tgl:checked + .tgl-btn:after {
63  left: 50%;
64}
65
66.checkbox-wrapper-8 .tgl-skewed + .tgl-btn {
67  overflow: hidden;
68  transform: skew(-10deg);
69  -webkit-backface-visibility: hidden;
70  backface-visibility: hidden;
71  transition: all 0.2s ease;
72  font-family: sans-serif;
73  background: #888;
74}
75
76.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after,
77  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
78  transform: skew(10deg);
79  display: inline-block;
80  transition: all 0.2s ease;
81  width: 100%;
82  text-align: center;
83  position: absolute;
84  line-height: 2em;
85  font-weight: bold;
86  color: #fff;
87  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
88}
89
90.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after {
91  left: 100%;
92  content: attr(data-tg-on);
93}
94
95.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
96  left: 0;
97  content: attr(data-tg-off);
98}
99
100.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active {
101  background: #888;
102}
103
104.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active:before {
105  left: -10%;
106}
107
108.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn {
109  background: #86d993;
110}
111
112.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:before {
113  left: -100%;
114}
115
116.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:after {
117  left: 0;
118}
119
120.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:active:after {
121  left: 10%;
122}