Use a font-awesome icon in category search field instead of the default hideous one

This commit is contained in:
Neil Lalonde 2013-04-04 12:46:38 -04:00
parent a4a09dc242
commit 4096c6bdc2
4 changed files with 34 additions and 22 deletions

View File

@ -365,7 +365,7 @@ Copyright (c) 2011 by Harvest
if (this.is_multiple) { if (this.is_multiple) {
container_div.html('<ul class="chzn-choices"><li class="search-field"><input type="text" value="' + this.default_text + '" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>'); container_div.html('<ul class="chzn-choices"><li class="search-field"><input type="text" value="' + this.default_text + '" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>');
} else { } else {
container_div.html('<a href="javascript:void(0)" class="chzn-single chzn-default"><span>' + this.default_text + '</span><div><b></b></div></a><div class="chzn-drop" style="left:-9000px;"><div class="chzn-search"><input type="text" autocomplete="off" /></div><ul class="chzn-results"></ul></div>'); container_div.html('<a href="javascript:void(0)" class="chzn-single chzn-default"><span>' + this.default_text + '</span><div><b></b></div></a><div class="chzn-drop" style="left:-9000px;"><div class="chzn-search"><input type="text" autocomplete="off" /><div class="chzn-search-icon"><i class="icon icon-search"></i></div></div><ul class="chzn-results"></ul></div>');
} }
this.form_field_jq.hide().after(container_div); this.form_field_jq.hide().after(container_div);
this.container = $('#' + this.container_id); this.container = $('#' + this.container_id);

View File

@ -216,9 +216,9 @@
height: 400px; height: 400px;
} }
.contents { .contents {
input[type=text] { input#reply-title {
padding: 7px 10px; padding: 7px 10px;
margin: 6px 0 3px 0; margin: 6px 10px 3px 0;
} }
.wmd-controls { .wmd-controls {
top: 100px; top: 100px;
@ -252,9 +252,9 @@
@include small-width { width: 218px; } @include small-width { width: 218px; }
} }
.chzn-search input { .chzn-search input {
width: 398px; width: 378px;
@include medium-width { width: 253px; } @include medium-width { width: 233px; }
@include small-width { width: 188px; } @include small-width { width: 168px; }
} }
} }
} }

View File

@ -78,7 +78,7 @@
width: 328px; width: 328px;
} }
.chzn-search input { .chzn-search input {
width: 298px; width: 278px;
} }
} }
button { button {

View File

@ -99,16 +99,28 @@
white-space: nowrap; white-space: nowrap;
z-index: 1010; z-index: 1010;
} }
.chzn-container-single .chzn-search .chzn-search-icon {
display: inline-block;
width: auto;
height: auto;
font-size: 18px;
font-weight: normal;
position: absolute;
right: 10px;
top: 12px;
z-index: 3;
color: #888;
}
.chzn-container-single .chzn-search input { .chzn-container-single .chzn-search input {
background: #fff url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px; background: #fff;
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%); background: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%); background: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%); background: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%); background: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, linear-gradient(top, #eeeeee 1%, #ffffff 15%); background: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
margin: 1px 0; margin: 1px 0;
padding: 4px 20px 4px 5px; padding: 7px 30px 7px 10px;
outline: 0; outline: 0;
border: 1px solid #aaa; border: 1px solid #aaa;
font-family: sans-serif; font-family: sans-serif;
@ -382,13 +394,13 @@
.chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 15px; } .chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 15px; }
.chzn-rtl.chzn-container-active .chzn-single-with-drop div { border-right: none; } .chzn-rtl.chzn-container-active .chzn-single-with-drop div { border-right: none; }
.chzn-rtl .chzn-search input { .chzn-rtl .chzn-search input {
background: #fff url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px; background: #fff;
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%); background: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%); background: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%); background: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%); background: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, linear-gradient(top, #eeeeee 1%, #ffffff 15%); background: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
padding: 4px 5px 4px 20px; padding: 4px 5px 4px 20px;
direction: rtl; direction: rtl;
} }