Notifications

index.html

<div class="Message" id="js-timer">
  <div class="Message-icon">
    <i class="fa fa-bell-o"></i>
  </div>
  <div class="Message-body">
    <p>This is a simple, but friendly, notification.</p>
    <p class="u-italic">It will disappear within a few seconds.</p>
  </div>
  <button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>

<div class="Message Message--orange">
  <div class="Message-icon">
    <i class="fa fa-exclamation"></i>
  </div>
  <div class="Message-body">
    <p>This is a simple notification with a brighter color...</p>
    <p>If you bring you mouse here you can close it manually.</p>
  </div>
  <button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>


<div class="Message Message--green">
  <div class="Message-icon">
    <i class="fa fa-check"></i>
  </div>
  <div class="Message-body">
    <p>This is a message telling you that everything is a-okay!</p>
    <p>Good job, and good riddance.</p>
  </div>
  <button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>

<div class="Message Message--red">
  <div class="Message-icon">
    <i class="fa fa-times"></i>
  </div>
  <div class="Message-body">
    <p>This is a notification that something went wrong...</p>
    <button class="Message-button" id="js-helpMe">Yikes, help me please!</button>
    <button class="Message-button js-messageClose">Don't care.</button>
  </div>
  <button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>

<div class="Message">
  <div class="Message-icon">
    <i class="fa fa-bell-o"></i>
  </div>
  <div class="Message-body">
    <p>Do you know that you can assign status and relation to a company right in the visit list?</p>
    <button class="Message-button" id="js-showMe">Show me how</button>
    <button class="Message-button js-messageClose">Nah, not interested</button>
  </div>
  <button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>

<div class="Message Message--orange">
  <div class="Message-icon">
    <i class="fa fa-exclamation"></i>
  </div>
  <div class="Message-body">
    <p>You haven't authorized your LinkedIn account. Would you like some help with that?</p>
    <p class="u-italic">With your account connected we can show you what connections you have at a company that visited your site!</p>
    <button class="Message-button" id="js-authMe">Authorize!</button>
    <button class="Message-button js-messageClose">I'll just keep using carrier pigeons</button>
  </div>
  <button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>

Notifications.markdown

Notifications

Growl style notifications for a web app.

Forked from Hampus Persson's Pen Notifications.

A Pen by Captain Anonymous on CodePen.

License.

script.js

function closeMessage(el) {
  el.addClass('is-hidden');
}

$('.js-messageClose').on('click', function(e) {
  closeMessage($(this).closest('.Message'));
});

$('#js-helpMe').on('click', function(e) {
  alert('Help you we will, young padawan');
  closeMessage($(this).closest('.Message'));
});

$('#js-authMe').on('click', function(e) {
  alert('Okelidokeli, requesting data transfer.');
  closeMessage($(this).closest('.Message'));
});

$('#js-showMe').on('click', function(e) {
  alert("You're off to our help section. See you later!");
  closeMessage($(this).closest('.Message'));
});

$(document).ready(function() {
  setTimeout(function() {
    closeMessage($('#js-timer'));
  }, 5000);
});

style.scss

@import "bourbon";
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300);

$c-black: #111;
$c-white: #fff;
$c-blues: #2980B9, #0074D9, #009FE3;
$c-greys: #343C3F, #A2ACB0, #D9E1E4;
$c-greens: #27AE60, #2ECC40, #01FF70;
$c-reds: #C0392B, #FF4136, #E74C3C;
$c-yellows: #F39C12, #FCA624, #F1C40F;
$c-purples: #532E62, #8E44AD, #9B59B6;

* {
  box-sizing: border-box;
}

body {
  background-color: #ddd;
  font-family: 'Source Sans Pro';
  font-weight: 300;
}

.Message {
  display: table;
  position: relative;
  margin: 40px auto 0;
  width: 500px;
  background-color: nth($c-blues, 2);
  color: #fff;
  transition: all 0.2s ease;
  
  &.is-hidden {
    opacity: 0;
    height: 0;
    font-size: 0;
    padding: 0;
    margin: 0 auto;
    display: block;
  }
}
  .Message--orange {
    background-color: nth($c-yellows, 1);
  }

  .Message--red {
    background-color: nth($c-reds, 2);
  }

  .Message--green {
    background-color: nth($c-greens, 2);
  }

  .Message-icon {
    display: table-cell;
    vertical-align: middle;
    width: 60px;
    padding: 30px;
    text-align: center;
    background-color: rgba(black, 0.25);
    
    >i {
      width: 20px;
      font-size: 20px;
    }
  }
  
  .Message-body {
    display: table-cell;
    vertical-align: middle;
    padding: 30px 20px 30px 10px;
    
    > p {
      line-height: 1.2;
      margin-top: 6px;
    }
  }

  .Message-button {
    position: relative;
    margin: 15px 5px -10px;
    background-color: rgba(black, 0.25);
    box-shadow: 0 3px rgba(black, 0.4);
    border:none;
    padding: 10px 15px;
    font-size: 16px;
    font-family: 'Source Sans Pro';
    color: #fff;
    outline: none;
    cursor: pointer;
    
    &:hover {
      background: rgba(black, 0.3);
    }
 
    &:active {
      background: rgba(black, 0.3);
      box-shadow: 0 0px rgba(black, 0.4);
      top: 3px;
    }
  }

  .Message-close {
    position: absolute;
    background-color: rgba(black, 0.3);
    color: #fff;
    border: none;
    outline: none;
    font-size: 20px;
    right: 5px;
    top: 5px;
    opacity: 0;
    cursor: pointer;
    
    .Message:hover & {
      opacity: 1;
    }
    
    &:hover {
      background-color: rgba(black, 0.5);
    }
  }

.u-italic {
  font-style: italic;
}