Update search styles

styles/_top-nav.scss

@@ -100,25 +100,81 @@
 }
 
 #navbar-search {
+  @media(min-width: 992px) {
+    position: static; // allows search bar to be positioned screen-center
+    .dropdown-toggle {
       position: relative;
-  margin-right: 0.375rem;
-}
+    }
 
-#navbar-search .form-inline {
-  min-width: 224px; /* more room for placeholder text */
-}
+    .dropdown-menu {
+      padding: 0;
+      border-radius: 8px;
+      width: 640px;
+      left: calc(50% - 320px);
+    }
 
-#topsearchbar {
-  background-color: $black;
-  color: $white;
-  padding-right: 40px;
+    .input-group {
       width: 100%;
-  font-size: 0.875rem;
-}
+    }
 
-#navbar-search .btn {
-  position: absolute;
-  right: 0;
+    #topsearchbox,
+    .input-group-text,
+    .input-group > .input-group-append > .btn {
+      color: $white;
+      background-color: transparent;
+      border-width: 0;
+    }
+    #topsearchbox {
+      line-height: 24px;
+      height: 100%;
+      width: 100%;
+    }
+
+    .input-group > .input-group-append > .btn {
+      border-left: 1px solid black;
+    }
+    .algolia-autocomplete {
+      flex-grow: 1;
+    }
+  }
+
+
+  .algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
+    background-color: rgba(0,0,0,0.9);
+    border: 1px solid $gray-900;
+    border-radius: 8px;
+  }
+  .algolia-autocomplete .ds-dropdown-menu::before {
+    background-color: rgba(0,0,0,0.9);
+    border-color: $gray-900;
+  }
+  .algolia-docsearch-suggestion {
+    background-color: rgba(0,0,0,0.9);
+  }
+  .algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+    color: $white;
+    border: 0 solid $secondary;
+    border-bottom-width: 1px;
+    font-weight: bold;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+    color: $white;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion--title {
+    color: $white;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion--text {
+    font-size: 0.8rem;
+    color: $gray-200;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+    color: $white;
+    background-color: $green-800;
+  }
 }
 
 /* Top navigation Mobile ----------------------------------------------------------- */
@@ -131,10 +187,6 @@
     margin: 20px 10px 20px 0;
   }
 
-  #navbar-search .btn::after {
-    display: none;
-  }
-
   .navbar-collapse {
     background-color: white;
     position: absolute;
@@ -181,15 +233,6 @@
 }
 
 
-
-@media (max-width: 1010px) {
-  .navbar-brand,
-  .github-edit-wrap,
-  #navbar-search {
-    margin-right: 3px;
-  }
-}
-
 #navbarHolder .language-selector {
   font-size: 0.875rem;
 }

tool/template-base.html

@@ -94,7 +94,7 @@
 <script type="text/javascript"> docsearch({
 apiKey: '70de5b9b8ef95460f3c6e04054b325b2',
 indexName: 'xrpl',
-inputSelector: '#topsearchbar',
+inputSelector: '#topsearchbox',
 algoliaOptions: { 'facetFilters': ["lang:{{target.lang}}"] },
 debug: false
 });

tool/template-top-nav.html

@@ -38,14 +38,18 @@
 
       {% include 'template-github-edit.html' %}
 
-      <div class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" data-toggle="dropdown" id="topnav-search-dropdown-toggle"><i class="fa fa-search"></i><span class="sr-only">Open Search</span></a>
+      <div class="nav-item dropdown" id="navbar-search">
+        <a class="nav-link dropdown-toggle" data-toggle="dropdown" id="topnav-search-dropdown-toggle"><i class="fa fa-search"></i><span class="sr-only">{% trans %}Open Search{% endtrans %}</span></a>
         <div class="dropdown-menu">
-          <form class="navbar-form navbar-right" id="navbar-search" role="search">
+          <form class="navbar-form navbar-right" role="search">
             <div class="form-inline">
-              <label class="sr-only" for="topsearchbar">{% trans %}Search site...{% endtrans %}</label>
-              <input id="topsearchbar" name="q" type="text" class="form-control" class="top-search" placeholder="{% trans %}Search site...{% endtrans %}">
-              <button type="submit" class="btn btn-default fa fa-search">&nbsp;</button>
+              <div class="input-group">
+                <label class="input-group-prepend" for="topsearchbar"><i class="fa fa-search input-group-text"></i><span class="sr-only">{% trans %}Search site...{% endtrans %}</span></label>
+                <input id="topsearchbox" name="q" type="text" class="form-control" placeholder="{% trans %}Search site...{% endtrans %}">
+                <div class="input-group-append">
+                  <button type="button" class="btn btn-default" data-toggle="dropdown" data-target="topnav-search-dropdown-toggle"><i class="fa fa-times"></i><span class="sr-only">{% trans %}Close Search{% endtrans %}</span></button>
+                </div>
+              </div><!--/.input-group-->
             </div>
           </form>
         </div><!--/.dropdown-menu-->