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  position: absolute;
84  top: 0;
85  left: 0;
86  -webkit-backface-visibility: hidden;
87  backface-visibility: hidden;
88  border-radius: 4px;
89}
90
91.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after {
92  content: attr(data-tg-on);
93  background: #02C66F;
94  transform: rotateY(-180deg);
95}
96
97.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
98  background: #FF3A19;
99  content: attr(data-tg-off);
100}
101
102.checkbox-wrapper-10 .tgl-flip + .tgl-btn:active:before {
103  transform: rotateY(-20deg);
104}
105
106.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:before {
107  transform: rotateY(180deg);
108}
109
110.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:after {
111  transform: rotateY(0);
112  left: 0;
113  background: #7FC6A6;
114}
115
116.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:active:after {
117  transform: rotateY(20deg);
118}