<h1>iOS7+ Toggle Switch</h1>
<h2>by Malik Dellidj</h2>
<div class="content">
  <input type="checkbox" name="toggle" class="sw" id="toggle-1" checked>
  <label for="toggle-1"></label>
  <hr />
  <input type="checkbox" name="toggle" class="sw" id="toggle-2">
  <label for="toggle-2"><span>With a little label</span>
  </label>
</div>

<div>
  <a href="https://codepen.io/kowlor/" class="fa fa-codepen icon" target="_blank"></a>
  <a href="https://twitter.com/Dathink" class="fa fa-twitter icon" target="_blank"></a>
  <a href="https://github.com/KOWLOR" class="fa fa-github-alt icon" target="_blank"></a>
</div>

$sw-height: 30px;
$sw-width: 51px;

input{
  &.sw{
    opacity: 0; position:absolute; left: -9999px;
    & + label{
      user-select: none;
      transition: .2s ease;
      display: inline-block;
      height: $sw-height;
      width: $sw-width;
      position:relative;
      box-shadow: inset 0 0 0px 2px #e4e4e4;
      border-radius: 60px;
      &:before{
        content: "";
        position: absolute;
        display: block;
        height: $sw-height;
        width: $sw-height;
        top: 0;
        left: 0;
        border-radius: $sw-height/2;
        background: rgba(76,217,100,0);
        transition: .2s cubic-bezier(.24,0,.5,1);
      }
      
      /* White toggle */
      &:after {
        content: "";
        position: absolute;
        display: block;
        height: 28px;
        width: 28px;
        top: 50%;
        margin-top:-14px;
        left: 1px;
        border-radius: 60px;
        background: #fff;
        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0,0%,0%,.04), 0 4px 9px hsla(0,0%,0%,.13), 0 3px 3px hsla(0,0%,0%,.05);
        transition: .35s cubic-bezier(.54,1.60,.5,1);
        }
      span{
        white-space:nowrap;
        height:$sw-height;
        line-height:$sw-height;
        margin-left: $sw-width;
        padding-left:16px;
      }
    }
    &:checked{
      & + label:before {
        width: $sw-width;
        background: rgba(76,217,100,1);
        transition: width .2s cubic-bezier(0,0,0,.1) !important;
      }
      
      & + label:after{
        left: $sw-width - $sw-height + 1;
      }
      
      & + label{
        box-shadow: inset 0 0 0px 25px #e4e4e4;
        transition: box-shadow 2.5s cubic-bezier(0,1.2,.94,.95)}
    }
  }
}


/* Pen Style */
body{
  padding:30px 0;
  text-align:center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#444;
  background:#F4F4F4;
  -webkit-font-smoothing:antialiased
}
h1{
  font-weight:200;
  font-size:46px;
  line-height:30px;
}
h2{
  font-weight:500;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  line-height:16px;
  color: #C3C3C3;
}
.content{
  border-radius:6px;
  background:white;
  padding:40px;
  width:700px;
  margin:30px auto;
}

hr{
  background:transparent;
  height:1px;
  border:0;
  margin:20px 0;
  border-top:1px solid #F2F2F2;
}

.icon{
  font-size:18px;
  text-decoration:none;
  color:#C3C3C3;
  vertical-align: middle;
  margin-right:4px;
}