filter rating stars by input["radio"]

_filter-rating.html.erb

<% 
  filter_name = (defined?(name)) ? name : ''  
  filter_number = (defined?(number)) ? number : 5
  filter_title = (defined?(title)) ? title : 'Minimum rating'
  filter_css = (defined?(css)) ? css : filter_name
  filter_checked = (defined?(checked)) ? checked-1 : 0
%>
<div class="filter-rating <%= filter_css %>">
  <h4><%= filter_title %></h4>
  <% for i in 0...filter_number %>
    <input type="radio" id="filter-rating-<%= filter_name %>-<%= i+1 %>"
    name="filter-rating-<%= filter_name %>" 
    <%= 'checked' if i==filter_checked%>>
    <label for="filter-rating-<%= filter_name %>-<%= i+1 %>">
    </label>
  <% end %>
</div>

_filter-rating.sass

$filter-rating-color-checked: $brand-primary !default
$filter-rating-color: rgba($text-color,.5) !default
$filter-rating-font-size: 1.5em !default
$filter-rating-margin: .25em !default

.filter-rating
  +make-row(0)

  input[type="radio"]
    display: none

    &:checked
      & + label
        color: $filter-rating-color-checked

      & ~ input[type="radio"] + label
        color: $filter-rating-color
        transform: scale(.8)

  label
    cursor: pointer
    @extend .fa
    @extend .fa-star
    color: $filter-rating-color-checked
    transition: .3s color ease-out, .15s transform ease-out
    transform: scale(1)
    font-size: $filter-rating-font-size
    margin-right: $filter-rating-margin
    float: left

    &:hover
      transform: scale(1.2) !important