diff --git a/Gruntfile.js b/Gruntfile.js
index 629859d..680b0b9 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -31,7 +31,8 @@ module.exports = function(grunt) {
'<%= meta.srcPath %>js/push.js',
'<%= meta.srcPath %>js/segmented-controllers.js',
'<%= meta.srcPath %>js/sliders.js',
- '<%= meta.srcPath %>js/toggles.js'
+ '<%= meta.srcPath %>js/toggles.js',
+ '<%= meta.srcPath %>js/alerts.js'
],
dest: '<%= meta.distPath %><%= pkg.name %>.js'
}
diff --git a/dist/ratchet.css b/dist/ratchet.css
index d713dae..d38e712 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -1002,6 +1002,12 @@ input[type="button"] {
color: #fff;
border-radius: 3px;
z-index: 10;
+ -webkit-transition: opacity;
+ transition: opacity;
+ -webkit-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+ -webkit-transition-timing-function: linear;
+ transition-timing-function: linear;
}
.alert .close {
position: relative;
@@ -1018,6 +1024,9 @@ input[type="button"] {
.alert .close:active {
opacity: .6;
}
+.alert.dismiss {
+ opacity: 0;
+}
.alert-positive {
background-color: rgba(76, 217, 100, 0.97);
diff --git a/dist/ratchet.js b/dist/ratchet.js
index 06948e7..732bc5a 100644
--- a/dist/ratchet.js
+++ b/dist/ratchet.js
@@ -15,8 +15,7 @@
!function () {
var findModals = function (target) {
- var i;
- var modals = document.querySelectorAll('a');
+ var i, modals = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) {
for (i = modals.length; i--;) { if (modals[i] === target) return target; }
}
@@ -776,4 +775,41 @@
toggle = false;
});
-}();
\ No newline at end of file
+}();
+/* ----------------------------------
+ * ALERT v0.0.1
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+ var findAlerts = function (target) {
+ var i, alerts = document.querySelectorAll('a');
+ for (; target && target !== document; target = target.parentNode) {
+ for (i = alerts.length; i--;) { if (alerts[i] === target) return target; }
+ }
+ };
+
+ var onAlertHidden = function () {
+ var alert = getAlert(event);
+
+ alert.style.display = 'none';
+ alert.removeEventListener('webkitTransitionEnd', onAlertHidden);
+ }
+
+ var getAlert = function (event) {
+ var alertDismiss = findAlerts(event.target);
+ if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash);
+ console.log('get alert');
+ };
+
+ window.addEventListener('click', function (event) {
+ var alert = getAlert(event);
+
+ if (alert) {
+ if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss');
+ alert.addEventListener('webkitTransitionEnd', onAlertHidden);
+ event.preventDefault();
+ }
+ });
+}();
diff --git a/examples/app-default/index.html b/examples/app-default/index.html
index d149c15..75b2fd1 100644
--- a/examples/app-default/index.html
+++ b/examples/app-default/index.html
@@ -19,8 +19,8 @@
-
-
-
+
+
This is an inline alert.
diff --git a/index.html b/index.html
index 8d0d5cd..6eac635 100644
--- a/index.html
+++ b/index.html
@@ -869,7 +869,7 @@ document
Popovers
-
+
Left
diff --git a/lib/js/alerts.js b/lib/js/alerts.js
new file mode 100644
index 0000000..cfbf737
--- /dev/null
+++ b/lib/js/alerts.js
@@ -0,0 +1,37 @@
+/* ----------------------------------
+ * ALERT v0.0.1
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+ var findAlerts = function (target) {
+ var i, alerts = document.querySelectorAll('a');
+ for (; target && target !== document; target = target.parentNode) {
+ for (i = alerts.length; i--;) { if (alerts[i] === target) return target; }
+ }
+ };
+
+ var onAlertHidden = function () {
+ var alert = getAlert(event);
+
+ alert.style.display = 'none';
+ alert.removeEventListener('webkitTransitionEnd', onAlertHidden);
+ }
+
+ var getAlert = function (event) {
+ var alertDismiss = findAlerts(event.target);
+ if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash);
+ console.log('get alert');
+ };
+
+ window.addEventListener('click', function (event) {
+ var alert = getAlert(event);
+
+ if (alert) {
+ if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss');
+ alert.addEventListener('webkitTransitionEnd', onAlertHidden);
+ event.preventDefault();
+ }
+ });
+}();
diff --git a/lib/js/modals.js b/lib/js/modals.js
index 242bada..2b1b725 100644
--- a/lib/js/modals.js
+++ b/lib/js/modals.js
@@ -6,8 +6,7 @@
!function () {
var findModals = function (target) {
- var i;
- var modals = document.querySelectorAll('a');
+ var i, modals = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) {
for (i = modals.length; i--;) { if (modals[i] === target) return target; }
}
diff --git a/lib/sass/alerts.scss b/lib/sass/alerts.scss
index 69925f5..84ad419 100644
--- a/lib/sass/alerts.scss
+++ b/lib/sass/alerts.scss
@@ -11,6 +11,9 @@
color: #fff;
border-radius: 3px;
z-index: 10;
+ @include transition(opacity);
+ @include transition-duration(.5s);
+ @include transition-timing-function(linear);
.close {
position: relative;
@@ -25,6 +28,10 @@
opacity: .6;
}
}
+
+ &.dismiss {
+ opacity: 0;
+ }
}
// Positive alert (Default color is green)