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
• .search__popup
• .search__popup-form

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 1fr @searchClearWidth @searchSubmitWidth;
    gap: @searchBarGap;
    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%;

        outline-offset: 0.25rem;

        .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: 1fr @searchClearWidth @searchSubmitWidth;

            border-radius: @searchBorderRadius;
            border: @searchBorder;
            .padding-left-to-unit(@searchPadding * 4);

            &:hover {
                border: @searchBorderHover;
            }
        }

        &__input {
            padding-left: @globalSpacing;
        }

        &__icon,
        &__close {
            display: none;
        }

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

        .search_outline {
            outline: 2px solid @searchOutlineColorFocus;
            outline-offset: 0.125rem;
        }
    }

    .storefront-search {
        &:not(.storefront-search_with-popup) {
            .search {
                &__icon,
                &__close {
                    display: none;
                }
            }
        }
    }
}

.search__popup {
    max-width: none;
    width: @searchPopupWidth;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);

    &-form {
        display: flex;
        flex-direction: column;
    }

    &-opener {
        float: right;
    }

    .search__container {
        position: unset;
        top: 0;
        box-shadow: none;
        border: none;
    }

    .search {
        position: relative;
    }

    .sheet__container {
        height: @searchPopupSheetContainerHeight;
    }
}

@media screen and (min-width: @breakPointSm) {
    .search__popup {
        &-form {
            margin-top: @searchPopupFormMarginTop;
        }
    }
}

Styles reference

• control
• input
• responsiveness

Modules reference

• search