Мы продолжаем с того места, где остановились на видео № 034, и продолжаем расширять зону поиска.
На этот раз мы сосредотачиваемся на «открытом» состоянии поиска, создавая сами элементы формы. Само поле поиска использует тип элемента формы HTML5 «поиск», с которым обычно связан какой-то настраиваемый стиль, но поскольку мы используем Нормализовать (видео № 011), это не проблема для нас.
Мы создаем новый модульный фрагмент CSS (_buttons.scss) для нашего собственного использования при стилизации кнопок на сайте. Видите, что мы там делаем? Для любого стиля, который мысленно имеет смысл изолировать, мы создаем новый файл. Мы можем делать это сколько угодно, не беспокоясь, потому что все файлы в любом случае объединяются вместе с Sass.
Трехмерный вид кнопки создается просто целым набором теней, разделенных запятыми. Цвета легко менять, потому что используются (как вы уже догадались!) Переменные.
$bottomSide: #3852b1; $rightSide: #203891; .button, #rcp_submit ( border: 0; // kill default styling background: #4e68c7; box-shadow: // right side // bottom 1px 0px 1px $rightSide, 0px 1px 1px $bottomSide, 2px 1px 1px $rightSide, 1px 2px 1px $bottomSide, 3px 2px 1px $rightSide, 2px 3px 1px $bottomSide, 4px 3px 1px $rightSide, 3px 4px 1px $bottomSide, 5px 4px 1px $rightSide, 4px 5px 1px $bottomSide, 6px 5px 1px $rightSide; )Мы повторяем тот же стиль во входном элементе (только внутри, а не снаружи), завершая трехмерный вид. Величина смещения теней соответствует нашей переменной $ offset, что приводит к некоторой согласованности дизайна.
Не в этом видео, но позже мы выясним, что внутренние тени на входах намного проще сделать с помощью двух границ вместо всех теней (границы пересекаются друг с другом под углом). К сожалению, на кнопке это невозможно.
Этот стиль ввода-вставки в конечном итоге пронизывает все стили ввода на сайте, хорошо это или плохо.