<form>
<fieldset class="a-rating">
<legend>Vad tyckte du om kursen?</legend>
<input type="radio" name="rating" value="5" class="a-rating__radio" id="rating-5">
<label for="rating-5" class="a-rating__label"><span class="u-visuallyhidden">betyg 5 av 5</span></label>
<input type="radio" name="rating" value="4" class="a-rating__radio" id="rating-4">
<label for="rating-4" class="a-rating__label "><span class="u-visuallyhidden">betyg 4 av 5</span></label>
<input type="radio" name="rating" value="3" class="a-rating__radio" id="rating-3">
<label for="rating-3" class="a-rating__label "><span class="u-visuallyhidden">betyg 3 av 5</span></label>
<input type="radio" name="rating" value="2" class="a-rating__radio" id="rating-2">
<label for="rating-2" class="a-rating__label "><span class="u-visuallyhidden">betyg 2 av 5</span></label>
<input type="radio" name="rating" value="1" class="a-rating__radio" id="rating-1">
<label for="rating-1" class="a-rating__label "><span class="u-visuallyhidden">betyg 1 av 5</span></label>
</fieldset>
</form>
<form>
<fieldset class="a-rating{{#if additional_classes}} {{additional_classes}}{{/if}}">
<legend>Vad tyckte du om kursen?</legend>
<input type="radio" name="rating" value="5" class="a-rating__radio" id="rating-5">
<label for="rating-5" class="a-rating__label"><span class="u-visuallyhidden">betyg 5 av 5</span></label>
<input type="radio" name="rating" value="4" class="a-rating__radio" id="rating-4">
<label for="rating-4" class="a-rating__label "><span class="u-visuallyhidden">betyg 4 av 5</span></label>
<input type="radio" name="rating" value="3" class="a-rating__radio" id="rating-3">
<label for="rating-3" class="a-rating__label "><span class="u-visuallyhidden">betyg 3 av 5</span></label>
<input type="radio" name="rating" value="2" class="a-rating__radio" id="rating-2">
<label for="rating-2" class="a-rating__label "><span class="u-visuallyhidden">betyg 2 av 5</span></label>
<input type="radio" name="rating" value="1" class="a-rating__radio" id="rating-1">
<label for="rating-1" class="a-rating__label "><span class="u-visuallyhidden">betyg 1 av 5</span></label>
</fieldset>
</form>
{
"additional_classes": false
}
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@include mixin.atom(rating) {
display: inline-flex;
flex-direction: row-reverse;
> label {
width: var.$icon-size-large * 1.5;
height: var.$icon-size-large * 1.5;
display: inline-flex;
background-position: center center;
background-repeat: no-repeat;
background-size: 36px 36px;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 300 255' style='enable-background:new 0 0 300 255;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%238E9297;%7D%0A%3C/style%3E%3Cpath class='st0' d='M266.9,36.7V0.4h-99v36.3h-35.8V0.4h-99v36.3h-33v72.8h33.2v36.3h32.9v36.3h33.2v36.6h32.9V255h35.8v-36.3H201 v-36.6h33v-36.3h32.9v-36.3h33.2V36.7H266.9z M257.5,85h-45.7V36.7H235v24.5h22.5V85z'/%3E%3C/svg%3E%0A");
}
@include bem.e(radio) {
&:hover,
&:checked {
~ label {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 255'%3E%3Cpath d='M266.9 36.7V.4h-99v36.3h-35.8V.4h-99v36.3H.1v72.8h33.2v36.3h32.9v36.3h33.2v36.6h32.9V255h35.8v-36.3H201v-36.6h33v-36.3h32.9v-36.3h33.2V36.7h-33.2zM257.5 85h-45.7V36.7H235v24.5h22.5V85z' fill='%23ff4069'/%3E%3C/svg%3E");
}
}
}
}
No notes defined.