<div class="price  ">
    <span class="price__value price__value--special ">
        <ins aria-label="On sale at: €109,95">

            €

            109,95

        </ins>
    </span>
    <span class="price__value price__value--old ">
        <del aria-label="Price reduced from: €129,95">
            €
            129,95

        </del>
    </span>
</div>
<div class="price {{ class }} {{{ attributes }}}">
{{#if specialPrice }}
    <span class="price__value price__value--special {{ specialPriceClass }}">
        <ins aria-label="On sale at: {{#if prefix.text}}{{prefix.text}}{{/if}}{{specialPrice}}{{#if suffix.text}}{{suffix.text}}{{/if}}">
            {{prefix.tag}}
                {{prefix.text}}
            {{prefix.closingTag}}
            {{specialPrice}}
            {{suffix.tag}}
                {{suffix.text}}
            {{suffix.closingTag}}
        </ins>
    </span>
    <span class="price__value price__value--old {{ oldPriceClass }}">
        <del aria-label="Price reduced from: {{#if prefix.text}}{{prefix.text}}{{/if}}{{regularPrice}}{{#if suffix.text}}{{suffix.text}}{{/if}}">
            {{#if prefix.tag}}
                <{{prefix.tag}}>
            {{/if}}
                {{prefix.text}}
            {{#if prefix.tag}}
                </{{tag}}>
            {{/if}}
            {{regularPrice}}
            {{#if suffix.tag}}
                <{{suffix.tag}}>
            {{/if}}
                {{suffix.text}}
            {{#if suffix.tag}}
                </{{suffix.tag}}>
            {{/if}}
        </del>
    </span>
{{else}}
    <span class="price__value {{ regularPriceClass }}">
        {{prefix.tag}}
            {{prefix.text}}
        {{prefix.closingTag}}
        {{regularPrice}}
        {{suffix.tag}}
            {{suffix.text}}
        {{suffix.closingTag}}
    </span>
{{/if}}
</div>
{
  "regularPrice": "129,95",
  "specialPrice": "109,95",
  "prefix": {
    "tag": "",
    "text": "€",
    "closingTag": ""
  },
  "suffix": {
    "tag": "",
    "text": "",
    "closingTag": ""
  },
  "oldPriceClass": "",
  "regularPriceClass": "",
  "specialPriceClass": ""
}
  • Content:
    $price__spacing                     : $spacer !default;
    $price__font-family                 : $font-family-saira !default;
    $price__font-style                  : normal !default;
    
    $price__font-weight                 : $font-weight-semibold !default;
    $price__font-weight--old            : $font-weight-normal !default;
    $price__font-weight--special        : $font-weight-semibold !default;
    
    $price__font-size                   : 20px !default;
    $price__font-size--old              : 14px !default;
    
    $price__color                       : $red !default;
    $price__color--special              : $red !default;
    $price__color--old                  : rgba(227, 6, 19, 0.5) !default;
    
    $secondary-price__color             : $white !default;
    $secondary-price__color--special    : $white !default;
    $secondary-price__color--old        : rgba(255, 255, 255, 0.5) !default;
    
    .price {
        &-box,
        &__value {
            font-family: $price__font-family;
            font-size: $price__font-size;
            font-weight: $price__font-weight;
            color: $price__color;
            & .old-price,
            &--old {
                color: $price__color--old;
                font-weight: $price__font-weight--old;
                font-size: $price__font-size--old;
                text-decoration: line-through;
                margin-right: $price__spacing;
            }
            &--special {
                color: $price__color--special;
                font-weight: $price__font-weight--special;
                & > ins {
                    text-decoration: none;
                }
            }
            &--between {
                display: block;
    
                &:last-child {
                    margin-top: $price__spacing;
                }
            }
        }
        & .normal-price {
            & .price-container.price-final_price {
                & .price-label {
                    margin-bottom: 5px;
                }
                & .price-wrapper {
                    & span.price {
                        color: $price__color--special;
                        font-weight: $price__font-weight--special;
                    }
                }
            }
        }
        &-label {
            display: none;
        }
        &__text {
            font-weight: $price__font-weight--old;
        }
        &-final_price {
            display: flex;
            flex-direction: row-reverse;
            justify-content: start;
        }
    }
    .catalog-item__price--black,
    .catalog-item__price--red {
        .price {
            &__value {
                color: $secondary-price__color;
                &--old {
                    color: $secondary-price__color--old;
                }
                &--special {
                    color: $secondary-price__color--special;
                }
            }
        }
    }
    
  • URL: /components/raw/price/_price.scss
  • Filesystem Path: build/components/02-elements/price/_price.scss
  • Size: 2.6 KB

There are no notes for this item.