Добавить анимацию строки поиска в главное меню

[cuprum]

Поведение такое:

• По клику на значке поиска показывать поисковое поле, фокусировать на нем курсор.
• При повторном клике на значке поле скрывать.
• Также скрывать поле, если фокус потерян (например, клик произошел в другом месте страницы)

[maxsite]

А за счет чего появляется анимация?

[cuprum]

@maxsite Ширина меняется.

[maxsite]

Это я вижу. :-) Какой код так делает?

[cuprum]

Прописано же для всех полей в forms.less transition: all linear 0.2s; Остальное делает js: добавляет-удаляет класс на форму, анимация работает.

Меня вот только смущает появление поля в мобильной версии ("смарты"). Может, пусть оно там будет всегда на виду?

Кстати, ты не думал подобрать другой вариант мобильного меню? Как по мне, через select как-то не очень...

[maxsite]

Ясно, а то я всю голову уже сломал. :-) С label здорово придумал — сразу фокус получается.

Со стилями надо разобраться. У тебя получается родительский (динамический) .slided-input и через него ты по сути и управляешь поведением вложенного input.my-search (через width в стилях). В таком варианте нужно прописывать правила для .f_search .my-search {} и .slided-input .my-search {}. А можно просто управлять видимостью .my-search, без дополнительного .slided-input? Смысл в общем-то просто отказаться от дополнительных стилей: сделать на уровне .visible без успользования свойства width.

По мобильной версии пока не думай. Мне кажется, что на планшетах и ниже поиск можно скрыть или сделать так чтобы была икока на ссылку отдельной страницы search.

[cuprum]

Со стилями надо разобраться. У тебя получается родительский (динамический) .slided-input и через него ты по сути и управляешь поведением вложенного input.my-search (через width в стилях). В таком варианте нужно прописывать правила для .f_search .my-search {} и .slided-input .my-search {}. А можно просто управлять видимостью .my-search, без дополнительного .slided-input?

Тут проблема в том, что для полей есть стили по-умолчанию в form.less. Если просто опираться на селектор .my-search, т. е. прописывать .my-search {...}, то дефолтные стили не перебить. Если только использовать несколько классов, наподобие БЭМ. В первоначальном варианте у поля будет, например .my-search.my-search--hidden. По клику к нему будет добавляться .my-search--visible. Этот класс будет отвечать за показ поля.

...сделать на уровне .visible без успользования свойства width.

Ты хочешь сделать показ поля именно на js, без использования css? А какой в этом смысл?

[maxsite]

Получилась какая-то солянка со стилями. У нас есть form.less (пусть остается) и my-template.less. Всё нужно делать в последнем. Вариант с БЭМ мне нравится больше — пусть будет лишний класс, и его можно описать в my-template.less, не вводя дополнительные сущности. Только определять не .my-search.my-search--hidden, а .my-search--hidden. Если так получится, то можно будет использовать предопределенные стили их хелперов unicss.

[cuprum]

Смотри. Нам надо описать первоначальное состояние поля, оно скрыто. Если это повесить на один класс типа

.my-search--hidden {
  padding-left: 0;
  padding-right: 0;
  width: 0;
}

то он не перебьет

input[type="search"] {
    padding: 4px 6px;
}

из form.less.
Варианты:

• Использовать два класса, как писал выше
• Использовать input[type="search"].my-search--hidden {}
• Использовать id. Задать более вменяемое, чем "sss" ))

[cuprum]

Не указал input.my-search--hidden. Но мы же вроде не используем элементы в селекторах...

[maxsite]

Вопрос же только в padding. У нас он задан с important. То есть будет так:

.my-search--hidden {
  .pad0-rl;
  .w0;
}

[cuprum]

Если так, то да. Давай я попробую внести изменения и обновить пулл-реквест. В top1.php останется только скрипт. Лишнее, что было (указывал там еще media-query) тоже уберу.

[maxsite]

Ок.