mirror of
https://github.com/next-theme/hexo-theme-next.git
synced 2026-01-17 18:22:33 +00:00
Refactor menu-item-active: no !important
This commit is contained in:
parent
52111f750a
commit
3a69429da9
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -26,10 +26,6 @@
|
|||||||
+mobile() {
|
+mobile() {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@extend .menu-item-active a;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
|
|||||||
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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: ' ';
|
||||||
|
|||||||
@ -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;
|
||||||
|
|
||||||
|
|||||||
@ -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));
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user