From de9780a7569dd2a972c553522186247457a36457 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Fri, 8 Jun 2018 12:32:00 -0400
Subject: [PATCH] toaster styles

---
 src/app/app.component.ts |  1 +
 src/scss/plugins.scss    | 71 ++++++++++++++++++++++++++++++++++++++++
 src/scss/styles.scss     |  3 +-
 3 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 src/scss/plugins.scss

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 15a5f4fc99..66bdaca1b0 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -19,6 +19,7 @@ export class AppComponent {
         mouseoverTimerStop: true,
         animation: 'flyRight',
         limit: 5,
+        positionClass: 'toast-bottom-right',
     });
 
     constructor() {
diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss
new file mode 100644
index 0000000000..53731fedb3
--- /dev/null
+++ b/src/scss/plugins.scss
@@ -0,0 +1,71 @@
+@import "~angular2-toaster/toaster";
+
+#toast-container {
+    .toast-close-button {
+        right: -0.15em;
+    }
+
+    .toast {
+        opacity: 1 !important;
+        background-image: none !important;
+        border-radius: $border-radius;
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
+        display: flex;
+        align-items: center;
+
+        &:hover {
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
+        }
+
+        &:before {
+            font-family: FontAwesome;
+            font-size: 25px;
+            line-height: 20px;
+            float: left;
+            color: #ffffff;
+            padding-right: 10px;
+            margin: auto 0 auto -36px;
+        }
+
+        .toaster-icon {
+            display: none;
+        }
+
+        &.toast-danger, &.toast-error {
+            background-image: none !important;
+            background-color: $danger;
+
+            &:before {
+                content: "\f0e7";
+                margin-left: -30px;
+            }
+        }
+
+        &.toast-warning {
+            background-image: none !important;
+            background-color: $warning;
+
+            &:before {
+                content: "\f071";
+            }
+        }
+
+        &.toast-info {
+            background-image: none !important;
+            background-color: $info;
+
+            &:before {
+                content: "\f05a";
+            }
+        }
+
+        &.toast-success {
+            background-image: none !important;
+            background-color: $success;
+
+            &:before {
+                content: "\f00C";
+            }
+        }
+    }
+}
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 7412af6871..7cafebe806 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -51,7 +51,8 @@ $input-disabled-bg: #e0e0e0;
 $table-accent-bg: rgba(#000000, .02);
 $table-hover-bg: rgba(#000000, .03);
 
-@import "../../node_modules/bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/bootstrap";
+@import "./plugins";
 
 html {
     font-size: 14px;