custom toast

mixins.scss

@mixin box-shadow($value) {
  -webkit-box-shadow: $value;
  -moz-box-shadow: $value;
  box-shadow: $value;
}

toast.scss

@import "../variables";
@import "../mixins";

#toast-container > .custom-toast {
  padding: 10px;
  border-radius: 0;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.65);
  &:hover {
    @include box-shadow(0 0 12px #555);
  }
  .close {
    cursor: pointer;
    padding: 3px;
    margin-top: 5px;
    margin-bottom: -5px;
    color: $c-optional-field;
    &:hover {
      color: $c-white;
      opacity: 1;
    }
    .icon-close {
      text-shadow: none;
      font-size: 14px;
    }
  }
  .toast-message {
    padding-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.2em;
  }
}

.custom-toast-success {
  .toast-message {
    color: $c-notification-success;
  }
}
.custom-toast-error {
  .toast-message {
    color: $c-notification-error;
  }
}
.custom-toast-error {
  .toast-message {
    color: $c-notification-warning;
  }
}

toastr.js

(function () {
  "use strict";
  var defaultOptions = {
    timeOut: 5000000,
    extendedTimeOut: 5000000,
    hideDuration: 300,
    closeButton: true,
    iconClass: 'custom-toast',
    closeHtml: '<div class="close"><i class="icon icon-close"></i></div>',
    positionClass: "toast-bottom-right"
  };

  // This variable used specially for autocomplete in IDE
  var customToast = {
    /**
     * Simple toast wrapper
     * @param type {String}
     * @param message {String}
     * @param title [String]
     * @param options [Object]
     * @returns {Object}
     * */
    show: function (type, message, title, options) {
      if (!title) {
        title = '';
        options = title;
      }
      var resultOptions =  _.extend({}, defaultOptions, options);
      resultOptions.iconClass += ' custom-toast-' + type;
      return toastr[type](message, title, resultOptions);
    },

    /**
     * Simple toast wrapper for success message
     * @param {String} {message}
     * @param {String} [title='']
     * @param {Object} [options]
     * @returns {Object}
     * */
    success: function (message, title, options) {
      return this.show('success', message, title, options);
    },

    /**
     * Simple toast wrapper for warning message
     * @param message {String}
     * @param title [String]
     * @param options [Object]
     * @returns {Object}
     * */
    warning: function (message, title, options) {
      return this.show('warning', message, title, options);
    },

    /**
     * Simple toast wrapper for info message
     * @param message {String}
     * @param title [String]
     * @param options [Object]
     * @returns {Object}
     * */
    info: function (message, title, options) {
      return this.show('info', message, title, options);
    },

    /**
     * Simple toast wrapper for error message
     * @param message {String}
     * @param title [String]
     * @param options [Object]
     * @returns {Object}
     * */
    error: function (message, title, options) {
      return this.show('error', message, title, options);
    }
  };

  return customsToast;
})()

variables.scss

$c-optional-field: #F1F1F1;
$c-white: #ffffff;
$c-notification-success: #5dcf00;
$c-notification-error: #ff3600;
$c-notification-warning: #ffb900;