[ui] ios checkbox

iosCheckbox.scss

label.iosCheckbox {
  display: inline-block;
  background: #fff;
  padding: 10px 15px;

  > input {
    display: none;
  }

  i {
    display: inline-block;
    padding: 2px;
    width: 40px;
    height: 20px;
    border-radius: 13px;
    vertical-align: middle;
    transition: 0.25s 0.09s;
    position: relative;
    background: #aaaaaa;
    box-sizing: initial;
    &:after {
      content: " ";
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      position: absolute;
      left: 2px;
      transition: 0.25s;
    }
  }

  > input:checked + i {
    background: #47c17a;
  }

  > input:checked + i:after {
    transform: translateX(20px);
  }

  &:hover {
    cursor: pointer;
  }
}

use.html

<label class="iosCheckbox>
 Bluetooth
 <input type="checkbox" />
 <i></i>
</label>