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) {
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 {
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.container = $('#' + this.container_id);

View File

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

View File

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

View File

@ -99,16 +99,28 @@
white-space: nowrap;
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 {
background: #fff url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px;
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: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, -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: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, -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: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: #fff;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
background: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
margin: 1px 0;
padding: 4px 20px 4px 5px;
padding: 7px 30px 7px 10px;
outline: 0;
border: 1px solid #aaa;
font-family: sans-serif;
@ -382,13 +394,13 @@
.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-search input {
background: #fff url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px;
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: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, -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: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, -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: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: #fff;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
background: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
padding: 4px 5px 4px 20px;
direction: rtl;
}