shivabhusal/storify

$checkbox-normal-color: #224978;
$checkbox-active-color: #d1ab2b;
$distance-from-left: 10px;
$distance-from-top: 1px;
.checkbox input[type="checkbox"] + label {
  color: $checkbox-normal-color;
  position: relative;
  margin-left: $distance-from-left;
}

.checkbox input[type="checkbox"] + label::before {
  /* Outer rectangle of checkbox button */
  border: 1px solid $checkbox-normal-color;
  content: ' ';
  display: inline-block;
  margin-right: 13px;
  width: 20px;
  height: 20px;
  transition: border 0.15s ease-in-out;
  top: -($distance-from-top);
  left: (- $distance-from-left);
  position: absolute;
}

.checkbox input[type="checkbox"] + label::after {
  /* Inner Rectangle of checkbox button */
  border: 0px solid $checkbox-active-color;
  content: '';
  background: transparent;
  display: inline-block;
  margin-right: 5px;
  width: 11px;
  height: 11px;
  position: absolute;
  left: -6px;
  top: ($distance-from-top - 1px);
  transition: border 0.15s ease-in-out;
}

input[type="checkbox"] {
  display: none;
}

/* When button is active */
.checkbox input[type="checkbox"]:checked + label::after {
  font-family: "FontAwesome";
  content: "";
}

.checkbox input[type="checkbox"]:checked + label::before {
  border-color: $checkbox-active-color;
}

.checkbox input[type="checkbox"]:checked + label {
  color: $checkbox-active-color;
}