// Section 1 - Notification

section.section-notification
  ul.nav
    li: i.material-icons home
    li: i.material-icons search
    li.is-active: i.material-icons star
      ul.notifications
        li
          i.material-icons remove_red_eye
          span 9
        li
          i.material-icons comment
          span 4
        li
          i.material-icons account_circle
          span 6
    li: i.material-icons face


// Section 2 - Alert

section.section-alert
  .website
    .title-block
      
      .title
        i.material-icons.site-icon face
        //span Obviously a website
        span Many faces of murray
        hr

    .grid
      - var i = 0;
      while (i++ < 16)
        .item

    .alert-element
      .icon
        i.material-icons notifications
      .text
        span You clicked a Murray!!
      
      
        
  
// Section 3 - Modal

section.section-modal
  .profile
    img(src="http://www.fillmurray.com/130/130")
    .text
      .name Bill Murray
      .meta Click me!

  .overlay
    .modal
      .title You clicked a Murray!
      .body
        .img(style="background-image: url(http://www.fillmurray.com/180/180)")
        .text 
          p Bill Murray loves you, and sends his most sincere regards.
          p He also asks that you simply keep on hacking.
      
   
  
  
  
  
  
  
  
  
  
  
  
  
  

.section-notification,
.section-alert
  //display: none

body
  font-family: 'Roboto', sans-serif
  margin: 50px
  -webkit-font-smoothing: antialiased

section
  background: #ebeaeb
  margin: 0px auto
  
  min-height: 90vh
  padding: 40px
  display: flex
  justify-content: center
  align-items: center
  margin-bottom: 50px

  
  
// Section - 1 - notification
.section-notification
  .nav
    display: flex
    background: #333
    color: white
    border-radius: 4px
    box-shadow: 0px 23px 30px -20px rgba(0,0,0,0.4)
 
  .nav > li
    padding: 20px 30px
    width: 24px
    height: 24px
    cursor: pointer
    color: rgba(255,255,255,0.6)
    position: relative
    transition: all 200ms ease-in-out
    perspective: 1000px

    &:last-child
      border-right: none
    
    &:hover
      background: #444
    
    &.is-active
      box-shadow: 0px -4px 0px #0097A7 inset
      background: #222
      color: rgba(255,255,255,1)
      
      .notifications
        display: flex
        animation: note 800ms ease-in-out forwards
        transform-origin: center 60px
        
        
        @keyframes note
          0%
            opacity: 0
            transform: scale(0.1) rotate(30deg) translateY(50px) rotateX(90deg)
          
          50%
            transform: rotate(-10deg) rotateX(-2deg)
            opacity: 1
          70%
            transform: rotate(3deg)
          
          100%
            
            transform: scale(1)
        

  .notifications
    background: #0097A7
    display: none
    border-radius: 4px
    position: absolute
    bottom: 100%
    left: 50%
    padding: 0px 10px
    margin-bottom: 10px
    margin-left: -95px
    cursor: default
    
    &:after
      top: 100%
      left: 50%
      border: solid transparent
      content: " "
      height: 0
      width: 0
      position: absolute
      pointer-events: none
      border-color: rgba(0, 151, 167, 0)
      border-top-color: #0097A7
      border-width: 16px
      margin-left: -16px
    
    li
      padding: 10px
      font-family: 'Roboto', sans-serif
      color: white
      font-size: 18px
      //height: 24px
      
      .material-icons
        font-size: 18px
      
      span
        display: inline-block
        vertical-align: top
        margin-left: 8px


  
  
  
  
  
  
  
  
