Merge pull request #1446 from JohnONolan/notifications

Growl style desktop notifications
This commit is contained in:
Hannah Wolfe 2013-11-12 04:15:35 -08:00
commit f022e8486d
3 changed files with 28 additions and 13 deletions

View File

@ -18,6 +18,12 @@
.editor { .editor {
#notifications {
@include breakpoint($biggerthan-mobile) {
bottom: 40px;
}
}
// The main post title // The main post title
.entry-title { .entry-title {
@extend %box; @extend %box;

View File

@ -930,6 +930,14 @@ nav {
========================================================================== */ ========================================================================== */
#notifications { #notifications {
@include breakpoint($biggerthan-mobile) {
position: absolute;
bottom: 0;
left: 0;
z-index: 980;
width: 300px;
}
@include breakpoint($mobile) { @include breakpoint($mobile) {
position: fixed; position: fixed;
top: 0; top: 0;
@ -944,17 +952,6 @@ nav {
} }
%notification, .notification { %notification, .notification {
@include box-sizing(border-box);
width: 100%;
min-height: 40px;
padding: 10px 43px 10px 57px;
margin: 0 0 15px 0;
color: rgba(255,255,255,0.9);
background: $blue;
position:relative;
box-shadow: $shadow;
@include transform(translateZ(0));
@include icon($i-notification) { @include icon($i-notification) {
position: absolute; position: absolute;
top: 0; top: 0;
@ -967,6 +964,18 @@ nav {
color: rgba(255,255,255,0.8); color: rgba(255,255,255,0.8);
background: rgba(0,0,0,0.1); background: rgba(0,0,0,0.1);
}; };
@include box-sizing(border-box);
width: 100%;
min-height: 40px;
padding: 10px 43px 10px 57px;
margin: 0 0 15px 0;
color: rgba(255,255,255,0.9);
background: $blue;
position:relative;
box-shadow: $shadow;
@include transform(translateZ(0));
@include breakpoint($mobile) {margin-bottom: 1px;}
.close { .close {
@include icon-after($i-close) { @include icon-after($i-close) {
@ -1206,7 +1215,7 @@ main {
right:0; right:0;
z-index: 400; z-index: 400;
height: 40px; height: 40px;
padding: 12px 15px; padding: 10px 15px;
text-transform: uppercase; text-transform: uppercase;
color: $brown; color: $brown;
//Transparent gradient to make bg fade out as it goes out the top. //Transparent gradient to make bg fade out as it goes out the top.

View File

@ -42,7 +42,7 @@ $mobile: 400px;
$biggerthan-widescreen: min-width 1500px, min-width 1500px; $biggerthan-widescreen: min-width 1500px, min-width 1500px;
$biggerthan-netbook: min-width 1000px, min-width 1000px; $biggerthan-netbook: min-width 1000px, min-width 1000px;
$biggerthan-tablet: min-width 800px, min-width 800px; $biggerthan-tablet: min-width 800px, min-width 800px;
$biggerthan-mobile: min-width 400px, min-width 400px; $biggerthan-mobile: min-width 401px, min-width 401px;
// Heights // Heights
$letterbox: max-height 600px, max-height 600px; $letterbox: max-height 600px, max-height 600px;