From 805c827bb19ae331c664bbe5ab147988e747adf8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Wed, 9 Jul 2014 16:41:09 +0200
Subject: [PATCH] Added light notification messages

---
 .../components/notification-message.jade      |  1 -
 .../components/notification-message.scss      | 36 +++++++++++++++++++
 app/styles/dependencies/colors.scss           |  2 ++
 app/styles/dependencies/mixins.scss           |  4 +++
 app/styles/layout/login.scss                  | 12 -------
 5 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/app/partials/views/components/notification-message.jade b/app/partials/views/components/notification-message.jade
index ff03c307..6759e559 100644
--- a/app/partials/views/components/notification-message.jade
+++ b/app/partials/views/components/notification-message.jade
@@ -13,7 +13,6 @@ div.hidden.notification-message.notification-message-error
     a.icon.icon-delete(href="", title="Close notification")
 
 div.hidden.notification-light.notification-message-light-error
-    div.icon.icon-notification-error
     div.text
         h4.warning Oops, something happened...
         p Our oompa Loompas are sad, your changes were not saved!
diff --git a/app/styles/components/notification-message.scss b/app/styles/components/notification-message.scss
index 81084a72..e836fb41 100644
--- a/app/styles/components/notification-message.scss
+++ b/app/styles/components/notification-message.scss
@@ -42,3 +42,39 @@
         vertical-align: sub;
     }
 }
+
+.notification-light {
+    @include transition(padding .2s linear);
+    background: rgba(0, 0, 0, .8);
+    color: $white;
+    left: calc(50% - 200px);
+    padding: 4% 1rem .2rem;
+    position: absolute;
+    top: 0;
+    width: 400px;
+    z-index: 999;
+    &.hidden {
+        @include transition (padding .2s linear);
+        padding: 1% 1rem .2rem;
+    }
+    .text {
+        display: inline-block;
+        margin-left: .5rem;
+        width: 80%;
+    }
+    .warning {
+        @extend %large;
+        @extend %bold;
+        color: $white;
+        line-height: 2.4rem;
+    }
+    .icon-delete {
+        color: $white;
+        position: absolute;
+        right: 1rem;
+    }
+}
+
+.notification-message-light-error {
+    @include background(240, 15, 8, .8);
+}
diff --git a/app/styles/dependencies/colors.scss b/app/styles/dependencies/colors.scss
index 5688be5a..e3325f54 100755
--- a/app/styles/dependencies/colors.scss
+++ b/app/styles/dependencies/colors.scss
@@ -19,6 +19,8 @@ $very-light-gray: #e3e3e3;
 $red-light: #ff8282;
 $red: #f00;
 
+$rgba-red: 240, 15, 0, .8;
+
 $orange: #d98a0b;
 
 $button-green: #699b05;
diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss
index 17fdba67..c86c10bd 100644
--- a/app/styles/dependencies/mixins.scss
+++ b/app/styles/dependencies/mixins.scss
@@ -50,3 +50,7 @@
         max-height: $max;
     }
 }
+
+@mixin background($red: 255, $green: 255, $blue: 255, $opacity: 1) {
+    background: rgba($red, $green, $blue, $opacity);
+}
diff --git a/app/styles/layout/login.scss b/app/styles/layout/login.scss
index c713812e..9b190495 100644
--- a/app/styles/layout/login.scss
+++ b/app/styles/layout/login.scss
@@ -52,18 +52,6 @@
             background: $fresh-taiga;
         }
     }
-    .reset-pass-text {
-        display: none;
-        span,
-        strong {
-            display: block;
-            text-align: center;
-        }
-        .title {
-            @extend %large;
-            line-height: 2rem;
-        }
-    }
 }
 
 .login-error {