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
            Global variable
            Default value
            Allowed values
            Comment
        
        
            @_icon-content
            @rating-icon__content
            @icon-star
            '' | false | icon code
            Rating icon symbol code
        
        
            @_icon-count
            @rating-icon__count
            5
            '' | value
            Number of rating icon symbols
        
        
            @_icon-font
            @rating-icon__font
            @icon-font
            '' | false | value
            Icon font
        
        
            @_icon-font-size
            @rating-icon__font-size
            28px
            '' | false | value
            Icon font size
        
        
            @_icon-letter-spacing
            @rating-icon__letter-spacing
            -10px
            '' | false | value
            Icon letter spacing
        
        
            @_icon-color
            @rating-icon__color
            #c7c7c7
            '' | false | value
            Unselected icons color
        
        
            @_icon-color-active
            @rating-icon__active__color
            #ff5601
            '' | false | value
            Selected and hovered icons color
        
        
            @_label-hide
            @rating-label__hide
            false
            true | false
            Rating label is displayed

Mixin variable	Global variable	Default value	Allowed values	Comment
@_icon-content	@rating-icon__content	@icon-star	'' \| false \| icon code	Rating icon symbol code
@_icon-count	@rating-icon__count	5	'' \| value	Number of rating icon symbols
@_icon-font	@rating-icon__font	@icon-font	'' \| false \| value	Icon font
@_icon-font-size	@rating-icon__font-size	28px	'' \| false \| value	Icon font size
@_icon-letter-spacing	@rating-icon__letter-spacing	-10px	'' \| false \| value	Icon letter spacing
@_icon-color	@rating-icon__color	#c7c7c7	'' \| false \| value	Unselected icons color
@_icon-color-active	@rating-icon__active__color	#ff5601	'' \| false \| value	Selected and hovered icons color
@_label-hide	@rating-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();
}