From 59ee05c6067e7dbe15889c70682f388c3273c4e9 Mon Sep 17 00:00:00 2001 From: Christopher Rogers Date: Thu, 10 Apr 2014 17:47:01 -0700 Subject: [PATCH] Updates search field markup and style Signed-off-by: Christopher Rogers --- source/javascripts/app/search.js | 2 +- source/layouts/layout.erb | 4 +++- source/stylesheets/screen.css.scss | 30 +++++++++++++++++++++++++++--- 3 files changed, 31 insertions(+), 5 deletions(-) diff --git a/source/javascripts/app/search.js b/source/javascripts/app/search.js index 9c8db96..0ce6eb4 100644 --- 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 index 62bd593..a09fc03 100644 --- a/source/layouts/layout.erb +++ b/source/layouts/layout.erb @@ -38,7 +38,9 @@ under the License.
<%= image_tag "logo.png" %> - +
+ +
<% if current_page.data.toc_footers %> diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss index e007db8..bbebcd0 100644 --- 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; }