Animation for search-popup (#1427)

theme-next · Mar 19, 2020 · 960155b · 960155b
1 parent 34d8274
commit 960155b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl
@@ -1,12 +1,19 @@
 .search-pop-overlay {
-  background: rgba(0, 0, 0, .3);
-  display: none;
+  background: rgba(0, 0, 0, 0);
   height: 100%;
   left: 0;
   position: fixed;
   top: 0;
+  transition: visibility 0s linear .2s, background .2s;
+  visibility: hidden;
   width: 100%;
   z-index: $zindex-4;
+
+  &.search-active {
+    background: rgba(0, 0, 0, .3);
+    transition: background .2s;
+    visibility: visible;
+  }
 }
 
 .search-popup {
@@ -16,9 +23,15 @@
   left: calc(50% - 350px);
   position: fixed;
   top: 10%;
+  transform: scale(0);
+  transition: transform .2s;
   width: 700px;
   z-index: $zindex-5;
 
+  .search-active & {
+    transform: scale(1);
+  }
+
   +mobile() {
     border-radius: 0;
     height: 100%;
@@ -49,16 +62,16 @@
     display: flex;
     padding: 5px;
   }
-}
 
-.site-search input.search-input {
-  background: transparent;
-  border: 0;
-  outline: 0;
-  width: 100%;
+  input.search-input {
+    background: transparent;
+    border: 0;
+    outline: 0;
+    width: 100%;
 
-  &::-webkit-search-cancel-button {
-    display: none;
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
   }
 }
 

diff --git a/source/css/_common/scaffolding/highlight/highlight.styl b/source/css/_common/scaffolding/highlight/highlight.styl
@@ -51,7 +51,7 @@ code {
   }
 
   figcaption {
-    background: $code-background;
+    background: $highlight-gutter.bg-color;
     color: $highlight-foreground;
     display: flex;
     font-size: $table-font-size;

diff --git a/source/js/algolia-search.js b/source/js/algolia-search.js
@@ -98,15 +98,15 @@ window.addEventListener('DOMContentLoaded', () => {
   document.querySelectorAll('.popup-trigger').forEach(element => {
     element.addEventListener('click', () => {
       document.body.style.overflow = 'hidden';
-      document.querySelector('.search-pop-overlay').style.display = 'block';
+      document.querySelector('.search-pop-overlay').classList.add('search-active');
       document.querySelector('.search-input').focus();
     });
   });
 
   // Monitor main search box
   const onPopupClose = () => {
     document.body.style.overflow = '';
-    document.querySelector('.search-pop-overlay').style.display = '';
+    document.querySelector('.search-pop-overlay').classList.remove('search-active');
   };
 
   document.querySelector('.search-pop-overlay').addEventListener('click', event => {

diff --git a/source/js/local-search.js b/source/js/local-search.js
@@ -255,7 +255,7 @@ window.addEventListener('DOMContentLoaded', () => {
   document.querySelectorAll('.popup-trigger').forEach(element => {
     element.addEventListener('click', () => {
       document.body.style.overflow = 'hidden';
-      document.querySelector('.search-pop-overlay').style.display = 'block';
+      document.querySelector('.search-pop-overlay').classList.add('search-active');
       input.focus();
       if (!isfetched) fetchData();
     });
@@ -264,7 +264,7 @@ window.addEventListener('DOMContentLoaded', () => {
   // Monitor main search box
   const onPopupClose = () => {
     document.body.style.overflow = '';
-    document.querySelector('.search-pop-overlay').style.display = '';
+    document.querySelector('.search-pop-overlay').classList.remove('search-active');
   };
 
   document.querySelector('.search-pop-overlay').addEventListener('click', event => {