From 6efcac48b58e3348badac9ccb3f510d5fba41051 Mon Sep 17 00:00:00 2001
From: Florian Staudacher <florian_staudacher@yahoo.de>
Date: Sun, 15 Jul 2012 19:33:32 +0200
Subject: [PATCH] fix flash messages

---
 app/assets/stylesheets/_flash_messages.scss   | 50 +++++++++++++++++++
 app/assets/stylesheets/application.css.sass   | 44 +---------------
 .../stylesheets/new_styles/_animations.scss   | 20 ++++++++
 .../new_styles/_flash_messages.scss           | 45 ++---------------
 4 files changed, 76 insertions(+), 83 deletions(-)
 create mode 100644 app/assets/stylesheets/_flash_messages.scss

diff --git a/app/assets/stylesheets/_flash_messages.scss b/app/assets/stylesheets/_flash_messages.scss
new file mode 100644
index 000000000..d164d9132
--- /dev/null
+++ b/app/assets/stylesheets/_flash_messages.scss
@@ -0,0 +1,50 @@
+
+@import 'new_styles/animations';
+
+#flash_notice,
+#flash_alert,
+#flash_error {
+  position : fixed;
+  z-index: 999;
+  top : -100px;
+  left : 0;
+  width : 100%;
+
+  text-align : center;
+  font-weight: bold;
+  color: #666;
+
+  &.expose {
+    @include animation(expose, 5s)
+  }
+
+  .message {
+    @include border-radius(6px);
+    @include box-shadow(0, 1px, 4px, rgba(0,0,0,0.8));
+
+    display : inline-block;
+    padding: 45px 12px 8px;
+    min-width: 400px;
+    max-width: 800px;
+
+    color : #fff;
+    background-color : rgba(0,0,0,0.8);
+    border : 1px solid rgba(255,255,255,0.7);
+  }
+}
+
+#flash_notice {
+  .message {
+    color: #666;
+    background-color: #F4F899;
+    border-color: darken(#F4F899, 40%);
+  }
+}
+
+#flash_error,
+#flash_alert {
+  .message {
+    background-color: #CA410B;
+    border-color: darken(#CA410B, 10%);
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index 385d614fd..da5a8cfb2 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/app/assets/stylesheets/application.css.sass
@@ -1,5 +1,6 @@
 @import 'ui.css.sass'
 @import '_mixins.css.scss'
+@import '_flash_messages.scss'
 @import 'new_styles/_spinner'
 
 /* ====== media ====== */
@@ -84,49 +85,6 @@ ul > li
   :border 1px solid #ccc
   :height 100%
 
-#flash_notice,
-#flash_error,
-#flash_alert
-  :z-index 999
-  :position fixed
-  :color #666
-  :top -100px
-
-  :left 0
-
-  :width 100%
-
-  :font
-    :weight bold
-  :text
-    :align center
-
-  .message
-    @include border-radius(6px)
-    @include box-shadow(0, 1px, 5px, rgba(0,0,0,0.4))
-    :display inline-block
-    :min-width 400px
-    :max-width 800px
-    :padding
-      :top 45px
-      :bottom 8px
-      :left 12px
-      :right 12px
-
-#flash_notice
-  .message
-    :background
-      :color #F4F899
-    :border 1px solid darken(#F4F899, 40%)
-
-#flash_error,
-#flash_alert
-  .message
-    :color #fff
-    :background
-      :color #CA410B
-    :border 1px solid darken(#CA410B, 10%)
-
 .login_error,
 .login_alert
   :color rgb(208,49,43)
diff --git a/app/assets/stylesheets/new_styles/_animations.scss b/app/assets/stylesheets/new_styles/_animations.scss
index a6bb2d10b..761ec331e 100644
--- a/app/assets/stylesheets/new_styles/_animations.scss
+++ b/app/assets/stylesheets/new_styles/_animations.scss
@@ -40,3 +40,23 @@
 	0%     { @include opacity(1); -ms-transform : scale(1); }
 	100%   { @include opacity(0); -ms-transform : scale(1.3); }
 }
+
+/* flash message animations */
+@-webkit-keyframes expose {
+        0%   { top : -100px; }
+        15%  { top : 0; }
+        85%  { top : 0; }
+        100% { top : -100px; }
+}
+@-moz-keyframes expose {
+        0%   { top : -100px; }
+        15%  { top : 0; }
+        85%  { top : 0; }
+        100% { top : -100px; }
+}
+@-ms-keyframes expose {
+        0%   { top : -100px; }
+        15%  { top : 0; }
+        85%  { top : 0; }
+        100% { top : -100px; }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/new_styles/_flash_messages.scss b/app/assets/stylesheets/new_styles/_flash_messages.scss
index 2f7dcf49c..8665c03b3 100644
--- a/app/assets/stylesheets/new_styles/_flash_messages.scss
+++ b/app/assets/stylesheets/new_styles/_flash_messages.scss
@@ -1,48 +1,13 @@
-/* animations */
-@-webkit-keyframes expose {
-	0%   { top : -100px; }
-	15%  { top : 0; }
-	85%  { top : 0; }
-	100% { top : -100px; }
-}
-@-moz-keyframes expose {
-	0%   { top : -100px; }
-	15%  { top : 0; }
-	85%  { top : 0; }
-	100% { top : -100px; }
-}
-@-ms-keyframes expose {
-	0%   { top : -100px; }
-	15%  { top : 0; }
-	85%  { top : 0; }
-	100% { top : -100px; }
-}
 
-/* styles */
-#flash_alert,
+@import '../_flash_messages';
+
 #flash_notice,
-#flash_alert {
-  position : fixed;
-  top : -100px;
-  left : 0;
-  width : 100%;
-
-  text-align : center;
-
-  &.expose {
-    @include animation(expose, 4s)
-  }
-
+#flash_alert,
+#flash_error {
   .message {
-    @include border-radius(6px);
-    @include box-shadow(0, 1px, 4px, rgba(0,0,0,0.8));
-
-    display : inline-block;
-    padding : 10px 20px 8px 20px;
     margin-top : 10px;
+    padding : 10px 20px 8px;
     background-color : rgba(0,0,0,0.8);
-    color : #fff;
-
     border : 1px solid rgba(255,255,255,0.7);
   }
 }
\ No newline at end of file