Add toast notifications to SNMP page

Design team proposed that our error and success messages be
delivered as 'toast' messages on the right side of the screen.
This brings in ngToast and implements notifications on SNMP page.
Notifications will fade after 10 seconds or can be dismissed.

https://github.com/tameraydin/ngToast

Change-Id: I1053534cd1ab189ae5c2ac07e2a922acea231c70
Signed-off-by: beccabroek <beccabroek@gmail.com>

2 files changed, 29 insertions, 0 deletions

diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 9a6fe55..dd32703 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -13,3 +13,4 @@
 @import "quicklinks";
 @import "errors";
 @import "success";
+@import "toast";
diff --git a/app/common/styles/elements/toast.scss b/app/common/styles/elements/toast.scss
new file mode 100644
index 0000000..ae6d1bc
--- /dev/null
+++ b/app/common/styles/elements/toast.scss
@@ -0,0 +1,28 @@
+// Overrides style for ngToast notifications
+.ng-toast {
+  margin-top: 9em;
+  .close {
+    margin: .3em;
+  }
+  .title {
+    font-weight: bold;
+  }
+  .ng-toast__message {
+    max-width: 400px;
+  }
+  .alert {
+    color: #333;
+    border-radius: 0;
+    text-align: left;
+  }
+  .alert-success::before {
+    content: "Success!";
+    display: block;
+    font-weight: bold;
+  }
+  .alert-danger::before {
+    content: "Error";
+    display: block;
+    font-weight: bold;
+  }
+}