Passive-Active toggle

by joplomacedo

HTML

<span class="toggle is-passive"><span class="toggle-state w-passive">Passive</span><span class="toggle-btn"><span class="toggle-slide"></span></span><span class="toggle-state w-active">Active</span></span>

CSS

* {
    font-family :helvetica ;
}

body {
    background: #bbb
}

.toggle {
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
}

.toggle-btn {
    display: inline-block;
    position: relative;
    width: 36px;
    margin: 0 15px;
    border-radius: 6px;
    line-height: 11px;
    -webkit-transition: 0.3s 0.6s;
    cursor: pointer;
}

.toggle.is-passive .toggle-btn {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.24), inset 0 2px 2px rgba(0, 0, 0, 0.21),inset 0 -2px 2px rgba(255, 255, 255, 0.28), 0 1px 1px rgba(255, 255, 255, 0.3);
    background: rgba(0,0,0,0.2);
}

.toggle.is-active .toggle-btn {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.14);
}

.toggle-slide {
    display: inline-block;
    vertical-align: bottom;
    width: 17px;
    height: 11px;
    border-radius: 6px;
    background: red;
    -webkit-transition: -webkit-transform 0.3s, background 0.3s 0.6s, box-shadow 0.3s 0.6s;
}

.toggle.is-passive .toggle-slide {
   /* unnecessary style -webkit-transform: translateX(0); */
    background: #A0A0A0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.44), inset 0 0 2px 4px rgba(255, 255, 255, 0.41) , 0 1px 2px rgba(0, 0, 0, 0.4);
}

.toggle.is-active .toggle-slide {
    -webkit-transform: translateX(19px);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); 
    background: transparent;
}

.toggle-state {
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: 0.3s;
}

.toggle.is-passive .toggle-state.w-active,
.toggle.is-active .toggle-state.w-passive {
    color: rgba(255, 255, 255, 0.67);
    text-shadow: 0 -1px rgba(0, 0, 0, 0.15);
}

.toggle.is-active .toggle-state.w-active,
.toggle.is-passive .toggle-state.w-passive {
    color: #fff;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(255,255,255,.6);   
}

JavaScript

var presence_active = false,
    $toggle = $('.toggle'),
    
    cssTogglePresence = function () {
        $toggle.toggleClass('is-active is-passive');
    },
            
    toggleClick = function () {
        if (!presence_active) {
            presence_active = true;
            cssTogglePresence();
        }
    };


$('.toggle').on('click', toggleClick);