Expanding Card | Material Design

Expanding Card | Material Design.markdown

Expanding Card | Material Design

Simple expanding card transition... Might work quite nicely with a 'Contact Me' form

A Pen by Joe Harry on CodePen.

License.

index.html

.container
  span.button 
    | +
  .content
    .head
      h1 Expand.
      p.sub by 
        a(href="http://codepen.io/woodwork/" target="_blank") Woodwork
    .body
      p
            | There once was a wolf named <em>Knox</em>. He lived in a bright blue box. Until one day, his box blew away and he was left with only his <em>socks</em>.
            <br><br> Integer augue augue, fermentum at purus nec, euismod rutrum ex. Nulla pulvinar tortor ipsum, vel accumsan nunc rutrum sed. Praesent faucibus sollicitudin tempus. Phasellus congue ex tempor malesuada congue. Etiam vitae dui commodo, ultrices eros malesuada mi. Fusce suscipit eleifend lacus, at gravida urna gravida in. Nullam sodales a consequat leo nisl sit amet ipsum. Pellentesque aliquam dolor quam, et ultricies leo fringilla in. Nulla eu neque eu mauris malesuada efficitur ultrices sed mi. Vestibulum nec quam vitae purus ut sed velit. Vestibulum ultricies iaculis magna ut consequat.
      .action-bar
        a SHARE
        a LEARN MORE

script.js

$('.button').click(function (e) {
  e.preventDefault();
  $(this).parent().toggleClass('expand');
  $(this).parent().children().toggleClass('expand');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$body-bg: #FAFAFA;
//Other pretty primary colors: E91E63 FF5722
$primary-col: #03A9F4;
$accent-col: #FFC400;
$accent-fallback: #FFD740;

$font-stack: 'Roboto', sans-serif;
$easer: cubic-bezier(0.4, 0, 0.2, 1);

body {
  font-family: $font-stack;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #FFF;
  background: $body-bg;
}

h1{
  font-weight: 700;
  font-size: 64px;
  margin: 20px 0 0 0;
  padding: 0 20px;
}

p{
  font-size: 16px;
  padding: 0 20px;
}

em{
  font-style: normal;
  color: $accent-col;
}

a{
  font-style: normal;
  color: $accent-fallback;
  text-decoration: none;
  padding-right: 10px;
  cursor: pointer;
}

.sub{
  margin: 0;
}

.button{
  cursor: pointer;
  width: 60px;
  height: 60px;
  display: inline-block;
  font-size: 30px;
  line-height: 60px;

  transition: all 0.7s $easer;
}
.button.expand {
  -webkit-transform: rotate(585deg); 
      -ms-transform: rotate(585deg); 
          transform: rotate(585deg);

  transition: all 0.5s $easer;
}

.container {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 5vh;  
  background-color: $primary-col;

  border-radius: 50%;
  width: 60px;
  max-width: 60px;
  height: 60px;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  overflow: hidden;

  transition: all 0.2s 0.45s,
              height 0.2s $easer 0.25s, 
              max-width 0.2s $easer 0.35s, 
              width 0.2s $easer 0.35s;
}
.container.expand {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.17);
  border-radius: 0;
  width: 80%;
  height: 500px;
  max-width: 700px;
  padding: 0;

  transition: all 0.2s, max-width 0.2s $easer 0.1s, height 0.3s ease 0.25s;
}

.content {
  transform: translateY(100%);
  width: 100%;
  height: 100%;
  opacity: 0;
  text-align: left;

  transition: transform 0.2s $easer, opacity 0.2s 0.2s;
}
.content.expand {
  transform: translateY(0px);
  opacity: 1;
  transition: transform 0.7s $easer 0.05s, opacity 0s;
}

.content .head {
  padding: 0 0 20px 0;
}
.content .body {
  color: #000;
  color: rgba(0, 0, 0, 0.87);
  background-color: #FFF;
  width: 100%;
  height: 100%;
  padding: 10px 0;
  box-sizing: border-box;
}

.action-bar {
  padding-left: 15px;
  border-top: 1px solid #E0E0E0;
  width: 100%;
}
.action-bar a {
  text-transform: uppercase;
  line-height: 52px;
  color: $accent-col;
}