Growl style notifications for a web app.
Forked from Hampus Persson's Pen Notifications.
A Pen by Captain Anonymous on CodePen.
<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> |
Growl style notifications for a web app.
Forked from Hampus Persson's Pen Notifications.
A Pen by Captain Anonymous on CodePen.
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); | |
}); |
@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; | |
} |