Css Star Rating

1.2.1.2 #permalink Star colors

Toggle example guides Toggle HTML markup

The different star colors.

Examples
Default styling
.positive
Stars is colored positive
.ok
Stars is colored ok
.negative
Stars is colored negative
Markup 
<div class="star filled svg [modifier class]">
  <svg class="star-empty">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
  </svg>
  <svg class="star-half">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
  </svg>
  <svg class="star-filled">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
  </svg>
  <i class="star-empty "></i>
  <i class="star-half "></i>
  <i class="star-filled "></i>
</div>
<div class="star filled icon [modifier class]">
  <svg class="star-empty">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
  </svg>
  <svg class="star-half">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
  </svg>
  <svg class="star-filled">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
  </svg>
  <i class="star-empty "></i>
  <i class="star-half "></i>
  <i class="star-filled "></i>
</div>
<div class="star filled custom-icon [modifier class]">
  <i class="star-empty fa fa-star-o"></i>
  <i class="star-half  fa fa-star-half-o"></i>
  <i class="star-filled  fa fa-star"></i>
</div>
Source: src/kss-documentation/elements.kss.scss, line 97