#036: Building Search, Part 2

We pick up where we left off in Video #034 and continue building out the search area.

This time we’re focusing on the “open” state of the search, building the actual form elements themselves. The search field itself uses the HTML5 form element type “search” – which usually has some custom styling associated with it, but because we’re using Normalize (Video #011), that’s not a problem for us.

We create a new modular bit of CSS (_buttons.scss) for our own use in styling buttons across the site. See what we’re doing there? Any bit of styling that mentally makes sense to be isolated, we create a new file for. We can do this as much as we like without worry, because the files get all concatenated together with Sass anyway.

The three-dimensional button look is created just by a whole bunch of comma-separated box shadows. The colors are easy to change, because use (you guessed it!) 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;
}

We echo that same styling in the input element (only on the inside rather than the outside), completing the 3D look. The amount the shadows are offset match our $offset variable, leading to some design consistency.

Not in this video, but later on, we figure out that the inner shadows on the inputs is a lot easier to do with just two borders instead of all the shadows (border meet each other at an angle). Not possible on the button unfortunately.

This inset-input style ends up permeating all input styles across the site, for better or worse.