Refactor menu-item-active: no !important

This commit is contained in:
Mimi 2020-06-11 22:47:46 +08:00
parent 52111f750a
commit 3a69429da9
6 changed files with 13 additions and 34 deletions

View File

@ -27,11 +27,8 @@
transition-property: border-color; transition-property: border-color;
the-transition(); the-transition();
// To prevent hover on external links with touch devices after click. &:hover, &.menu-item-active {
@media (hover: none) { background: var(--menu-item-bg-color);
&:hover {
border-bottom-color: transparent !important;
}
} }
} }
@ -55,10 +52,6 @@
} }
} }
.menu-item-active a {
background: var(--menu-item-bg-color);
}
.use-motion .menu-item { .use-motion .menu-item {
opacity: 0; opacity: 0;
} }

View File

@ -26,10 +26,6 @@
+mobile() { +mobile() {
text-align: left; text-align: left;
} }
&:hover {
@extend .menu-item-active a;
}
} }
.badge { .badge {

View File

@ -15,15 +15,6 @@
} }
} }
.menu-item-active a {
background: transparent;
border-bottom: 1px solid var(--link-hover-color) !important;
+mobile() {
border-bottom: 1px dotted $grey-lighter !important;
}
}
.menu .menu-item { .menu .menu-item {
+mobile() { +mobile() {
margin: 0 10px; margin: 0 10px;
@ -36,8 +27,13 @@
padding: 5px 10px; padding: 5px 10px;
} }
&:hover { &:hover, &.menu-item-active {
@extend .menu-item-active a; background: transparent;
border-bottom: 1px solid var(--link-hover-color);
+mobile() {
border-bottom: 1px dotted $grey-lighter;
}
} }
} }

View File

@ -27,10 +27,6 @@
position: relative; position: relative;
text-align: left; text-align: left;
transition-property: background-color; transition-property: background-color;
&:hover {
@extend .menu-item-active a;
}
} }
+tablet-mobile() { +tablet-mobile() {
@ -51,7 +47,7 @@
} }
if (!hexo-config('menu_settings.badges')) { if (!hexo-config('menu_settings.badges')) {
.main-menu .menu-item-active a::after { .main-menu .menu-item-active::after {
background: $grey; background: $grey;
border-radius: 50%; border-radius: 50%;
content: ' '; content: ' ';

View File

@ -19,7 +19,7 @@
} }
} }
.menu-item-active a { .menu-item-active {
border-bottom-color: $sidebar-highlight; border-bottom-color: $sidebar-highlight;
color: $sidebar-highlight; color: $sidebar-highlight;

View File

@ -211,12 +211,10 @@ NexT.utils = {
}, },
registerActiveMenuItem: function() { registerActiveMenuItem: function() {
document.querySelectorAll('.menu-item').forEach(element => { document.querySelectorAll('.menu-item a[href]').forEach(target => {
const target = element.querySelector('a[href]');
if (!target) return;
const isSamePath = target.pathname === location.pathname || target.pathname === location.pathname.replace('index.html', ''); const isSamePath = target.pathname === location.pathname || target.pathname === location.pathname.replace('index.html', '');
const isSubPath = !CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname); const isSubPath = !CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname);
element.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath)); target.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath));
}); });
}, },