Control¶

Use a control element to wrap a specific form control part. Like html control element, validation errors, label etc.

Examples¶

Storefront provides a predefined styling for a specific parts of form control elements:

label
control (like input, textarea, select)
errors
additional content

agreement

Helper

Field is required

HTML

<div class="control">
    <div class="control__label">
        <label for="agreement">
            agreement
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <div class="checkbox checkbox_error">
                <div class="checkbox__control">
                    <input
                        class="checkbox__input"
                        type="checkbox"
                        id="agreement"
                        name="agreement"
                        required>

                    <label
                        class="checkbox__label"
                        for="agreement"></label>
                </div>

                <div class="checkbox__content">
                    <label
                        class="label"
                        for="agreement">agreement</label>
                </div>
            </div>
        </div>
    </div>

    <div class="control__additional-content control__additional-content_type_text">
        helper
    </div>

    <div class="control__errors">
        <ul>
            <li>Field is required</li>
        </ul>
    </div>
</div>

Control tags¶

The .control class as well as other sub-elements classes, like .control__content, .control__element and so on where designed to be used with div element, but you can freely use other tags.

Control with label¶

firstname

HTML

<div class="control">
    <div class="control__label">
        <label for="firstname">
            firstname
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <label 
                class="input" 
                for="firstname">
                    <input
                        class="input__control"
                        type="text"
                        id="firstname"
                        name="firstname"
                    />
            </label>
        </div>
    </div>
</div>

Control with additional content¶

firstname

helper

HTML

<div class="control">
    <div class="control__label">
        <label for="firstname">
            firstname
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <label 
                class="input" 
                for="firstname">
                    <input
                        class="input__control"
                        type="text"
                        id="firstname"
                        name="firstname"
                    />
            </label>
        </div>
    </div>

    <div class="control__additional-content control__additional-content_type_text">
        helper
    </div>
</div>

Control with errors¶

agreement

Field is required

HTML

<div class="control">
    <div class="control__label">
        <label for="agreement">
            agreement
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <div class="checkbox checkbox_error">
                <div class="checkbox__control">
                    <input
                        class="checkbox__input"
                        type="checkbox"
                        id="agreement"
                        name="agreement"
                        required>

                    <label
                        class="checkbox__label"
                        for="agreement"></label>
                </div>

                <div class="checkbox__content">
                    <label
                        class="label"
                        for="agreement">agreement</label>
                </div>
            </div>
        </div>
    </div>

    <div class="control__errors">
        <ul>
            <li>Field is required</li>
        </ul>
    </div>
</div>

Separate control width¶

firstname

HTML

<div class="control">
    <div class="control__label">
        <label for="firstname">
            firstname
        </label>
    </div>

    <div class="control__content">
        <div class="control__element control__element_half">
            <label 
                class="input"
                for="firstname">
                    <input
                        class="input__control"
                        type="text"
                        id="firstname"
                        name="firstname"
                    />
            </label>
        </div>

        <div class="control__element control__element_half">
            <label 
                class="input"
                for="lastname">
                    <input
                        class="input__control"
                        type="text"
                        id="lastname"
                        name="lastname"
                    />
            </label>
        </div>
    </div>
</div>

LESS¶

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

Checkboxes variables¶

Variables used to style control.

@controlColor: @primaryColor;
@controlBgcolor: inherit;
@controlSpacing: 16;

@controlDisabledColor: @neutralColors300;
@controlDisabledBgColor: @neutralColors300;
@controlDisabledBorderColor: @neutralColors100;

@controlBorderColor: @neutralColors400;
@controlBorderRadius: @globalBorderRadius;

@controlLabelMarginBottom: 4;

@controlAdditionalContentMarginTop: 4;
@controlAdditionalTextContentFontSizeInPxXs: @fontSizeInPxXS;
@controlAdditionalTextContentColor: @globalFontColorSecondary;
@controlAdditionalContentBorder: 1px solid @neutralColors200;
@controlAdditionalContentBorderPaddingLeft: 23;
@controlAdditionalContentBorderMarginLeft: 10;

@controlElementFullWidth: 100%;
@controlElementThreeQuartersWidth: @controlElementFullWidth * 0.75;
@controlElementHafWidth: @controlElementFullWidth * 0.5;
@controlElementQuarterWidth: @controlElementFullWidth * 0.25;
@controlElementFlexGap: @globalSpacing;

@controlErrorColor: @errorColors500;
@controlErrorBorderColor: @errorColors500;
@controlErrorFontSizeInPxXs: @fontSizeInPxXS;
@controlErrorLineHeightInPxXs: @lineHeightInPxXS;
@controlErrorsMarginTop: 4;

@controlRadioBoxGap: 8px;

Checkboxes styles¶

Standard control styles.

.control {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;

    &_row {
        flex-direction: row;
        column-gap: @globalSpacing;
    }

    &:not(:last-child) {
        .margin-bottom-to-unit(@controlSpacing);
    }

    &_no-margin {
        &:not(:last-child) {
            margin-bottom: 0;
        }
    }

    &__label {
        display: flex;
        align-items: center;

        .margin-bottom-to-unit(@controlLabelMarginBottom);
    }

    &__content {
        display: flex;
        max-width: 100%;

        &_auto {
            width: auto;
        }
    }

    &__additional-content {
        .margin-top-to-unit(@controlAdditionalContentMarginTop);

        &_type {
            &-text {
                color: @controlAdditionalTextContentColor;

                .font-size(@controlAdditionalTextContentFontSizeInPxXs);
            }
        }

        &_with-indent {
            margin-left: calc(~"@{checkboxSize} + @{checkboxGutter}");
        }

        &_with-border {
            border-left: @controlAdditionalContentBorder;

            .pixel-to-rem(padding-left, @controlAdditionalContentBorderPaddingLeft);
            .pixel-to-rem(margin-left, @controlAdditionalContentBorderMarginLeft);
        }
    }

    &__element {
        flex-basis: @controlElementFullWidth;
        width: @controlElementFullWidth;

        &_auto {
            flex-basis: auto;
        }

        &_full {
            flex-basis: @controlElementFullWidth;
            width: @controlElementFullWidth;
        }

        &_three-quarters {
            flex-basis: @controlElementThreeQuartersWidth;
            width: @controlElementThreeQuartersWidth;
        }

        &_half {
            flex-basis: @controlElementHafWidth;
            width: @controlElementHafWidth;
        }

        &_quarter {
            flex-basis: @controlElementQuarterWidth;
            width: @controlElementQuarterWidth;

            @media screen and (max-width: @breakPointXs) {
                flex-basis: @controlElementHafWidth;
                width: @controlElementHafWidth;
            }
        }

        &_flex {
            display: flex;
            gap: @controlElementFlexGap;
        }

        &_radio-box {
            display: flex;
            flex-wrap: wrap;
            flex-basis: auto;
            gap: @controlRadioBoxGap;

            .control {
                width: auto;
                margin-bottom: 0;
            }
        }
    }

    &__errors {
        color: @controlErrorColor;

        .font-size(@controlErrorFontSizeInPxXs);
        .margin-top-to-unit(@controlErrorsMarginTop);
        .line-height(@controlErrorLineHeightInPxXs);
    }
}