Produto
PRODUTO
Toggle
O componente de toggle oferece uma maneira rápida de troca entre dois possíveis estados relacionados à uma opção ou à determinado controle de página.
Estados de interação
Off
Default
Hover
Disabled
On
Default
Hover
Disabled
Código
HTML 
Exibir código
Copiar código
Exibir código
<label class="toggle">
<input type="checkbox" />
<span class="toggler"></span>
</label>
SASS Exibir código
Copiar código
Exibir código
.toggle {
position: relative;
display: inline-block;
width: 44px;
height: 16px;
&.disabled{
pointer-events: none;
opacity: 0.5;
}
input{
display:none;
& + .toggler.hovered::before,
& + .toggler:hover::before {
box-shadow: 0px 0px 0px 6px rgba(232, 232, 232, 0.45);
}
& + .toggler.on,
&:checked + .toggler {
background-color: rgba(27, 104, 255, 0.8);
}
&+ .toggler.on:before,
&:checked + .toggler:before {
background-color: #3153f5;
}
&:checked + .toggler.hovered::before,
&:checked + .toggler:hover::before {
box-shadow: 0px 0px 0px 6px rgba(164, 195, 255, 0.82);
}
& + .toggler.on:before,
&:checked + .toggler:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
}
.toggler {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #9b9b9b;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
&:before {
border-radius: 50%;
position: absolute;
content: "";
height: 24px;
width: 24px;
left: -1px;
bottom: -4px;
background-color: #ebebeb;
transition: .4s;
}
}
}