<div style='display: flex; align-items: center; justify-content: center; height: 100vh; font-size: 3rem; text-align: center;'>
<a href="#" id="search-btn"></a>
</div>
<div class="container ">
<div id="morphsearch" class="morphsearch">
<form class="morphsearch-form" role="search" method="GET" action="{{ route('search') }}">
<input class="morphsearch-input" type="text" class="form-control" placeholder="Search" name="q" id="srch-term" />
<button class="morphsearch-submit" type="submit">Search</button>
</form>
<span class="morphsearch-close"></span>
</div>
<div class="overlay"></div>
</div>body {
background: url(http://thepatternlibrary.com/img/ax.jpg);
overflow: hidden;
}
.morphsearch {
width: 200px;
min-height: 40px;
background: #000;
position: absolute;
z-index: 10000;
top: 0;
right: 0;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transition-property: min-height, width, center, center;
transition-property: min-height, width, center, center;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
opacity: 0;
}
.morphsearch.open {
width: 100%;
min-height: 100%;
top: 0px;
right: 0px;
opacity: .93;
}
.morphsearch-form {
width: 100%;
height: 40px;
margin: 0 auto;
position: relative;
-webkit-transition-property: width, height, -webkit-transform;
transition-property: width, height, transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.morphsearch.open .morphsearch-form {
width: 80%;
height: 160px;
-webkit-transform: translate3d(0,3em,0);
transform: translate3d(0,3em,0);
}
.morphsearch-input {
width: 100%;
height: 100%;
padding: 0 10% 0 10px;
font-weight: 700;
border: none;
background: transparent;
font-size: 0.8em;
color: #FFF;
-webkit-transition: font-size 0.5s cubic-bezier(0.7,0,0.3,1);
transition: font-size 0.5s cubic-bezier(0.7,0,0.3,1);
}
.morphsearch-input::-ms-clear { /* remove cross in IE */
display: none;
}
.morphsearch.hideInput .morphsearch-input {
color: transparent;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.morphsearch.open .morphsearch-input {
font-size: 7em;
}
/* placeholder */
.morphsearch-input::-webkit-input-placeholder {
color: #FFF;
}
.morphsearch-input:-moz-placeholder {
color: #FFF;
}
.morphsearch-input::-moz-placeholder {
color: #FFF;
}
.morphsearch-input:-ms-input-placeholder {
color: #FFF;
}
/* hide placeholder when active in Chrome */
.gn-search:focus::-webkit-input-placeholder {
color: transparent;
}
input[type="search"] { /* reset normalize */
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.morphsearch-input:focus,
.morphsearch-submit:focus {
outline: none;
}
.morphsearch-submit {
position: absolute;
width: 80px;
height: 80px;
text-indent: 100px;
overflow: hidden;
right: 0;
top: 50%;
background: transparent url(../img/magnifier.svg) no-repeat center center;
background-size: 100%;
border: none;
pointer-events: none;
transform-origin: 50% 50%;
opacity: 0;
-webkit-transform: translate3d(-30px,-50%,0) scale3d(0,0,1);
transform: translate3d(-30px,-50%,0) scale3d(0,0,1);
}
.morphsearch.open .morphsearch-submit {
pointer-events: auto;
opacity: 1;
-webkit-transform: translate3d(-30px,-50%,0) scale3d(1,1,1);
transform: translate3d(-30px,-50%,0) scale3d(1,1,1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.morphsearch-close {
width: 36px;
height: 36px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 100%;
cursor: pointer;
pointer-events: none;
opacity: 0;
-webkit-transform: scale3d(0,0,1);
transform: scale3d(0,0,1);
}
.morphsearch.open .morphsearch-close {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.morphsearch-close::before,
.morphsearch-close::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
border-radius: 3px;
opacity: 0.5;
background: #FFF;
}
.morphsearch-close:hover.morphsearch-close::before,
.morphsearch-close:hover.morphsearch-close::after {
opacity: .8;
}
.morphsearch-close::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.morphsearch-close::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.morphsearch-content {
color: #FFF;
margin-top: 4.5em;
width: 100%;
height: 0;
overflow: hidden;
padding: 0 10.5%;
background: #f1f1f1;
position: absolute;
pointer-events: none;
opacity: 0;
}
.morphsearch.open .morphsearch-content {
opacity: 1;
height: auto;
overflow: visible; /* this breaks the transition of the children in FF: https://bugzilla.mozilla.org/show_bug.cgi?id=625289 */
pointer-events: auto;
-webkit-transition: opacity 0.3s 0.5s;
transition: opacity 0.3s 0.5s;
}
.dummy-column {
width: 30%;
padding: 0 0 6em;
float: left;
opacity: 0;
-webkit-transform: translate3d(0,100px,0);
transform: translateY(100px);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
.morphsearch.open .dummy-column:first-child {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.morphsearch.open .dummy-column:nth-child(2) {
-webkit-transition-delay: 0.45s;
transition-delay: 0.45s;
}
.morphsearch.open .dummy-column:nth-child(3) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.morphsearch.open .dummy-column {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.dummy-column:nth-child(2) {
margin: 0 5%;
}
.dummy-column h2 {
font-size: 1em;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 800;
color: #c2c2c2;
padding: 0.5em 0;
}
.round {
border-radius: 50%;
}
.dummy-media-object {
padding: 0.75em;
display: block;
margin: 0.3em 0;
cursor: pointer;
border-radius: 5px;
background: rgba(118,117,128,0.05);
}
.dummy-media-object:hover,
.dummy-media-object:focus {
background: rgba(118,117,128,0.1);
}
.dummy-media-object img {
display: inline-block;
width: 50px;
margin: 0 10px 0 0;
vertical-align: middle;
}
.dummy-media-object h3 {
vertical-align: middle;
font-size: 0.85em;
display: inline-block;
font-weight: 700;
margin: 0 0 0 0;
width: calc(100% - 70px);
color: rgba(145,145,145,0.7);
}
.dummy-media-object:hover h3 {
color: rgba(236,90,98,1);
}
/* Overlay */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.morphsearch.open ~ .overlay {
opacity: 0;
}
@media screen and (max-width: 53.125em) {
.morphsearch-input {
padding: 0 25% 0 10px;
}
.morphsearch.open .morphsearch-input {
font-size: 2em;
}
.dummy-column {
float: none;
width: auto;
padding: 0 0 2em;
}
.dummy-column:nth-child(2) {
margin: 0;
}
.morphsearch.open .morphsearch-submit {
-webkit-transform: translate3d(0,-50%,0) scale3d(0.5,0.5,1);
transform: translate3d(0,-50%,0) scale3d(0.5,0.5,1);
}
}
@media screen and (max-width: 60.625em) {
.morphsearch {
width: 80%;
top: 10%;
right: 10%;
}
}
#search-btn {
background: white url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIiB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIGlua3NjYXBlOnZlcnNpb249IjAuOTEgcjEzNzI1IiBzb2RpcG9kaTpkb2NuYW1lPSIzMi5zdmciPgogIDxkZWZzIGlkPSJkZWZzNCI+PC9kZWZzPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcgaWQ9ImJhc2UiIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgYm9yZGVyY29sb3I9IiM2NjY2NjYiIGJvcmRlcm9wYWNpdHk9IjEuMCIgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgaW5rc2NhcGU6em9vbT0iMTEuMzEzNzA5IiBpbmtzY2FwZTpjeD0iLTIuNDk2NTU2OCIgaW5rc2NhcGU6Y3k9IjE4Ljk0OTg0OCIgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9InB4IiBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJsYXllcjEiIHNob3dncmlkPSJ0cnVlIiB1bml0cz0icHgiIGlua3NjYXBlOnNuYXAtYmJveD0idHJ1ZSIgaW5rc2NhcGU6YmJveC1ub2Rlcz0idHJ1ZSIgaW5rc2NhcGU6YmJveC1wYXRocz0idHJ1ZSIgaW5rc2NhcGU6c25hcC1iYm94LWVkZ2UtbWlkcG9pbnRzPSJ0cnVlIiBpbmtzY2FwZTpzbmFwLWJib3gtbWlkcG9pbnRzPSJ0cnVlIiBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEzNjYiIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjcxNSIgaW5rc2NhcGU6d2luZG93LXg9Ii04IiBpbmtzY2FwZTp3aW5kb3cteT0iLTgiIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiPgogICAgPGlua3NjYXBlOmdyaWQgdHlwZT0ieHlncmlkIiBpZD0iZ3JpZDMzNjYiPjwvaW5rc2NhcGU6Z3JpZD4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICAKICA8ZyBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMTAyMC4zNjIyKSIgc3R5bGU9ImZpbGw6IHJnYig3MywgNzMsIDczKTsiPgogICAgPHBhdGggc3R5bGU9ImNvbG9yOiByZ2IoMCwgMCwgMCk7IGZvbnQtc3R5bGU6IG5vcm1hbDsgZm9udC12YXJpYW50LWxpZ2F0dXJlczogbm9ybWFsOyBmb250LXZhcmlhbnQtY2Fwczogbm9ybWFsOyBmb250LXdlaWdodDogbm9ybWFsOyBmb250LXN0cmV0Y2g6IG5vcm1hbDsgZm9udC1zaXplOiBtZWRpdW07IGxpbmUtaGVpZ2h0OiBub3JtYWw7IGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmOyB0ZXh0LWluZGVudDogMHB4OyB0ZXh0LWFsaWduOiBzdGFydDsgdGV4dC1kZWNvcmF0aW9uOiBub25lIHNvbGlkIHJnYigwLCAwLCAwKTsgbGV0dGVyLXNwYWNpbmc6IG5vcm1hbDsgd29yZC1zcGFjaW5nOiBub3JtYWw7IHRleHQtdHJhbnNmb3JtOiBub25lOyBkaXJlY3Rpb246IGx0cjsgd3JpdGluZy1tb2RlOiBsci10YjsgYmFzZWxpbmUtc2hpZnQ6IGJhc2VsaW5lOyB0ZXh0LWFuY2hvcjogc3RhcnQ7IHdoaXRlLXNwYWNlOiBub3JtYWw7IGNsaXAtcnVsZTogbm9uemVybzsgZGlzcGxheTogaW5saW5lOyBvdmVyZmxvdzogdmlzaWJsZTsgdmlzaWJpbGl0eTogdmlzaWJsZTsgb3BhY2l0eTogMTsgaXNvbGF0aW9uOiBhdXRvOyBtaXgtYmxlbmQtbW9kZTogbm9ybWFsOyBjb2xvci1pbnRlcnBvbGF0aW9uOiBzUkdCOyBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6IGxpbmVhclJHQjsgZmlsbDogcmdiKDczLCA3MywgNzMpOyBmaWxsLW9wYWNpdHk6IDE7IGZpbGwtcnVsZTogbm9uemVybzsgc3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbWl0ZXJsaW1pdDogNDsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IHN0cm9rZS1vcGFjaXR5OiAxOyBjb2xvci1yZW5kZXJpbmc6IGF1dG87IGltYWdlLXJlbmRlcmluZzogYXV0bzsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyB0ZXh0LXJlbmRlcmluZzogYXV0bzsiIGQ9Ik0gOCAyIEMgNi45MDA2NDI1IDIgNiAyLjkwMDcgNiA0IEwgNiAyOS4wMTU2MjUgQyA2IDMwLjExNTAyNSA2LjkwMDY0MjUgMzEuMDE1NjI1IDggMzEuMDE1NjI1IEwgMjIgMzEuMDE1NjI1IEMgMjMuMDk5MzU3IDMxLjAxNTYyNSAyNCAzMC4xMTUwMjUgMjQgMjkuMDE1NjI1IEwgMjQgMjIuODI4MTI1IEMgMjQuNDQxNzU4IDIyLjc1NTg5MyAyNC44Nzk4MSAyMi42NDQ3ODQgMjUuMzEwNTQ3IDIyLjQ5MDIzNCBMIDI5LjIxMjg5MSAyOS4yNSBDIDI5LjYyNDA0NSAyOS45NjIyIDMwLjU0OTUyNyAzMC4yMDk5MjggMzEuMjYxNzE5IDI5Ljc5ODgyOCBDIDMxLjk3MzkxMSAyOS4zODc2MjggMzIuMjIxNzMxIDI4LjQ2MjIgMzEuODEwNTQ3IDI3Ljc1IEwgMjcuODkwNjI1IDIwLjk1ODk4NCBBIDAuNTAwMDUgMC41MDAwNSAwIDAgMCAyNy44NzUgMjAuOTMzNTk0IEMgMzAuMzg1MDQ4IDE4LjYwNzM3OCAzMS4wNTkwMzcgMTQuNzczNTQ4IDI5LjI3NzM0NCAxMS42ODc1IEMgMjguMTExMDgxIDkuNjY3NTMzIDI2LjEzODc0MSA4LjQwNzMxNTMgMjQgOC4wNTI3MzQ0IEwgMjQgNCBDIDI0IDIuOTAwNyAyMy4wOTkzNTcgMiAyMiAyIEwgOCAyIHogTSA4IDMgTCAyMiAzIEMgMjIuNTYyNjYxIDMgMjMgMy40Mzc0IDIzIDQgTCAyMyA3Ljk1NTA3ODEgQyAyMi44NTk5ODIgNy45NTA4MzQ1IDIyLjcyMDUxMiA3LjkzNTgwNSAyMi41ODAwNzggNy45Mzk0NTMxIEMgMjIuMDUyMTE5IDcuOTUyOTg1OCAyMS41MjI3ODMgOC4wMzE5NDM5IDIxIDguMTYwMTU2MiBMIDIxIDUuNSBBIDAuNTAwMDUgMC41MDAwNSAwIDAgMCAyMC41IDUgTCA5LjUgNSBBIDAuNTAwMDUgMC41MDAwNSAwIDAgMCA5IDUuNSBMIDkgMjMuNSBBIDAuNTAwMDUgMC41MDAwNSAwIDAgMCA5LjUgMjQgTCAyMC41IDI0IEEgMC41MDAwNSAwLjUwMDA1IDAgMCAwIDIxIDIzLjUgTCAyMSAyMi43MTI4OTEgQyAyMS42NTE3MDEgMjIuODcyNTU5IDIyLjMyNDA3MyAyMi45NTAxODggMjMgMjIuOTMxNjQxIEwgMjMgMjkuMDE1NjI1IEMgMjMgMjkuNTc4MzI1IDIyLjU2MjY2MSAzMC4wMTU2MjUgMjIgMzAuMDE1NjI1IEwgOCAzMC4wMTU2MjUgQyA3LjQzNzMzOTUgMzAuMDE1NjI1IDcgMjkuNTc4MzI1IDcgMjkuMDE1NjI1IEwgNyA0IEMgNyAzLjQzNzQgNy40MzczMzk1IDMgOCAzIHogTSAxMCA2IEwgMjAgNiBMIDIwIDguNDc4NTE1NiBDIDE5LjY3MTM4NyA4LjYxMDMyNzYgMTkuMzQ2MzE2IDguNzYxNDI4NSAxOS4wMzEyNSA4Ljk0MzM1OTQgQyAxNS40NDk2NTIgMTEuMDExMjU5IDE0LjIxNzMwNCAxNS42MDU5IDE2LjI4NTE1NiAxOS4xODc1IEMgMTcuMTU5NzIxIDIwLjcwMjI5IDE4LjQ4ODg1NyAyMS43OTAxNyAyMCAyMi4zOTI1NzggTCAyMCAyMyBMIDEwIDIzIEwgMTAgNiB6IE0gMTEgOCBMIDExIDkgTCAxOCA5IEwgMTggOCBMIDExIDggeiBNIDIyLjYwNzQyMiA4LjkzNzUgQyAyNC45MTE0NjIgOC44Nzc1IDI3LjE3NDMyMyAxMC4wNDcgMjguNDEwMTU2IDEyLjE4NzUgQyAzMC4yMDc2NTIgMTUuMzAwOSAyOS4xNDQ2MzIgMTkuMjcwODU5IDI2LjAzMTI1IDIxLjA2ODM1OSBDIDIyLjkxNzg5OCAyMi44NjU4NTkgMTguOTQ5ODUzIDIxLjgwMDkgMTcuMTUyMzQ0IDE4LjY4NzUgQyAxNS4zNTQ4NDggMTUuNTc0MiAxNi40MTc4NjggMTEuNjA2MTk0IDE5LjUzMTI1IDkuODA4NTkzOCBDIDIwLjUwNDM0NyA5LjI0Njc5MzggMjEuNTYwNDc5IDguOTY0NCAyMi42MDc0MjIgOC45Mzc1IHogTSAxMSAxMC4wMzEyNSBMIDExIDExLjAzMTI1IEwgMTYgMTEuMDMxMjUgTCAxNiAxMC4wMzEyNSBMIDExIDEwLjAzMTI1IHogTSAyMi44ODQ3NjYgMTAuNDM1NTQ3IEMgMjIuNjQzMDUxIDEwLjQyOTk4NyAyMi40MDAwNTUgMTAuNDQyNzMxIDIyLjE1ODIwMyAxMC40NzI2NTYgTCAyMi4xNTYyNSAxMC40NzI2NTYgQyAyMS40OTc5MyAxMC41NTQ2NTYgMjAuODY2MDIzIDEwLjc5MzI1OSAyMC4yODEyNSAxMS4xMzA4NTkgQyAxNy44OTc5MzkgMTIuNTA2ODU5IDE3LjA2NDAyOSAxNS41NTE4IDE4LjQ0MTQwNiAxNy45Mzc1IEMgMTkuODE5MjIyIDIwLjMyNCAyMi44OTM3NDEgMjEuMTU1NzQ0IDI1LjI4MTI1IDE5Ljc3NzM0NCBDIDI3LjY2NzY4MiAxOC4zOTk0NDQgMjguNDk5NTE3IDE1LjMyNTEgMjcuMTIxMDk0IDEyLjkzNzUgQyAyNi4yMTYzOTEgMTEuMzcwNDYzIDI0LjU3Njc2NiAxMC40NzQ0NjQgMjIuODg0NzY2IDEwLjQzNTU0NyB6IE0gMjIuODYxMzI4IDExLjQzNzUgQyAyMi45MDc3ODcgMTEuNDM4NTM2IDIyLjk1MzY1MiAxMS40NDY1NzYgMjMgMTEuNDQ5MjE5IEwgMjMgMTkuNDIzODI4IEMgMjIuMzA3NTIyIDE5LjQ2MDU2IDIxLjYxNzgyNSAxOS4zMzAzMzEgMjEgMTkuMDIzNDM4IEwgMjEgMTEuODk0NTMxIEMgMjEuNDIyMzE5IDExLjY3ODAwNCAyMS44NTE2NzIgMTEuNTE5Nzk5IDIyLjI3OTI5NyAxMS40NjY3OTcgQSAwLjUwMDA0OTk3IDAuNTAwMDQ5OTcgMCAwIDAgMjIuMjgxMjUgMTEuNDY2Nzk3IEMgMjIuNDc0MzI0IDExLjQ0MjgzNCAyMi42NjgxNzEgMTEuNDMzMTkyIDIyLjg2MTMyOCAxMS40Mzc1IHogTSAyNCAxMS42MjY5NTMgQyAyNC45MTc2NiAxMS45MTkzMDEgMjUuNzM1ODg1IDEyLjU0MDI1MiAyNi4yNTM5MDYgMTMuNDM3NSBDIDI3LjM2MDM0OSAxNS4zNTQgMjYuNjk4NzMyIDE3LjgwNTAwOSAyNC43ODEyNSAxOC45MTIxMDkgQyAyNC41Mjg4NjcgMTkuMDU3ODE4IDI0LjI2NjU4MiAxOS4xNjg0MTMgMjQgMTkuMjUzOTA2IEwgMjQgMTEuNjI2OTUzIHogTSAxMSAxMi4wMTU2MjUgTCAxMSAxMy4wMTU2MjUgTCAxNSAxMy4wMTU2MjUgTCAxNSAxMi4wMTU2MjUgTCAxMSAxMi4wMTU2MjUgeiBNIDIwIDEyLjU5OTYwOSBMIDIwIDE4LjI5Njg3NSBDIDE5LjczOTg1IDE4LjA0Mzk2IDE5LjQ5ODkyNiAxNy43NjcxNzEgMTkuMzA4NTk0IDE3LjQzNzUgQyAxOC4zNzA5ODUgMTUuODEzNTM4IDE4LjcxMTYxMyAxMy44NDE1NzMgMjAgMTIuNTk5NjA5IHogTSAxMSAxNC4wNDY4NzUgTCAxMSAxNS4wNDY4NzUgTCAxMyAxNS4wNDY4NzUgTCAxMyAxNC4wNDY4NzUgTCAxMSAxNC4wNDY4NzUgeiBNIDExIDE2LjAxNTYyNSBMIDExIDE3LjAxNTYyNSBMIDE0IDE3LjAxNTYyNSBMIDE0IDE2LjAxNTYyNSBMIDExIDE2LjAxNTYyNSB6IE0gMjcuMDg3ODkxIDIxLjU3MjI2NiBMIDMwLjk0NTMxMiAyOC4yNSBDIDMxLjA4ODEzNCAyOC40OTc0IDMxLjAwOTA4MiAyOC43OTA3OTQgMzAuNzYxNzE5IDI4LjkzMzU5NCBDIDMwLjUxNDM1NSAyOS4wNzYzOTQgMzAuMjIyOTI4IDI4Ljk5NzYgMzAuMDgwMDc4IDI4Ljc1IEwgMjYuMjMyNDIyIDIyLjA4NTkzOCBDIDI2LjMzMTk5OSAyMi4wMzQyMTggMjYuNDMzMTIzIDIxLjk5MDI0OCAyNi41MzEyNSAyMS45MzM1OTQgQyAyNi43MjQ2MzEgMjEuODIxOTQ3IDI2LjkwODM1NiAyMS42OTgwOTkgMjcuMDg3ODkxIDIxLjU3MjI2NiB6IE0gMTUgMjUgQyAxMy45MDEzNTMgMjUgMTMgMjUuOTAxNCAxMyAyNyBDIDEzIDI4LjA5ODcgMTMuOTAxMzUzIDI5IDE1IDI5IEMgMTYuMDk4NjQ3IDI5IDE3IDI4LjA5ODcgMTcgMjcgQyAxNyAyNS45MDE0IDE2LjA5ODY0NyAyNSAxNSAyNSB6IE0gMTUgMjYgQyAxNS41NTgyMDcgMjYgMTYgMjYuNDQxOCAxNiAyNyBDIDE2IDI3LjU1ODIgMTUuNTU4MjA3IDI4IDE1IDI4IEMgMTQuNDQxNzkzIDI4IDE0IDI3LjU1ODIgMTQgMjcgQyAxNCAyNi40NDE4IDE0LjQ0MTc5MyAyNiAxNSAyNiB6ICIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwxMDIwLjM2MjIpIiBpZD0icmVjdDQ0MjkiPjwvcGF0aD4KICA8L2c+CgoJCgkKCTxtZXRhZGF0YT4KCQk8cmRmOnJkZiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnJkZnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvMDEvcmRmLXNjaGVtYSMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CgkJCTxyZGY6ZGVzY3JpcHRpb24gYWJvdXQ9Imh0dHBzOi8vaWNvbnNjb3V0LmNvbS9sZWdhbCNsaWNlbnNlcyIgZGM6dGl0bGU9Ik1vYmlsZSwgUGhvbmUsIERldmljZSwgU2VvLCBUb29sLCBPcHRpbWl6YXRpb24sIFNlYXJjaCIgZGM6ZGVzY3JpcHRpb249Ik1vYmlsZSwgUGhvbmUsIERldmljZSwgU2VvLCBUb29sLCBPcHRpbWl6YXRpb24sIFNlYXJjaCIgZGM6cHVibGlzaGVyPSJJY29uc2NvdXQiIGRjOmRhdGU9IjIwMTYtMTItMTQiIGRjOmZvcm1hdD0iaW1hZ2Uvc3ZnK3htbCIgZGM6bGFuZ3VhZ2U9ImVuIj4KCQkJCTxkYzpjcmVhdG9yPgoJCQkJCTxyZGY6YmFnPgoJCQkJCQk8cmRmOmxpPkplbWlzIE1hbGk8L3JkZjpsaT4KCQkJCQk8L3JkZjpiYWc+CgkJCQk8L2RjOmNyZWF0b3I+CgkJCTwvcmRmOmRlc2NyaXB0aW9uPgoJCTwvcmRmOnJkZj4KICAgIDwvbWV0YWRhdGE+PC9zdmc+) no-repeat center;
width: 50px;
height: 50px;
padding: 50px;
border-radius:100px;
box-shadow: 0 10px 150px rgba(0,0,0,.5);
}/*!
* classie - class helper functions
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
(function() {
var morphSearch = document.getElementById( 'morphsearch' ),
input = morphSearch.querySelector( 'input.morphsearch-input' ),
ctrlClose = morphSearch.querySelector( 'span.morphsearch-close' ),
searchBtn = document.getElementById( 'search-btn' ),
isOpen = isAnimating = false,
// show/hide search area
toggleSearch = function(evt) {
// return if open and the input gets focused
if( evt.type.toLowerCase() === 'focus' && isOpen ) return false;
var offsets = morphsearch.getBoundingClientRect();
if( isOpen ) {
classie.remove( morphSearch, 'open' );
// trick to hide input text once the search overlay closes
// todo: hardcoded times, should be done after transition ends
if( input.value !== '' ) {
setTimeout(function() {
classie.add( morphSearch, 'hideInput' );
setTimeout(function() {
classie.remove( morphSearch, 'hideInput' );
input.value = '';
}, 300 );
}, 500);
}
input.blur();
}
else {
classie.add( morphSearch, 'open' );
history.pushState("", document.title, window.location.pathname);
}
isOpen = !isOpen;
};
// events
input.addEventListener( 'focus', toggleSearch );
ctrlClose.addEventListener( 'click', toggleSearch );
searchBtn.addEventListener( 'focus', function(){ input.focus(); return false; } );
// esc key closes search overlay, keyboard navigation events
document.addEventListener( 'keydown', function( ev ) {
var keyCode = ev.keyCode || ev.which;
if( keyCode === 27 && isOpen ) {
toggleSearch(ev);
}
} );
/*for demo purposes only: don't allow to submit the form*/
//morphSearch.querySelector( 'button[type="submit"]' ).addEventListener( 'click', function(ev) { ev.preventDefault(); } );
})();
External CSS
This Pen doesn't use any external CSS resources.