pure css ratings stars

ratings.scss

/*
<span class="rating">
  <span>Rating</span><br>
  5<input type="radio" name="rating" id="rating_5" value="5" star="5"><label class="star" for="rating_5"></label>
  4<input type="radio" name="rating" id="rating_4" value="4" star="4"><label class="star" for="rating_4"></label>
  3<input type="radio" name="rating" id="rating_3" value="3" star="3"><label class="star" for="rating_3"></label>
  2<input type="radio" name="rating" id="rating_2" value="2" star="2"><label class="star" for="rating_2"></label>
  1<input type="radio" name="rating" id="rating_1" value="1" star="1"><label class="star" for="rating_1"></label>
</span>
*/

/*       Sources
 http://fontawesome.io/examples/
 http://css-tricks.com/star-ratings/
 http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/
*/


.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  font-size: 0px;
  input {
    display: none;
  }

  input[type="radio"]:checked + label.star:before,
  input[type="radio"]:checked + label.star ~ label.star:before,
  label.star:hover:before,
  label.star:hover ~ label.star:before {
    content: "\f005";
    color:  $star-color;
  }

  label.star {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    font-size: 30px;
  }

  label.star:hover {
    cursor: pointer;
  }

  label.star:before {
    content: "\f006";
    padding-right: 5px;
    color: #777777;
  }
}