[Rating] - Display partial stars

[vinz243]

This is a suggestion for an accurate star widget (inspired from Google Play):

.ui.accurate.star.widget {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAcklEQVQoz2P4//8/AzmYgWKN6KC4uFgYhGF8UjTqgjBJGqG2GUOxMF6NQAViQCwFxGpAbICk0QAqBpITw6ZRAUkxLqyA1akENCvg9SNQgRYWTVoEA4cSjTDFalAM5uPVCFTABY0/ASSDBKBiXNRNcqRiADBao1Bj6dJdAAAAAElFTkSuQmCC') repeat scroll 0% 0% transparent;
  height: 0.875em;
  width: 4.375em;
}
.ui.accurate.star.widget .highlight {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAdElEQVQoz2P4//8/AzmYgWKN6KC4uDgBhGF8UjQ+AGGSNEJt+w/FCXg1AhUUAHEDEB8A4g9IGj9AxUByBdg0LkBSjAsvwOpUApoX4PUjUMEFLJouEAwcSjTCFB+AYjAfr0agAgNo/AUgGRQAFTOgbpIjFQMAtcfKBD81ItYAAAAASUVORK5CYII=') repeat scroll left bottom transparent;
  height: 0.875em;
}
.ui.accurate.star.widget.inline {
  display: inline-block;
  margin-left: 0.3em;
}

And usage :

<div class="ui accurate star widget">
     <div class="highlight" style="width: 75%"></div>
 </div>

http://jsfiddle.net/m6fhLqg2/4/

What do you think?

[brigand]

I like it a lot.

You should use ems instead of pixels.

[vinz243]

Thanks, I edited it!

[mariolamacchia]

👋 What's the state of this issue? Do you need help with a PR?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[davidklebanoff]

bump.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.