Skip to content

Instantly share code, notes, and snippets.

@bguiz
Created February 27, 2014 06:57
Show Gist options
  • Save bguiz/9245614 to your computer and use it in GitHub Desktop.
Save bguiz/9245614 to your computer and use it in GitHub Desktop.
A Pen by bguiz.
<div class="rating rating-10">
<i class="star-10">★</i>
<i class="star-20">★</i>
<i class="star-30">★</i>
<i class="star-40">★</i>
<i class="star-50">★</i>
</div>
<div class="rating rating-15">
<i class="star-10">★</i>
<i class="star-20">★</i>
<i class="star-30">★</i>
<i class="star-40">★</i>
<i class="star-50">★</i>
</div>
<div class="rating rating-20">
<i class="star-10">★</i>
<i class="star-20">★</i>
<i class="star-30">★</i>
<i class="star-40">★</i>
<i class="star-50">★</i>
</div>
<div class="rating rating-25">
<i class="star-10">★</i>
<i class="star-20">★</i>
<i class="star-30">★</i>
<i class="star-40">★</i>
<i class="star-50">★</i>
</div>
<div class="rating rating-30">
<i class="star-10">★</i>
<i class="star-20">★</i>
<i class="star-30">★</i>
<i class="star-40">★</i>
<i class="star-50">★</i>
</div>
<div class="rating rating-35">
<i class="star-10">★</i>
<i class="star-20">★</i>
<i class="star-30">★</i>
<i class="star-40">★</i>
<i class="star-50">★</i>
</div>
<div class="rating rating-40">
<i class="star-10">★</i>
<i class="star-20">★</i>
<i class="star-30">★</i>
<i class="star-40">★</i>
<i class="star-50">★</i>
</div>
<div class="rating rating-45">
<i class="star-10">★</i>
<i class="star-20">★</i>
<i class="star-30">★</i>
<i class="star-40">★</i>
<i class="star-50">★</i>
</div>
<div class="rating rating-50">
<i class="star-10">★</i>
<i class="star-20">★</i>
<i class="star-30">★</i>
<i class="star-40">★</i>
<i class="star-50">★</i>
</div>
@import "compass";
$font-size: 20px; // <-- Adjust this only!
$star-width: 1.5em;
$star-is_inactive-color: #eee !default;
$star-colors: #cc8b1f #cc8b1f #dcb228 #dcb228 #f0991e #f0991e #f26a2c #f26a2c #dd050b #dd050b !default;
body {
padding: 20px;
font-size: $font-size;
}
.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: $star-is_inactive-color;
font-style: normal;
line-height: $star-width + 0.1em;
text-indent: -0.5em;
text-shadow: 1px 0 1px hsl(0, 0%, 70%);
}
$star-step: 5;
$star-count: 10;
/** Colors */
@function stars-color($num, $star-colors: $star-colors) {
@return nth($star-colors, $num / $star-step);
}
@for $bi from 1 through $star-count {
$i: $bi * $star-step;
%rating-#{$i} {
border-color: stars-color($i);
background: stars-color($i);
}
@for $bj from 1 through $bi {
$j: ((1 + $bj) * $star-step);
.rating-#{$i} .star-#{$j} {
@extend %rating-#{$i};
@if ($bi % 2 == 1 and $bj == $bi) {
@extend %half-rating;
}
}
}
}
%half-rating {
border-right-color: $star-is_inactive-color;
}
@media print {
.rating {
-webkit-print-color-adjust: exact;
i {
text-shadow: none;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment