More readable notice/alert messages

Dmitriy Zaporozhets
1 parent 11ecf007
Showing 2 changed files with 21 additions and 10 deletions Show diff stats
app/assets/stylesheets/common.scss
app/views/layouts/_flash.html.haml
@@ -46,15 +46,26 @@ table a code {
 /** FLASH message **/
 .flash-container {
   display: none;
-  .alert {
-    cursor: pointer;
-    margin: 0;
-    text-align: center;
-    border-radius: 0;
+  cursor: pointer;
+  margin: 0;
+  text-align: center;
+  border-radius: 0;
+  color: #fff;
  
-    span {
-      font-size: 14px;
-    }
+  span {
+    font-size: 14px;
+  }
+
+  .flash-notice {
+    background: #49C;
+    padding: 10px;
+    text-shadow: 0 1px 1px #178;
+  }
+
+  .flash-alert {
+    background: #C67;
+    text-shadow: 0 1px 1px #945;
+    padding: 10px;
   }
 }
  
 .flash-container
   - if alert
-    .alert.alert-error
+    .flash-alert
       %span= alert
  
   - elsif notice
-    .alert.alert-info
+    .flash-notice
       %span= notice
...	...	@@ -46,15 +46,26 @@ table a code {
46	46	/ FLASH message /
47	47	.flash-container {
48	48	display: none;
49		- .alert {
50		- cursor: pointer;
51		- margin: 0;
52		- text-align: center;
53		- border-radius: 0;
	49	+ cursor: pointer;
	50	+ margin: 0;
	51	+ text-align: center;
	52	+ border-radius: 0;
	53	+ color: #fff;
54	54
55		- span {
56		- font-size: 14px;
57		- }
	55	+ span {
	56	+ font-size: 14px;
	57	+ }
	58	+
	59	+ .flash-notice {
	60	+ background: #49C;
	61	+ padding: 10px;
	62	+ text-shadow: 0 1px 1px #178;
	63	+ }
	64	+
	65	+ .flash-alert {
	66	+ background: #C67;
	67	+ text-shadow: 0 1px 1px #945;
	68	+ padding: 10px;
58	69	}
59	70	}
60	71
...	...
1	1	.flash-container
2	2	- if alert
3		- .alert.alert-error
	3	+ .flash-alert
4	4	%span= alert
5	5
6	6	- elsif notice
7		- .alert.alert-info
	7	+ .flash-notice
8	8	%span= notice
...	...