Growl style desktop notifications

First pass. See #1349
This commit is contained in:
John O'Nolan 2013-11-12 09:58:45 +01:00
parent e4f2165f0c
commit c40357c8cb
3 changed files with 28 additions and 13 deletions

View File

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

View File

@ -911,6 +911,14 @@ nav {
========================================================================== */
#notifications {
@include breakpoint($biggerthan-mobile) {
position: absolute;
bottom: 0;
left: 0;
z-index: 980;
width: 300px;
}
@include breakpoint($mobile) {
position: fixed;
top: 0;
@ -925,17 +933,6 @@ nav {
}
%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) {
position: absolute;
top: 0;
@ -948,6 +945,18 @@ nav {
color: rgba(255,255,255,0.8);
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 {
@include icon-after($i-close) {
@ -1187,7 +1196,7 @@ main {
right:0;
z-index: 400;
height: 40px;
padding: 12px 15px;
padding: 10px 15px;
text-transform: uppercase;
color: $brown;
//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-netbook: min-width 1000px, min-width 1000px;
$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
$letterbox: max-height 600px, max-height 600px;