Product Prices

Styles for a product prices used in product-prices module.

LESS

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

Product Prices variables

Variables used to style a product prices.

@productPriceRowFontSizeInPx: 14;
@productPriceRowLineHeightInPx: 20;
@productPriceRowSpacing: 17;
@productPriceRowInfoNotFirstOfTypeMarginTopInPx: 2;

@productPriceRowInfoColor: @globalFontColor;
@productPriceRowAlertColor: @secondaryColors500;

@productPriceRowFontSizeInPxMobile: 12;
@productPriceRowLineHeightInPxMobile: 20;
@productPriceRowInfoNotFirstOfTypeMarginTopInPxMobile: 4;

@productPriceRowSpacingMobile: 13;

Product Prices styles

Here are standard product prices styles.

.product-prices {
    display: flex;
    flex-direction: column;
    .pixel-to-rem(gap, @productPriceRowSpacing);

    &__header {
        display: flex;
        .pixel-to-rem(gap, @productPriceRowSpacing);
    }
}

@media screen and (max-width: @breakPointXs) {
    .product-prices {
        .pixel-to-rem(gap, @productPriceRowSpacingMobile);

        &__row {
            &_info {
                .font-size(@productPriceRowFontSizeInPxMobile);
                .line-height(@productPriceRowLineHeightInPxMobile);

                &-margin-top {
                    .pixel-to-rem(margin-top, @productPriceRowInfoNotFirstOfTypeMarginTopInPxMobile);
                }
            }

            &_alert {
                .font-size(@productPriceRowFontSizeInPxMobile);
                .line-height(@productPriceRowLineHeightInPxMobile);
            }
        }
    }
}