Updates search field markup and style

Signed-off-by: Christopher Rogers <chrissrogers@gmail.com>
This commit is contained in:
Christopher Rogers 2014-04-10 17:47:01 -07:00
parent f2d1387971
commit 59ee05c606
3 changed files with 31 additions and 5 deletions

View file

@ -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();

View file

@ -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 %>

View file

@ -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;
}