mercredi 17 juin 2015

clicking on label (checkbox-switch) is not working on mobile devices

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