diff --git a/src/sass/alertify.scss b/src/sass/alertify.scss index ad47ba4c..cf6fbb49 100644 --- a/src/sass/alertify.scss +++ b/src/sass/alertify.scss @@ -205,6 +205,28 @@ $border-radius: 1px; } } + &.center { + left: 0; + width: 100%; + > { + .default, .success, .error { + left: 50%; + transform: translateX(-50%); + text-align: center; + } + } + } + + &.middle { + height: 100%; + > { + .default, .success, .error { + top: 50%; + transform: translateY(-50%); + } + } + } + > * { box-sizing: border-box; transition: all .4s cubic-bezier(.25, .8, .25, 1); diff --git a/website/index.html b/website/index.html index 0f8e4e23..dc556b92 100644 --- a/website/index.html +++ b/website/index.html @@ -352,23 +352,39 @@
alertify.delay(1000); // This is just to make the demo go faster.
-alertify.log("Default botoom left position");
+alertify.log("Default bottom left position");
+setTimeout(function() {
+ alertify.logPosition("middle left");
+ alertify.log("middle left");
+}, 1500);
setTimeout(function() {
alertify.logPosition("top left");
alertify.log("top left");
-}, 1500);
+}, 3000);
+setTimeout(function() {
+ alertify.logPosition("top center");
+ alertify.log("top center");
+}, 4500);
setTimeout(function() {
alertify.logPosition("top right");
alertify.log("top right");
-}, 3000);
+}, 6000);
+setTimeout(function() {
+ alertify.logPosition("middle right");
+ alertify.log("middle right");
+}, 7500);
setTimeout(function() {
alertify.logPosition("bottom right");
alertify.log("bottom right");
-}, 4500);
+}, 9000);
+setTimeout(function() {
+ alertify.logPosition("bottom center");
+ alertify.log("bottom center");
+}, 10500);
setTimeout(function() {
alertify.reset(); // Puts the message back to default position.
alertify.log("Back to default");
-}, 6000);
+}, 12000);
diff --git a/website/js/demo.js b/website/js/demo.js
index 9e80ba83..dbb423e5 100644
--- a/website/js/demo.js
+++ b/website/js/demo.js
@@ -193,22 +193,38 @@
demo("#log-position", function() {
alertify.delay(1000); // This is just to make the demo go faster.
alertify.log("Default bottom left position");
+ setTimeout(function() {
+ alertify.logPosition("middle left");
+ alertify.log("middle left");
+ }, 1500);
setTimeout(function() {
alertify.logPosition("top left");
alertify.log("top left");
- }, 1500);
+ }, 3000);
+ setTimeout(function() {
+ alertify.logPosition("top center");
+ alertify.log("top center");
+ }, 4500);
setTimeout(function() {
alertify.logPosition("top right");
alertify.log("top right");
- }, 3000);
+ }, 6000);
+ setTimeout(function() {
+ alertify.logPosition("middle right");
+ alertify.log("middle right");
+ }, 7500);
setTimeout(function() {
alertify.logPosition("bottom right");
alertify.log("bottom right");
- }, 4500);
+ }, 9000);
+ setTimeout(function() {
+ alertify.logPosition("bottom center");
+ alertify.log("bottom center");
+ }, 10500);
setTimeout(function() {
alertify.reset(); // Puts the message back to default position.
alertify.log("Back to default");
- }, 6000);
+ }, 12000);
});
})();