diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius index ab5f2178f..251cdc9ba 100644 --- a/templates/default-layout.lucius +++ b/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; } diff --git a/templates/standalone/alerts.julius b/templates/standalone/alerts.julius index ebf1f744d..00ac0156b 100644 --- a/templates/standalone/alerts.julius +++ b/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); + } } })(); diff --git a/templates/standalone/alerts.lucius b/templates/standalone/alerts.lucius index fa9512abd..8856a9b61 100644 --- a/templates/standalone/alerts.lucius +++ b/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); } } }