Standardising notification types

- CSS classes directly correspond to notification 'types'
 - Error, warn and info are reasonably standard terms for descending priority 'log levels', using these to denote red, orange and blue notifications.
This commit is contained in:
Hannah Wolfe 2013-08-26 22:26:50 +01:00
parent 0c5bb03dcc
commit 9074b87205

View File

@ -296,8 +296,8 @@ kbd {
font-weight: bold; font-weight: bold;
background: #f4f4f4; background: #f4f4f4;
border-radius: 4px; border-radius: 4px;
box-shadow: box-shadow:
0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2),
0 1px 0 0 #fff inset; 0 1px 0 0 #fff inset;
} }
@ -747,7 +747,7 @@ nav {
&:hover { &:hover {
background: $blue; background: $blue;
box-shadow: box-shadow:
rgba(255,255,255,0.2) 0 1px 0 inset, rgba(255,255,255,0.2) 0 1px 0 inset,
rgba(0,0,0,0.5) 0 1px 5px; rgba(0,0,0,0.5) 0 1px 5px;
} }
@ -840,7 +840,7 @@ nav {
padding: 10px 43px 10px 57px; padding: 10px 43px 10px 57px;
margin: 0 0 15px 0; margin: 0 0 15px 0;
color: rgba(255,255,255,0.9); color: rgba(255,255,255,0.9);
background: $orange; background: $blue;
position:relative; position:relative;
box-shadow: $shadow; box-shadow: $shadow;
@ -891,7 +891,14 @@ nav {
background: $red; background: $red;
} }
.notification-alert {
.notification-warn {
@extend %notification;
@include icon($i-info);
background: $orange;
}
.notification-info {
@extend %notification; @extend %notification;
@include icon($i-info); @include icon($i-info);
background: $blue; background: $blue;
@ -1075,7 +1082,7 @@ main {
.scrolling { .scrolling {
.floatingheader { .floatingheader {
box-shadow: box-shadow:
rgba(0,0,0,0.02) 0 1px 2px, rgba(0,0,0,0.02) 0 1px 2px,
rgba(255, 255, 255, 0.5) 0 -1px 0 inset; rgba(255, 255, 255, 0.5) 0 -1px 0 inset;
@ -1280,7 +1287,7 @@ main {
@include transition(all 0.15s ease-in-out); @include transition(all 0.15s ease-in-out);
&:hover { &:hover {
box-shadow: box-shadow:
rgba(0,0,0,0.05) 5px 0 0 inset, rgba(0,0,0,0.05) 5px 0 0 inset,
rgba(0,0,0,0.05) -5px 0 0 inset, rgba(0,0,0,0.05) -5px 0 0 inset,
rgba(0,0,0,0.05) 0 5px 0 inset, rgba(0,0,0,0.05) 0 5px 0 inset,