Skip to content

Fix issue #9 #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Laboratory wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Fix issue #9 #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
684e520
fix #9 issue, added less support, 5Dgenerated css by less
Laboratory Oct 12, 2012
565a523
fix #9 issue, added less support, generated css by less
Laboratory Oct 12, 2012
7c62c5e
Merge branch 'fix-issue-9' of https://github.com/Laboratory/bootstrap…
Laboratory Oct 12, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
.DS_Store

./idea
12 changes: 5 additions & 7 deletions css/bootstrap-notify.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,29 @@
/**
* Created less By Vitaly @Laboratory
*/
.notifications {
position: fixed;
}

/* Positioning */
/* Positioning */
.notifications.top-right {
right: 10px;
top: 25px;
}

.notifications.top-left {
left: 10px;
top: 25px;
}

.notifications.bottom-left {
left: 10px;
bottom: 25px;
}

.notifications.bottom-right {
right: 10px;
bottom: 25px;
}

/* Notification Element */
.notifications > div {
position: relative;
z-index: 9999;
margin: 5px 0px;
}
}
42 changes: 42 additions & 0 deletions css/bootstrap-notify.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/**
* Created less By Vitaly @Laboratory
*/

@right: 10px;
@left: @right;
@top: 25px;
@bottom: @top;

.notifications {
position: fixed;
}

/* Positioning */
.notifications.top-right {
right: @right;
top: @top;
}

.notifications.top-left {
left: @left;
top: @top;
}

.notifications.bottom-left {
left: @left;
bottom: @bottom;
}

.notifications.bottom-right {
right: @right;
bottom: @bottom;
}

/* Notification Element */
.notifications {
> div {
position: relative;
z-index: 9999;
margin: 5px 0px;
}
}
35 changes: 18 additions & 17 deletions css/styles/alert-bangtidy.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/**
* bangTidy2 Style - Ported from Growl Style
* Ported By Nijikokun @vizualover @nijikokun
* Created less By Vitaly @Laboratory
* Original Author Daryl Ginn
* Based On http://dribbble.com/shots/527056-Growl-Theme-2
*
Expand All @@ -10,28 +11,28 @@
.alert-bangTidy {
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: rgba(0, 0, 0, 0.80);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.88) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0, 0.80)), color-stop(100%,rgba(0, 0, 0, 0.88)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.80) 0%,rgba(0, 0, 0, 0.88) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.80) 0%,rgba(0, 0, 0, 0.88) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.80) 0%,rgba(0, 0, 0, 0.88) 100%);
background: linear-gradient(top, rgba(0, 0, 0, 0.80) 0%,rgba(0, 0, 0, 0.88) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0, 0, 0, 0.80)', endColorstr='rgba(0, 0, 0, 0.88)',GradientType=0 );
background: rgba(0, 0, 0, 0.8);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.88) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.88)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.88) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.88) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.88) 100%);
background: linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.88) 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='rgba(0, 0, 0, 0.8)', endColorstr='rgba(0, 0, 0, 0.88)', GradientType=0);
border: 1px solid #000;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.1);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.1);
-o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.1);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
overflow: hidden;
color: white;
-webkit-text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
-moz-text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
-o-text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
-webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-o-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-webkit-font-smoothing: antialiased;
}
}
44 changes: 44 additions & 0 deletions css/styles/alert-bangtidy.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/**
* bangTidy2 Style - Ported from Growl Style
* Ported By Nijikokun @vizualover @nijikokun
* Created less By Vitaly @Laboratory
* Original Author Daryl Ginn
* Based On http://dribbble.com/shots/527056-Growl-Theme-2
*
* To use, for style use: bangTidy
*
*/
@rgba80: rgba(0, 0, 0, 0.80);
@rgba88: rgba(0, 0, 0, 0.88);
@box_shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
@text_shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
@border_radius: 4px;

.alert-bangTidy {
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: @rgba80;
background: -moz-linear-gradient(top, @rgba80 0%, @rgba88 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @rgba80), color-stop(100%, @rgba88));
background: -webkit-linear-gradient(top, @rgba80 0%, @rgba88 100%);
background: -o-linear-gradient(top, @rgba80 0%, @rgba88 100%);
background: -ms-linear-gradient(top, @rgba80 0%, @rgba88 100%);
background: linear-gradient(top, @rgba80 0%, @rgba88 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '@{rgba80}', endColorstr = '@{rgba88}', GradientType = 0);
border: 1px solid #000;
-webkit-box-shadow: @box_shadow;
-moz-box-shadow: @box_shadow;
-o-box-shadow: @box_shadow;
box-shadow: @box_shadow;
-webkit-border-radius: @border_radius;
-moz-border-radius: @border_radius;
-o-border-radius: @border_radius;
border-radius: @border_radius;
overflow: hidden;
color: white;
-webkit-text-shadow: @text_shadow;
-moz-text-shadow: @text_shadow;
-o-text-shadow: @text_shadow;
text-shadow: @text_shadow;
-webkit-font-smoothing: antialiased;
}
177 changes: 109 additions & 68 deletions css/styles/alert-blackgloss.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,92 +3,133 @@
* --
* Based off blackgloss growl theme.
* Copyright 2012 Nijiko Yonskai
* Created less By Vitaly @Laboratory
* --
* Usage:
* Usage:
* Set style to `blackgloss` and include this css.
*
* Note:
* The gloss is only supported in webkit based browsers.
* Note:
* The gloss is only supported in webkit based browsers.
* Chrome and Safari.
*/
@-webkit-keyframes notification {
0% { -webkit-transform: rotateY(-90deg); opacity: 0; }
70% { -webkit-transform: rotateY(20deg); opacity: .8; }
90% { -webkit-transform: rotateY(-10deg); opacity: 1; }
100% { -webkit-transform: rotateY(-0deg); opacity: 1; }
0% {
-webkit-transform: rotatey(-90deg);
opacity: 0;
}
70% {
-webkit-transform: rotatey(20deg);
opacity: .8;
}
90% {
-webkit-transform: rotatey(-10deg);
opacity: 1;
}
100% {
-webkit-transform: rotatey(0deg);
opacity: 1;
}
}

