Add notifications fade-out animation

2 files changed, 33 insertions, 1 deletions

diff --git a/assets/css/app.css b/assets/css/app.css
index 132a7d39..ebfeca61 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -239,6 +239,38 @@ input.form-date {
     border-radius: 4px;
 }
 
+.alert-fade-out {
+    animation: fadeOut 1s forwards;
+    -webkit-animation: fadeOut 1s forwards;
+    animation-delay: 7s;
+    -webkit-animation-delay: 7s;
+    cursor: pointer;
+}
+
+@-webkit-keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        margin: 0;
+        padding: 0;
+        height: 0;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        margin: 0;
+        padding: 0;
+        height: 0;
+    }
+}
+
 .alert-success {
     color: #468847;
     background-color: #dff0d8;
diff --git a/templates/layout.php b/templates/layout.php
index b57ac496..78d62d4e 100644
--- a/templates/layout.php
+++ b/templates/layout.php
@@ -43,7 +43,7 @@
             </nav>
         </header>
         <section class="page">
-            <?= Helper\flash('<div class="alert alert-success">%s</div>') ?>
+            <?= Helper\flash('<div class="alert alert-success alert-fade-out">%s</div>') ?>
             <?= Helper\flash_error('<div class="alert alert-error">%s</div>') ?>
             <?= $content_for_layout ?>
          </section>