notification messages example

app/partials/issues.jade

@@ -4,15 +4,14 @@ block head
     title Taiga  Project management web application with scrum in mind!
 
 block content
-    include views/components/notification-message
     div.wrapper
+        include views/components/notification-message
         sidebar.menu-secondary.sidebar
             header
                 h1 Filters
 
             include views/modules/search-in
             include views/modules/filter-tags
-
         section.main.issues-page
             header
                 include views/components/mainTitle

app/partials/views/components/notification-message.jade

@@ -1,2 +1,13 @@
-div.notification-message.notification-message-success
+//div.notification-message.notification-message-success
-    div.icon.icon
+//    div.icon.icon-notification-success
+//    div.text
+//        h4.warning Everything is ok
+//        p Our oompa Loompas saved all your changes!
+//    a.icon.icon-delete(href="", title="Close notification")
+
+div.notification-message.notification-message-error
+    div.icon.icon-notification-error
+    div.text
+        h4.warning Oops, something happened...
+        p Our oompa Loompas are sad, your changes were not saved!
+    a.icon.icon-delete(href="", title="Close notification")

app/styles/components/notification-message.scss

@@ -0,0 +1,44 @@
+.notification-message {
+    background: $grayer;
+    color: $white;
+    padding: 1rem;
+    padding-bottom: .5em;
+    position: relative;
+    width: 100%;
+    z-index: 999;
+    .text {
+        display: inline-block;
+        margin-left: .5rem;
+        width: 80%;
+    }
+    .warning {
+        @extend %xlarge;
+        color: $white;
+        font-family: 'DroidSans-Bold';
+        line-height: 2.4rem;
+    }
+    .icon-delete {
+        color: $white;
+        position: absolute;
+        right: 1rem;
+        top: 1rem;
+    }
+}
+
+.notification-message-success {
+    background: $fresh-taiga;
+    .icon-notification-success {
+        @extend %xxlarge;
+        display: inline;
+        vertical-align: sub;
+    }
+}
+
+.notification-message-error {
+    background: $red;
+    .icon-notification-error {
+        @extend %xxlarge;
+        display: inline;
+        vertical-align: sub;
+    }
+}