SheepToasts

https://github.com/SzymonLisowiec/SheepToasts

by Szymon Lisowiec

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

JavaScript

function SheepToasts(config){
	'use strict';
  
  if(typeof config == 'undefined') config = {};
  
  var _private = {
  	
    animation: (typeof config.animation == 'object')?config.animation:false,
    sort: (config.sort == 'top')?'top':'bottom',
    toastMargin: (typeof config.toastMargin == 'number')?config.toastMargin:4,
    delayRemove: (typeof config.delayRemove == 'number')?config.delayRemove:5000,
    
    cssMain: {
    	display: 'inline-block',
      maxWidth: '320px',
      padding: '5px 8px',
      position: 'fixed',
      top: 'auto',
      right: '32px',
      bottom: '32px',
      left: 'auto',
      borderRadius: '3px',
      wordBreak: 'break-all',
      fontFamily: 'cursive, sans-serif',
      fontSize: '13px',
      cursor: 'pointer',
      transition: 'top 0.32s, bottom 0.32s',
      webKitAnimationDuration: '0.5s',
      mozAnimationDuration: '0.5s',
      oAnimationDuration: '0.5s',
      animationDuration: '0.5s'
    },
    cssButtons: {
    	display: 'inline-block',
      height: '20px',
      margin: '-3px 0 0 3px',
      padding: '0 5px',
      verticalAlign: 'middle',
      whiteSpace: 'nowrap',
      border: 'none',
      borderRadius: '10px',
      fontFamily: 'inherit',
      fontSize: '11px',
      cursor: 'pointer'
    },
    cssModes: {
    	warning: {
      	color: '#fafeff',
      	background: '#c8354e',
        textShadow: '#e74c3c 1px 2px 1px',
        _buttons: {
        	color: '#fafeff',
          textShadow: '#46231f 0px 0px 3px',
          background: '#e25353'
        }
      },
      info: {
      	color: '#fafeff',
      	background: '#2980b9',
        textShadow: '#3498db 1px 2px 1px',
        _buttons: {
        	color: '#fafeff',
          textShadow: '#173646 0px 0px 3px',
          background: '#2c9fea'
        }
      },
      success: {
      	color: '#fafeff',
      	background: '#27ae60',
        textShadow: '#1e7744 1px 2px 1px',
        _buttons: {
        	color: '#fafeff',
          textShadow: '#185833...