Add toast component interactions

Include boostrap toast component to communicate success
and error requests on the local user management page.

- Created BVToastMixin to share initialization options
- Used async/await pattern to make sure toasts are shown
  after asynchronous calls are complete
- Followed current AngularJS pattern of manual dismiss for
  error toast and automatic dismiss for success toast

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I5d5c037b5f41781972106fb5e9a2096cc72c39ab

2 files changed, 34 insertions, 1 deletions

diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index d20e64e4..2e360193 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -56,4 +56,5 @@ $colors: map-remove($theme-colors, "light", "dark");
 @import "./buttons";
 @import "./form-components";
 @import "./modal";
-@import "./table";
\ No newline at end of file
+@import "./table";
+@import "./toast";
\ No newline at end of file
diff --git a/src/assets/styles/_toast.scss b/src/assets/styles/_toast.scss
new file mode 100644
index 00000000..3f2f08c0
--- /dev/null
+++ b/src/assets/styles/_toast.scss
@@ -0,0 +1,32 @@
+.b-toaster {
+  top: 75px!important; // make sure toasts do not hide top header
+}
+
+.toast {
+  padding: $spacer/2 $spacer/2 $spacer/2 $spacer;
+  border-width: 0 0 0 5px;
+  .close {
+    font-weight: 300;
+    opacity: 1;
+  }
+}
+
+.toast-header {
+  background-color: inherit!important; //override specificity
+  border: none;
+  color: $dark!important; //override specificity
+  padding-bottom: 0;
+}
+
+.toast-body {
+  color: $dark;
+  padding-top: 0;
+}
+
+.b-toast-success .toast {
+  border-left-color: $success!important;
+}
+
+.b-toast-danger .toast {
+  border-left-color: $danger!important;
+}
\ No newline at end of file