Module «form-search». Часто используемая структура формы поиска для страниц поиска.

Source:

http://localhost:3000/components.html?tab=tab-forms

Демо:

Плагины:

Подключение:

//

Разметка:

//

<form action="#" class="form-search">
    <div class="form-search__row">
        <div class="form-search__left">
            <div class="input-default form-search__input">
                <input
                    type="text"
                    placeholder="Введите ваш запрос"
                />
            </div>
        </div>
        <div class="form-search__right">
            <button class="btn-default form-search__btn-search">
                Найти
            </button>
        </div>
    </div>
    <div class="form-search__tip">
        По запросу <span>“Наук”</span> найдено 515 запросов.
    </div>
</form>

Стили:

//

.form-search {
    &__row {
        display: flex;
        gap: 1.2rem;
    }

    &__left {
        flex-grow: 1;
    }

    &__right {
    }

    &__tip {
        margin-top: 2rem;
        font-size: 1.5rem;

        span {
            color: #0047ba;
            font-weight: 500;
        }
    }

    &__btn-search {
    }
}

@media (max-width: 999.98px) {
    .form-search {
        &__row {
        }

        &__left {
        }

        &__right {
        }

        &__tip {
            span {
            }
        }

        &__input {
            input {
                padding: 0 1.1rem;
                height: 4rem;
            }
        }

        &__btn-search {
            min-width: auto;
            padding: 0 2rem;
            height: 4rem;
        }
    }
}

Инициализация:

//