# Ratings

Ratings styling mixins are based on using font icons as rate symbols. There are two types of ratings: rating which allows user to vote and rating which displays voting results summary. Depending on the rating type mixin `.lib-rating-vote()` or `.lib-rating-summary()` is used.

# Global rating variables

Global styles for both types of ratings can be modified by changing global variables. To set different styles to types of ratings these variables should be used directly in the mixin call.

                Mixin variable
                Default value
                Allowed values
                Comment

                @_icon-content
                @icon-star
                '' | false | icon code
                Rating icon symbol code

                @_icon-count
                5
                '' | value
                Number of rating icon symbols

                @_icon-font
                @icon-font
                '' | false | value
                Icon font

                @_icon-font-size
                28px
                '' | false | value
                Icon font size

                @_icon-letter-spacing
                -10px
                '' | false | value
                Icon letter spacing

                @_icon-color
                #c7c7c7
                '' | false | value
                Unselected icons color

                @_icon-color-active
                #ff5601
                '' | false | value
                Selected and hovered icons color

                @_label-hide
                false
                true | false
                Rating label is displayed

# Rating with vote

To implement rating with vote, use the `.lib-rating-vote()` mixin.

<div class="rating vote example-ratings-1"> <input type="radio" name="rating-price" id="rating-price-1" value="1" /> <label class="rating-1" for="rating-price-1" title="1 star"> <span>1 star</span> </label> <input type="radio" name="rating-price" id="rating-price-2" value="2" /> <label class="rating-2" for="rating-price-2" title="2 stars"> <span>2 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-3" value="3" /> <label class="rating-3" for="rating-price-3" title="3 stars"> <span>3 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-4" value="4" /> <label class="rating-4" for="rating-price-4" title="4 stars"> <span>4 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-5" value="5" /> <label class="rating-5" for="rating-price-5" title="5 stars"> <span>5 stars</span> </label> </div>

    .example-ratings-1 {
        .lib-rating-vote();
    }

# Rating with vote icons number customization

To change number of icons, add desired number of rating icons (input + label) to the markup. Then set this number to the `@_icon-count` mixin variable.

<div class="rating vote example-ratings-2"> <input type="radio" name="rating-price" id="rating-price-1" value="1" /> <label class="rating-1" for="rating-price-1" title="1 star"> <span>1 star</span> </label> <input type="radio" name="rating-price" id="rating-price-2" value="2" /> <label class="rating-2" for="rating-price-2" title="2 stars"> <span>2 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-3" value="3" /> <label class="rating-3" for="rating-price-3" title="3 stars"> <span>3 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-4" value="4" /> <label class="rating-4" for="rating-price-4" title="4 stars"> <span>4 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-5" value="5" /> <label class="rating-5" for="rating-price-5" title="5 stars"> <span>5 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-6" value="6" /> <label class="rating-6" for="rating-price-6" title="6 stars"> <span>6 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-7" value="7" /> <label class="rating-7" for="rating-price-7" title="7 stars"> <span>7 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-8" value="8" /> <label class="rating-8" for="rating-price-8" title="8 stars"> <span>8 stars</span> </label> </div>

    .example-ratings-2 {
        .lib-rating-vote(
            @_icon-count: 8
        );
    }

# Rating with vote icons colors customization

These variables control default and active icon colors:

      @_icon-color: value,
      @_icon-color-active: value

<div class="rating vote example-ratings-3"> <input type="radio" name="rating-price" id="rating-price-1" value="1" /> <label class="rating-1" for="rating-price-1" title="1 star"> <span>1 star</span> </label> <input type="radio" name="rating-price" id="rating-price-2" value="2" /> <label class="rating-2" for="rating-price-2" title="2 stars"> <span>2 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-3" value="3" /> <label class="rating-3" for="rating-price-3" title="3 stars"> <span>3 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-4" value="4" /> <label class="rating-4" for="rating-price-4" title="4 stars"> <span>4 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-5" value="5" /> <label class="rating-5" for="rating-price-5" title="5 stars"> <span>5 stars</span> </label> </div>

    .example-ratings-3 {
        .lib-rating-vote(
            @_icon-color: #aff5e3,
            @_icon-color-active: #0a6767
        );
    }

# Rating with vote icons symbol customization

To set custom icon symbol, use the `@_icon-content` variable

<div class="rating vote example-ratings-4"> <input type="radio" name="rating-price" id="rating-price-1" value="1" /> <label class="rating-1" for="rating-price-1" title="1 star"> <span>1 star</span> </label> <input type="radio" name="rating-price" id="rating-price-2" value="2" /> <label class="rating-2" for="rating-price-2" title="2 stars"> <span>2 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-3" value="3" /> <label class="rating-3" for="rating-price-3" title="3 stars"> <span>3 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-4" value="4" /> <label class="rating-4" for="rating-price-4" title="4 stars"> <span>4 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-5" value="5" /> <label class="rating-5" for="rating-price-5" title="5 stars"> <span>5 stars</span> </label> </div>

    .example-ratings-4 {
        .lib-rating-vote(
            @_icon-content: @icon-wishlist-full
        );
    }

