diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl index d0abdf6..35ef642 100644 --- a/source/css/layout/_partial/local-search.styl +++ b/source/css/layout/_partial/local-search.styl @@ -1,26 +1,37 @@ $icon-size = 1.2rem; .search-pop-overlay { - display: none; position: fixed; - left: 0; - top: 0; + display: flex; height: 100%; width: 100%; - background: rgba(0, 0, 0, 0.4); + left: 0; + top: 0; + background: rgba(0, 0, 0, 0); + visibility: hidden; z-index: $z-index-8; + transition(); + + &.active { + background: rgba(0, 0, 0, 0.38); + visibility: visible; + + .search-popup { + transform: scale(1); + } + + } .search-popup { background: var(--background-color); - border-radius: 2px; + border-radius: 5px; height: 80%; - left: 50%; - transform: translateX(-50%); - position: fixed; - top: 10%; width: 70%; + margin: auto; + transform: scale(0); z-index: $z-index-6; + transition(); +keep-tablet() { width: 80%; diff --git a/source/js/local-search.js b/source/js/local-search.js index eee8d15..41589d2 100644 --- a/source/js/local-search.js +++ b/source/js/local-search.js @@ -249,8 +249,8 @@ KEEP.initLocalSearch = () => { document.querySelectorAll('.search-popup-trigger').forEach(element => { element.addEventListener('click', () => { document.body.style.overflow = 'hidden'; - document.querySelector('.search-pop-overlay').style.display = 'block'; - searchInputDom.focus(); + document.querySelector('.search-pop-overlay').classList.add('active'); + setTimeout(() => searchInputDom.focus(), 500); if (!isfetched) fetchData(); }); }); @@ -258,7 +258,7 @@ KEEP.initLocalSearch = () => { // Monitor main search box const onPopupClose = () => { document.body.style.overflow = ''; - document.querySelector('.search-pop-overlay').style.display = ''; + document.querySelector('.search-pop-overlay').classList.remove('active'); }; document.querySelector('.search-pop-overlay').addEventListener('click', event => {