<div class="row">
  <div class="title col">
    <h1>Input Transition with Icons</h1>
  </div>
</div>
<form class="mid">
  <div class="radio">
    <div class="container-input">
      <div class="container-radio">
        <input type="radio" name="one" checked />
      </div>
      <label name="one">Check Me Out</label>
    </div>
    <div class="container-input">
      <div class="container-radio">
        <input type="radio" name="one" checked />
      </div>
      <label name="one">Check Me Out</label>
    </div>
  </div>
  <div class="checks">
    <div class="container-input">
      <div class="container-check"><input type="checkbox" name="two" id="two" checked /></div>
      <label name="two">Check Me Out</label>
    </div>
  </div>
</form>

$white:             #fff;
$dg:                #737373;
$db:                #006580;
$fb:                #4C4C4C;

input[type="radio"] {
  visibility:       hidden;
  position:         relative;
  
  &:before {
    color:          transparent;
    content:        '\e837';
    font-family:    'Material Icons';
    font-size:      29px;
    top:            -5px;
    left:           -8px;
    position:       absolute;
    transition:     0.5s ease-in;
    visibility:     visible;
    z-index:        3;
  }
  &:after {
    background:     $white;
    border-radius:  50%;
    border:         2px solid $dg;
    color:          transparent;
    content:        '\e837';
    font-family:    'Material Icons';
    height:         20px;
    left:           -6px;
    position:       absolute;
    transition:     0.5s ease-in;
    top:            -3px;
    width:          20px;
    visibility:     visible;
    z-index:        1;
  }
  &:checked {
    &:after {
      border-color: transparent;
    }
    &:before {
      color:        $db;
    }
  }
}

input[type="checkbox"]{
  position: relative;
  
  &:before {
    color:        transparent;
    content:        '\e834';
    font-family:    'Material Icons';
    font-size:      32px;
    top:            -8px;
    left:           -10px;
    position:       absolute;
    transition:     0.5s ease-in;
    visibility:     visible;
    z-index:        3;
  }
  &:after {
    background:     $white;
    border-radius:  2px;
    border:         2px solid $dg;
    color:          transparent;
    content:        '\e837';
    font-family:    'Material Icons';
    font-size:      18px;
    height:         20px;
    left:           -6px;
    position:       absolute;
    transition:     0.5s ease-in;
    top:            -4px;
    width:          20px;
    visibility:     visible;
    z-index:        1;
  }
  
  &:checked {
    &:after {
      border-color: transparent;
    }
    &:before {
      color:        $db;
    }
  }
}


.container-input {
  height: 24px;
  padding: 8px;
}

.container-check,
.container-radio {
  float: left;
  height: 24px;
  width: 24px;
  margin-right: 8px;
  //background: #ff0000;
}

body {
  background:       #333;
  color:            $fb;
  font-family:      "helvetica";
}

label {
  line-height: 24px;
  vertical-align: middle;
  float: left;
}

.mid {
  margin:           auto;
  text-align:       center;
  width: 200px;
  border-radius: 2px;
  background: #E8E8E8;
}

.title {
  text-align: center;
  font-family: 'Cormorant', serif;
  color: #0cbfef;
  font-weight: 300;
}