Skip to content

Instantly share code, notes, and snippets.

@standaniels
Last active June 22, 2017 19:11
Show Gist options
  • Save standaniels/0094d2ed167fad637c315e68672c77e2 to your computer and use it in GitHub Desktop.
Save standaniels/0094d2ed167fad637c315e68672c77e2 to your computer and use it in GitHub Desktop.
Bootstrap switch checkbox
// Demo: https://jsfiddle.net/fjspx80x/2/
.switch > input[type="checkbox"] {
display: none;
}
.switch > label.toggle {
cursor: pointer;
height: 0;
position: relative;
width: 40px;
&::before {
background: darken($navbar-default-bg, 10%);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position: absolute;
opacity: 1;
transition: all 0.4s ease-in-out;
width: 40px;
}
&::after {
background: $navbar-default-bg;
border: 1px solid $panel-default-border;
border-radius: 16px;
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 200ms ease-in-out;
width: 24px;
}
}
.switch > input[type="checkbox"]:checked {
& + label.toggle::before {
background: inherit;
opacity: 0.5;
}
& + label.toggle::after {
background: inherit;
left: 20px;
border: none;
}
}
@standaniels
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment