Added global search input debounce and loading indicator

[bookstack] / resources / sass / _header.scss

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index e0b494e77e73ba0d153e81fa2786d477f3983437..ca2ab83a4774411588a17de3ec990e8d29cf9fc9 100644 (file)
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -131,7 +131,54 @@ header .search-box {
     right: 16px;
   }
   svg {
-    margin-block-end: 0;
+    margin-inline-end: 0;
+  }
+}
+
+.global-search-suggestions {
+  display: none;
+  position: absolute;
+  top: -$-s;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  margin-left: -$-xxl;
+  margin-right: -$-xxl;
+  padding-top: 56px;
+  border-radius: 3px;
+  box-shadow: $bs-hover;
+  transform-origin: top center;
+  opacity: .5;
+  transform: scale(0.9);
+  .entity-item-snippet p  {
+    display: none;
+  }
+  .entity-item-snippet {
+    font-size: .8rem;
+  }
+  .entity-list-item-name {
+    font-size: .9rem;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+  .global-search-loading {
+    position: absolute;
+    width: 100%;
+  }
+}
+header .search-box.search-active:focus-within {
+  .global-search-suggestions {
+    display: block;
+  }
+  input {
+    background-color: #EEE;
+    color: #444;
+    border-color: #DDD;
+  }
+  #header-search-box-button {
+    color: #444;
   }
 }