section.container.mb-4.pb-3
.row
.col-xs-12
h2.mt-2.mb-2.pt-2.pb-1 Toogle Checkbox
.form-check
label.form-check-label.form-check-toggle
input.form-check-input(type='checkbox')
span
.form-check
label.form-check-label.form-check-toggle
input.form-check-input(type='checkbox', checked='checked')
span You can also add support text.
View Compiled
.form-check {
position: relative;
display: block;
margin-bottom: 0.75rem;
}
.form-check-toggle {
position: relative;
padding-left: 0;
line-height: 30px;
input {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 0%;
height: 0%;
margin: 0;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
input + span {
cursor: pointer;
user-select: none;
height: 30px;
margin-left: 70px;
display: block;
&:before {
content: '';
position: absolute;
left: 0;
display: inline-block;
height: 30px;
width: 50px;
background: #FFF;
border: solid 1px #eff2f3;
//box-shadow: inset 0 0 5px $engie-gray-10;
transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
border-radius: 15px;
}
&:after {
width: 28px;
height: 28px;
margin-top: 1px;
margin-left: 1px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
display: block;
background: #FFF;
transition: margin-left 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
text-align: center;
font-weight: bold;
content: '';
//border: solid $engie-black-01 0.05rem;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.05);
}
}
input {
&:checked + span {
&:after {
content: '';
margin-left: 21px;
box-shadow: none;
}
&:before {
background-color: #86be4e;
border-color: #86be4e;
transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.