From eb05740a4d631ae7f398e59bfb464c2859b24011 Mon Sep 17 00:00:00 2001
From: Maxime Locqueville <maxiloc@gmail.com>
Date: Wed, 27 Jan 2016 14:55:57 +0100
Subject: [PATCH] docs(docsearch): adding docsearch to docsearch

---
 docs/_includes/header.html    |   7 ++
 docs/_includes/searchbar.html |  34 ++++++
 docs/_layouts/default.html    |  10 ++
 docs/css/_searchbar.scss      | 197 ++++++++++++++++++++++++++++++++++
 docs/css/main.scss            |   1 +
 5 files changed, 249 insertions(+)
 create mode 100644 docs/_includes/searchbar.html
 create mode 100644 docs/css/_searchbar.scss
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index cb7c626d..2fa86397 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -10,6 +10,13 @@
       </div>
       <div class="navbar-collapse collapse">
         <ul class="nav navbar-nav navbar-right">
+          <li class="searchbar-wrapper">
+            <div class="navbar-form">
+              <div class="form-group">
+                {% include searchbar.html %}
+              </div>
+            </div>
+          </li>
           {% assign url = page.url %}
           {% for link in site.navigation %}
             <li {% if url == link.url %}class="active"{% endif %}>
diff --git a/docs/_includes/searchbar.html b/docs/_includes/searchbar.html
new file mode 100644
index 00000000..7bd7d551
--- /dev/null
+++ b/docs/_includes/searchbar.html
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+    <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-13" viewBox="0 0 40 40">
+        <path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
+              fill-rule="evenodd" />
+    </symbol>
+    <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-2" viewBox="0 0 20 20">
+        <path d="M8.96 10L.52 1.562 0 1.042 1.04 0l.522.52L10 8.96 18.438.52l.52-.52L20 1.04l-.52.522L11.04 10l8.44 8.438.52.52L18.96 20l-.522-.52L10 11.04l-8.438 8.44-.52.52L0 18.96l.52-.522L8.96 10z" fill-rule="evenodd" />
+    </symbol>
+</svg>
+
+<form role="search" novalidate="novalidate" class="searchbox sbx-custom">
+    <input type="search" name="search" placeholder="Search in the documentation" autocomplete="off" required="required" class="sbx-custom__input">
+    <button type="submit" class="sbx-custom__submit">
+        <svg role="img" aria-label="Search">
+            <title>Icon Search</title>
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
+        </svg>
+    </button>
+    <button type="reset" class="sbx-custom__reset">
+        <svg role="img" aria-label="Reset">
+            <title>Icon Reset</title>
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-2"></use>
+        </svg>
+    </button>
+</form>
+<!--Js: focus search input after reset-->
+<script type="text/javascript">
+    //<![CDATA[
+    document.querySelector('.searchbox [type="reset"]').addEventListener('click', function() {
+        this.parentNode.querySelector('input').focus();
+    });
+
+    //]]>
+</script>
\ No newline at end of file
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index bd9e5245..3736763b 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -40,6 +40,7 @@
 
     <link rel="stylesheet" media="screen" href="{{ "/css/main.css" | prepend: site.baseurl }}" />
     <link rel="stylesheet" media="screen" href="//cdn.jsdelivr.net/fontawesome/4.4.0/css/font-awesome.min.css" />
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
   </head>
 
   <body>
@@ -60,6 +61,15 @@
     </script>
 {% endif %}
 
+    <script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
+    <script type="text/javascript">
+      docsearch({
+        apiKey: 'd8dd0c4677c82b0164e6ac02d4807ba5',
+        indexName: 'docsearch',
+        inputSelector: '.sbx-custom__input'
+      });
+    </script>
+
   {% include marketing.html %}
 
   {% contentblock site-footer %}
