dat.gui/elements/controller-boolean/controller-boolean.styl

@import '../shared';

height = 8px;
width = round( height * 2.5 );
border-radius = height;

#container { 
    height: 100%;
    cursor: pointer;
    padding-left: padding

}

#switch-track {
    width: width;
    height: height;
    background: light;
    border-radius: border-radius;
    transition: background 0.1s linear;
}

#switch-knob {
    height: height;
    width: height;
    border-radius: border-radius;
    background: font-color;
    transition: transform 0.15s ease;
}

.value-true {
    #switch-track {
        background: boolean-color;
    }
    #switch-knob {
        transform: translate3d( width - height, 0, 0 );
    }
    &:hover #switch-knob { 
        transform: translate3d( width - height, 0, 0 ) scale( 1.5 );
    }
}

.value-false:hover #switch-knob { 
    transform: scale( 1.5 );
}

#text { 
    margin-left: padding;
    .value-true & { 
        // color: boolean-color;
    }
    .value-false & { 
        color: light;
    }
}