%link{:rel => "stylesheet", :href => "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css", :type => "text/css"}

.container
	%h1 Go on, click me!
	.search-box-container
		%button.submit
			%i.fa.fa-search	
		%input.search-box
	%h3.response
View Compiled
$bgcolor = #FFECB3
$border = 3px solid #F44336

translateVert()
	-moz-transform: translateY(arguments);
	-webkit-transform: translateY(arguments);
	-o-transform: translateY(arguments);
	-ms-transform: translateY(arguments);
	transform: translateY(arguments);
	
rotate_()
	-moz-transform: rotate(arguments);
	-webkit-transform: rotate(arguments);
	-o-transform: rotate(arguments);
	-ms-transform: rotate(arguments);
	transform: rotate(arguments);

html, body
	width 100%
	height 100%
	margin 0
	padding 0
	
body
	background-color $bgcolor
	overflow hidden
	
*
	box-sizing border-box
	
.container
	display block
	position absolute
	text-align center
	width 100%
	top 50%
	padding 50px 0
	translateVert(-50%)
	background-color rgba(211, 45, 45, 0.2)
	
.container:before
	content ''
	display block
	position absolute
	width 150%
	height 100%
	top 0
	left -25%
	rotate_ -3deg
	z-index -1
	background-color rgba(244, 67, 54, 0.15)
	
h1
	font-family "Lato"
	font-size 1.3em
	color white
	letter-spacing 1px
	margin-bottom 50px
	
h3
	display block
	height 19px
	margin-top 30px
	font-family "Lato"
	font-size 1em
	color white
	opacity 0
	
.search-box-container
	display inline-block
	box-sizing content-box
	height 50px
	width 50px
	padding 0
	background-color white
	border $border
	border-radius ((@height + 6) / 2)
	overflow hidden
	
.search-box-container *
	display inline-block
	margin 0
	height 100%
	padding 5px
	border 0
	outline none
	
.search-box
	width calc(100% - 50px)
	padding 0 20px
	float left
	font-family "Lato"
	font-size 1em
	color #212121
	background-color white
	
.submit
	float right
	width 50px
	left 0
	top 0
	font-size 1.2em
	text-align center
	cursor pointer
	background-color white
	
.fa
	display inline !important
	line-height 100%
	pointer-event none
	color #D32F2F
View Compiled
$.fn.toggleState = function(b) {
	$(this).stop().animate({
		width: b ? "300px" : "50px"
	}, 600, "easeOutElastic" );
}

$(document).ready(function() {
	var container = $(".container");
	var boxContainer = $(".search-box-container");
	var submit = $(".submit");
	var searchBox = $(".search-box");
	var response = $(".response");
	var isOpen = false;
	submit.on("mousedown", function(e) {
		e.preventDefault();
		boxContainer.toggleState(!isOpen);
		isOpen = !isOpen;
		if(!isOpen) {
			handleRequest();
		} else {
			searchBox.focus();
		}	
	});
	searchBox.keypress(function(e) {
		if(e.which === 13) {
			boxContainer.toggleState(false);
			isOpen = false;
			handleRequest();
		}
	});
	searchBox.blur(function() {
		boxContainer.toggleState(false);
		isOpen = false;
	});
	function handleRequest() {
		// You could do an ajax request here...
		var value = searchBox.val();
		searchBox.val('');
		if(value.length > 0) {
			response.text(('Searching for "' + value + '" . . .'));
			response.animate({
				opacity: 1
			}, 300).delay(2000).animate({
				opacity: 0
			}, 300);
		}
	}
});

External CSS

  1. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js