I build a checkbox - switch and it works fine on desktop browsers. Once I tested it on mobile devices it's just not working and I can't find a clue.
Can someone give me a hand ?
HTML
<div class="switch">
<input type="checkbox" id="sid" class="switch-input" />
<label for="sid" class="switch-label"></label>
</div>
SCSS
.switch {
&-input {
position: absolute;
opacity: 0;
visibility: hidden;
&:checked + .dir_switch-label {
background-color: $blue-main;
&:before {
background-color: $blue-main;
}
&:after {
margin-left: $container-width - ($toggle-width + 4*$container-padding);
}
}
}
&-label {
@include borderradius($container-height); // same as height
@include transitions(background .4s);
position: relative;
display: block;
cursor: pointer;
outline: none;
user-select: none;
width: $container-width;
height: $container-height;
padding: $container-padding;
background-color: $turq-1;
&:before, &:after {
position: absolute;
display: block;
content: '';
}
&:before {
@include borderradius(($container-height - $container-padding));
@include transitions(background .4s);
top: $container-padding;
left: $container-padding;
bottom: $container-padding;
right: $container-padding;
background-color: $turq-5;
}
&:after {
@include borderradius($container-height - $container-padding); // same as before
@include transitions(margin .4s, background .4s);
top: $container-padding*2;
left: $container-padding*2;
bottom: $container-padding*2;
width: $toggle-width;
background-color: $white;
}
}
}
I just kept the vars as they are instead of removing em'
Aucun commentaire:
Enregistrer un commentaire