Search

Use search element to indicate a key value text element on a page. It is used in search module.

Structurally .search contains following elements:

• .search__desktop
• .search__mobile

Example

Here is an example of search element usage. We also use control, input and responsiveness styles here for presentation purposes.

HTML

    <div class="search__desktop hidden-xs-only hidden-sm-only hidden-md-only">
        <div class="control">
            <div class="control__content">
                <div class="control__element">
                    <label class="input input_with-button">
                        <input type="text" class="input__control" placeholder="Search...">
                        <button>Search</button>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="search__mobile hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only">
        <button>Search</button>
    </div>

Search tags

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

Search standard styles

Here are standard search styles.

.storefront-search {
    display: block;
    position: relative;

    .search__bar {
        display: none;

        grid-template-columns: @searchClearWidth @searchClearWidth 1fr @searchSubmitWidth;
        align-items: center;

        height: @searchInputHeight;
        box-shadow: 0px 1px 2px -1px #11131614;
        box-shadow: 0px 1px 3px 0px #11131614;

        .padding-all-to-unit(@searchPadding);
    }

    .search_mobile-opened {
        position: fixed;
        width: 100dvw;
        height: 100dvh;
        top: 0;
        left: 0;
        z-index: 5;
        border-radius: 0;
        background-color: white;

        .search__bar {
            display: grid;
        }

        .search__icon {
            display: none;
        }
    }

    .search {
        .font-size(@searchFontSize);
        .line-height(@searchLineHeight);

        &__close {
            display: flex;
            align-items: center;
            justify-content: center;

            height: 100%;

            .icon {
                stroke: @searchSubmitBackgroundColor;
            }
        }

        &__headline {
            color: @searchColorLight;
            padding: @searchPaddingVertical @searchPaddingHorizontal;

            .font-size(@searchFontSize);
            .line-height(@searchLineHeight);
        }

        &__clear {
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            width: 100%;

            .line-height(@searchLineHeight);
        }

        &__input {
            input {
                width: 100%;
                background-color: @searchInputBgColor;

                .font-size(@searchFontSize);

                &:focus {
                    outline: none;
                }

                &::-webkit-search-cancel-button {
                    display: none;
                }

                &::placeholder {
                    color: @globalFontColorTertiary;
                }
            }
        }

        &__submit {
            display: flex;
            align-items: center;
            justify-content: center;

            background-color: @searchSubmitBackgroundColor;
            border-radius: @searchSubmitBorderRadius;

            height: 100%;

            .icon {
                stroke: @searchIconColorLight;
            }
        }

        &__container {
            position: absolute;
            top: @searchContainerTop;
            left: 0;
            z-index: 3;

            padding: 0 @searchPaddingVertical @searchContainerTop;
            color: @searchColorDark;
            background-color: @neutralColors0;
            width: 100%;
            max-height: 100%;
            overflow-y: auto;

            .custom-scrollbar();
        }

        &__section {
            display: block;

            &:not(:last-child) {
                margin-bottom: @searchSectionMarginBottom;
            }
        }

        &__item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: @searchPaddingVertical @searchPaddingHorizontal;

            &_hoverable:hover {
                text-decoration: underline;
                cursor: pointer;
            }

            &_active {
                .weight-semibold();
                cursor: pointer;
            }
        }

        &__link {
            color: @searchColorDark;
            text-decoration: none;
            width: 100%;

            .line-height(@searchLineHeight);

            &_with-image {
                display: grid;
                grid-template-columns: @searchImageWidth 1fr;
                grid-gap: @searchLinkGap;
                text-decoration: none;
                color: @searchColorDark;
                width: 100%;
            }
        }

        &__message {
            color: @searchMessageColor;
            padding: @searchPaddingVertical @searchPaddingHorizontal;

            &-text {
                color: @searchMessageTextColor;
                text-decoration: none;
            }

            &_with-history {
                margin-bottom: @searchMessageMarginBottom;
            }

            &_no-results {
                padding: @searchPaddingVertical @searchPaddingHorizontal;
                margin: -@searchPaddingVertical 0;
                .weight-semibold();

                .search__message-text:hover {
                    cursor: pointer;
                }
            }
        }

        &__history {
            &-item-value:hover {
                text-decoration: underline;
                cursor: pointer;
            }

            &-load-more {
                display: block;
                margin-top: @searchHistoryMarginTop;
                color: @searchColorLight;
                text-decoration: underline;
                padding: 0 @searchPaddingHorizontal @searchPaddingVertical;

                .font-size(@searchFontSizeSmall);

                &:hover {
                    cursor: pointer;
                }
            }

            &-remove-icon {
                &:hover {
                    background-color: @searchHistoryRemoveIconColor;
                    border-radius: @searchHistoryRemoveIconBorderRadius;
                }

                .icon {
                    stroke: @searchColorLight;
                    margin: @searchHistoryRemoveIconMargin;
                }
            }

            &-select {
                display: flex;

                .icon {
                    margin-right: @searchHistorySelectIconMarginRight;
                    stroke: @searchHistoryIconColor;
                }
            }
        }

        &__category-title {
            .font-size(@searchFontSizeSmall);

            color: @searchColorLight;
        }

        &__product {
            &-icon {
                &-filled {
                    fill: @searchProductIconFilledColor;
                }

                &-empty {
                    fill: @searchProductIconEmptyColor;
                }
            }

            &-text {
                font-weight: @searchFontWeightSemibold;
                padding: @searchProductPaddingVertical 0;
            }

            &-button {
                color: @searchProductButtonColor;
                text-decoration: underline;
                padding: @searchPaddingVertical @searchPaddingHorizontal;

                .font-size(@searchFontSize);

                &:hover {
                    cursor: pointer;
                }
            }

            &-availability {
                .font-size(@searchFontSizeSmall);

                color: @searchColorNeutral;
            }

            &-price {
                &_basic {
                    text-decoration: line-through;
                }

                &_promotion {
                    display: flex;
                    align-items: center;
                    padding: @searchProductPaddingVertical 0;

                    .font-size(@searchFontSize);

                    font-weight: @searchFontWeightSemibold;

                    color: @searchProductPricePromotionColor;

                    &-icon {
                        display: inline-flex;
                        border-radius: @searchProductPricePromotionIconBorderRadius;
                        padding: @searchProductPricePromotionIconPadding;
                        margin-right: @searchProductPricePromotionIconMarginRight;
                        background-color: @searchProductPricePromotionColor;

                        .icon {
                            stroke: @neutralColors100;
                        }
                    }

                    &-percent {
                        color: @searchProductPercentPromotionColor;
                    }
                }

                &-info {
                    .font-size(@searchFontSizeSmall);

                    color: @searchColorLight;
                }

                &_regular {
                    .font-size(@searchFontSizeSmall);

                    color: @searchColorNeutral;
                }
            }
        }
    }

    @media screen and (min-width: @breakPointSm) {
        .search {
            &__bar {
                display: grid;
                grid-template-columns: @searchClearWidth 1fr @searchSubmitWidth;

                border-radius: @searchBorderRadius;
                border: @searchBorder;

                &:hover {
                    border: @searchBorderHover;
                }
            }

            &__icon,
            &__close {
                display: none;
            }

            &__container {
                padding: @searchPaddingVertical 0;
                border: @searchContainerBorder;
                border-radius: @searchBorderRadius;
                box-shadow: @searchContainerBoxShadow;
                max-height: @searchContainerMaxHeight;
            }

            .search_outline {
                border: @searchBorderHover;
                outline: @searchBorderOutline;
            }
        }
    }
}

Styles reference

• control
• input
• responsiveness

Modules reference

• search