1/* Switch starts here */
2.rocker {
3  display: inline-block;
4  position: relative;
5  /*
6  SIZE OF SWITCH
7  ==============
8  All sizes are in em - therefore
9  changing the font-size here
10  will change the size of the switch.
11  See .rocker-small below as example.
12  */
13  font-size: 2em;
14  font-weight: bold;
15  text-align: center;
16  text-transform: uppercase;
17  color: #888;
18  width: 7em;
19  height: 4em;
20  overflow: hidden;
21  border-bottom: 0.5em solid #eee;
22}
23
24.rocker-small {
25  font-size: 0.75em;
26 /* Sizes the switch */
27  margin: 1em;
28}
29
30.rocker::before {
31  content: "";
32  position: absolute;
33  top: 0.5em;
34  left: 0;
35  right: 0;
36  bottom: 0;
37  background-color: #999;
38  border: 0.5em solid #eee;
39  border-bottom: 0;
40}
41
42.rocker input {
43  opacity: 0;
44  width: 0;
45  height: 0;
46}
47
48.switch-left,
49.switch-right {
50  cursor: pointer;
51  position: absolute;
52  display: flex;
53  align-items: center;
54  justify-content: center;
55  height: 2.5em;
56  width: 3em;
57  transition: 0.2s;
58  user-select: none;
59}
60
61.switch-left {
62  height: 2.4em;
63  width: 2.75em;
64  left: 0.85em;
65  bottom: 0.4em;
66  background-color: #ddd;
67  transform: rotate(15deg) skewX(15deg);
68}
69
70.switch-right {
71  right: 0.5em;
72  bottom: 0;
73  background-color: #bd5757;
74  color: #fff;
75}
76
77.switch-left::before,
78.switch-right::before {
79  content: "";
80  position: absolute;
81  width: 0.4em;
82  height: 2.45em;
83  bottom: -0.45em;
84  background-color: #ccc;
85  transform: skewY(-65deg);
86}
87
88.switch-left::before {
89  left: -0.4em;
90}
91
92.switch-right::before {
93  right: -0.375em;
94  background-color: transparent;
95  transform: skewY(65deg);
96}
97
98input:checked + .switch-left {
99  background-color: #0084d0;
100  color: #fff;
101  bottom: 0px;
102  left: 0.5em;
103  height: 2.5em;
104  width: 3em;
105  transform: rotate(0deg) skewX(0deg);
106}
107
108input:checked + .switch-left::before {
109  background-color: transparent;
110  width: 3.0833em;
111}
112
113input:checked + .switch-left + .switch-right {
114  background-color: #ddd;
115  color: #888;
116  bottom: 0.4em;
117  right: 0.8em;
118  height: 2.4em;
119  width: 2.75em;
120  transform: rotate(-15deg) skewX(-15deg);
121}
122
123input:checked + .switch-left + .switch-right::before {
124  background-color: #ccc;
125}
126
127/* Keyboard Users */
128input:focus + .switch-left {
129  color: #333;
130}
131
132input:checked:focus + .switch-left {
133  color: #fff;
134}
135
136input:focus + .switch-left + .switch-right {
137  color: #fff;
138}
139
140input:checked:focus + .switch-left + .switch-right {
141  color: #333;
142}