diff --git a/docs/css/_searchbar.scss b/docs/css/_searchbar.scss
new file mode 100644
index 00000000..68fdce15
--- /dev/null
+++ b/docs/css/_searchbar.scss
@@ -0,0 +1,197 @@
+$custom:(
+        input-width: 240px,
+        input-height: 36px,
+        border-width: 2px,
+        border-radius: 18px,
+        input-border-color: #1D96C7,
+        input-focus-border-color: #1D96C7,
+        input-background: #091724,
+        input-focus-background: #091724,
+        font-size: 13px,
+        placeholder-color: #AAAAAA,
+        icon: sbx-icon-search-13,
+        icon-size: 16px,
+        icon-position: left,
+        icon-color: #1D96C7,
+        icon-background: #FFFFFF,
+        icon-background-opacity: 0,
+        icon-clear: sbx-icon-clear-2,
+        icon-clear-size: 12px
+);
+
+@mixin searchbox(
+  $input-width: 500px,
+  $input-height: 40px,
+  $border-width: 1px,
+  $border-radius: 3px,
+  $input-border-color: #ccc,
+  $input-focus-border-color: darken($input-border-color, 15%),
+  $input-background: #fff,
+  $input-focus-background: $input-background,
+  $font-size: 14px,
+  $placeholder-color: #aaa,
+  $icon: 'sbx-icon-search-1',
+  $icon-size: 18px,
+  $icon-position: right,
+  $icon-color: #fff,
+  $icon-background: #3e82f7,
+  $icon-background-opacity: 1,
+  $icon-clear: 'sbx-icon-clear-1',
+  $icon-clear-size: 12px
+) {
+  display: inline-block;
+  position: relative;
+  width: $input-width;
+  height: $input-height;
+  white-space: nowrap;
+  box-sizing: border-box;
+
+  &__input {
+    display: inline-block;
+    transition: box-shadow .4s ease, background .4s ease, padding .4s ease;
+    border: 0;
+    border-radius: $border-radius;
+    box-shadow: inset 0 0 0 $border-width $input-border-color;
+    background: $input-background;
+    padding: 0;
+    padding-right: if($icon-position == 'right', $input-height, 0) + $icon-clear-size * 2 + 8px;
+    padding-left: if($icon-position == 'right', $font-size, $input-height + if($icon-background-opacity == 0, 0, 8px));
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    white-space: normal;
+    font-size: $font-size;
+    appearance: none;
+    color: white;
+
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      display: none;
+    }
+
+    &:hover {
+      box-shadow: inset 0 0 0 $border-width darken($input-border-color, 10%);
+    }
+
+    &:focus,
+    &:active {
+      outline: 0;
+      box-shadow: inset 0 0 0 $border-width $input-focus-border-color;
+      background: $input-focus-background;
+    }
+
+    &::placeholder {
+      color: $placeholder-color;
+    }
+
+  }
+
+  &__submit {
+    position: absolute;
+    top: 0;
+    #{$icon-position}: 0;
+    margin: 0;
+    border: 0;
+    border-radius: if($icon-position == 'right', 0 $border-radius $border-radius 0, $border-radius 0 0 $border-radius);
+    background-color: rgba($icon-background, $icon-background-opacity);
+    padding: 0;
+    width: $input-height;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    user-select: none;
+
+    // Helper for vertical alignement of the icon
+    &::before {
+      display: inline-block;
+      margin-right: -4px;
+      height: 100%;
+      vertical-align: middle;
+      content: '';
+    }
+
+    &:hover,
+    &:active {
+      cursor: pointer;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+
+    svg {
+      width: $icon-size;
+      height: $icon-size;
+      vertical-align: middle;
+      fill: $icon-color;
+    }
+  }
+
+  &__reset {
+    display: none;
+    position: absolute;
+    top: ($input-height - $icon-clear-size) / 2 - 4px;
+    right: if($icon-position == 'right', 8px + $input-height, ($input-height - $icon-clear-size) / 2) - 4px;
+    margin: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    padding: 0;
+    user-select: none;
+    fill: rgba(#000, .5);
+
+    &:focus {
+      outline: 0;
+    }
+
+    svg {
+      display: block;
+      margin: 4px;
+      width: $icon-clear-size;
+      height: $icon-clear-size;
+    }
+  }
+
+  &__input:valid ~ &__reset {
+    display: block;
+    animation-name: sbx-reset-in;
+    animation-duration: .15s;
+  }
+
+  @keyframes sbx-reset-in {
+    from {
+      transform: translate3d(-20%, 0, 0);
+      opacity: 0;
+    }
+
+    to {
+      transform: none;
+      opacity: 1;
+    }
+  }
+}
+
+.sbx-custom{
+  @include searchbox($custom...);
+}
+
+.site-header .navbar .navbar-nav > li.searchbar-wrapper {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.algolia-autocomplete {
+  display: inline !important;
+}
+
+.aa-dropdown-menu.aa-with-0 {
+  top: 31px !important;
+}
+
+@media (min-width: 768px) {
+  .aa-dropdown-menu {
+    min-width: 530px !important;
+  }
+}
diff --git a/docs/css/main.scss b/docs/css/main.scss
index ade665a5..c2903e79 100644
--- a/docs/css/main.scss
+++ b/docs/css/main.scss
@@ -11,3 +11,4 @@
 
 @import "home";
 @import "page";
+@import "searchbar";
