mirror of
https://github.com/next-theme/hexo-theme-next.git
synced 2026-01-18 18:33:42 +00:00
Refactor search-active
This commit is contained in:
parent
d905a28d6a
commit
4bcccea378
@ -18,5 +18,8 @@
|
||||
|
||||
.use-motion .logo-line-before i { left: initial; }
|
||||
.use-motion .logo-line-after i { right: initial; }
|
||||
|
||||
.search-pop-overlay, .sidebar-nav { display: none; }
|
||||
.sidebar-panel { display: block; }
|
||||
</style>
|
||||
</noscript>
|
||||
|
||||
@ -3,6 +3,7 @@ ul.breadcrumb {
|
||||
list-style: none;
|
||||
margin: 1em 0;
|
||||
padding: 0 2em;
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
.search-active {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-pop-overlay {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
@ -9,7 +14,7 @@
|
||||
width: 100%;
|
||||
z-index: $zindex-4;
|
||||
|
||||
&.search-active {
|
||||
.search-active & {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
transition: background .2s;
|
||||
visibility: visible;
|
||||
@ -20,9 +25,7 @@
|
||||
background: var(--card-bg-color);
|
||||
border-radius: 5px;
|
||||
height: 80%;
|
||||
left: calc(50% - 350px);
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
margin: auto;
|
||||
transform: scale(0);
|
||||
transition: transform .2s;
|
||||
width: 700px;
|
||||
@ -35,9 +38,6 @@
|
||||
+mobile() {
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -97,16 +97,14 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// Handle and trigger popup window
|
||||
document.querySelectorAll('.popup-trigger').forEach(element => {
|
||||
element.addEventListener('click', () => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.querySelector('.search-pop-overlay').classList.add('search-active');
|
||||
document.body.classList.add('search-active');
|
||||
document.querySelector('.search-input').focus();
|
||||
});
|
||||
});
|
||||
|
||||
// Monitor main search box
|
||||
const onPopupClose = () => {
|
||||
document.body.style.overflow = '';
|
||||
document.querySelector('.search-pop-overlay').classList.remove('search-active');
|
||||
document.body.classList.remove('search-active');
|
||||
};
|
||||
|
||||
document.querySelector('.search-pop-overlay').addEventListener('click', event => {
|
||||
|
||||
@ -250,8 +250,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// Handle and trigger popup window
|
||||
document.querySelectorAll('.popup-trigger').forEach(element => {
|
||||
element.addEventListener('click', () => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.querySelector('.search-pop-overlay').classList.add('search-active');
|
||||
document.body.classList.add('search-active');
|
||||
input.focus();
|
||||
if (!isfetched) fetchData();
|
||||
});
|
||||
@ -259,8 +258,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Monitor main search box
|
||||
const onPopupClose = () => {
|
||||
document.body.style.overflow = '';
|
||||
document.querySelector('.search-pop-overlay').classList.remove('search-active');
|
||||
document.body.classList.remove('search-active');
|
||||
};
|
||||
|
||||
document.querySelector('.search-pop-overlay').addEventListener('click', event => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user