Guest create page: name field autofocus

[bookstack] / resources / sass / _header.scss

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index e0b494e77e73ba0d153e81fa2786d477f3983437..aa560e8e050e3556b636d5d9bdae6a33d6080f5e 100644 (file)
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -121,17 +121,59 @@ header .search-box {
 }
 #header-search-box-button {
   z-index: 1;
-  left: 16px;
+  inset-inline-start: 16px;
   top: 10px;
   color: #FFF;
   opacity: 0.6;
   @include lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
-  @include rtl {
-    left: auto;
-    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 {
+    @include lightDark(background-color, #EEE, #333);
+    @include lightDark(border-color, #DDD, #111);
+  }
+  #header-search-box-button, input {
+    @include lightDark(color, #444, #AAA);
   }
 }