Skip to content

Introduction

This document provides information about styles related only to h-input-stepper component. The icon styles as well as buttons there are located in separated content and can be found under links: - For Icons - For Buttons

Input Stepper

Series of classes that are used to style a different html input stepper controls. The tree of classes for h-input-stepper component:

  • input-stepper

  • input-stepper_increment

  • input-stepper__button

  • input-stepper__icon
  • input-stepper__additional-content

  • input-stepper__icon_attributes

  • input-stepper__value

  • input-stepper__value_input

Almost all classes are visible on the markup below only one input-stepper__value_input is a part of HTML element rendered by h-display-stepper

HTML
<h-input-stepper class="input-stepper">
    <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-heart"></use>
            </svg>
        </span>
    </h-button-stepper>

    <h-display-stepper class="input-stepper__value"></h-display-stepper>
    <span class="input-stepper__additional-content">{{ product.unit.name }}</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-heart"></use>
            </svg>
        </span>
    </h-button-stepper>
</h-input-stepper>

LESS

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

inputs variables

Variables used to style inputs.

@inputStepperDisplayValueMaxWidth: 60;
@inputStepperDisplayValuePaddingVertical: 0;
@inputStepperDisplayValuePaddingHorizontal: 4;
@inputStepperDisplayValueInputWidth: 48;
@inputStepperDisplayValueInputMarginTop: 2;
@inputStepperDisplayValueInputBackgroundColor: @controlBgcolor;

@inputStepperAdditionalContentBorderColor: @neutralColors300;
@inputStepperAdditionalContentBorder: 1px solid @inputStepperAdditionalContentBorderColor;
@inputStepperAdditionalContentPaddingVertical: 0;
@inputStepperAdditionalContentPaddingHorizontal: 5;
@inputStepperAdditionalContentLineHeight: 38;
@inputStepperAdditionalContentHeight: 40;
@inputStepperAdditionalContentMaxWidth: 70;

@inputStepperDisplayContainerBgColor: inherit;

If you want to change an input_stepper styles, you can just change the variables. To change default height for displayed value just modify @inputStepperAdditionalContentHeight variable.

@inputStepperAdditionalContentHeight: 110px;

inputs styles

Standard inputs styles.

.input-stepper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    &__value {
        border-right: none;
        color: @productAmountFontColor;
        .pixel-to-rem(max-width, @inputStepperDisplayValueMaxWidth);

        &_input {
            text-align: center;
            -moz-appearance: textfield;

            .pixel-to-rem(margin-top, @inputStepperDisplayValueInputMarginTop);
            .pixel-to-rem(width, @inputStepperDisplayValueInputWidth);
            .padding-to-unit(
                @inputStepperDisplayValuePaddingVertical, 
                @inputStepperDisplayValuePaddingHorizontal,
                @inputStepperDisplayValuePaddingVertical, 
                @inputStepperDisplayValuePaddingHorizontal
            );

            background-color: @inputStepperDisplayValueInputBackgroundColor;

            &::-webkit-outer-spin-button {
                -webkit-appearance: none;
            }

            &::-webkit-inner-spin-button {
                -webkit-appearance: none;
            }
            &:focus {
                outline: none;
            }
        }
    }

    &__display-container {
        border: @inputStepperAdditionalContentBorder;
        background-color: @inputStepperDisplayContainerBgColor;
        display: flex;
        align-items: center;
    }

    &__additional-content {
        color: @productAmountFontColor;
        border-left: none;

        .pixel-to-rem(max-width, @inputStepperAdditionalContentMaxWidth);
        .padding-to-unit(
            0,
            @inputStepperAdditionalContentPaddingHorizontal,
            0,
            0
        );
    }
}

Webcomponents reference