CSS Rating Stars

css-rating-stars.markdown

CSS Rating Stars

Forked from http://codepen.io/yelp/pen/aLxbG.

A Pen by Hugo Giraudel on CodePen.

License.

index.html

<div class="rating" data-rate="1">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rate="1.5">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rate="2">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rate="2.5">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rate="3">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rate="3.5">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-4" data-rate="4">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rate="4.5">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rate="5">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>

style.scss

$font-size: 20px; // <-- Adjust this only!
$star-width: 1.5em;
$max-stars: 5;

body { 
  padding: 20px; 
  font-size: $font-size;
}

.rating {
  margin: 10px 0;
}

.rating i {
  display: inline-block;
  width: 0;
  height: $star-width;
  border-width: 0 ( $star-width / 2 );
  border-style: solid;
  border-color: #eee;
  border-radius: .22em;
  color: white;
  background: #eee;
  font-style: normal;
  line-height: $star-width + 0.1em;
  text-indent: -0.5em;
  text-shadow: 1px 0 1px hsl(0, 0%, 70%);
}


// Revamping the stars-color function
// To use a list and some logic
// In order to avoid repeted code
// Also add a fallback color, just in case (#333)
@function stars-color($stars) {
  @if type-of($stars) != number {
    @warn '#{$stars} is not a number for `stars-color`.';
    @return false;
  }
  
  $colors: #cc8b1f #dcb228 #f0991e #f26a2c #dd050b;
  @return if($stars <= length($colors), nth($colors, $stars), #333);
}

// Main loop, looping through 1 to 4 (instead of 5)
// 1. Instanciating a list that will be used as a CSS selector
// 2. Caching the return from stars-color to speed up compilation
@for $i from 1 to $max-stars {
  $selector: (); // 1
  $color: stars-color($i); // 2
  
  // Inner loop not dumping anything
  // 1. Only appending stuff to $selector
  // 2. Using the [attr^='X'] selector to target both X and X.Y
  // 3. Forcing comma separated list for the selector to work
  @for $j from 1 through $i {
    $selector: append(
      $selector, // 1
      unquote("[data-rate^='#{$i}'] .star-#{$j}"), // 2
      comma // 3
    );  
  }
  
  // Using the concatenated selector
  #{$selector} {
    border-color: $color;
    background: $color;
  }

  // For half ratings only, applying color to left border of next star
  [data-rate='#{$i + 0.5}'] .star-#{$i + 1} {
    border-left-color: $color;
  }
}

// Dealing with 5-stars rating in a very simple way
// Since there is no 5.5 rating possible
$color: stars-color($max-stars);
[data-rate='#{$max-stars}'] i {
  border-color: $color;
  background: $color;
}


/** Print */

@media print {
  .rating {
    -webkit-print-color-adjust: exact;
    i {
      text-shadow: none;
    }
  }
}