Day 21 - Interactive Dribbble Invite Modal

Day 21 - Interactive Dribbble Invite Modal.markdown

Day 21 - Interactive Dribbble Invite Modal

This week I decided to create Paul Flavius Nechita's Day 21 UI, which is a Dribbble Invite Modal.

A Pen by Andy Tran on CodePen.

License.

index.html

.modal
  header.header
    h1 Invite people to Dribbble
    span 2 Invites Available
  .search
    .input-form
      input
    button
  .content
    // Row One
    .row
      .thumbnail: img(src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/profile/profile-512_13.jpg')
      .description
        h2 Andy Tran
        p.meta HTML, CSS, JavaScript
        p
          span.location San Jose
          a.website(href='#') andytran.me
      .select
        .dribbble: span
        
    // Row Two
    .row
      .thumbnail: img(src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/profile/profile-512_21.jpg')
      .description
        h2 Chris Coyier
        p.meta HTML, CSS, JavaScript, CodePen, Sweg
        p
          span.location Unknown
          a.website(href='#') github.com/chriscoyier
      .select
        .dribbble.selected: span
        
    // Row Three
    .row
      .thumbnail: img(src='http://assets.codepen.io/assets/about/about-timsabat.jpg')
      .description
        h2 Tim Sabat
        p.meta HTML, CSS, JavaScript, CodePen, Sweg
        p
          span.location Unknown
          a.website(href='#') boomboomboom.biz
      .select
        .dribbble: span
  footer.footer
    input(type='text'
          placeholder='Send invite by e-mail')
    button.submit Send Invite

script.js

$('.input-form input').on('focus', function() {
  $('.input-form').addClass('focused');
});

$('.input-form input').on('blur', function() {
  $('.input-form').removeClass('focused');
});

$('.dribbble').on('click', function() {
  $(this).toggleClass('selected');
});

$('.submit').on('click', function() {
  $(this).addClass('success');
  
  $('<div class="dribbble selected"><span></span></div>').appendTo(this);
  
  $('<div class="message"> <div class="dribbble selected"><span></span></div> <h1>Your invite(s) have been sent out.</h1><span>To view your available invites, please follow this <a href="#">link</a>.</span> </div>').appendTo('.modal');
  
});

scripts

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

style.css

// Ignore the mess, I'll fix it later.. ;)

$width: 600px;

$ultra: 800;
$bold: 700;
$semibold: 600;
$regular: 400;
$light: 300;
$thin: 100;

$white: #FFF;
$black: #000;
$dark-gray: rgba($black, 0.8);
$gray: rgba($black, 0.6);
$light-gray: rgba($black, 0.4);
$lighter-gray: rgba($black, 0.2);

$accent: #E84F89;
$secondary: lighten(#E39C14, 15%);

body {
  background: #F2F2F2;
  padding: 40px;
  color: $gray;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  &:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    background: rgba($black, .8);
    width: 100%;
    height: 100%;
  }
}

::selection {
  background: $accent;
}

.modal {
  z-index: 1000;
  position: relative;
  background: $white;
  max-width: $width;
  border-radius: 6px;
  box-shadow: 0 0 30px rgba($black, 0.1);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 60px;
  overflow: hidden;
}

.header {
  margin: 0 0 40px;
  color: $accent;
  text-align: center;

  h1 {
    margin: 0 0 10px;
    color: $dark-gray;
    font-size: 30px;
    font-weight: $semibold;
  }

  span {
    color: $light-gray;
  }
}

.search {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0 0 20px;

  .input-form {
    position: relative;
    width: 100%;
    overflow: hidden;

    &:before,
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      display: none;
      background: $accent;
      width: 20%;
      height: 2px;
    }

    &:after {
      left: auto;
      right: 50%;
    }

    &.focused {
      &:before,
      &:after {
        display: block;
      }

      &:before {
        animation: slidingLeft 2s infinite;
      }

      &:after {
        animation: slidingRight 2s infinite;
      }
    }
  }

  input {
    outline: none;
    background: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-bottom: 1px solid #EDEDED;
    padding: 5px 10px;
  }

  button {
    outline: none;
    position: relative;
    background: 0;
    display: block;
    width: 20px;
    height: 20px;
    border: 0;
    margin: 0 0 0 10px;
    cursor: pointer;

    &:before,
    &:after {
      content: '';
      display: block;
      width: 1px;
    }

    &:before {
      width: 14px;
      height: 14px;
      border: 1px solid #DEDEDE;
      border-radius: 100%;
      box-sizing: border-box;
    }

    &:after {
      position: absolute;
      right: 0;
      bottom: 0;
      background: #DEDEDE;
      height: 6px;
      transform: rotate(-45deg);
    }
  }
}

.content {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  margin: 20px 0;
}

.thumbnail {
  width: 80px;
  min-width: 80px;
  height: 80px;
  border-radius: 100%;
  margin: 0 40px 0 0;
  overflow: hidden;

  img {
    display: block;
    width: 100%;
  }
}

.description {
  width: 100%;

  h2 {
    display: block;
    margin: 0 0 10px;
    color: #85B754;
    font-size: 18px;
  }

  .meta {
    margin: 0 0 10px;
    color: #E1E1E1;
    font-size: 12px;
  }

  .location {
    margin: 0 10px 0 0;
    color: #9A9A9A;
  }

  .website {
    color: #343434;
    text-decoration: none;
  }
}

.dribbble {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid #DEDEDE;
  border-radius: 100%;
  transition: 0.3s ease;
  overflow: hidden;
  cursor: pointer;

  &:before {
    @extend .dribbble;

    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    display: block;
  }

  &:after {
    @extend .dribbble:before;

    right: -100px;
    bottom: -100px;
  }

  span {
    @extend .dribbble:before;

    top: -100px;
    left: -100px;
    height: 30px;
  }

  &.selected {
    border-color: $accent;

    &:before {
      top: -14px;
      left: -6px;
    }

    &:after {
      top: auto;
      right: -6px;
      bottom: -14px;
      left: auto;
    }

    span {
      top: -5px;
      left: -11px;
      height: 50px;
      border-color: $accent;
    }
  }

  .footer & {
    border-color: $white !important;

    span {
      border-color: $white !important;
    }
  }
}

.footer {
  margin: 20px 0 0;

  input {
    width: 100%;
    border: 1px solid #DEDEDE;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: inherit;
    transition: 0.3s ease;

    &:focus {
      border-color: $accent;
    }
  }

  button {
    outline: none;
    position: relative;
    background: $accent;
    width: 100%;
    border: 0;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 20px;
    color: $white;
    font-size: 18px;
    font-weight: $semibold;
    text-transform: uppercase;
    cursor: pointer;

    &.success {
      position: absolute;
      top: 50%;
      left: 50%;
      color: $accent;
      transform: translate(-50%, -50%) scale(100);
      animation: successContainer 10s ease;
    }

    .dribbble {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-indent: -9999px;
      animation: dribbble 10s ease;
      opacity: 0;

      &:before {
        top: -14px !important;
        left: -6px !important;
        transform: translate(0%, 0%);
        animation: none;
        opacity: 1;
      }

      &:after {
        top: auto !important;
        right: -6px !important;
        bottom: -14px !important;
        left: auto !important;
        transform: translate(0%, 0%);
        animation: none;
        opacity: 1;
      }

      span {
        top: -5px !important;
        left: -11px !important;
        transform: translate(0%, 0%);
        animation: none;
        opacity: 1;
      }
    }
  }
}

.message {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 60px;
  box-sizing: border-box;
  text-align: center;
  transform: translate(0, -50%);
  animation: message 10s ease;

  .dribbble {
    position: relative;
    margin: 0 auto 160px;
    border-color: $white;
    transform: scale(6);
    transform-origin: top;

    &:before,
    &:after,
    span {
      margin: 0;
      position: absolute;
      border-color: $white;
      transform: scale(1);
    }
  }

  h1 {
    margin: 0 0 10px;
    color: $white;
    font-size: 24px;
    font-weight: $semibold;
    animation: messageH1 10s ease;
  }

  span {
    color: $white;
    animation: messageSpan 10s ease;

    a {
      color: $white;
    }
  }
}

@keyframes message {
  0% {
    top: 0;
    opacity: 0;
  }

  25% {
    opacity: 0;
  }

  30% {
    top: 50%;
    opacity: 1;
  }
}

@keyframes dribbble {
  0% {
    opacity: 0;
  }

  4% {
    opacity: 0;
  }

  5% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  19% {
    opacity: 1;
  }

  20% {
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(720deg);
    opacity: 0;
  }
}

@keyframes successContainer {
  0% {
    position: relative;
    top: 0;
    left: 0;
    height: 60px;
    color: $accent;
    margin: 0 auto;
    padding: 0;
    border-radius: 4px;
    transform: translate(0%, 0%) scale(1);
    overflow: hidden;
  }

  5% {
    width: 60px;
    border-radius: 100px;
  }

  10% {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 100px;
    color: $accent;
    transform: translate(0%, 0%) scale(1);
  }

  20% {
    width: 60px;
    height: 60px;
    top: 0;
    left: 0;
    border-radius: 100%;
    margin: 0 auto;
    padding: 0;
    transform: translate(0%, 0%) scale(1);
  }

  40% {
    transform: translate(-50%, -50%) scale(100);
  }
}

@keyframes slidingLeft {
  0% {
    left: 50%;
    width: 0%;
    opacity: 0;
  }

  5% {
    left: 50%;
    width: 0%;
  }

  20% {
    width: 20%;
    opacity: 1;
  }

  100% {
    left: -100%;
  }
}

@keyframes slidingRight {
  0% {
    right: 50%;
    width: 0%;
    opacity: 0;
  }

  5% {
    right: 50%;
    width: 0%;
  }

  20% {
    width: 20%;
    opacity: 1;
  }

  100% {
    right: -100%;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700,800" rel="stylesheet" />