Copy environment

Rating Stars 

<div class="rating-stars ">
    <div class="rating-stars__container">
        <div class="rating-stars__star">
            <svg class="icon  " focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#rating-star"></use>
            </svg>
        </div>
        <div class="rating-stars__star">
            <svg class="icon  " focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#rating-star"></use>
            </svg>
        </div>
        <div class="rating-stars__star">
            <svg class="icon  " focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#rating-star"></use>
            </svg>
        </div>
        <div class="rating-stars__star">
            <svg class="icon  " focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#rating-star"></use>
            </svg>
        </div>
        <div class="rating-stars__star">
            <svg class="icon  " focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#rating-star"></use>
            </svg>
        </div>
    </div>

    <p class="rating-stars__no-reviews">
        Rentijate jäetud hinnangud puuduvad
    </p>

</div>
 
<div {{ class('rating-stars', [
    hasReviews ? hasReviews : ''
]) }}> {# Change modifier to change # of stars highlighted #}
    <div class="rating-stars__container">
        {% for i in 0..4 %}
            <div class="rating-stars__star">
                {% include '@icon' with { name: 'rating-star', modifier: '', class: '' } %}
            </div>
        {% endfor %}
    </div>

    {% if hasReviews %}

        <a href="#" class="rating-stars__reviews">
            3 rentija hinnangut
        </a>

    {% else %}

        <p class="rating-stars__no-reviews">
            Rentijate jäetud hinnangud puuduvad
        </p>

    {% endif %}

</div>

{
  "language": "en-US"
}
  • Content: 
    .rating-stars {
    margin-bottom: 16px;
    display: flex;
    font-size: 16px;
}

.rating-stars__container {
    display: flex;
    margin-right: 16px;
}

.rating-stars--1 {
    .rating-stars__star:first-child {
        color: $L-background-medium;

        .icon {
            stroke: $L-background-strong-active;
        }
    }
}

.rating-stars--2 {
    .rating-stars__star:nth-child(-n+2) {
        color: $L-background-medium;

        .icon {
            stroke: $L-background-strong-active;
        }
    }
}

.rating-stars--3 {
    .rating-stars__star:nth-child(-n+3) {
        color: $L-background-medium;

        .icon {
            stroke: $L-background-strong-active;
        }
    }
}

.rating-stars--4 {
    .rating-stars__star:nth-child(-n+4) {
        color: $L-background-medium;

        .icon {
            stroke: $L-background-strong-active;
        }
    }
}

.rating-stars--5 {
    .rating-stars__star:nth-child(-n+5) {
        color: $L-background-medium;

        .icon {
            stroke: $L-background-strong-active;
        }
    }
}

.rating-stars__star {
    font-size: 20px;
    width: 20px;
    height: 20px;
    margin-right: 1px;
    cursor: pointer;
    color: #bfbfbf;

    &:last-child {
        margin-right: 0;
    }
}

.rating-stars__reviews {
    color: $L-text-strong;
}

.rating-stars__no-reviews {
    color: $L-text-disabled;
    line-height: $line-height-base;
}
  • URL: /components/raw/rating-stars/rating-stars.scss
  • Filesystem Path: src/patterns/components/rating-stars/rating-stars.scss
  • Size: 1.4 KB
  • Handle: @rating-stars--default
  • Filesystem Path: src/patterns/components/rating-stars/rating-stars.twig
  • References (1): @icon
  • Referenced by (1): @view-single-product

Has Reviews 

<div class="rating-stars rating-stars--4 rating-stars--has-reviews">
    <div class="rating-stars__container">
        <div class="rating-stars__star">
            <svg class="icon  " focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#rating-star"></use>
            </svg>
        </div>
        <div class="rating-stars__star">
            <svg class="icon  " focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#rating-star"></use>
            </svg>
        </div>
        <div class="rating-stars__star">
            <svg class="icon  " focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#rating-star"></use>
            </svg>
        </div>
        <div class="rating-stars__star">
            <svg class="icon  " focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#rating-star"></use>
            </svg>
        </div>
        <div class="rating-stars__star">
            <svg class="icon  " focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#rating-star"></use>
            </svg>
        </div>
    </div>

    <a href="#" class="rating-stars__reviews">
        3 rentija hinnangut
    </a>

</div>
 
<div {{ class('rating-stars', [
    hasReviews ? hasReviews : ''
]) }}> {# Change modifier to change # of stars highlighted #}
    <div class="rating-stars__container">
        {% for i in 0..4 %}
            <div class="rating-stars__star">
                {% include '@icon' with { name: 'rating-star', modifier: '', class: '' } %}
            </div>
        {% endfor %}
    </div>

    {% if hasReviews %}

        <a href="#" class="rating-stars__reviews">
            3 rentija hinnangut
        </a>

    {% else %}

        <p class="rating-stars__no-reviews">
            Rentijate jäetud hinnangud puuduvad
        </p>

    {% endif %}

</div>

{
  "language": "en-US",
  "hasReviews": "rating-stars--4 rating-stars--has-reviews"
}
  • Content: 
    .rating-stars {
    margin-bottom: 16px;
    display: flex;
    font-size: 16px;
}

.rating-stars__container {
    display: flex;
    margin-right: 16px;
}

.rating-stars--1 {
    .rating-stars__star:first-child {
        color: $L-background-medium;

        .icon {
            stroke: $L-background-strong-active;
        }
    }
}

.rating-stars--2 {
    .rating-stars__star:nth-child(-n+2) {
        color: $L-background-medium;

        .icon {
            stroke: $L-background-strong-active;
        }
    }
}

.rating-stars--3 {
    .rating-stars__star:nth-child(-n+3) {
        color: $L-background-medium;

        .icon {
            stroke: $L-background-strong-active;
        }
    }
}

.rating-stars--4 {
    .rating-stars__star:nth-child(-n+4) {
        color: $L-background-medium;

        .icon {
            stroke: $L-background-strong-active;
        }
    }
}

.rating-stars--5 {
    .rating-stars__star:nth-child(-n+5) {
        color: $L-background-medium;

        .icon {
            stroke: $L-background-strong-active;
        }
    }
}

.rating-stars__star {
    font-size: 20px;
    width: 20px;
    height: 20px;
    margin-right: 1px;
    cursor: pointer;
    color: #bfbfbf;

    &:last-child {
        margin-right: 0;
    }
}

.rating-stars__reviews {
    color: $L-text-strong;
}

.rating-stars__no-reviews {
    color: $L-text-disabled;
    line-height: $line-height-base;
}
  • URL: /components/raw/rating-stars/rating-stars.scss
  • Filesystem Path: src/patterns/components/rating-stars/rating-stars.scss
  • Size: 1.4 KB
  • Handle: @rating-stars--has-reviews
  • Filesystem Path: src/patterns/components/rating-stars/rating-stars.twig
  • References (1): @icon