From f5ac459d7c3f6d326f6eafeb86bcc254d16790ab Mon Sep 17 00:00:00 2001 From: Allen Bargi Date: Sun, 31 Jul 2011 12:46:01 +0200 Subject: [PATCH] * dded right to left support * cleaned up css file and removed a bunch of unused and redundant rule sets (even less warning with csslint) * also closes #118 using display inline-block Please enter the commit message for your changes. Lines starting --- chosen/chosen.css | 353 ++++++++++++++++++------------------ chosen/chosen.jquery.js | 3 +- coffee/chosen.jquery.coffee | 3 +- 3 files changed, 181 insertions(+), 178 deletions(-) diff --git a/chosen/chosen.css b/chosen/chosen.css index 2bf78fa..9ad2cfe 100644 --- a/chosen/chosen.css +++ b/chosen/chosen.css @@ -1,241 +1,214 @@ -div.chzn-container { +/* @group Base */ +.chzn-container { font-size: 13px; position: relative; + display: inline-block; + zoom: 1; + *display: inline; } - -div.chzn-container input { +.chzn-container .chzn-drop { background: #fff; - background: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); - background: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); - background: -o-linear-gradient(bottom, white 85%, #eeeeee 99%); - background: -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); - background: linear-gradient(top, #ffffff 85%,#eeeeee 99%); border: 1px solid #aaa; - font-family: sans-serif; - font-size: 1em; - margin: 0px; - padding: 4px 20px 4px 5px; - outline: none; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -o-border-radius: 3px; - -ms-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; -} -div.chzn-container textarea:focus { - border-color: #058cf5; - -moz-box-shadow: 0px 0px 3px #aaa; - -webkit-box-shadow: 0px 0px 3px #aaa; - box-shadow: 0px 0px 3px #aaa; -} - - -div.chzn-container div.chzn-drop { - background: #FFF; - border: 1px solid #aaa; - border-width: 0 1px 1px; - left: 0; + border-top: 0; position: absolute; top: 29px; - -webkit-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15); - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); + left: 0; + -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15); + -moz-box-shadow : 0 4px 5px rgba(0,0,0,.15); + -o-box-shadow : 0 4px 5px rgba(0,0,0,.15); + box-shadow : 0 4px 5px rgba(0,0,0,.15); z-index: 999; } -div.chzn-container-single div.chzn-drop { - -moz-border-radius: 0 0 4px 4px; - -webkit-border-radius: 0 0 4px 4px; - -o-border-radius: 0 0 4px 4px; - -ms-border-radius: 0 0 4px 4px; - -khtml-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; -} +/* @end */ - -/* SINGLE */ -div.chzn-container a.chzn-single { - background: #ffffff; +/* @group Single Chosen */ +.chzn-container-single .chzn-single { + background-color: #fff; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white)); + background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%); background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%); background-image: -o-linear-gradient(top, #eeeeee 0%,#ffffff 50%); background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); background-image: linear-gradient(top, #eeeeee 0%,#ffffff 50%); + -webkit-border-radius: 4px; + -moz-border-radius : 4px; + border-radius : 4px; + -moz-background-clip : padding; + -webkit-background-clip: padding-box; + background-clip : padding-box; border: 1px solid #aaa; display: block; overflow: hidden; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -o-border-radius: 4px; - -ms-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - height: 25px; - color: #444; - line-height: 26px; - padding: 0px 0px 0px 8px; - position: relative; - text-decoration: none; white-space: nowrap; + position: relative; + height: 26px; + line-height: 26px; + padding: 0 0 0 8px; + color: #444; + text-decoration: none; } -div.chzn-container a.chzn-single span { - display: block; +.chzn-container-single .chzn-single span { margin-right: 26px; + display: block; overflow: hidden; + white-space: nowrap; + -o-text-overflow: ellipsis; + -ms-text-overflow: ellipsis; + -moz-binding: url('/xml/ellipsis.xml#ellipsis'); text-overflow: ellipsis; } -div.chzn-container a.chzn-single div { - -moz-border-radius-topright: 4px; - -webkit-border-top-right-radius: 4px; - -o-border-top-right-radius: 4px; - -ms-border-top-right-radius: 4px; - -khtml-border-top-right-radius: 4px; - border-top-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - -webkit-border-bottom-right-radius: 4px; - -o-border-bottom-right-radius: 4px; - -ms-border-bottom-right-radius: 4px; - -khtml-border-bottom-right-radius: 4px; - border-bottom-right-radius: 4px; +.chzn-container-single .chzn-single div { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius : 0 4px 4px 0; + border-radius : 0 4px 4px 0; + -moz-background-clip : padding; + -webkit-background-clip: padding-box; + background-clip : padding-box; background: #ccc; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee)); + background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%); background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%); background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%); background-image: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 60%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 ); background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%); border-left: 1px solid #aaa; - display: block; - height: 100%; position: absolute; right: 0; top: 0; + display: block; + height: 100%; width: 18px; } -div.chzn-container a.chzn-single div b { +.chzn-container-single .chzn-single div b { background: url('chosen-sprite.png') no-repeat 0 1px; display: block; width: 100%; height: 100%; } -div.chzn-container div.chzn-search { +.chzn-container-single .chzn-search { padding: 3px 4px; - margin: 0px; + margin: 0; white-space: nowrap; } -div.chzn-container div.chzn-search input { - background: url('chosen-sprite.png') no-repeat 100% -20px, #ffffff; +.chzn-container-single .chzn-search input { + background: #fff url('chosen-sprite.png') no-repeat 100% -20px; background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); background: url('chosen-sprite.png') no-repeat 100% -20px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); background: url('chosen-sprite.png') no-repeat 100% -20px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); background: url('chosen-sprite.png') no-repeat 100% -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); background: url('chosen-sprite.png') no-repeat 100% -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); - background: linear-gradient(top, #ffffff 85%,#eeeeee 99%); - -moz-border-radius: 0px; - -webkit-border-radius: 0px; - -o-border-radius: 0px; - -ms-border-radius: 0px; - -khtml-border-radius: 0px; - border-radius: 0px; + background: url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(top, #ffffff 85%,#eeeeee 99%); margin: 1px 0; + padding: 4px 20px 4px 5px; outline: 0; + border: 1px solid #aaa; + font-family: sans-serif; + font-size: 1em; } +.chzn-container-single .chzn-drop { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius : 0 0 4px 4px; + border-radius : 0 0 4px 4px; + -moz-background-clip : padding; + -webkit-background-clip: padding-box; + background-clip : padding-box; +} +/* @end */ - -/* Multi */ -div.chzn-container ul.chzn-choices { - background: #fff; +/* @group Multi Chosen */ +.chzn-container-multi .chzn-choices { + background-color: #fff; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background-image: -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); background-image: -o-linear-gradient(bottom, white 85%, #eeeeee 99%); background-image: -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); background-image: linear-gradient(top, #ffffff 85%,#eeeeee 99%); - margin: 0; - cursor: text; border: 1px solid #aaa; + margin: 0; + padding: 0; + cursor: text; overflow: hidden; height: auto !important; height: 1%; - padding: 0; position: relative; } -div.chzn-container ul.chzn-choices:focus { - border-color: #058cf5; - -moz-box-shadow: 0px 0px 5px #999; - -webkit-box-shadow: 0px 0px 5px #999; - box-shadow: 0px 0px 5px #999; -} -div.chzn-container ul.chzn-choices li { +.chzn-container-multi .chzn-choices li { float: left; - list-style-type: none; - margin: 0px; + list-style: none; } -div.chzn-container ul.chzn-choices li.search-field { - margin: 0px; +.chzn-container-multi .chzn-choices .search-field { white-space: nowrap; - padding: 0px; + margin: 0; + padding: 0; } -div.chzn-container ul.chzn-choices li.search-field input { +.chzn-container-multi .chzn-choices .search-field input { color: #666; background: transparent !important; - border: 0px !important; + border: 0 !important; padding: 5px; margin: 1px 0; outline: 0; -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + -moz-box-shadow : none; + -o-box-shadow : none; + box-shadow : none; } -div.chzn-container ul.chzn-choices li.search-field input.default { +.chzn-container-multi .chzn-choices .search-field .default { color: #999; } -div.chzn-container ul.chzn-choices li.search-choice { - -moz-border-radius: 3px; +.chzn-container-multi .chzn-choices .search-choice { -webkit-border-radius: 3px; - border-radius: 3px; - background: #e4e4e4; + -moz-border-radius : 3px; + border-radius : 3px; + -moz-background-clip : padding; + -webkit-background-clip: padding-box; + background-clip : padding-box; + background-color: #e4e4e4; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e4e4e4), color-stop(0.7, #eeeeee)); + background-image: -webkit-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%); background-image: -moz-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%); background-image: -o-linear-gradient(bottom, #e4e4e4 0%, #eeeeee 70%); - background: -ms-linear-gradient(top, #e4e4e4 0%,#eeeeee 70%); + background-image: -ms-linear-gradient(top, #e4e4e4 0%,#eeeeee 70%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#eeeeee',GradientType=0 ); - background: linear-gradient(top, #e4e4e4 0%,#eeeeee 70%); + background-image: linear-gradient(top, #e4e4e4 0%,#eeeeee 70%); color: #333; border: 1px solid #b4b4b4; line-height: 13px; padding: 3px 19px 3px 6px; + margin: 3px 0 3px 5px; position: relative; - margin: 3px 0px 3px 5px; } -div.chzn-container ul.chzn-choices li.search-choice span { +.chzn-container-multi .chzn-choices .search-choice span { cursor: default; } -div.chzn-container ul.chzn-choices li.search-choice.search-choice-focus { +.chzn-container-multi .chzn-choices .search-choice-focus { background: #d4d4d4; } -div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close { +.chzn-container-multi .chzn-choices .search-choice .search-choice-close { + display: block; position: absolute; right: 5px; top: 6px; - display: block; width: 8px; height: 9px; font-size: 1px; background: url(chosen-sprite.png) right top no-repeat; } -div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close:hover { +.chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover { background-position: right -9px; } -div.chzn-container ul.chzn-choices li.search-choice.search-choice-focus a.search-choice-close { +.chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close { background-position: right -9px; } +/* @end */ - -/* Results */ -div.chzn-container ul.chzn-results { +/* @group Results */ +.chzn-container .chzn-results { margin: 0 4px 4px 0; max-height: 190px; padding: 0 0 0 4px; @@ -243,92 +216,120 @@ div.chzn-container ul.chzn-results { overflow-x: hidden; overflow-y: auto; } -div.chzn-container-multi ul.chzn-results { +.chzn-container-multi .chzn-results { margin: -1px 0 0; padding: 0; } -div.chzn-container-multi ul.chzn-results li { - border-left: 0px !important; - border-right: 0px !important; -} -div.chzn-container ul.chzn-results li { +.chzn-container .chzn-results li { line-height: 80%; padding: 7px 7px 8px; margin: 0; - list-style-type: none; + list-style: none; } -div.chzn-container ul.chzn-results li.active-result { +.chzn-container .chzn-results .active-result { cursor: pointer; } -div.chzn-container ul.chzn-results li em { - font-style: normal; - background: #FEFFDC; -} -div.chzn-container ul.chzn-results li.highlighted { +.chzn-container .chzn-results .highlighted { background: #3875d7; color: #fff; } -div.chzn-container ul.chzn-results li.highlighted em { +.chzn-container .chzn-results li em { + background: #feffde; + font-style: normal; +} +.chzn-container .chzn-results .highlighted em { background: transparent; } -div.chzn-container ul.chzn-results li.no-results { - background: #F4F4F4; +.chzn-container .chzn-results .no-results { + background: #f4f4f4; } -div.chzn-container ul.chzn-results li.group-result { +.chzn-container .chzn-results .group-result { cursor: default; color: #999; font-weight: bold; } -div.chzn-container ul.chzn-results li.group-option { +.chzn-container .chzn-results .group-option { padding-left: 20px; } - -div.chzn-container-multi div.chzn-drop li.result-selected { +.chzn-container-multi .chzn-drop .result-selected { display: none; } +/* @end */ - - -/* Active */ -div.chzn-container-active a.chzn-single { - -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); +/* @group Active */ +.chzn-container-active .chzn-single { + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); + -moz-box-shadow : 0 0 5px rgba(0,0,0,.3); + -o-box-shadow : 0 0 5px rgba(0,0,0,.3); + box-shadow : 0 0 5px rgba(0,0,0,.3); border: 1px solid #5897fb; } -div.chzn-container-active a.chzn-single-with-drop { +.chzn-container-active .chzn-single-with-drop { border: 1px solid #aaa; - border-width: 1px 1px 1px; - -moz-box-shadow: 0px 1px 0px #FFF inset; - -webkit-box-shadow: 0px 1px 0px #FFF inset; - box-shadow: 0px 1px 0px #FFF inset; - background: #EEE; + -webkit-box-shadow: 0 1px 0 #fff inset; + -moz-box-shadow : 0 1px 0 #fff inset; + -o-box-shadow : 0 1px 0 #fff inset; + box-shadow : 0 1px 0 #fff inset; + background-color: #eee; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee)); + background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%); background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%); background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%); background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%); - -webkit-border-bottom-left-radius: 0px; - -webkit-border-bottom-right-radius: 0px; - -moz-border-radius-bottomleft: 0px; - -moz-border-radius-bottomright: 0px; - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; + -webkit-border-bottom-left-radius : 0; + -webkit-border-bottom-right-radius: 0; + -moz-border-radius-bottomleft : 0; + -moz-border-radius-bottomright: 0; + border-bottom-left-radius : 0; + border-bottom-right-radius: 0; } -div.chzn-container-active a.chzn-single-with-drop div { +.chzn-container-active .chzn-single-with-drop div { background: transparent; border-left: none; } -div.chzn-container-active a.chzn-single-with-drop div b { +.chzn-container-active .chzn-single-with-drop div b { background-position: -18px 1px; } -div.chzn-container-active ul.chzn-choices { - -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); +.chzn-container-active .chzn-choices { + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); + -moz-box-shadow : 0 0 5px rgba(0,0,0,.3); + -o-box-shadow : 0 0 5px rgba(0,0,0,.3); + box-shadow : 0 0 5px rgba(0,0,0,.3); border: 1px solid #5897fb; } -div.chzn-container-active ul.chzn-choices input { +.chzn-container-active .chzn-choices .search-field input { color: #111 !important; } +/* @end */ + +/* @group Right to Left */ +.chzn-rtl { direction:rtl;text-align: right; } +.chzn-rtl .chzn-single { padding-left: 0; padding-right: 8px; } +.chzn-rtl .chzn-single span { margin-left: 26px; margin-right: 0; } +.chzn-rtl .chzn-single div { + left: 0; right: auto; + border-left: none; border-right: 1px solid #aaaaaa; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius : 4px 0 0 4px; + border-radius : 4px 0 0 4px; +} +.chzn-rtl .chzn-choices li { float: right; } +.chzn-rtl .chzn-choices .search-choice { padding: 3px 6px 3px 19px; margin: 3px 5px 3px 0; } +.chzn-rtl .chzn-choices .search-choice .search-choice-close { left: 5px; right: auto; background-position: right top;} +.chzn-rtl.chzn-container-single .chzn-results { margin-left: 4px; margin-right: 0; padding-left: 0; padding-right: 4px; } +.chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 20px; } +.chzn-rtl.chzn-container-active .chzn-single-with-drop div { border-right: none; } +.chzn-rtl .chzn-search input { + background: url('chosen-sprite.png') no-repeat -38px -20px, #ffffff; + background: url('chosen-sprite.png') no-repeat -38px -20px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('chosen-sprite.png') no-repeat -38px -20px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, linear-gradient(top, #ffffff 85%,#eeeeee 99%); + padding: 4px 5px 4px 20px; +} +/* @end */ \ No newline at end of file diff --git a/chosen/chosen.jquery.js b/chosen/chosen.jquery.js index 64436bc..e610561 100644 --- a/chosen/chosen.jquery.js +++ b/chosen/chosen.jquery.js @@ -25,6 +25,7 @@ this.form_field = elmn; this.form_field_jq = $(this.form_field); this.is_multiple = this.form_field.multiple; + this.is_rtl = this.form_field_jq.hasClass("chzn-rtl"); this.default_text_default = this.form_field.multiple ? "Select Some Options" : "Select an Option"; this.set_up_html(); this.register_observers(); @@ -49,7 +50,7 @@ this.default_text = this.form_field_jq.data('placeholder') ? this.form_field_jq.data('placeholder') : this.default_text_default; container_div = $("
", { id: this.container_id, - "class": 'chzn-container', + "class": "chzn-container " + (this.is_rtl ? ' chzn-rtl' : void 0), style: 'width: ' + this.f_width + 'px;' }); if (this.is_multiple) { diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee index e46a063..1bbcecc 100644 --- a/coffee/chosen.jquery.coffee +++ b/coffee/chosen.jquery.coffee @@ -25,6 +25,7 @@ class Chosen @form_field = elmn @form_field_jq = $ @form_field @is_multiple = @form_field.multiple + @is_rtl = @form_field_jq.hasClass "chzn-rtl" @default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option" @@ -52,7 +53,7 @@ class Chosen container_div = ($ "
", { id: @container_id - class: 'chzn-container' + class: "chzn-container #{' chzn-rtl' if @is_rtl}" style: 'width: ' + (@f_width) + 'px;' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter })