SVG Rating system
by oilvier
HTML
<div class="iso">
<div class="review-rating"><span style="width:30%;"></span></div>
</div>
<div class="iso">
<div class="review-rating" style="font-size:11px;"><span style="width:60%;"></span></div>
</div>
<div class="iso">
<div class="review-rating" style="font-size:50px;"><span style="width:60%;"></span></div>
</div>
<div class="iso">
<div class="review-rating review-rating--solo" style="font-size:40px;"><span></span></div>
</div>
<div class="iso">
<div class="review-rating review-rating--solo" style="font-size:20px;"></div>
</div>SCSS
/**
* Gestion du système de notation par étoiles
* On utilise un SVG contenant l'étoile avec le padding, qu'on applique
* en background sur une div avec une width correspondant à :
* (largeur de l'étoile + padding) * 5
* Comme toutes les valeurs sont en em, on peut facilement changer les dimensions
* de l'étoile via `font-size`.
* Dimensions de notre SVG : 29x22px
* Notre font-size de référence est donc 22px, ce qui nous permet de calculer
* les valeurs en em ($five-star)
* Pour n'afficher qu'une seule étoile, même calcul en em, mais sans le multiplier
*/
$star-height: (22px / 22px) * 1em;
$star-width: (29px / 22px) * 1em;
$five-star: ( (29 * 5px) / 22px ) * 1em;
$one-star: (29px / 22px) * 1em;
.review-rating {position:relative; display:block; width:$five-star; height:1em; font-size:22px; background-image:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2029%2022%22%3E%0A%20%20%3Cpath%20fill%3D%22%23a1a5ad%22%20d%3D%22M26%208.5c0-.3-.3-.6-.8-.6l-6.9-1L15.2.6c-.2-.4-.4-.6-.7-.6-.3%200-.5.2-.7.6l-3.1%206.3-6.9%201c-.5.1-.8.3-.8.6%200%20.2.1.4.3.7l5%204.9L7.2%2021v.3c0%20.2%200%20.4.1.5.1.1.3.2.4.2.2%200%20.4-.1.6-.2l6.2-3.3%206.2%203.3c.2.1.4.2.6.2.2%200%20.3-.1.4-.2.1-.1.1-.3.1-.5V21l-1.2-6.9%205-4.9c.3-.3.4-.5.4-.7z%22%2F%3E%0A%3C%2Fsvg%3E%0A'); background-size:$star-width $star-height; background-repeat:repeat-x;
& > span {position:absolute; top:0; left:0; bottom:0;...