Merge branch 'master' into feat/pagination

templates/default-layout.lucius

@@ -291,7 +291,7 @@ a.btn.btn-info:hover,
 
 .table__td {
   font-size: 16px;
-  color: #808080;
+  color: var(--color-font);
   line-height: 1.4;
   vertical-align: top;
 }

templates/standalone/alerts.julius

@@ -11,6 +11,13 @@
       alertEl.classList.add('alert--invisible');
     });
     alertEl.insertBefore(closeEl, alertEl.children[0]);
+
+    // auto-hide info and success-alerts after 3 seconds
+    if (!alertEl.matches('.alert-danger, .alert-warning')) {
+      window.setTimeout(function() {
+        alertEl.classList.add('alert--invisible');
+      }, 3000);
+    }
   }
 
 })();

templates/standalone/alerts.lucius

@@ -8,6 +8,14 @@
   display: flex;
   flex-direction: column;
 }
+
+@media (min-width: 768px) {
+
+  .alerts {
+    top: 150px;
+  }
+}
+
 .alert {
   position: relative;
   display: inline-block;
@@ -23,6 +31,7 @@
   margin-left: 20px;
   margin-right: 60px;
   box-shadow: 0 0 7px var(--color-dark);
+  animation: slide-in-alert .2s ease-out forwards;
 
   + .alert:not(.alert--invisible) {
     margin-top: 20px;
@@ -39,6 +48,15 @@
   }
 }
 
+@keyframes slide-in-alert {
+  from {
+    left: 120%;
+  }
+  to {
+    left: 0;
+  }
+}
+
 @media (min-width: 425px) {
 
   .alert {
@@ -91,6 +109,7 @@
     align-items: center;
     font-size: 40px;
     color: var(--color-dark);
+    box-shadow: 0 0 2px var(--color-dark);
   }
 }
 
@@ -146,6 +165,7 @@
     &::after {
       content: '\f05a';
       color: var(--color-success);
+      box-shadow: 0 0 2px var(--color-success);
     }
   }
 }
@@ -173,6 +193,7 @@
     &::after {
       content: '\f071';
       color: var(--color-warning);
+      box-shadow: 0 0 2px var(--color-warning);
     }
   }
 }
@@ -189,7 +210,7 @@
     /* TODO: remove me as soon as messagerenderer-error in julius gets resolved */
     &::before {
       color: var(--color-lightwhite);
-    }
+   }
   }
 
   .alert__content {
@@ -201,6 +222,7 @@
     &::after {
       content: '\f071';
       color: var(--color-error);
+      box-shadow: 0 0 2px var(--color-error);
     }
   }
 }