From 4096c6bdc266b5f960088c710a2bbd98facf4899 Mon Sep 17 00:00:00 2001 From: Neil Lalonde Date: Thu, 4 Apr 2013 12:46:38 -0400 Subject: [PATCH] Use a font-awesome icon in category search field instead of the default hideous one --- .../javascripts/external/chosen.jquery.js | 2 +- .../stylesheets/application/compose.css.scss | 10 ++--- .../stylesheets/application/topic.css.scss | 2 +- app/assets/stylesheets/vendor/chosen.css.erb | 42 ++++++++++++------- 4 files changed, 34 insertions(+), 22 deletions(-) diff --git a/app/assets/javascripts/external/chosen.jquery.js b/app/assets/javascripts/external/chosen.jquery.js index 4abf8b78ffe..66be45a44c8 100644 --- a/app/assets/javascripts/external/chosen.jquery.js +++ b/app/assets/javascripts/external/chosen.jquery.js @@ -365,7 +365,7 @@ Copyright (c) 2011 by Harvest if (this.is_multiple) { container_div.html('
'); } else { - container_div.html('' + this.default_text + '
'); + container_div.html('' + this.default_text + '
'); } this.form_field_jq.hide().after(container_div); this.container = $('#' + this.container_id); diff --git a/app/assets/stylesheets/application/compose.css.scss b/app/assets/stylesheets/application/compose.css.scss index 7ffbbc7c100..0013682679d 100644 --- a/app/assets/stylesheets/application/compose.css.scss +++ b/app/assets/stylesheets/application/compose.css.scss @@ -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; } } } } diff --git a/app/assets/stylesheets/application/topic.css.scss b/app/assets/stylesheets/application/topic.css.scss index ca7082c0951..67294843937 100644 --- a/app/assets/stylesheets/application/topic.css.scss +++ b/app/assets/stylesheets/application/topic.css.scss @@ -78,7 +78,7 @@ width: 328px; } .chzn-search input { - width: 298px; + width: 278px; } } button { diff --git a/app/assets/stylesheets/vendor/chosen.css.erb b/app/assets/stylesheets/vendor/chosen.css.erb index 996a2acfee3..b7481a22d89 100644 --- a/app/assets/stylesheets/vendor/chosen.css.erb +++ b/app/assets/stylesheets/vendor/chosen.css.erb @@ -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; }