Product Shipping Prices¶
Styles for a product shipping prices used in product_shipping_prices module.
Structurally .product-shipping-prices contains one element:
.product-shipping-prices__shipping-info-price.product-shipping-prices__icon.product-shipping-prices__shipping-method-wrapper.product-shipping-prices__shipping-method.product-shipping-prices__shipping-info.product-shipping-prices__description
And following modifiers:
.product-shipping-prices__shipping-info_multiple-shippings.product-shipping-prices__shipping-info_single-shipping
Example¶
Here is an example of product shipping prices element usage.
HTML
<div class="product-shipping-prices">
<svg class="icon icon_xs product-shipping-prices__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-package"></use>
</svg>
<div class="product-shipping-prices__shipping-method-wrapper">
<span class="product-shipping-prices__shipping-method">Personal collect</span>
<span
class="
product-shipping-prices__shipping-info
product-shipping-prices__shipping-info_single-shipping
"
>
<strong class="product-shipping-prices__shipping-info-price">
Free
</strong>
</span>
<p class="product-shipping-prices__description p_xs color_secondary">
Collect at company's headquarters
</p>
</div>
</div>
Product Shipping Prices tags¶
The .product-shipping-prices 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 prices less variable in your User Less section to change a product shipping prices styles.
Product Shipping Prices variables¶
Variables used to style product shipping prices.
@productShippingPricesFontSize: @fontSizeInPxS;
@productShippingPricesLineHeight: @lineHeightInPxS;
@productShippingPricesIconMarginRight: @globalSpacing * 0.5;
@productShippingPricesModalShippingPadding: @globalSpacing * 0.25 @globalSpacing * 0.5;
@productShippingPricesModalShippingSecondaryBgColor: @neutralColors50;
@productShippingPricesModalShippingDetailsFontSize: @fontSizeInPxS;
@productShippingPricesModalShippingDetailsLineHeight: @lineHeightInPxS;
@productShippingPricesModalShippingDetailsFontWeight: @fontWeightSemibold;
@productShippingPricesModalShippingDetailsColor: @globalFontColor;
@productShippingPricesModalShippingPriceFontWeight: @fontWeightSemibold;
@productShippingPricesModalShippingPriceSecondaryColor: @secondaryColors500;
@productShippingPricesModalShippingDescriptionFontSize: @fontSizeInPxXS;
@productShippingPricesModalShippingDescriptionLineHeight: @lineHeightInPxXS;
@productShippingPricesModalShippingDescriptionColor: @globalFontColorSecondary;
@selectShippingPricesSelectWidth: 288px;
If you want to change product shipping prices styles, you can just change the variables. To change a default font-size just modify @productShippingPricesFontSize variable.
Product Shipping Prices styles¶
Here are standard product shipping prices styles.
.product-shipping-prices {
.font-size(@productShippingPricesFontSize);
.line-height(@productShippingPricesLineHeight);
display: flex;
align-items: center;
&__icon {
margin-right: @productShippingPricesIconMarginRight;
}
&-modal {
&__shipping {
padding: @productShippingPricesModalShippingPadding;
&_secondary {
background-color: @productShippingPricesModalShippingSecondaryBgColor;
}
&-details {
display: flex;
justify-content: space-between;
.font-size(@productShippingPricesModalShippingDetailsFontSize);
.line-height(@productShippingPricesModalShippingDetailsLineHeight);
color: @productShippingPricesModalShippingDetailsColor;
}
&-price {
font-weight: @productShippingPricesModalShippingPriceFontWeight;
&_secondary {
color: @productShippingPricesModalShippingPriceSecondaryColor;
}
}
&-description {
.font-size(@productShippingPricesModalShippingDescriptionFontSize);
.line-height(@productShippingPricesModalShippingDescriptionLineHeight);
color: @productShippingPricesModalShippingDescriptionColor;
}
}
}
}
.select-shipping-prices {
&__select {
max-width: 100%;
width: @selectShippingPricesSelectWidth;
}
}