Updates search field markup and style

Signed-off-by: Christopher Rogers <[email protected]>
chrissrogers · Apr 11, 2014 · 59ee05c · 59ee05c
1 parent f2d1387
commit 59ee05c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/source/javascripts/app/search.js b/source/javascripts/app/search.js
@@ -29,7 +29,7 @@
   }
 
   function bind () {
-    $('#search').on('keyup', function () {
+    $('#input-search').on('keyup', function () {
       if (this.value) {
         var items = index.search(this.value);
         $('section, #toc .tocify-item').hide();

diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
@@ -38,7 +38,9 @@ under the License.
   <body class="<%= page_classes %>">
     <div class="tocify-wrapper">
       <%= image_tag "logo.png" %>
-      <input type="text" id="search" placeholder="search">
+      <div class="search">
+        <input type="text" class="search" id="input-search">
+      </div>
       <div id="toc">
       </div>
       <% if current_page.data.toc_footers %>

diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
@@ -54,13 +54,37 @@ html, body {
   // This is the logo at the top of the ToC
   &>img {
     display: block;
-    margin-bottom: $logo-margin;
+  }
+
+  &>.search {
+    position: relative;
+
+    input {
+      background: $nav-bg;
+      border-width: 0 0 1px 0;
+      border-color: $nav-footer-border-color;
+      padding: 6px 0 6px 20px;
+      box-sizing: border-box;
+      margin: 10px 15px;
+      width: $nav-width - 30;
+      outline: none;
+      color: $nav-text;
+      letter-spacing: 0.07em;
+    }
+
+    &:before {
+      @extend %icon-search;
+      position: absolute;
+      top: 16px;
+      left: 15px;
+      color: $nav-text;
+    }
   }
 
   .tocify-item>a, .toc-footer li {
     padding: 0 $nav-padding 0 $nav-padding;
-    display:block;
-    overflow-x:hidden;
+    display: block;
+    overflow-x: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }