Style simple search overlay

This commit is contained in:
Michael Rose 2013-09-11 14:24:55 -04:00
parent 20cc1bdf8c
commit 5241e9f646
5 changed files with 13 additions and 13 deletions

View file

@ -17,11 +17,11 @@
</div><!-- /.navigation-wrapper -->
{% if site.search %}<div class="search-wrapper">
<form role="search">
<input type="search" name="s" id="s" class="search-field" placeholder="Search...">
<div class="search-form">
<input type="text" class="search-field" placeholder="Search...">
<i class="icon-remove-sign icon-2x"></i>
<ul class="search-results post-list"></ul><!-- /.search-results -->
</form>
</div><!-- /.search-form -->
</div><!-- ./search-wrapper -->{% endif %}
{% if page.image.feature %}<header class="masthead" itemscope itemtype="http://schema.org/Organization">

File diff suppressed because one or more lines are too long

View file

@ -32,7 +32,7 @@ $(document).ready(function() {
var bs = {
close: $(".icon-remove-sign"),
searchform: $("form"),
searchform: $(".search-form"),
canvas: $("body"),
dothis: $('.dosearch')
};
@ -45,7 +45,7 @@ $(document).ready(function() {
});
bs.close.on('click', function() {
$('.search-wrapper').css({ display: "hidden" });
$('.search-wrapper').removeAttr( 'style' );
bs.searchform.toggleClass('active');
bs.canvas.removeClass('search-overlay');
});

File diff suppressed because one or more lines are too long

View file

@ -244,7 +244,7 @@ select:focus {
background-color: lighten(@black, 10);
}
}
form[role="search"] {
.search-form {
width: 100%;
position: relative;
opacity: 0;
@ -252,7 +252,7 @@ form[role="search"] {
top: 0;
left: -200px;
z-index: 9002;
input[type="search"] {
.search-field {
-webkit-appearance: none;
border: none;
width: 100%;
@ -291,10 +291,10 @@ form[role="search"] {
z-index: 1;
cursor: pointer;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
.search-field::-webkit-search-decoration,
.search-field::-webkit-search-cancel-button,
.search-field::-webkit-search-results-button,
.search-field::-webkit-search-results-decoration {
display: none;
}
.post-list {