Css Star Rating

1.1.10 #permalink Direction

Toggle example guides Toggle HTML markup

The the direction of the star container.

Examples
Default styling
3.5
.direction-rtl
displays component elements in right to left direction.
3.5
.direction-ltr
displays component elements in left to right direction.
3.5
Markup 
  <div class="rating  value-3 half [modifier class]">
 <div class="label-value">3.5</div>
 <div class="star-container">
     <div class="star">
         <svg class="star-empty">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
         </svg>
         <svg class="star-half">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
         </svg>
         <svg class="star-filled">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
         </svg>
     </div>
     <div class="star">
         <svg class="star-empty">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
         </svg>
         <svg class="star-half">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
         </svg>
         <svg class="star-filled">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
         </svg>
     </div>
     <div class="star">
         <svg class="star-empty">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
         </svg>
         <svg class="star-half">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
         </svg>
         <svg class="star-filled">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
         </svg>
     </div>
     <div class="star">
         <svg class="star-empty">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
         </svg>
         <svg class="star-half">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
         </svg>
         <svg class="star-filled">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
         </svg>
     </div>
     <div class="star">
         <svg class="star-empty">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
         </svg>
         <svg class="star-half">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
         </svg>
         <svg class="star-filled">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
         </svg>
     </div>
 </div>
  </div>
Source: src/kss-documentation/modifiers.kss.scss, line 1755