@-moz-keyframes notification {
0% { -webkit-transform: rotateY(-90deg); opacity: 0; }
70% { -webkit-transform: rotateY(20deg); opacity: .8; }
90% { -webkit-transform: rotateY(-10deg); opacity: 1; }
100% { -webkit-transform: rotateY(-0deg); opacity: 1; }
0% {
-webkit-transform: rotatey(-90deg);
opacity: 0;
}
70% {
-webkit-transform: rotatey(20deg);
opacity: .8;
}
90% {
-webkit-transform: rotatey(-10deg);
opacity: 1;
}
100% {
-webkit-transform: rotatey(0deg);
opacity: 1;
}
}

@-o-keyframes notification {
0% { -webkit-transform: rotateY(-90deg); opacity: 0; }
70% { -webkit-transform: rotateY(20deg); opacity: .8; }
90% { -webkit-transform: rotateY(-10deg); opacity: 1; }
100% { -webkit-transform: rotateY(-0deg); opacity: 1; }
0% {
-webkit-transform: rotatey(-90deg);
opacity: 0;
}
70% {
-webkit-transform: rotatey(20deg);
opacity: .8;
}
90% {
-webkit-transform: rotatey(-10deg);
opacity: 1;
}
100% {
-webkit-transform: rotatey(0deg);
opacity: 1;
}
}

keyframes notification {
0% { -webkit-transform: rotateY(-90deg); opacity: 0; }
70% { -webkit-transform: rotateY(20deg); opacity: .8; }
90% { -webkit-transform: rotateY(-10deg); opacity: 1; }
100% { -webkit-transform: rotateY(-0deg); opacity: 1; }
keyframes notification 0% {
-webkit-transform: rotatey(-90deg);
opacity: 0;
}
keyframes notification 70% {
-webkit-transform: rotatey(20deg);
opacity: .8;
}
keyframes notification 90% {
-webkit-transform: rotatey(-10deg);
opacity: 1;
}
keyframes notification 100% {
-webkit-transform: rotatey(0deg);
opacity: 1;
}

/* Webkit Only */
.alert-blackgloss:before {
background: -webkit-gradient(linear, 0% -16.5%, 16.5% -100%, from(rgba(255,255,255,.0)), to(rgba(255,255,255,.6)), color-stop(.99,rgba(255,255,255,.2)),color-stop(.5,rgba(255,255,255,.0))) no-repeat;
-webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.5)), color-stop(.8,rgba(255,255,255,.0)));
position: absolute;
content: '.';
line-height: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
overflow: hidden;
text-indent: -99999px;
-webkit-border-radius: 5px;
background: -webkit-gradient(linear, 0% -16.5%, 16.5% -100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.6)), color-stop(0.99, rgba(255, 255, 255, 0.2)), color-stop(0.5, rgba(255, 255, 255, 0))) no-repeat;
-webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.5)), color-stop(0.8, rgba(255, 255, 255, 0)));
position: absolute;
content: '.';
line-height: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
overflow: hidden;
text-indent: -99999px;
-webkit-border-radius: 5px;
}

.alert-blackgloss {
-webkit-animation: notification .75s linear;
-moz-animation: notification .75s linear;
-ms-animation: notification .75s linear;
-o-animation: notification .75s linear;
animation: notification .75s linear;
background: rgba(0,0,0,1);
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1);
-ms-box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1);
-o-box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1);
box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1);
border: 1px solid rgba(0,0,0,.95);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-font-smoothing: antialiased;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
color: #fff;
-webkit-transform: rotateY(-0deg);
-moz-transform: rotateY(-0deg);
-o-transform: rotateY(-0deg);
transform: rotateY(-0deg);
position: relative;
background-clip: padding-box;
-webkit-animation: notification 0.75s linear;
-moz-animation: notification 0.75s linear;
-ms-animation: notification 0.75s linear;
-o-animation: notification 0.75s linear;
animation: notification 0.75s linear;
background: #000000;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
border: 1px solid rgba(0, 0, 0, 0.95);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-font-smoothing: antialiased;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
color: #fff;
-webkit-transform: rotatey(0deg);
-moz-transform: rotatey(0deg);
-o-transform: rotatey(0deg);
transform: rotatey(0deg);
position: relative;
background-clip: padding-box;
}

.alert-blackgloss .close {
position: relative;
top: -3px;
right: -25px;
color: #fff;
content: 'x';
}
color: #fff;
content: 'x';
}
Loading