// Section - 2 - Alerts
.section-alert
  //align-items: flex-start
  
  .website
    background: white
    width: 600px
    margin: 0 auto
    height: 560px
    box-shadow: 0px 23px 40px -20px rgba(0,0,0,0.4)
    overflow: hidden
    position: relative
    perspective: 1000px

  .title
    padding: 20px 10px 0
    font-size: 30px
    font-weight: 700
    text-transform: uppercase
    color: #444
    line-height: 48px
    letter-spacing: 0.1em
    

    .site-icon
      font-size: 48px
      margin-right: 8px
      vertical-align: middle
      display: inline-block
    
    hr
      border: none
      border-top: 1px solid #ccc
    
  .grid
    column-count: 4
    column-gap: 10px
    margin: 10px

  .item
    background: #ccc
    height: 60px
    margin-bottom: 10px
    display: inline-block
    width: 100%
    border-radius: 4px
    background:
      size: cover
      position: center
    opacity: 0.6
    transition: opacity 200ms ease
    
    &:hover
      opacity: 1
      cursor: pointer
    
    &:nth-child(4n-3)
      height: 80px
      
    &:nth-child(2n)
      height: 200px

    &:nth-child(3n)
      height: 100px
        
    @for $i from 1 through 30
      &:nth-child(#{$i})
        background-image: url(http://www.fillmurray.com/130/#{ 300 + ( $i * 2 ) })
  
  .alert-element
    position: absolute
    bottom: 30px
    left: 30px
    color: rgba(255,255,255,0.7)
    border-radius: 4px
    font-weight: 400
    display: flex
    align-items: stretch
    padding-right: 20px
    perspective: 1000px
    opacity: 0
    transform-origin: bottom left
    transform: rotate(90deg) scale(0.5) translate(100px, -300px) rotateX(90deg)
    transition: all 450ms cubic-bezier(0, 0.6, 0.35, 1.4)
    
    
    .icon
      padding: 20px
      background: #0097A7
      color: white
      border-radius: 4px 0px 0px 4px
      overflow: hidden
      
      i
        transform: scale(0.2) translateY(50px)
        
        opacity: 0
        transition: all 400ms cubic-bezier(0, 0.6, 0.35, 1.4) 600ms
      
      
    
    .text
      background: rgba(0,0,0,0.8)
      padding: 0 20px
      display: flex
      align-items: center
      border-radius: 0px 4px 4px 0px
      transform: rotateY(90deg)
      transition: all 500ms ease-in-out 1000ms
      transform-origin: center left
      opacity: 0
      
      
      
    &.is-active
      opacity: 1
      transform: rotate(0deg) scale(1)
      
      i
        transform: scale(1) translateY(0px)
        opacity: 1

      .text
        transform: rotateY(0deg)
        opacity: 1
        
      
    

    
  
// Section - 3 - Modal
.section-modal
  position: relative
  overflow: hidden
  
  .profile
    display: flex
    align-items: center
    background: rgba(0,0,0,0.1)
    background: white
    padding: 15px 30px
    border-radius: 4px
    box-shadow: 0px 23px 30px -20px rgba(0,0,0,0.4)
    transition: all 200ms ease-in-out
    
    &:hover
      cursor: pointer
      transform: translateY(-4px)
      box-shadow: 0px 27px 30px -20px rgba(0,0,0,0.4)
    
    .name
      font-size: 24px
      margin-bottom: 8px

    .meta
      color: rgba(0,0,0,0.4)
      
    img
      width: 80px
      height: 80px
      border-radius: 50%
      margin-right: 20px

  .overlay
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: rgba(0,0,0,0.7)
    display: flex
    justify-content: center
    align-items: center
    display: none
    
    .modal
      width: 450px
      box-shadow: 0px 23px 30px -20px rgba(0,0,0,0.4)
      
      .title
        background: #0097A7
        color: white
        border-radius: 4px 4px 0px 0px
        text-align: center
        line-height: 48px
        font-weight: 700
        
      .body
        background: white
        border-radius: 0px 0px 4px 4px
        line-height: 20px
        display: flex
        align-items: stretch
        
        .text
          padding: 30px
        
          p
            margin-bottom: 20px
            
        .img
          height: 180px
          width: 140px
          border-bottom-left-radius: 4px
          flex-shrink: 0
          background:
            size: cover
            position: center
            
            
    &.is-active
      display: flex
      animation: overlayAnim 5s ease-in-out forwards
      
      .modal
        animation: modalAnim 5s ease-in-out forwards
      
      
      
      
@keyframes overlayAnim
  0%, 100%
    background-color: rgba(0,0,0,0)
  15%, 85%
    background-color: rgba(0,0,0,0.3)
  

  
@keyframes modalAnim
  0%
    transform: translateX(-200%) rotate(-90deg)
    opacity: 0
  
  10%
    transform: translateX(4%) rotate(4deg)
  
  15%, 85%
    transform: translateX(0%)
    opacity: 1
  
  90%
    transform: translateX(-4%) rotate(-4deg)
  
  100%
    transform: translateX(200%) rotate(90deg)
        
    

  
  
  
  
  
  
  
  

$('.nav li').click(function(){
  $(this).addClass('is-active').siblings().removeClass('is-active');
});



$('.grid .item').click(function(){
  $('.website .alert-element').toggleClass('is-active');
});



$('.section-modal .profile').click(function(){
  $('.overlay').addClass('is-active');
  setTimeout(function(){
    $('.overlay').removeClass('is-active');
  }, 5000);
});