1@mixin marginTransition {
2  -webkit-transition: margin 0.4s, background 0.4s;
3  -moz-transition: margin 0.4s, background 0.4s;
4  -o-transition: margin 0.4s, background 0.4s;
5  transition: margin 0.4s, background 0.4s;
6}
7
8@mixin borderRadius {
9  -webkit-border-radius: 60px;
10  -moz-border-radius: 60px;
11  border-radius: 60px;
12}
13
14.toggle-switch {
15  position: absolute;
16  left: 20px;
17  height: 1px;
18  width: 1px;
19  opacity: 0;
20}
21
22.toggle-switch + label {
23  display: block;
24  position: relative;
25  cursor: pointer;
26  outline: none;
27  -webkit-user-select: none;
28  -moz-user-select: none;
29  -ms-user-select: none;
30  user-select: none;
31}
32
33.toggle label {
34  text-indent: -9999px;
35  transform: translateY(-50%); // keeps switch centered
36}
37
38input.toggle-switch__round-flat + label {
39  padding: 2px;
40  width: 50px;
41  height: 30px;
42  background-color: darken($medgrey, 8%);
43  @include borderRadius;
44  @include marginTransition;
45}
46
47input.toggle-switch__round-flat:focus + label {
48  box-shadow: 0 0 4px 4px $darkbg__accent;
49}
50input.toggle-switch__round-flat + label:before, input.toggle-switch__round-flat + label:after {
51  display: block;
52  position: absolute;
53  content: "";
54}
55input.toggle-switch__round-flat + label:before {
56  top: 2px;
57  left: 2px;
58  bottom: 2px;
59  right: 2px;
60  background-color: $white;
61  @include borderRadius;
62  @include marginTransition;
63}
64input.toggle-switch__round-flat + label:after {
65  top: 4px;
66  left: 4px;
67  bottom: 4px;
68  width: 20px;
69  background-color: darken($medgrey, 8%);
70  -webkit-border-radius: 52px;
71  -moz-border-radius: 52px;
72  border-radius: 52px;
73  @include marginTransition;
74}
75input.toggle-switch__round-flat:checked + label {
76  background-color: $primebtn__bg;
77}
78input.toggle-switch__round-flat:checked + label:before {
79  background-color: $lightbg__accent;
80}
81input.toggle-switch__round-flat:checked + label:after {
82  margin-left: 20px;
83  background-color: $primebtn__bg;
84}