Css Star Rating

1.1.7 #permalink Disabled

Toggle example guides Toggle HTML markup

Visualizes the disabled state of the rating component. The styles symbolizing that no interaction is possible

Examples
Default styling
(bad)
3.1
Good
.disabled
Stars are grayed out, no interaction is possible
(bad)
3.1
Good
Markup 
<div class="rating  [modifier class]">
 <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-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-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-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-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-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>
<div class="rating value-2 small  [modifier class]">
 <div class="label-value">(bad)</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-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-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-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-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-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>
<div class="rating value-3 medium  [modifier class]">
 <div class="label-value">3.1</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-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-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-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-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-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>
<div class="rating value-4 large [modifier class]">
<div class="star-container">
 <div class="label-value">Good</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-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-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-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-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-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 1418