CSS
В карточке товара в списке товаров
.five-stars-container {
display: inline-block;
position: relative;
text-align: center;
cursor: default;
width: 70px;
height: 14px;
margin-bottom:10px
}
.five-stars-container .five-stars {
display: block;
overflow: hidden;
position: relative;
background: #fff;
padding-left: 1px;
}
.shop-content .five-stars-container .five-stars {
background: #f9f9f9;
}
.five-stars-container .five-stars:before {
content: "";
display:block;
width:70px;
height:14px;
background-image:url(/images/star-red.svg);
background-repeat:repeat-x;
}
.five-stars-container .five-stars.transparent-bg {
background: none;
}
.five-stars-container:before {
display: block;
position: absolute;
top: 0;
left: 0;
content: "";
width:70px;
height:14px;
background-image:url(/images/star.svg);
background-repeat:repeat-x;
z-index: 0;
}В карточке товара для показа рейтинга в блоке с отзывами
Показ рейтинга
<div class="rating">
<span>
<img src="/images/star-red.svg">
<img src="/images/star-red.svg">
<img src="/images/star-red.svg">
<img src="/images/star-red.svg">
<img src="/images/star.svg">
</span>
</div>.rating[data-rating='0'] .rating-star:nth-child(-n + 0):after,
.rating[data-rating='0.5'] .rating-star:nth-child(-n + 0):after,
.rating[data-rating='1'] .rating-star:nth-child(-n + 1):after,
.rating[data-rating='1.5'] .rating-star:nth-child(-n + 1):after,
.rating[data-rating='2'] .rating-star:nth-child(-n + 2):after,
.rating[data-rating='2.5'] .rating-star:nth-child(-n + 2):after,
.rating[data-rating='3'] .rating-star:nth-child(-n + 3):after,
.rating[data-rating='3.5'] .rating-star:nth-child(-n + 3):after,
.rating[data-rating='4'] .rating-star:nth-child(-n + 4):after,
.rating[data-rating='4.5'] .rating-star:nth-child(-n + 4):after,
.rating[data-rating='5'] .rating-star:nth-child(-n + 5):after,
.rating[data-rating='5.5'] .rating-star:nth-child(-n + 5):after {
content: "";
display:inline-block;
width:14px;
height:14px;
background-image:url(/images/star-red.svg);
background-repeat:repeat-x;
}
.rating[data-rating='0.5'] .rating-star:nth-child(1):after,
.rating[data-rating='1.5'] .rating-star:nth-child(2):after,
.rating[data-rating='2.5'] .rating-star:nth-child(3):after,
.rating[data-rating='3.5'] .rating-star:nth-child(4):after,
.rating[data-rating='4.5'] .rating-star:nth-child(5):after,
.rating[data-rating='5.5'] .rating-star:nth-child(6):after {
display:inline-block;
width:14px;
height:14px;
background-image:url(/images/star.svg);
background-repeat:repeat-x;
}
.rating {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
color: #ffd700;
}
.rating-star {
font-size: 24px;
display: block;
}
.rating-star::after {
content: "";
display:inline-block;
width:14px;
height:14px;
background-image:url(/images/star.svg);
background-repeat:repeat-x;
}
.product-tabs .comment-stats-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.product-tabs .comment-stats-wrapper > div {
flex: 1 50%;
}
.product-tabs .comment-stats-wrapper .average-rating {
font-size: 30px;
padding-bottom: 20px;
color: @fifth-color;
text-align: center;
}
.product-tabs .comment-stats-wrapper .average-rating span {
font-size: 40px;
color: @color;
}
.product-tabs .comment-stats-wrapper .comment-stats-line {
display: grid;
align-items: center;
grid-template-columns: 30% 50% 20%;
}
.product-tabs .comment-stats-wrapper .comment-stats-line .line {
border-radius: 5px;
width: 100%;
height: 10px;
background: #e1e1e1;
}
.product-tabs .comment-stats-wrapper .comment-stats-line .line span {
height: 100%;
display: block;
border-radius: 5px;
}
.product-tabs .comment-stats-wrapper .comment-stats-line .count {
padding-left: 20px;
color: #a29e8d;
}
.product-tabs .comment-stats-wrapper .comment-stats-line:nth-child(1) .line span {
background: #329d0f;
}
.product-tabs .comment-stats-wrapper .comment-stats-line:nth-child(2) .line span {
background: #8ab311;
}
.product-tabs .comment-stats-wrapper .comment-stats-line:nth-child(3) .line span {
background: #c0c61d;
}
.product-tabs .comment-stats-wrapper .comment-stats-line:nth-child(4) .line span {
background: #f5bf15;
}
.product-tabs .comment-stats-wrapper .comment-stats-line:nth-child(5) .line span {
background: #f89e49;
}В карточке товара для выбора рейтинга в отзыве
.ui-stars-star,
.ui-stars-cancel {
float: left;
display: block;
overflow: hidden;
text-indent: -999em;
cursor: pointer;
}
.ui-stars-star a,
.ui-stars-cancel a {
width: 14px;
height: 14px;
display: block;
}
.ui-stars-star a {
background: url(/images/star.svg) no-repeat 0 0;
}
.ui-stars-cancel a {
position:relative;
display:flex;
justify-content: center;
align-items: center;
border:1px solid #FCC136;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.ui-stars-cancel a:before {
content:'';
width:5px;
height:5px;
display:block;
background-color:#FCC136;
}
.ui-stars-star-on a {
background: url(/images/star.svg) no-repeat 0 0;
}
.ui-stars-star-hover a {
background: url(/images/star-red.svg) no-repeat 0 0;
}
.ui-stars-cancel-hover a {
background-position: 0 -16px;
}
.ui-stars-star-disabled,
.ui-stars-star-disabled a,
.ui-stars-cancel-disabled a {
cursor: default !important;
}