GDL - Global Design Language

Rating 

<svg class="c-rating c-rating--filled o-icon o-icon--sm">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
<svg class="c-rating c-rating--filled o-icon o-icon--sm">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
<svg class="c-rating c-rating--filled o-icon o-icon--sm">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
<svg class="c-rating c-rating--filled o-icon o-icon--sm">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
<svg class="c-rating c-rating--filled o-icon o-icon--sm">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
 
<svg class="c-rating c-rating--filled o-icon o-icon--sm">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
<svg class="c-rating c-rating--filled o-icon o-icon--sm">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
<svg class="c-rating c-rating--filled o-icon o-icon--sm">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
<svg class="c-rating c-rating--filled o-icon o-icon--sm">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
<svg class="c-rating c-rating--filled o-icon o-icon--sm">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
 
/* No context defined. */
  • Content: 
    // Name:            Rating
// Description:     Rating for events, movie and items
//
// Component:       `c-rating`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.themes`
//                  `settings/v7/global`
//                  `settings/v7/spacing.tokens`
//
// ========================================================================

// Variables
// ========================================================================

$rating-color: #ffbe26; // TODO: Add color to colors.map.scss

// ========================================================================

.c-rating {
  --ratig-stroke: var(--rating-stroke, var(--divider-color));
  stroke: var(--ratig-stroke);
      
  &--filled {
    --rating-stroke: #{$rating-color};
    fill: $rating-color;
  }
}
  • URL: /components/raw/rating/_rating.scss
  • Filesystem Path: src/lib/components/rating/_rating.scss
  • Size: 811 Bytes

No notes defined.