Bootstrap switch checkbox

_switch.scss

// 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;
  }
}

Demo: https://jsfiddle.net/fjspx80x/2/