Google inbox.markdown

Google inbox

Google Inbox animation

Forked from Vineeth.TR's Pen Google inbox.

Forked from Vineeth.TR's Pen Google inbox.

Forked from Vineeth.TR's Pen Google inbox.

Forked from Vineeth.TR's Pen Google inbox.

A Pen by Wilfred on CodePen.

License.

index.html

.inbox
  .cover
  .envelope
  .check

script.js

//Not Required
alsolike(
  "QbqMXE", "Toggle Buttons",
  "VYRzaV", "Open Close",
  "BNYLKJ", "css Spinner"
);

scripts

<script src="http://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "compass";

*, *:after, *:before{
  @include box-sizing(border-box);
}

.inbox{
  width: 300px;
  @include border-radius(15px);
  margin: auto;
  position: relative;
  height: 330px ;
  overflow: hidden;
  cursor: pointer;
  z-index: 200;
  &:hover{
    .cover{
      @include rotateX(0deg); z-index: 2;
      @include transition(all .3s);
    }
    .check{
      top:10px; 
      opacity: 1;
       @include transition(all .3s .2s);
    }
  }
}
.envelope{
  width: 100%;
  height: 200px;
  background: #3E71DA;
   position: absolute;
  bottom: 0;
  &:after , &:before{
    content: '';
    position: absolute;
    bottom: 0;
    border-style: solid;
    z-index: 4;
  }
  &:after{
    right: 0;
    border-color:transparent #96DDFC;
    border-width: 200px 285px 0px 0px;
  }
  &:before{
    left: 0;
    border-color:transparent #36BBF7;
    border-width: 200px 0px 0px 285px;
  }
}
.cover{
  background: #3760C9;
  width: 300px;
  height: 20px;
  position:absolute;
  top:110px;
  z-index: 15;
  @include animation(2s open 2 alternate);
  @include border-radius(15px 15px 0 0 );
  @include transform-origin(50% , 100% );
  @include rotateX(180deg);
  @include transition(all .3s .2s);
  &:after{
    content: '';
    position: absolute;
    border:147px solid transparent;
    border-bottom:110px solid #3760C9 ;
    @include border-radius(15px );
    bottom: 15px;
    left: 3px;
  }
}

.check{
  width: 80px;
  height: 150px;
  border-bottom:30px solid #E5E5E5;
  border-right:30px solid #E5E5E5;
  @include rotate(45deg);
  position: absolute;
  left: 135px;
  top:150px;
  z-index: 3;
  opacity: 0;
  @include animation(1s move 1s 2 alternate);
  @include transition(.3s);
}

@include keyframes(open){
  100%{@include rotateX(0deg); z-index: 2;}
}
@include keyframes(move){
  70% ,100%{top:10px; opacity: 1; }
}