Message highlight.

This commit is contained in:
Fredrik Jonsson 2023-04-26 14:24:53 +02:00
commit 0459743880
2 changed files with 16 additions and 7 deletions

View file

@ -80,7 +80,6 @@ $colors: (
status: $green, status: $green,
status-bg: lighten($green, 62%), status-bg: lighten($green, 62%),
status-highlight: $black,
warning: $black, warning: $black,
warning-bg: lighten($yellow, 45%), warning-bg: lighten($yellow, 45%),
warning-border: $yellow, warning-border: $yellow,

View file

@ -2,26 +2,36 @@
.message, .message,
%message { %message {
padding: 10px; padding: .5rem;
border-width: 1px; outline-width: 2px;
border-style: solid; outline-style: solid;
width: 95%; width: 95%;
&.status { &.status {
background-color: var(--color-status-bg); background-color: var(--color-status-bg);
color: var(--color-status); color: var(--color-status);
border-color: var(--color-status); outline-color: var(--color-status);
} }
&.warning { &.warning {
background-color: var(--color-warning-bg); background-color: var(--color-warning-bg);
color: var(--color-warning); color: var(--color-warning);
border-color: var(--color-warning); outline-color: var(--color-warning-border);
} }
&.error { &.error {
background-color: var(--color-error-bg); background-color: var(--color-error-bg);
color: var(--color-error); 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;
}
} }
} }