css-toggle-switch.scss

/* ============================================================
  CSS Toggle Switch in Sass
  source: http://callmenick.com/post/css-toggle-switch-examples
  change $cmn-toggle-width for different sizes
============================================================ */

$cmn-toggle-width: 60px;
$cmn-toggle-height: $cmn-toggle-width / 2;

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
  + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}

input.cmn-toggle-round {
  + label {
    padding: 2px;
    width: $cmn-toggle-width;
    height: $cmn-toggle-height;
    background-color: #dddddd;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    &:before, &:after {
      display: block;
      position: absolute;
      top: 1px;
      left: 1px;
      bottom: 1px;
      content: "";
    }
    &:before {
      right: 1px;
      background-color: #f1f1f1;
      -webkit-border-radius: 60px;
      -moz-border-radius: 60px;
      -ms-border-radius: 60px;
      -o-border-radius: 60px;
      border-radius: 60px;
      -webkit-transition: background 0.4s;
      -moz-transition: background 0.4s;
      -o-transition: background 0.4s;
      transition: background 0.4s;
    }
    &:after {
      width: $cmn-toggle-height - 2;
      background-color: #fff;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      -o-border-radius: 100%;
      border-radius: 100%;
      -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      -webkit-transition: margin 0.4s;
      -moz-transition: margin 0.4s;
      -o-transition: margin 0.4s;
      transition: margin 0.4s;
    }
  }
  &:checked + label {
    &:before {
      background-color: #8ce196;
    }
    &:after {
      margin-left: $cmn-toggle-height;
    }
  }
}