Simple Custom Checkbox in Sass + Glyphicons

_customcheckbox.scss

/* ==|====================
   Module/Custom Checkbox
   ======================= */

.customcheckbox {
  display: block;
  position: relative;
  cursor: pointer;
  font-weight: 300;

  span {
    display: block;
    padding-left: 35px;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      width: 20px;
      height: 20px;
      border: solid 1px #bbb;
      border-radius: 50%;
      background-color: #eee;
    }
  }

  input {
    display: none;

    &:checked {
      + span {
        color: #000;

        &:after {
          content: "\e013";
          position: absolute;
          left: 2px;
          top: 7px;
          font-size: 20px;
          color: $green;
          display: inline-block;
          font-family: 'Glyphicons Halflings';
          font-style: normal;
          font-weight: 400;
          line-height: 1;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        &:before {
          border-color: $green;
        }
      }
    }
  }
}