%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);
}
}
});