Skip to content

Product Quantity And Availability

Styles for a product quantity and availability used in product_quantity_and_availability module.

Structurally .product-quantity-and-availability, .product-quantity and .product-availability are three separate classes. However only .product-availability contains inner elements that are:

  • .product-availability__image-and-description
  • .product-availability__image
  • .product-availability__description

It also contains following class modifiers:

  • .product-availability__description_flex
  • .product-availability__description_unavailable
  • .product-availability__description_available

Example

Here is an example of product quantity and availability element usage. We also used h-input-stepper webcomponent along with it's styles as well as button icon and icon styles for presentation purposes.

HTML
<div class="product-quantity-and-availability">
    <div class="product-quantity">
        <h-input-stepper allow-fractions class="input-stepper" min="0" step="1" value="0" control-id="product-quantity-{{ moduleInstance }}">
            <h-button-stepper class="input-stepper__button" step="-1">
                <span class="btn-icon btn-icon_outline btn-icon_join-right input-stepper__icon">
                    <svg class="icon input-stepper__icon_attributes" aria-label="Example icon">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-minus"></use>
                    </svg>
                </span>
            </h-button-stepper>

            <h-display-stepper class="input-stepper__value"></h-display-stepper>
            <span class="input-stepper__additional-content">zestaw</span>

            <h-button-stepper class="input-stepper__button input-stepper_increment" step="1">
                <span class="btn-icon btn-icon_outline btn-icon_join-left input-stepper__icon">
                    <svg class="icon input-stepper__icon_attributes" aria-label="Example icon">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-plus"></use>
                    </svg>
                </span>
            </h-button-stepper>
        </h-input-stepper>
    </div>

    <product-availability class="product-availability">
        <span>Availability: </span>
        <div class="product-availability__image-and-description">
            <strong>In stock</strong>
        </div>
    </product-availability>
</div>

Product Quantity And Availability tags

The .product-quantity-and-availability 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 quantity and availability less variable in your User Less section to change product quantity and availability styles.

Product Quantity And Availability styles

Here are standard product quantity and availability styles.

.product-availability {
    .pixel-to-rem(font-size, @productAvailabilityFontSize);
    color: @productAvailabilityColor;

    &_s {
        .size-xs()
    }

    &_flex {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: @productAvailabilityFlexGap;

        .product-availability__image-and-description {
            padding-top: 0;
        }

        .product-availability__description {
            &_unavailable {
                padding-top: 0;
            }
        }
    }

    &__image-and-description {
        display: flex;
        align-items: center;

        .pixel-to-rem(padding-top, @productAvailabilityImageAndDescriptionPaddingTop);
        .pixel-to-rem(max-height, @productAvailabilityImageAndDescriptionMaxHeight);
    }
    &__image {
        .pixel-to-rem(max-height, @productAvailabilityImageMaxHeight);
        .pixel-to-rem(margin-right, @productAvailabilityImageMarginRight);
    }

    &__description {
        &_unavailable {
            color: @productAvailabilityDescriptionUnavailableColor;

            .pixel-to-rem(padding-top, @productAvailabilityDescriptionPaddingTop);
        }
        &_available {
            .pixel-to-rem(padding-top, @productAvailabilityDescriptionPaddingTop);
        }
    }
}

.product-quantity {
    display: flex;
    .font-size(@productQuantityFontSize);
    .line-height(@productQuantityLineHeight);

    &__input {
        background-color: @productQuantityInputBgColor;
        border-radius: @productQuantityInputBorderRadius;
    }
}

Webcomponents reference

Styles reference