scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-09 13:28:53 +08:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/stylesheets/navigation/navigator.scss
View file

@ -2,8 +2,22 @@
.menu-item:not(.active):hover { .menu-item:not(.active):hover {
background-color: var(--sn-super-light-grey); background-color: var(--sn-super-light-grey);
a { a:not(.no-hover) {
color: var(--sn-blue); 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);
}
} }
} }

7
app/javascript/vue/navigation/navigator_item.vue
View file

@ -1,6 +1,8 @@
<template> <template>
<div class="text-sn-blue max-w-[196px] flex justify-center flex-col" <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" :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 }"> <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" <a :href="item.url"
class="text-ellipsis overflow-hidden hover:no-underline pr-3" class="text-ellipsis overflow-hidden hover:no-underline pr-3"
:class="{ :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> <template v-if="item.archived">(A)</template>
{{ item.name }} {{ item.name }}