Continuamos donde lo dejamos en el Video # 034 y continuamos construyendo el área de búsqueda.
Esta vez nos enfocamos en el estado "abierto" de la búsqueda, construyendo los elementos de forma reales en sí mismos. El campo de búsqueda en sí usa el tipo de elemento de formulario HTML5 "buscar", que generalmente tiene un estilo personalizado asociado, pero debido a que estamos usando Normalizar (Video # 011), eso no es un problema para nosotros.
Creamos un nuevo bit modular de CSS (_buttons.scss) para nuestro propio uso en los botones de estilo en todo el sitio. ¿Ves lo que estamos haciendo ahí? Cualquier estilo que tenga sentido mentalmente para estar aislado, creamos un nuevo archivo para. Podemos hacer esto tanto como queramos sin preocuparnos, porque los archivos se concatenan todos junto con Sass de todos modos.
El aspecto del botón tridimensional se crea solo con un montón de sombras de cuadro separadas por comas. Los colores son fáciles de cambiar, porque usa (¡lo adivinaste!) Variables.
$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; )Hacemos eco de ese mismo estilo en el elemento de entrada (solo en el interior en lugar de en el exterior), completando el aspecto 3D. La cantidad de sombras que se compensan coincide con nuestra variable $ offset, lo que genera cierta coherencia en el diseño.
No en este video, pero más adelante, descubrimos que las sombras internas en las entradas son mucho más fáciles de hacer con solo dos bordes en lugar de todas las sombras (los bordes se encuentran en un ángulo). Desafortunadamente, no es posible en el botón.
Este estilo de entrada insertada termina impregnando todos los estilos de entrada en todo el sitio, para bien o para mal.