There are no notes for this item.
<button class="switch switch--default">
<span class="switch__bg">
<span class="switch__toggle">
<span class="switch__toggle__inner"></span>
</span>
</span>
</button>
<span class="atom__text">Off</span>
<script>
var switchButtons = document.getElementsByClassName("switch");
var switchButtonOne = switchButtons[0];
var switchButtonTwo = switchButtons[1];
switchButtonOne.onclick = function() {
this.classList.toggle("switch--active");
};
switchButtonTwo.onclick = function() {
this.classList.toggle("switch--active");
};
</script>
/*------------------------------------*\
#SWITCH
\*------------------------------------*/
.switch {
margin: 0 1em;
padding: 0;
border: none;
background-color: transparent;
position: relative;
cursor: pointer;
outline: none;
}
.switch__bg {
display: block;
border-radius: $radius-default;
background-color: $button-default;
width: 30px;
height: 17px;
}
.switch--active .switch__bg {
background-color: $button-primary;
}
.switch__toggle {
display: block;
border: 1px solid $button-default;
width: 17px;
height: 17px;
transition: all .125s ease-in-out;
border-radius: $radius-default;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(225,225,225,1) 100%);
}
.switch__toggle__inner {
width: 70%;
height: 70%;
display: block;
margin: 15%;
border-radius: $radius-default;
background: linear-gradient(to bottom, rgba(225,225,225,1) 0%,rgba(255,255,255,1) 100%);
}
// Active state
.switch--active .switch__toggle {
left: 13px;
transition: all .125s ease-in-out;
border-color: $button-primary;
}
// Hover state
.switch:hover .switch__toggle__inner {
border: 1px solid $button-primary;
margin: 15%;
}
.switch--active:hover .switch__toggle__inner {
border-color: $button-default;
}
.switch:hover .switch__toggle {
border-color: $button-primary;
}
.switch--active:hover .switch__toggle {
border-color:$button-default;
}
// Focus state
.switch:active .switch__toggle__inner {
border-color: transparent;
background-color: $button-primary;
width: 60%;
height: 70%;
margin: 15% 20% 15%;
}
.switch--active:active .switch__toggle__inner {
background-color: $button-default;
}
// Disabled state
.switch:disabled,
.switch--active.switch:disabled {
opacity: .5;
pointer-events: none;
}