1.checkbox-wrapper-10 .tgl {
2  display: none;
3}
4
5.checkbox-wrapper-10 .tgl,
6  .checkbox-wrapper-10 .tgl:after,
7  .checkbox-wrapper-10 .tgl:before,
8  .checkbox-wrapper-10 .tgl *,
9  .checkbox-wrapper-10 .tgl *:after,
10  .checkbox-wrapper-10 .tgl *:before,
11  .checkbox-wrapper-10 .tgl + .tgl-btn {
12  box-sizing: border-box;
13}
14
15.checkbox-wrapper-10 .tgl::-moz-selection,
16  .checkbox-wrapper-10 .tgl:after::-moz-selection,
17  .checkbox-wrapper-10 .tgl:before::-moz-selection,
18  .checkbox-wrapper-10 .tgl *::-moz-selection,
19  .checkbox-wrapper-10 .tgl *:after::-moz-selection,
20  .checkbox-wrapper-10 .tgl *:before::-moz-selection,
21  .checkbox-wrapper-10 .tgl + .tgl-btn::-moz-selection,
22  .checkbox-wrapper-10 .tgl::selection,
23  .checkbox-wrapper-10 .tgl:after::selection,
24  .checkbox-wrapper-10 .tgl:before::selection,
25  .checkbox-wrapper-10 .tgl *::selection,
26  .checkbox-wrapper-10 .tgl *:after::selection,
27  .checkbox-wrapper-10 .tgl *:before::selection,
28  .checkbox-wrapper-10 .tgl + .tgl-btn::selection {
29  background: none;
30}
31
32.checkbox-wrapper-10 .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-10 .tgl + .tgl-btn:after,
46  .checkbox-wrapper-10 .tgl + .tgl-btn:before {
47  position: relative;
48  display: block;
49  content: "";
50  width: 50%;
51  height: 100%;
52}
53
54.checkbox-wrapper-10 .tgl + .tgl-btn:after {
55  left: 0;
56}
57
58.checkbox-wrapper-10 .tgl + .tgl-btn:before {
59  display: none;
60}
61
62.checkbox-wrapper-10 .tgl:checked + .tgl-btn:after {
63  left: 50%;
64}
65
66.checkbox-wrapper-10 .tgl-flip + .tgl-btn {
67  padding: 2px;
68  transition: all 0.2s ease;
69  font-family: sans-serif;
70  perspective: 100px;
71}
72
73.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after,
74  .checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
75  display: inline-block;
76  transition: all 0.4s ease;
77  width: 100%;
78  text-align: center;
79  position: absolute;
80  line-height: 2em;
81  font-weight: bold;
82  color: #fff;
83  top: 0;
84  left: 0;
85  -webkit-backface-visibility: hidden;
86  backface-visibility: hidden;
87  border-radius: 4px;
88}
89
90.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after {
91  content: attr(data-tg-on);
92  background: #7802c6;
93  transform: rotateY(-180deg);
94}
95
96.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
97  background: #197dff;
98  content: attr(data-tg-off);
99}
100
101.checkbox-wrapper-10 .tgl-flip + .tgl-btn:active:before {
102  transform: rotateY(-20deg);
103}
104
105.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:before {
106  transform: rotateY(180deg);
107}
108
109.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:after {
110  transform: rotateY(0);
111  left: 0;
112  background: #7e09eb;
113}
114
115.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:active:after {
116  transform: rotateY(20deg);
117}
118
119