# Accessible rating with vote

The following markup corresponds to accesibility demands

<fieldset class="exapmle-ratings-5 fieldset ratings vote"> <legend>How do you rate this product?</legend> <div class="field price"> <label class="label" for="rating-1" id="price-rating-label"><span>Price</span></label> <div class="control rating vote"> <input type="radio" name="rating-price" id="rating-price-1" value="1" aria-labelledby="price-rating-label rating-price-label-1" /> <label class="rating-1" for="rating-price-1" title="1 star" id="rating-price-label-1"> <span>1 star</span> </label> <input type="radio" name="rating-price" id="rating-price-2" value="2" aria-labelledby="price-rating-label rating-price-label-2" /> <label class="rating-2" for="rating-price-2" title="2 stars" id="rating-price-label-2"> <span>2 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-3" value="3" aria-labelledby="price-rating-label rating-price-label-3" /> <label class="rating-3" for="rating-price-3" title="3 stars" id="rating-price-label-3"> <span>3 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-4" value="4" aria-labelledby="price-rating-label rating-price-label-4" /> <label class="rating-4" for="rating-price-4" title="4 stars" id="rating-price-label-4"> <span>4 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-5" value="5" aria-labelledby="price-rating-label rating-price-label-5" /> <label class="rating-5" for="rating-price-5" title="5 stars" id="rating-price-label-5"> <span>5 stars</span> </label> </div> </div> </fieldset>

    .exapmle-ratings-5 {
        .control.rating.vote {
            .lib-rating-vote();
        }
    }

# Rating summary

To implement rating summary, use the following markup

<div class="example-rating-summary-1"> <span class="label"><span>Rating</span></span> <div class="rating-result" title="60%"> <span style="width:60%"><span>60</span></span> </div> </div>

    .example-rating-summary-1 {
        .lib-rating-summary();
    }

# Rating summary icons number customization

To set up number of icons, use the variable:

      @_icon-count: number

<div class="example-rating-summary-2"> <span class="label"><span>Rating</span></span> <div class="rating-result" title="40%"> <span style="width:40%"><span>40</span></span> </div> </div>

    .example-rating-summary-2 {
        .lib-rating-summary(
            @_icon-count: 8
        );
    }

# Rating summary icons color customization

To set up the icons default and selected color, use variables:

      @_icon-color: value
      @_icon-color-active: value

<div class="example-rating-summary-3"> <span class="label"><span>Rating</span></span> <div class="rating-result" title="40%"> <span style="width:40%"><span>40</span></span> </div> </div>

    .example-rating-summary-3 {
        .lib-rating-summary(
            @_icon-color: #aff5e3,
            @_icon-color-active: #0a6767
        );
    }

# Rating summary icons symbol customization

To set up the icons symbol use variable:

      @_icon-content: icon_code

<div class="example-rating-summary-4"> <span class="label"><span>Rating</span></span> <div class="rating-result" title="40%"> <span style="width:40%"><span>40</span></span> </div> </div>

    .example-rating-summary-4 {
        .lib-rating-summary(
            @_icon-content: @icon-wishlist-full
        );
    }

# Rating summary hide label

To hide the rating summary label set:

      @_label-hide: true

<div class="example-rating-summary-5"> <span class="label"><span>Rating</span></span> <div class="rating-result" title="40%"> <span style="width:40%"><span>40</span></span> </div> </div>

    .example-rating-summary-5 {
        .lib-rating-summary(
            @_label-hide: true
        );
    }

# Rating summary multiple ratings

<div class="example-rating-summary-6" tabindex="1"> <strong>Your Rating:</strong> <div class="rating-summary item"> <span class="label"><span>Value</span></span> <div class="rating-result" title="100%" > <span style="width:100%"><span>100%</span></span> </div> </div> <div class="rating-summary item"> <span class="label"><span>Quality</span></span> <div class="rating-result" title="100%"> <span style="width:100%"><span>100%</span></span> </div> </div> <div class="rating-summary item"> <span class="label"><span>rating +</span></span> <div class="rating-result" title="20%"> <span style="width:20%"><span>20%</span></span> </div> </div> <div class="rating-summary item"> <span class="label"><span>Price</span></span> <div class="rating-result" title="40%"> <span style="width:40%"><span>40%</span></span> </div> </div> </div>

    .example-rating-summary-6 {
        .rating-summary {
            .lib-rating-summary();
        }
    }

# Rating hide label mixin

The `.lib-rating-summary-label-hide()` mixin is used to hide rating label in summary rating.

<div class="example-rating-summary-7"> <span class="label"><span>Rating</span></span> <div class="rating-result" title="40%"> <span style="width:40%"><span>40</span></span> </div> </div>

    .example-rating-summary-7 {
        .lib-rating-summary();
        .lib-rating-summary-label-hide();
    }