Slide out search input in header
// Expose the search bar
$('.headerContent .searchContainer button').on('click', function(event) {
var theSearchInput = $(this).siblings('#siteSearch');
if(!$(theSearchInput).hasClass('searchExposed')) {
event.preventDefault();
$(theSearchInput).addClass('searchExposed');
$(theSearchInput).focus();
}
});
// Close the search bar if we click anywhere else
$(document).on('click', function(e) {
if(!$('.searchContainer').children().is(e.target)) {
$('#siteSearch').removeClass('searchExposed');
}
});
header .searchContainer #siteSearch {
width: 0;
transition: width $transition-duration $transition-curve;
&.searchExposed {
width: 260px;
}
}