Fix hover effect depending on the type of the navigator link [SCI-8509]

Co-authored-by: Sboursen <dev.sboursen@gmail.com>
This commit is contained in:
sboursen-scinote 2023-05-26 11:19:27 +02:00
parent fc1ce332de
commit a77ee62f8e
2 changed files with 20 additions and 3 deletions

View file

@ -2,8 +2,22 @@
.menu-item:not(.active):hover {
background-color: var(--sn-super-light-grey);
a {
a:not(.no-hover) {
color: var(--sn-blue);
}
a.no-hover {
color: var(--sn-science-blue-hover);
}
}
.menu-item.active:hover {
a:not(.no-hover) {
color: var(--sn-blue);
}
a.no-hover {
color: var(--sn-science-blue-hover);
}
}
}

View file

@ -1,6 +1,8 @@
<template>
<div class="text-sn-blue max-w-[196px] flex justify-center flex-col"
:class="{ 'pl-6': !firstLevel }"
:class="{
'pl-6': !firstLevel
}"
:navigator-item-id="item.id"
>
<div class="py-1.5 px-1 menu-item flex items-center whitespace-nowrap" :title="this.itemToolTip" :class="{ 'bg-sn-light-grey active': activeItem }">
@ -14,7 +16,8 @@
<a :href="item.url"
class="text-ellipsis overflow-hidden hover:no-underline pr-3"
:class="{
'text-sn-science-blue-hover': (!item.archived && archived)
'text-sn-science-blue-hover': (!item.archived && archived),
'no-hover': (!item.archived && archived)
}">
<template v-if="item.archived">(A)</template>
{{ item.name }}