<!-- 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;
}

$('.control').click( function(){
  $('body').addClass('search-active');
  $('.input-search').focus();
});

$('.icon-close').click( function(){
  $('body').removeClass('search-active');
});