기능:토글스위치

• 토글 스위치 버튼 toggle switch

<div class="form_row">
  <p>상태</p>
  <label class="toggle_switch">
    <input type="checkbox">
    <span><em><!-- 정상 / 블록 --></em></span>
  </label>
</div>

.toggle_switch {position: relative; cursor: pointer;
    span {display: block; position: relative; padding-left: 60px;
      &:before {position: absolute; display: block; content: ''; position: absolute; top: 0; left: 0; width: 50px; height: 26px; border: 1px solid #0d6efd; border-radius: 13px;}
      &:after {display: block; content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #0d6efd; transition: transform 300ms;}
      em:before {content: '정상'; line-height: 26px;}
    }
    input[type=checkbox] {position: absolute; top: 0; left: 0; visibility: hidden; width: 1px; height: 1px; opacity: 0;
      &:checked + span {
        &:before {opacity: 0.5;}
        &:after {transform: translateX(24px); opacity: 0.5;}
        em:before {content: '블록';}
      }
    }
  }