toaster styles

src/app/app.component.ts

@@ -19,6 +19,7 @@ export class AppComponent {
         mouseoverTimerStop: true,
         animation: 'flyRight',
         limit: 5,
+        positionClass: 'toast-bottom-right',
     });
 
     constructor() {

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";
+            }
+        }
+    }
+}

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;