CSS3 Toggles

toggles.scss

// http://callmenick.com/2014/05/13/css-toggle-switch-examples/
$toggle-size: 26px;
$toggle-width: $toggle-size * 2;
$toggle-speed: 0.2s;

input {
  &.toggle {
    position: absolute;

    // margin-left: -9999px
    visibility: hidden;

    + label {
      display: inline-block;
      position: relative;
      cursor: pointer;
      outline: none;
      user-select: none;
    }
  }

  // Round
  &.toggle-round {
    + label {
      padding: 2px;
      width: $toggle-width;
      height: $toggle-size;
      background-color: #dddddd;
      border-radius: $toggle-size;

      &:before, &:after {
        display: block;
        position: absolute;
        top: 1px;
        left: 1px;
        bottom: 1px;
        content: "";
      }

      &:before {
        right: 1px;
        background-color: #f1f1f1;
        border-radius: $toggle-size;
        transition: background $toggle-speed;
      }

      &:after {
        width: $toggle-size * 0.95;
        background-color: #fff;
        border-radius: 100%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        transition: margin $toggle-speed;
      }
    }

    &:checked + label {
      &:before {
        background-color: #8ce196;
      }

      &:after {
        margin-left: $toggle-size;
      }
    }
  }

  // Flat
  &.toggle-round-flat {
    + label {
      padding: 2px;
      width: $toggle-width;
      height: $toggle-size;
      background-color: #dddddd;
      border-radius: $toggle-size;
      transition: background $toggle-speed;

      &:before, &:after {
        display: block;
        position: absolute;
        content: "";
      }

      &:before {
        top: 2px;
        left: 2px;
        bottom: 2px;
        right: 2px;
        background-color: #fff;
        border-radius: $toggle-size;
        transition: background $toggle-speed;
      }

      &:after {
        top: 4px;
        left: 4px;
        bottom: 4px;
        width: $toggle-size * 0.85;
        background-color: #dddddd;
        border-radius: $toggle-size * 0.85;
        transition: margin $toggle-speed, background $toggle-speed;
      }
    }

    &:checked + label {
      background-color: #8ce196;

      &:after {
        margin-left: $toggle-size;
        background-color: #8ce196;
      }
    }
  }

  // Text
  &.toggle-yes-no {
    + label {
      padding: 2px;
      width: $toggle-width;
      height: $toggle-size;

      &:before, &:after {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        color: #ffffff;
        text-align: center;
        font-size: $toggle-size / 4;
        line-height: $toggle-size;
      }

      &:before {
        background-color: #dddddd;
        content: attr(data-off);
        transition: transform $toggle-speed;
        backface-visibility: hidden;
      }

      &:after {
        background-color: #8ce196;
        content: attr(data-on);
        transition: transform $toggle-speed;
        transform: rotateY(180deg);
        backface-visibility: hidden;
      }
    }

    &:checked + label {
      &:before {
        transform: rotateY(180deg);
      }

      &:after {
        transform: rotateY(0);
      }
    }
  }
}