From 045974388038dff0c4d2e7b494062cd3d6df5b76 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Wed, 26 Apr 2023 14:24:53 +0200
Subject: [PATCH] Message highlight.

---
 assets/sass/_colors.scss                      |  1 -
 .../sass/components/messages/_messages.scss   | 22 ++++++++++++++-----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/assets/sass/_colors.scss b/assets/sass/_colors.scss
index b3bbb92..061d89f 100644
--- a/assets/sass/_colors.scss
+++ b/assets/sass/_colors.scss
@@ -80,7 +80,6 @@ $colors: (
 
   status:                 $green,
   status-bg:              lighten($green, 62%),
-  status-highlight:       $black,
   warning:                $black,
   warning-bg:             lighten($yellow, 45%),
   warning-border:         $yellow,
diff --git a/assets/sass/components/messages/_messages.scss b/assets/sass/components/messages/_messages.scss
index 08c10a9..de83e6f 100644
--- a/assets/sass/components/messages/_messages.scss
+++ b/assets/sass/components/messages/_messages.scss
@@ -2,26 +2,36 @@
 
 .message,
 %message {
-  padding: 10px;
-  border-width: 1px;
-  border-style: solid;
+  padding: .5rem;
+  outline-width: 2px;
+  outline-style: solid;
   width: 95%;
 
   &.status {
     background-color: var(--color-status-bg);
     color: var(--color-status);
-    border-color: var(--color-status);
+    outline-color: var(--color-status);
   }
 
   &.warning {
     background-color: var(--color-warning-bg);
     color: var(--color-warning);
-    border-color: var(--color-warning);
+    outline-color: var(--color-warning-border);
   }
 
   &.error {
     background-color: var(--color-error-bg);
     color: var(--color-error);
-    border-color: var(--color-error);
+    outline-color: var(--color-error);
+  }
+
+  &--highlight {
+    animation: 2s linear infinite outline-highlight;
+  }
+
+  @keyframes outline-highlight {
+    50% {
+      outline-width: .3rem;
+    }
   }
 }