<div class="panel">
  <div class="panel-header">
    <input id="search" class="search-box" type="text" placeholder="Search">
    <label class="search-label" for="search"></label>
  </div>
  <div class="panel-body"></div>
</div>

@import "compass/css3";
*, *:after, *:before{
  @include box-sizing(border-box);
}
body{
  background-color: #ececec;
@include filter-gradient(#ececec, #ececec, vertical);
@include background-image(linear-gradient(top, #ececec 0%,#e7e7e7 50%,#ececec 100%));
  font-family:arial;
}

@function shadow($color) {
  $val: 0px 0px $color;
  $i: 15px;
  @while $i < 225 {
    $val: #{$val}, #{$i} #{-$i} #{$color};
      $i: $i + 15;
  }
  @return $val;
}

.panel{
  width: 320px;
  margin: 50px auto;
}
.panel-header{
  background: #2C56FF;
  height: 60px;
  position: relative;
  padding: 15px;
  z-index: 5;
  @include box-shadow(0 3px 3px #ccc);
}
.panel-body{
  background: #fff;
  height: 150px;
  position: relative;
  &:after{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    left: 4px;
    bottom: -8px;
    background: #fff;
    color: #fff;
    @include rotate(45deg);
    @include box-shadow((shadow(#fff)));
  }  
}
  .search-box{
    border:none;
    background: none;
    width: 20px;
    height: 20px;
    padding: 0;
    color: rgba(0,0,0,0);
    @include input-placeholder {
       color: rgba(0,0,0,0);
    }
    @include box-shadow(0 0 0 2px #fff inset);
    @include  border-radius(10px);
    @include transition(.3s);
    
     + .search-label{
      width: 3px;
      height: 13px;
      background: #fff;
      position: absolute;
      @include rotate(-45deg);
      @include  border-radius(10px);
      @include transition(.3s);
      bottom: 17px;
      left: 33px;
       
       &:after{
           content: '';
           position: absolute;
           background: rgba(255,255,255,.2);
           width: 10px;
           height: 10px;
           z-index: 5;
           opacity: 0;
          @include transition(.1s);
          @include  border-radius(100%);
        }
    }
    
    &:focus{background: rgba(0,0,0,.3);   
      width: 100%;
      color: #fff;
       @include input-placeholder {
       color: #fff;
        }
      outline: none;
      padding: 5px 15px;
      height: 30px;
      @include box-shadow(none);
      
      + .search-label{
         @include rotate(0deg);
        height: 15px;
        width: 2px;
        bottom: 22px;
        left: 30px;
        opacity: 0;
        &:after{
          @include scale(6);
          opacity: 1;
        }

      }
    }    
  }