56 lines
1.2 KiB
CSS
56 lines
1.2 KiB
CSS
.rating-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.rating-container > .legend {
|
|
display: flex;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.rating-container > .legend > span {
|
|
flex: 1 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.rating-container > .legend > :first-child {
|
|
text-align: left;
|
|
}
|
|
|
|
.rating-container > .legend > :last-child {
|
|
text-align: right;
|
|
}
|
|
|
|
.rating-container > .rating {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: center;
|
|
}
|
|
|
|
.rating-container > .rating > input[type=radio] {
|
|
display: none;
|
|
}
|
|
|
|
.rating-container > .rating > input[type=radio]:checked ~ .rating-point {
|
|
background-image: url(point-fill.svg);
|
|
}
|
|
|
|
.rating-container > .rating > .rating-point {
|
|
--max-size: calc((100vw - 2em - 2 * 0.1em * var(--num-choices)) / var(--num-choices));
|
|
background: url(point-stroke.svg) no-repeat center/100%;
|
|
height: 3em;
|
|
margin: 0 0.1em;
|
|
max-height: var(--max-size);
|
|
max-width: var(--max-size);
|
|
width: 3em;
|
|
}
|
|
|
|
.rating-container > .rating > .rating-point:first-of-type {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.rating-container > .rating > .rating-point:last-of-type {
|
|
margin-left: 0;
|
|
}
|