goodybag · PVGrad · Dec 24, 2012 · Dec 24, 2012 · Dec 24, 2012 · Dec 24, 2012
diff --git a/README.md b/README.md
@@ -3,9 +3,20 @@ bootstrap-notify
 
 Bootstrap alert system made better.
 
-### Contributors
+# Copyright
 
-* Nijiko Yonskai <http://twitter.com/nijikokun>
+    Copyright 2013 Nijiko Yonskai @nijikokun
+    Copyright 2012 Goodybag, Inc.
 
-
-Copyright 2012 Goodybag, Inc.
+# License
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
diff --git a/component.json b/component.json
@@ -0,0 +1,11 @@
+{
+  "name": "bootstrap-notify",
+  "version": "1.0.0",
+  "main": "js/bootstrap-notify.js",
+  "dependencies": {},
+  "description": "Bootstrap alert system made better.",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/nijikokun/bootstrap-notify.git"
+  }
+}
diff --git a/css/bootstrap-notify.css b/css/bootstrap-notify.css
@@ -1,31 +1,6 @@
-.notifications {
-  position: fixed;
-}
-
-/* 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;
-}
+.notifications{position:fixed;z-index:9999;}.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;}
+.notifications>div{position:relative;z-index:9999;margin:5px 0px;}
+.notifications.center{top:48%;left:0;width:100%;}.notifications.center>div{margin:5px auto;width:20%;text-align:center;}
diff --git a/css/bootstrap-notify.less b/css/bootstrap-notify.less
@@ -0,0 +1,56 @@
+/**
+ * Bootstrap-notify.less
+ *
+ * @author Vitaly @Laboratory
+ * @author Nijiko Yonskai
+ * @copyright 2012 Vitaly
+ * @copyright 2013 Nijiko Yonskai
+ */
+
+@right: 10px;
+@left: @right;
+@top: 25px;
+@bottom: @top;
+
+.notifications {
+  position: fixed;
+  z-index:9999;
+
+  &.top-right {
+    right: @right;
+    top: @top;
+  }
+
+  &.top-left {
+    left: @left;
+    top: @top;
+  }
+
+  &.bottom-left {
+    left: @left;
+    bottom: @bottom;
+  }
+
+  &.bottom-right {
+    right: @right;
+    bottom: @bottom;
+  }
+
+  > div {
+    position: relative;
+    z-index: 9999;
+    margin: 5px 0px;
+  }
+
+  &.center {
+    top: 48%;
+    left: 0;
+    width: 100%;
+
+    > div {
+      margin: 5px auto;
+      width: 20%;
+      text-align: center;
+    }
+  }
+}
diff --git a/css/styles/alert-bangtidy.less b/css/styles/alert-bangtidy.less
@@ -0,0 +1,45 @@
+/**
+ * bangTidy2 Style - Ported from Growl Style
+ * Ported and Cleaned By Nijikokun @nijikokun
+ * Less By Vitaly @Laboratory
+ * Original Author Daryl Ginn
+ * Based On http://dribbble.com/shots/527056-Growl-Theme-2
+ *
+ * To use, for style use: bangTidy
+ *
+ */
+
+@glossLight: rgba(0, 0, 0, 0.80);
+@glossDark: 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: @glossLight;
+  background: -moz-linear-gradient(top, @glossLight 0%, @glossDark 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @glossLight), color-stop(100%, @glossDark));
+  background: -webkit-linear-gradient(top, @glossLight 0%, @glossDark 100%);
+  background: -o-linear-gradient(top, @glossLight 0%, @glossDark 100%);
+  background: -ms-linear-gradient(top, @glossLight 0%, @glossDark 100%);
+  background: linear-gradient(top, @glossLight 0%, @glossDark 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '@{glossLight}', endColorstr = '@{glossDark}', 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;
+}
diff --git a/css/styles/alert-blackgloss.css b/css/styles/alert-blackgloss.css
@@ -11,33 +11,6 @@
  *   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; }
-}
-
-@-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; }
-}
-
-@-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; }
-}
-
-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; }
-}
 
 /* Webkit Only */
 .alert-blackgloss:before {
@@ -57,11 +30,6 @@ keyframes notification {
 }
 
 .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);

diff --git a/css/styles/alert-notification-animations.css b/css/styles/alert-notification-animations.css
@@ -0,0 +1,55 @@
+/* ## Notification Keyframe Animations
+ *
+ * ## Usage
+ *
+ * ```css
+ *  -webkit-animation: notification .75s linear;
+ *  -moz-animation: notification .75s linear;
+ *  -ms-animation: notification .75s linear;
+ *  -o-animation: notification .75s linear;
+ *  animation: notification .75s linear;
+ * ```
+ */
+
+@-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; }
+}
+
+@-moz-keyframes notification {
+  0% { -moz-transform: rotateY(-90deg); opacity: 0; }
+  70% { -moz-transform: rotateY(20deg); opacity: .8; }
+  90% { -moz-transform: rotateY(-10deg); opacity: 1; }
+  100% { -moz-transform: rotateY(-0deg); opacity: 1; }
+}
+
+@-ms-keyframes notification {
+  0% { -ms-transform: rotateY(-90deg); opacity: 0; }
+  70% { -ms-transform: rotateY(20deg); opacity: .8; }
+  90% { -ms-transform: rotateY(-10deg); opacity: 1; }
+  100% { -ms-transform: rotateY(-0deg); opacity: 1; }
+}
+
+@-o-keyframes notification {
+  0% { -o-transform: rotateY(-90deg); opacity: 0; }
+  70% { -o-transform: rotateY(20deg); opacity: .8; }
+  90% { -o-transform: rotateY(-10deg); opacity: 1; }
+  100% { -o-transform: rotateY(-0deg); opacity: 1; }
+}
+
+keyframes notification {
+  0% { transform: rotateY(-90deg); opacity: 0; }
+  70% { transform: rotateY(20deg); opacity: .8; }
+  90% { transform: rotateY(-10deg); opacity: 1; }
+  100% { transform: rotateY(-0deg); opacity: 1; }
+}
+
+.notifications > div {
+  -webkit-animation: notification .75s linear;
+  -moz-animation: notification .75s linear;
+  -ms-animation: notification .75s linear;
+  -o-animation: notification .75s linear;
+  animation: notification .75s linear;
+}