<!-- page heading -->
<div class='container container-dark p-y-md'>
<div class='header-content'>
<h1>Material Search Animation</h1>
<h2>Usign CSS Transitions</h2>
</div>
</div>
<!-- page content + floating button -->
<div class='container p-y-md'>
<div class='control'>
<div class='btn-material'></div>
<i class='material-icons icon-material-search'>search</i>
</div>
<div id='h2'>by <a href="https://codepen.io/hone">Luca Dimola</a></div>
</div>
<!-- full screen form controls -->
<i class='icon-close material-icons'>close</i>
<div class='search-input'>
<input class='input-search' placeholder='Start Typing' type='text'>
</div>
$color-header: #22313F;
$color-button: #e91e63;
$color-placeholder: #EEE;
$btn-material-size: 60px;
html,
body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
body {
font-family: 'Roboto', sans-serif;
color: #2d2d2d;
letter-spacing: 0.2px;
/* Search Active */
&.search-active {
overflow: hidden;
.search-input {
opacity: 1;
transform: none;
pointer-events: all;
}
.icon-close {
opacity: 1;
transform: rotate(-90deg);
}
.control {
cursor: default;
.btn-material {
transform: scale(70);
}
.icon-material-search {
opacity: 0;
}
}
}
}
/* Close Icon */
.icon-close {
position: fixed;
top: 30px;
right: 30px;
color: #FFF;
cursor: pointer;
font-size: 70px;
opacity: 0;
transition: all 0.3s ease-in-out;
&:hover {
transform: rotate(0);
}
}
/* Search Input */
.search-input {
height: 80px;
position: absolute;
top: 50%;
left: 50px;
margin-top: -40px;
pointer-events: none;
opacity: 0;
transform: translate( 40px, 0);
transition: all 0.3s ease-in-out;
input {
color: #fff;
font-size: 54px;
border: 0;
background: transparent;
-webkit-appearance: none;
box-sizing: border-box;
outline: 0;
font-weight: 200;
}
::-webkit-input-placeholder {
color: $color-placeholder;
}
:-moz-placeholder {
color: $color-placeholder;
opacity: 1;
}
::-moz-placeholder {
color: $color-placeholder;
opacity: 1;
}
:-ms-input-placeholder {
color: $color-placeholder;
}
}
/* Container */
.container {
padding-right: 50px;
padding-left: 50px;
position: relative;
&.container-dark {
background: $color-header;
color: #FFF;
}
}
/* Control btn */
.control {
cursor: pointer;
.btn-material {
position: absolute;
top: -$btn-material-size/2;
width: $btn-material-size;
height: $btn-material-size;
right: $btn-material-size;
border-radius: 100%;
box-sizing: border-box;
background: $color-button;
outline: 0;
transform-origin: 50%;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
&:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
}
.icon-material-search {
color: #FFF;
position: absolute;
top: -10px;
right: 48px + $btn-material-size/2;
transition: opacity 0.3s ease-in-out;
}
}
/* Utilities */
.p-y-md {
padding-top: 2.8rem;
padding-bottom: 2.8rem;
}
/* Typo */
h1,
h2 {
font-weight: 300;
}
View Compiled