Price

Styles for price used in price_base macro.

Structurally .price element contains following element:

• .price__value
• .price__vat-info

LESS

You can modify any price less variable in your User Less section to change a price styles.

Price variables

Variables used to style a price.

@priceFontSizeL: 20;
@priceFontSizeM: 18;
@priceFontSize: 16;
@priceFontSizeS: 14;
@priceFontSizeXs: 12;

@priceLineHeight: 20;

@priceColor: @globalFontColor;
@priceFontWeight: @fontWeightSemibold;

@specialPriceColor: @secondaryColor;

@secondaryPriceColor: @globalFontColorSecondary;

@priceVatInfoColor: @globalFontColorSecondary;
@priceVatInfoDesktopFontSize: @fontSizeInPxS;

Price styles

A standard price styles.

.price {
    .font-size(@priceFontSize);
    .line-height(@priceLineHeight);

    display: inline;
    color: @priceColor;
    align-items: center;

    &_l {
        .font-size(@priceFontSizeL);
    }

    &_m {
        .font-size(@priceFontSizeM);
    }

    &_s {
        .font-size(@priceFontSizeS);
    }

    &_xs {
        .font-size(@priceFontSizeXs);
    }

    &__value {
        &_special {
            color: @specialPriceColor;
        }

        &_secondary {
            color: @secondaryPriceColor;
        }

        &_inactive {
            text-decoration: line-through;
        }

        &_bold {
            font-weight: @priceFontWeight;
        }
    }

    &__special-price-icon {
        background-color: @specialPriceColor;
        stroke: #fff;
        color: #fff;
        padding: 2px;
        border-radius: 3px;
        width: 19px;
        height: 19px;
    }
}

.vat-info {
    color: @priceVatInfoColor;
    .font-size(@priceVatInfoDesktopFontSize);
    line-height: 1;

    &_xs {
        .font-size(@priceFontSizeXs);
    }
}

.price-list {
    display: flex;
    flex-direction: column;

    &_s {
        .size-s();
    }

    &__item {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 460px;
        margin-bottom: @globalSpacing * 0.8;

        &_full-width {
            max-width: 100%;
        }

        &_zebra {
            padding-left: @globalSpacing * 0.4;
            padding-right: @globalSpacing * 0.4;

            &:nth-child(odd) {
                background-color: @neutralColors100;
                padding-top: @globalSpacing * 0.8;
                padding-bottom: @globalSpacing * 0.8
            }
        }

        &_summary {
            padding-left: @globalSpacing * 0.4;
            padding-right: @globalSpacing * 0.4;
            padding-top: @globalSpacing * 0.8;
            align-self: flex-end;
            max-width: fit-content;
            align-items: baseline;
            border-top: 1px solid @neutralColors200;
        }
    }

    &__value {
        text-align: right;
        flex: 0 1 60%;

        &_secondary {
            flex: 1;
        }
    }
}