<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
%div.title-container
.title
FlatNotifiy.js v0.1
%a.sub-title{href: 'https://www.twitter.com/screenshake', target: '_blank'}
Super simple notifications by @screenshake
%div.button-container
%a.alert{href: '#', onclick: "flatNotify().alert('Testing Alert Notification',2000)"} Alert
%a.success{href: '#', onclick: "flatNotify().success('Testing Success Notification with a two line message. Sweet right?',1500)"} Success
%a.error{href: '#', onclick: "flatNotify().error('Testing Error Notification with a really long message. I mean come on? Who notifies people like this? This is so wrong on so many levels.',3000)"} Error@import compass
body
background: #eee
font-family: 'Brandon Grotesque', Avenir, 'Lato', sans-serif
.title-container
margin: 120px auto 0
text-align: center
width: 350px
.title
font-size: 40px
margin-bottom: 15px
.sub-title
text-decoration: none
font-size: 20px
color: #D3D3D3
.button-container
width: 438px
height: 78px
margin: 40px auto 0
a
text-decoration: none
padding: 20px 0
width: 130px
text-align: center
margin: 20px 6px
display: inline-block
color: #FFF
font-size: 20px
border-radius: 5px
transition: all 0.3s
&.success
background: #2ecc71
&.error
background: #e74c3c
&.alert
background: #f1c40f
&:hover
opacity: 0.6
.f-notification
position: fixed
bottom: 20px
right: 20px
text-align: left
width: 300px
min-height: 20px
padding: 20px 40px 20px 18px
border-radius: 5px
color: rgba(255, 255, 255, 0.85)
&:hover
opacity: 0.9
.f-notification-close
background: rgba(77, 77, 79, 0.1)
.f-notification-title
font-weight: 600
color: #4D4D4F
cursor: default
.f-close
position: absolute
right: 15px
top: 20px
height: 20px
width: 20px
line-height: 18px
vertical-align: middle
text-align: center
border-radius: 20px
color: #4D4D4F
cursor: pointer
background: rgba(255, 255, 255, 0.25)
&:hover
background: rgba(77, 77, 79, 0.2)
.f-notification-success
background: #2ecc71
.f-notification-error
background: #e74c3c
.f-notification-alert
background: #f1c40f
.f-show
animation-name: animSlideElastic
animation-duration: 1s
animation-timing-function: linear
.f-hide
animation-name: animSlideElastic
animation-duration: 0.5s
animation-direction: reverse
@keyframes animSlideElastic
0%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1000, 0, 0, 1)
3.333333%
transform: matrix3d(1.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 521.82545, 0, 0, 1)
6.666667%
transform: matrix3d(1.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 218.3238, 0, 0, 1)
10%
transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 57.59273, 0, 0, 1)
13.333333%
transform: matrix3d(0.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.12794, 0, 0, 1)
16.666667%
transform: matrix3d(0.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -30.40503, 0, 0, 1)
20%
transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -28.10141, 0, 0, 1)
23.333333%
transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -19.40752, 0, 0, 1)
26.666667%
transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.08575, 0, 0, 1)
30%
transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.23737, 0, 0, 1)
33.333333%
transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.84893, 0, 0, 1)
36.666667%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.22079, 0, 0, 1)
40%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.37284, 0, 0, 1)
43.333333%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.46116, 0, 0, 1)
46.666667%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.35963, 0, 0, 1)
50%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.22487, 0, 0, 1)
53.333333%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.11734, 0, 0, 1)
56.666667%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04909, 0, 0, 1)
60%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.01295, 0, 0, 1)
63.333333%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0025, 0, 0, 1)
66.666667%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00684, 0, 0, 1)
70%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00632, 0, 0, 1)
73.333333%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00436, 0, 0, 1)
76.666667%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00249, 0, 0, 1)
80%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00118, 0, 0, 1)
83.333333%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00042, 0, 0, 1)
86.666667%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00005, 0, 0, 1)
90%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00008, 0, 0, 1)
93.333333%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0001, 0, 0, 1)
96.666667%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00008, 0, 0, 1)
100%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
/**
*
* flatNotify.js v0.1
* @screenshake
*
* Inspired by :
* https://tympanus.net/codrops/2014/07/23/notification-styles-inspiration/
*
* Animation courtesy :
* bounce.js - http://bouncejs.com/
*
* Class manipulation
* classie.js https://github.com/desandro/classie
*
*/
;( function( window ) {
var proto_methods = {
options: {
wrapper: document.body,
dismissIn: 5000
},
init: function() {
this.ntf = document.createElement('div');
this.ntf.className = 'f-notification';
var strinner = '<div class="f-notification-inner"></div><div class="f-close">x</div></div>';
this.ntf.innerHTML = strinner;
// append to body or the element specified in options.wrapper
this.options.wrapper.insertBefore(this.ntf, this.options.wrapper.lastChild);
// init events
this.initEvents();
},
initEvents: function() {
var self = this;
// dismiss notification
this.ntf.querySelector('.f-close').addEventListener('click', function() {
self.dismiss();
});
},
dismiss: function() {
var self = this;
clearTimeout(this.dismissttl);
classie.remove(self.ntf, 'f-show');
setTimeout(function() {
classie.add(self.ntf, 'f-hide');
}, 25);
setTimeout(function() {
self.options.wrapper.removeChild( self.ntf );
}, 500);
},
setType: function(newType) {
var self = this;
classie.remove(self.ntf, 'f-notification-error');
classie.remove(self.ntf, 'f-notification-alert');
classie.remove(self.ntf, 'f-notification-success');
classie.add(self.ntf, newType);
},
success: function(message, dismissIn) {
var self = this;
/**
* Use supplied dismiss timeout if present, else uses default value.
* If set to 0, doesnt automatically dismiss.
*/
dismissIn = (typeof dismissIn === "undefined") ? this.options['dismissIn'] : dismissIn;
/**
* Set notification type styling
*/
self.setType('f-notification-success');
self.ntf.querySelector('.f-notification-inner').innerHTML = message;
classie.remove(self.ntf, 'f-hide');
classie.add(self.ntf, 'f-show');
if (dismissIn > 0) {
this.dismissttl = setTimeout(function() {
self.dismiss();
}, dismissIn);
}
},
error: function(message, dismissIn) {
var self = this;
/**
* Use supplied dismiss timeout if present, else uses default value.
* If set to 0, doesnt automatically dismiss.
*/
dismissIn = (typeof dismissIn === "undefined") ? this.options['dismissIn'] : dismissIn;
/**
* Set notification type styling
*/
self.setType('f-notification-error');
self.ntf.querySelector('.f-notification-inner').innerHTML = message;
classie.remove(self.ntf, 'f-hide');
classie.add(self.ntf, 'f-show');
if (dismissIn > 0) {
this.dismissttl = setTimeout(function() {
self.dismiss();
}, dismissIn);
}
},
alert: function(message, dismissIn) {
var self = this;
/**
* Use supplied dismiss timeout if present, else uses default value.
* If set to 0, doesnt automatically dismiss.
*/
dismissIn = (typeof dismissIn === "undefined") ? this.options['dismissIn'] : dismissIn;
/**
* Set notification type styling
*/
self.setType('f-notification-alert');
self.ntf.querySelector('.f-notification-inner').innerHTML = message;
classie.remove(self.ntf, 'f-hide');
classie.add(self.ntf, 'f-show');
if (dismissIn > 0) {
this.dismissttl = setTimeout(function() {
self.dismiss();
}, dismissIn);
}
}
}, flatNotify, _flatNotifiy;
_flatNotifiy = function() {
this.init();
};
_flatNotifiy.prototype = proto_methods;
flatNotify = function() {
return new _flatNotifiy();
};
/**
* add to global namespace
*/
window.flatNotify = flatNotify;
} )( window );
External CSS
This Pen doesn't use any external CSS resources.