// TITLE & CREDITS
.title
   .title-content
      h1 Card opening effect
      p 
       | Inspired on 
       a href="https://dribbble.com/shots/1893589-Material-design-card-animation" target="_blank" Material design card animation.
      button.toggle-btn.ripple data-ripple-color="#d7751e" Toggle effect
// END TITLE & CREDITS

// PHONE
.phone
   .phone-buttons
   .phone-camera
   // APP
   main.app
      // STATUS BAR
      section.status-bar
         .right
            .fa.fa-wifi.left
            .fa.fa-signal.left
            .batery-level.left
            .left 12:00
      // END STATUS BAR
      
      // NAB BAR
      section.nav-bar
         button.left.ripple
            i.fa.fa-bars
         h1.left Events
      // END NAB BAR
      
      // ACTION BAR
      section.action-bar
         button.ripple data-ripple-color="rgba(0,0,0, .3)"
            i.fa.fa-arrow-left
         .right
            button
               i.fa.fa-info-circle
            button
               i.fa.fa-share-alt
      // END ACTION BAR
      
      // CARD
      article.card
         .card-overlay
         header.card-cover-placeholder
            .card-cover
         .card-content
            h2
               a.card-title href="javascript:0"
                  | Iron City, Birmingham, AL
            p
               a.card-description href="javascript:0"
                  | Run the Jewels is an American hip hop duo, formed by rappers EL-P and Killer Mike in 2013. That same year, they released their sel...
                  
            .card-content-opened
               label Venue Name
               h2 Iron City, Birmingham, AL
               label Ticked Price
               strong.left $30.00
               button.right.ripple data-ripple-color="#d7d7d7" Buy ticket
               .clearfix
               label About
               p Run the Jewels is an American hip hop duo, formed by New York City-based rapper-music producer EL-P and Atlanta-based rapper Killer Mike, in 2013. Later that year, they released their eponymous debut studio album, Run the Jewels, as a free digital download. The duo announced they would begin recording the highly anticipated sequel to their debut, in February 2014, after a series of Australian live dates as part of St. Jerome's Laneway Festival.
               
            button.card-content-button.ripple data-ripple-color="#ededed"
               i.fa.fa-plus
              
         footer.card-actions.clearfix
            button.card-btn.ripple data-ripple-color="#ededed" Add to calendar
      // END CARD
      
      // CARD
      article.card
         .card-cover-2
      // END CARD

// IMPORTS
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
// END IMPORTS

// GLOBAL
body {
   height: 100%;
   background-color: #FC3;
   font-family: 'Roboto', sans-serif;
}

* {
   box-sizing: border-box;
}

button {
   cursor: pointer;
   border: none;
   background: none;
   font-size: 20px;
   outline: none;
}

h1,
h2 {
   font-weight: bold;
   margin-bottom: 20px;
}

a {
   color: #3498db;
   text-decoration: none;
}

p {
   font-size: 16px;
   line-height: 1.5em;
   margin-bottom: 10px;
}
// END GLOBAL

// HELPERS
.clearfix {
   &:after {
      display: table;
      clear: both;
      content: " ";
   }
}

.left {
   float: left;
}

.right {
   float: right;
}
// END HELPERS

// TITLE
.title {
   width: 400px;
   height: 100vh;
   text-align: center;
   background-color: #f39c12;
   color: white;
   
   .title-content {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
   }
   
   h1 {
      font-size: 30px;
   }

   .toggle-btn {
      background-color: #e67e22;
      padding: 20px;
      margin: 20px;
      color: white;
      border-radius: 4px;
      box-shadow: 0 4px #d7751e;
   }
}
// END TITLE

// PHONE
.phone {
   position: absolute;
   left: 50%;
   bottom: 0;
   width: 460px;
   padding: 85px 20px 0 20px;
   background-color: #212121;
   border-radius: 50% 50% 0 0 / 40px;
   
   .phone-buttons {
      &:before,
      &:after {
         background-color: #1D1D1D;
         width: 5px;
         position: absolute;
         content: "";
      }
      
      &:before {
         top: 180px;
         left: -5px;
         height: 160px;
         border-radius: 4px 0 0 4px;
      }
      
      &:after {
         right: -5px;
         top: 140px;
         height: 80px;
         border-radius: 0 4px 4px 0; 
      }
   }
   
   .phone-camera {
      position: absolute;
      top: 30px;
      left: 50%;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-left: -13px;
      border: 4px solid #1D1D1D;
      background-color: #424242;
   }
}
// END PHONE

// APP
.app {
   height: 540px;
   overflow: hidden;
   position: relative;
   background-color: #EFEFEF;
}
// END PHONE

// STATUS BAR
.status-bar {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 3;
   height: 24px;
   padding: 6px;
   background-color: rgba(black, .2);
   color: white;
   font-size: 12px;
   
   div {
      margin-left: 10px;
   }
}

// NAV BAR
.nav-bar {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 2;
   height: 90px;
   background-color: #00BDE7;
   box-shadow: 0 2px rgba(0,0,0,.1);
   padding: 49px 20px 25px 20px;
   transition: all 200ms;
   
   h1 {
      color: white;
      font-size: 20px;
      font-weight: normal;
   }
   
   button {
      margin-right: 30px;
      color: #0C88AD;
   }
   
   &.hide {
      top: -90px;
      opatity: 0;
   }
}
// END NAV BAR

