From b98e0069902391b03080904c14d97b0f1a968697 Mon Sep 17 00:00:00 2001
From: Magdalena Kafka <magdalena.kafka@gmx.de>
Date: Fri, 16 Oct 2015 14:54:06 +0200
Subject: [PATCH] Fix overlapped notifications

---
 .../stylesheets/content/_notifications.sass   | 49 ++++++++++++-------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/content/_notifications.sass b/app/assets/stylesheets/content/_notifications.sass
index 9e4ccfbca5..7f28dd48f6 100644
--- a/app/assets/stylesheets/content/_notifications.sass
+++ b/app/assets/stylesheets/content/_notifications.sass
@@ -181,18 +181,16 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
 
 .notification-box--wrapper
   position: absolute
-  top: rem-calc(12px)
   width: $nm-notification-width
   margin-left: -($nm-notification-width / 2)
   left: 50%
+  z-index: 15
+
   .notification-box--casing
     position: relative
     .notification-box
       margin-bottom: rem-calc(3px)
 
-.flash + .notification-box--wrapper
-  top: 3.85rem
-
 // awesome animations
 .notification-box
   &.ng-enter
@@ -206,6 +204,22 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
   &.ng-leave.ng-leave-active
     opacity: 0
 
+  .notification-box--content
+    width: 100%
+
+    > p
+      margin-bottom: 0
+
+    progress[value]
+      @extend %progress-styles
+      &::-moz-progress-bar
+        border-radius: $nm-pb-border-radius
+      &::-webkit-progress-bar
+        background-color: $nm-pb-regress-color
+        border-radius: $nm-pb-border-radius
+      &::-webkit-progress-value
+        border-radius: $nm-pb-border-radius
+
 // upload notification styles
 %progress-styles
   appearance: none
@@ -237,18 +251,6 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
   font-size: $nm-upload-status-font-size !important
   line-height: $nm-upload-status-font-size !important
 
-.notification-box--content
-  width: 100%
-  progress[value]
-    @extend %progress-styles
-    &::-moz-progress-bar
-      border-radius: $nm-pb-border-radius
-    &::-webkit-progress-bar
-      background-color: $nm-pb-regress-color
-      border-radius: $nm-pb-border-radius
-    &::-webkit-progress-value
-      border-radius: $nm-pb-border-radius
-
 .notification-box--notice
   border-radius: $nm-border-radius
   border-style: solid
@@ -266,7 +268,6 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
 // Use same styles for flash messages
 .flash, #errorExplanation
   position: absolute
-  top: rem-calc(12px)
   width: $nm-notification-width
   margin-left: -($nm-notification-width / 2)
   left: 50%
@@ -279,7 +280,7 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
   box-shadow: rem-calc(1px 2px 3px) #dddddd
   margin-bottom: 0.1875rem
   margin-top: 0.5rem
-  z-index: 1000
+  z-index: 15
 
   &.ng-leave
     @include animation(0.5s fade-out)
@@ -334,3 +335,15 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
 
   &::before
     color: $nm-color-error-icon !important
+
+.flash,
+#errorExplanation,
+.notification-box--wrapper
+  top: 4.25rem
+
+  %absolute-layout-mode &
+    top: rem-calc(12px)
+
+.flash + .notification-box--wrapper
+  %absolute-layout-mode &
+    top: 3.85rem