Product Shipping Time¶

Styles for a product shipping time used in product_shipping_time module.

Structurally .product-shipping-time contains one element:

.product-shipping-time__time

Example¶

Here is an example of product shipping time element usage.

HTML

<div class="product-shipping-time">
    <span class="product-shipping-time__time">4 days</span>
</div>

Product Shipping Time tags¶

The .product-shipping-time classes were designed to be used with block elements like <div>. However, you can use them with any other element and customize it to your own needs.

LESS¶

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

Product Shipping Time variables¶

Variables used to style a product shipping time.

@productShippingTimeFontSize: @fontSizeInPxS;
@productShippingTimeGap: 4;
@productShippingTimeTimeColor: @globalFontColor;

If you want to change product shipping time styles, you can just change the variables. To change a default font-size just modify @productShippingTimeFontSize variable.

@productShippingTimeFontSize: 20;

Product Shipping Time styles¶

Here are standard product shipping time styles.

.product-shipping-time {
    display: flex;
    align-items: center;

    .pixel-to-rem(gap, @productShippingTimeGap);

    .pixel-to-rem(font-size, @productShippingTimeFontSize);

    &__time {
        color: @productShippingTimeTimeColor;
    }
}

Modules reference¶

product_shipping_time