// ACTION BAR
.action-bar {
   position: absolute;
   left: 0;
   right: 0;
   top: 24px;
   z-index: 3;
   opacity: 0;
   transition: all 60ms;
   transition-delay: 0;
   
   button {
      overflow: hidden;
      padding: 25px 20px;
      color: white;
      border-radius: 50%;
      font-size: 20px;
   }
   
   &.show {
      transition-duration: 400ms;
      transition-delay: 100ms;
      opacity: 1;
   }
}
// END ACTION BAR

// CARD
.card {
   width: 95%;
   margin: 20px auto;
   background-color: white;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
   border-radius: 4px;
   
   .card-overlay {
      background-color: black;
      opacity: 0;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1;
      visibility: hidden;
      transition: all 400ms; 
   }
   
   .card-cover-placeholder {
      height: 240px;
   }
   
   .card-cover,
   .card-cover-2 {
      cursor: pointer;
      background-image: url(http://cdn.ticketfly.com/i/00/01/33/64/99-atjmbo1.jpg);
      background-clip: content-box;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 240px;
      border-radius: 4px 4px 0 0;
      transition: all 450ms;
   }
   
   .card-cover-2 {
      background-image: url(http://blogs.phoenixnewtimes.com/uponsun/The%20Growlers/the_growlers_surf_music.jpg);
   }
   
   .card-content {
      position: relative;
      padding: 20px 20px 10px 20px;
   }
   
   .card-title {
      display: inline-block;
      color: #7C7C7C;
      font-weight: bold;
   }
   
   .card-description {
      display: inline-block;
      color: #BDBDBD;
      font-size: 15px;
   }
   
   .card-actions {
      border-top: 1px solid #EDEDED;
   }
   
   .card-btn {
      display: block;
      width: 100%;
      padding: 20px;
      text-align: right;
      font-weight: bold;
      text-transform: uppercase;
      color: #FE1C7A;
      font-size: 16px;
   }
   
   .card-content-opened {
      width: 100%;
      height: 0;
      background-color: white;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      padding: 0 30px 10px 80px;
      transition: all 300ms;
      transition-delay: 200ms;
      overflow: hidden;
      color: #9E9E9E;
      
      label,
      h2,
      strong,
      button,
      p {
         transform: scale(.9);
         opacity: 0;
         transition: all 300ms;
         transition-delay: 500ms;
      }
      
      h2 {
         color: #7A7A7A;
         font-size: 18px;
      }
      
      label {
         color: #4DCFEF;
         font-size: 14px;
         font-weight: bold;
         text-transform: uppercase;
         margin: 30px 0 5px 0;
         display: block;
      }
      
      strong {
         color: #7A7A7A;
         font-size: 44px;
      }
      
      button {
         line-height: 1;
         background-color: #F7F7F7;
         padding: 12px 20px;
         color: #7A7A7A;
         font-weight: bold;
         font-size: 16px;
         text-transform: uppercase;
         box-shadow: 0 2px 2px rgba(0,0,0,.3);
         border-radius: 4px;
      }
   }
   
   .card-content-button {
      position: absolute;
      left: 15px;
      top: -45px;
      z-index: 3;
      width: 50px;
      height: 50px;
      background-color: white;
      color: #FE1C7A;
      box-shadow: 0 2px 4px rgba(0,0,0,.3);
      border-radius: 50%;
      transform: scale(0);
      transition: all 200ms;
      transition-delay: 0ms;
   }
   
   &.open {
      .card-overlay {
         opacity: .3;
         visibility: visible;
      }
      .card-cover {
         transform: scale(1.2) translateY(-25px);
         position: relative;
         z-index: 2;
      }
      .card-content-opened {
         transform: scale(1.1);
         height: 400px;
         * {
            opacity: 1;
         }
      }
      .card-content-button {
         transform: scale(1);
         transition-duration: 200ms;
         transition-delay: 600ms;
      }
   }
}
// END CARD

// RIPPLE EFFECT
.ripple {
   overflow: hidden;
   position:relative;
}

.ripple-effect {
   position: absolute;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   background: white;
   animation: ripple-animation 2s;
}

@keyframes ripple-animation {
   from {
      transform: scale(1);
      opacity: 0.4;
   }
   to {
      transform: scale(100);
      opacity: 0;
   }
}
// END RIPPLE EFFECT

(function (window, $) {
  
  	$(function() {
     	
      // toggle card
      $('.toggle-btn').click(function(){
         $('.nav-bar').toggleClass('hide');
         $('.action-bar').toggleClass('show');
         $('.card').toggleClass('open');
      });
    	
      // ripple effect
      // from https://codepen.io/Craigtut/pen/dIfzv
    	$('.ripple').on('click', function (event) {
      	event.preventDefault();

         var $div = $('<div/>'),
             btnOffset = $(this).offset(),
             xPos = event.pageX - btnOffset.left,
             yPos = event.pageY - btnOffset.top;

         $div.addClass('ripple-effect');
         var $ripple = $(".ripple-effect");

         $ripple.css("height", $(this).height());
         $ripple.css("width", $(this).height());
         $div
           .css({
             top: yPos - ($ripple.height()/2),
             left: xPos - ($ripple.width()/2),
             background: $(this).data("ripple-color")
           }) 
           .appendTo($(this));

         window.setTimeout(function(){
           	$div.remove();
         }, 2000);
    	});
    
	});
  
})(window, jQuery);