<div class="u-flex u-row-reverse u-justify-between u-size-fit u-gap-small c-rating--input">
<input type="radio" class="u-none" value="1" id="rating1" name="rating">
<label for="rating1">
<svg class="c-rating o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
</label>
<input type="radio" class="u-none" value="2" id="rating2" name="rating">
<label for="rating2">
<svg class="c-rating o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
</label>
<input type="radio" class="u-none" value="3" id="rating3" name="rating">
<label for="rating3">
<svg class="c-rating o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
</label>
<input type="radio" class="u-none" value="4" id="rating4" name="rating">
<label for="rating4">
<svg class="c-rating o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
</label>
<input type="radio" class="u-none" value="5" id="rating5" name="rating">
<label for="rating5">
<svg class="c-rating o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
</label>
</div>
<div class="u-flex u-row-reverse u-justify-between u-size-fit u-gap-small c-rating--input">
{% for i in range(1,6) %}
<input type="radio" class="u-none" value="{{i}}" id="rating{{i}}" name="rating">
<label for="rating{{i}}">
<svg class="c-rating o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
</svg>
</label>
{% endfor %}
</div>
/* No context defined. */
// 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(--body-secondary-color));
stroke: var(--ratig-stroke);
&--filled {
--rating-stroke: #{$rating-color};
fill: $rating-color;
}
}
/* --------------------------------- */
/* RATING CSS */
/* --------------------------------- */
.c-rating--input {
input:checked ~ label .c-rating{
--rating-stroke: #{$rating-color};
fill: $rating-color;
}
}
Rating component shows the rating for events, movie and items
Possible variations:
In order to display a rating component use following syntax:
{% render "@rating--default" %} {% render "@rating--input" %}