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; + } } }