More readable link styling in ErrorCards.
This commit is contained in:
parent
3a2f0799eb
commit
704620e2f7
3 changed files with 20 additions and 4 deletions
|
@ -50,7 +50,7 @@ a {
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: 0.1em solid $link-hover-color;
|
outline: $link-focus-outline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ const element = ref<HTMLElement>();
|
||||||
function scrollIntoView() {
|
function scrollIntoView() {
|
||||||
element.value?.scrollIntoView({
|
element.value?.scrollIntoView({
|
||||||
behavior: "smooth",
|
behavior: "smooth",
|
||||||
block: "nearest"
|
block: "nearest",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -33,5 +33,17 @@ onMounted(scrollIntoView);
|
||||||
|
|
||||||
background-color: $error-card-background-color;
|
background-color: $error-card-background-color;
|
||||||
color: $error-card-color;
|
color: $error-card-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $error-card-link-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $error-card-link-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: $error-card-link-focus-outline;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -75,7 +75,8 @@ $h2-margin: 0.5em 0;
|
||||||
|
|
||||||
// Links
|
// Links
|
||||||
$link-color: $variant-color-warning;
|
$link-color: $variant-color-warning;
|
||||||
$link-hover-color: $variant-color-warning;
|
$link-hover-color: $link-color;
|
||||||
|
$link-focus-outline: 0.1em solid $link-hover-color;
|
||||||
|
|
||||||
// Form
|
// Form
|
||||||
$label-font-weight: 600;
|
$label-font-weight: 600;
|
||||||
|
@ -115,6 +116,9 @@ $error-card-border-radius: 0.5em;
|
||||||
$error-card-font-weight: 600;
|
$error-card-font-weight: 600;
|
||||||
$error-card-background-color: lighten($variant-color-danger, 10%);
|
$error-card-background-color: lighten($variant-color-danger, 10%);
|
||||||
$error-card-color: $page-background-color;
|
$error-card-color: $page-background-color;
|
||||||
|
$error-card-link-color: darken($variant-color-danger, 30%);
|
||||||
|
$error-card-link-hover-color: $error-card-link-color;
|
||||||
|
$error-card-link-focus-outline: 0.1em solid $error-card-link-hover-color;
|
||||||
|
|
||||||
// Node preview
|
// Node preview
|
||||||
$node-preview-card-padding: 0.75em 1em;
|
$node-preview-card-padding: 0.75em 1em;
|
||||||
|
|
Loading…
Reference in a new issue