You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
2.5 KiB
116 lines
2.5 KiB
<style>
|
|
.star-rating__title {
|
|
font-size:12px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.star-rating__stars, .star-rating__stars2 {
|
|
position: relative;
|
|
height: 1.2rem;
|
|
width: 6rem;
|
|
/*background: url(on.svg);*/
|
|
background-size: 1.2rem 1.2rem;
|
|
/*border:1px solid red;*/
|
|
}
|
|
|
|
.star-rating__label {
|
|
position: absolute;
|
|
height: 100%;
|
|
background-size: 1.2rem 1.2rem;
|
|
}
|
|
|
|
.star-rating__input {
|
|
margin: 0;
|
|
position: absolute;
|
|
height: 1px; width: 1px;
|
|
overflow: hidden;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
}
|
|
|
|
.star-rating__stars > .star-rating__label:nth-of-type(1) {
|
|
z-index: 5;
|
|
width: 20%;
|
|
}
|
|
|
|
.star-rating__stars .star-rating__label:nth-of-type(2) {
|
|
z-index: 4;
|
|
width: 40%;
|
|
}
|
|
|
|
.star-rating__stars .star-rating__label:nth-of-type(3) {
|
|
z-index: 3;
|
|
width: 60%;
|
|
}
|
|
|
|
.star-rating__stars .star-rating__label:nth-of-type(4) {
|
|
z-index: 2;
|
|
width: 80%;
|
|
}
|
|
|
|
.star-rating__stars .star-rating__label:nth-of-type(5) {
|
|
z-index: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
.star-rating__stars2 .star-rating__label:nth-of-type(1) {
|
|
z-index: 5;
|
|
width: 20%;
|
|
}
|
|
|
|
.star-rating__stars2 .star-rating__label:nth-of-type(2) {
|
|
z-index: 4;
|
|
width: 40%;
|
|
}
|
|
|
|
.star-rating__stars2 .star-rating__label:nth-of-type(3) {
|
|
z-index: 3;
|
|
width: 60%;
|
|
}
|
|
|
|
.star-rating__stars2 .star-rating__label:nth-of-type(4) {
|
|
z-index: 2;
|
|
width: 80%;
|
|
}
|
|
|
|
.star-rating__stars2 .star-rating__label:nth-of-type(5) {
|
|
z-index: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
.star-rating__stars .star-rating__input:checked + .star-rating__label,
|
|
.star-rating__stars .star-rating__input:focus + .star-rating__label,
|
|
.star-rating__stars .star-rating__label:hover {
|
|
background-image: url(/app/assets/img/icon/icon-star-active.png);
|
|
}
|
|
|
|
.star-rating__stars .star-rating__label:hover ~ .star-rating__label {
|
|
background-image: url(/app/assets/img/icon/icon-star-default.png);
|
|
}
|
|
|
|
.star-rating__stars .star-rating__input:focus ~ .star-rating__focus {
|
|
position: absolute;
|
|
top: -.25em;
|
|
right: -.25em;
|
|
bottom: -.25em;
|
|
left: -.25em;
|
|
/*outline: 0.25rem solid lightblue;*/
|
|
}
|
|
|
|
.star-rating__stars2 .star-rating__input:checked + .star-rating__label,
|
|
.star-rating__stars2 .star-rating__input:focus + .star-rating__label,
|
|
.star-rating__stars2 .star-rating__label:hover {
|
|
background-image: url(/app/assets/img/icon/icon-star-active.png);
|
|
}
|
|
|
|
.star-rating__stars2 .star-rating__label:hover ~ .star-rating__label {
|
|
background-image: url(/app/assets/img/icon/icon-star-default.png);
|
|
}
|
|
|
|
.star-rating__stars2 .star-rating__input:focus ~ .star-rating__focus {
|
|
position: absolute;
|
|
top: -.25em;
|
|
right: -.25em;
|
|
bottom: -.25em;
|
|
left: -.25em;
|
|
/*outline: 0.25rem solid lightblue;*/
|
|
}
|
|
</style>
|