source: trunk/themes/default/js/plugins/chosen.css @ 20818

Last change on this file since 20818 was 20818, checked in by rvelices, 11 years ago

upgraded jquery chosen from 0.9.7 to 0.9.11

File size: 14.5 KB
Line 
1/* @group Base */
2.chzn-container {
3  font-size: 13px;
4  position: relative;
5  display: inline-block;
6  zoom: 1;
7  *display: inline;
8}
9.chzn-container .chzn-drop {
10  background: #fff;
11  border: 1px solid #aaa;
12  border-top: 0;
13  position: absolute;
14  top: 29px;
15  left: 0;
16  -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);
17  -moz-box-shadow   : 0 4px 5px rgba(0,0,0,.15);
18  box-shadow        : 0 4px 5px rgba(0,0,0,.15);
19  z-index: 1010;
20}
21/* @end */
22
23/* @group Single Chosen */
24.chzn-container-single .chzn-single {
25  background-color: #ffffff;
26  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0 );   
27  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
28  background-image: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
29  background-image: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
30  background-image: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
31  background-image: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); 
32  -webkit-border-radius: 5px;
33  -moz-border-radius   : 5px;
34  border-radius        : 5px;
35  -moz-background-clip   : padding;
36  -webkit-background-clip: padding-box;
37  background-clip        : padding-box;
38  border: 1px solid #aaaaaa;
39  -webkit-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
40  -moz-box-shadow   : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
41  box-shadow        : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
42  display: block;
43  overflow: hidden;
44  white-space: nowrap;
45  position: relative;
46  height: 23px;
47  line-height: 24px;
48  padding: 0 0 0 8px;
49  color: #444444;
50  text-decoration: none;
51}
52.chzn-container-single .chzn-default {
53  color: #999;
54}
55.chzn-container-single .chzn-single span {
56  margin-right: 26px;
57  display: block;
58  overflow: hidden;
59  white-space: nowrap;
60  -o-text-overflow: ellipsis;
61  -ms-text-overflow: ellipsis;
62  text-overflow: ellipsis;
63}
64.chzn-container-single .chzn-single abbr {
65  display: block;
66  position: absolute;
67  right: 26px;
68  top: 6px;
69  width: 12px;
70  height: 12px;
71  font-size: 1px;
72  background: url('chosen-sprite.png') -42px 1px no-repeat;
73}
74.chzn-container-single .chzn-single abbr:hover {
75  background-position: -42px -10px;
76}
77.chzn-container-single.chzn-disabled .chzn-single abbr:hover {
78  background-position: -42px -10px;
79}
80.chzn-container-single .chzn-single div {
81  position: absolute;
82  right: 0;
83  top: 0;
84  display: block;
85  height: 100%;
86  width: 18px;
87}
88.chzn-container-single .chzn-single div b {
89  background: url('chosen-sprite.png') no-repeat 0px 2px;
90  display: block;
91  width: 100%;
92  height: 100%;
93}
94.chzn-container-single .chzn-search {
95  padding: 3px 4px;
96  position: relative;
97  margin: 0;
98  white-space: nowrap;
99  z-index: 1010;
100}
101.chzn-container-single .chzn-search input {
102  background: #fff url('chosen-sprite.png') no-repeat 100% -20px;
103  background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-gradient(linear, 0 0, 0 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
104  background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
105  background: url('chosen-sprite.png') no-repeat 100% -20px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
106  background: url('chosen-sprite.png') no-repeat 100% -20px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
107  background: url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eeeeee 1%, #ffffff 15%);
108  margin: 1px 0;
109  padding: 4px 20px 4px 5px;
110  outline: 0;
111  border: 1px solid #aaa;
112  font-family: sans-serif;
113  font-size: 1em;
114}
115.chzn-container-single .chzn-drop {
116  -webkit-border-radius: 0 0 4px 4px;
117  -moz-border-radius   : 0 0 4px 4px;
118  border-radius        : 0 0 4px 4px;
119  -moz-background-clip   : padding;
120  -webkit-background-clip: padding-box;
121  background-clip        : padding-box;
122}
123/* @end */
124
125.chzn-container-single-nosearch .chzn-search input {
126  position: absolute;
127  left: -9000px;
128}
129
130/* @group Multi Chosen */
131.chzn-container-multi .chzn-choices {
132  background-color: #fff;
133  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
134  background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
135  background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
136  background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
137  background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
138  border: 1px solid #aaa;
139  margin: 0;
140  padding: 0;
141  cursor: text;
142  overflow: hidden;
143  height: auto !important;
144  height: 1%;
145  position: relative;
146}
147.chzn-container-multi .chzn-choices li {
148  float: left;
149  list-style: none;
150}
151.chzn-container-multi .chzn-choices .search-field {
152  white-space: nowrap;
153  margin: 0;
154  padding: 0;
155}
156.chzn-container-multi .chzn-choices .search-field input {
157  color: #666;
158  background: transparent !important;
159  border: 0 !important;
160  font-family: sans-serif;
161  font-size: 100%;
162  height: 15px;
163  padding: 5px;
164  margin: 1px 0;
165  outline: 0;
166  -webkit-box-shadow: none;
167  -moz-box-shadow   : none;
168  box-shadow        : none;
169}
170.chzn-container-multi .chzn-choices .search-field .default {
171  color: #999;
172}
173.chzn-container-multi .chzn-choices .search-choice {
174  -webkit-border-radius: 3px;
175  -moz-border-radius   : 3px;
176  border-radius        : 3px;
177  -moz-background-clip   : padding;
178  -webkit-background-clip: padding-box;
179  background-clip        : padding-box;
180  background-color: #e4e4e4;
181  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 ); 
182  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
183  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
184  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
185  background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
186  background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); 
187  -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
188  -moz-box-shadow   : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
189  box-shadow        : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
190  color: #333;
191  border: 1px solid #aaaaaa;
192  line-height: 13px;
193  padding: 3px 20px 3px 5px;
194  margin: 3px 0 3px 5px;
195  position: relative;
196  cursor: default;
197}
198.chzn-container-multi .chzn-choices .search-choice.search-choice-disabled {
199  background-color: #e4e4e4;
200  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
201  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
202  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
203  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
204  background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
205  background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
206  background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
207  color: #666;
208  border: 1px solid #cccccc;
209  padding-right: 5px;
210}
211.chzn-container-multi .chzn-choices .search-choice-focus {
212  background: #d4d4d4;
213}
214.chzn-container-multi .chzn-choices .search-choice .search-choice-close {
215  display: block;
216  position: absolute;
217  right: 3px;
218  top: 4px;
219  width: 12px;
220  height: 12px;
221  font-size: 1px;
222  background: url('chosen-sprite.png') -42px 1px no-repeat;
223}
224.chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover {
225  background-position: -42px -10px;
226}
227.chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close {
228  background-position: -42px -10px;
229}
230/* @end */
231
232/* @group Results */
233.chzn-container .chzn-results {
234  margin: 0 4px 4px 0;
235  max-height: 240px;
236  padding: 0 0 0 4px;
237  position: relative;
238  overflow-x: hidden;
239  overflow-y: auto;
240  -webkit-overflow-scrolling: touch;
241}
242.chzn-container-multi .chzn-results {
243  margin: -1px 0 0;
244  padding: 0;
245}
246.chzn-container .chzn-results li {
247  display: none;
248  line-height: 15px;
249  padding: 5px 6px;
250  margin: 0;
251  list-style: none;
252}
253.chzn-container .chzn-results .active-result {
254  cursor: pointer;
255  display: list-item;
256}
257.chzn-container .chzn-results .highlighted {
258  background-color: #3875d7;
259  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3875d7', endColorstr='#2a62bc', GradientType=0 ); 
260  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
261  background-image: -webkit-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
262  background-image: -moz-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
263  background-image: -o-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
264  background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
265  color: #fff;
266}
267.chzn-container .chzn-results li em {
268  background: #feffde;
269  font-style: normal;
270}
271.chzn-container .chzn-results .highlighted em {
272  background: transparent;
273}
274.chzn-container .chzn-results .no-results {
275  background: #f4f4f4;
276  display: list-item;
277}
278.chzn-container .chzn-results .group-result {
279  cursor: default;
280  color: #999;
281  font-weight: bold;
282}
283.chzn-container .chzn-results .group-option {
284  padding-left: 15px;
285}
286.chzn-container-multi .chzn-drop .result-selected {
287  display: none;
288}
289.chzn-container .chzn-results-scroll {
290  background: white;
291  margin: 0 4px;
292  position: absolute;
293  text-align: center;
294  width: 321px; /* This should by dynamic with js */
295  z-index: 1;
296}
297.chzn-container .chzn-results-scroll span {
298  display: inline-block;
299  height: 17px;
300  text-indent: -5000px;
301  width: 9px;
302}
303.chzn-container .chzn-results-scroll-down {
304  bottom: 0;
305}
306.chzn-container .chzn-results-scroll-down span {
307  background: url('chosen-sprite.png') no-repeat -4px -3px;
308}
309.chzn-container .chzn-results-scroll-up span {
310  background: url('chosen-sprite.png') no-repeat -22px -3px;
311}
312/* @end */
313
314/* @group Active  */
315.chzn-container-active .chzn-single {
316  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
317  -moz-box-shadow   : 0 0 5px rgba(0,0,0,.3);
318  box-shadow        : 0 0 5px rgba(0,0,0,.3);
319  border: 1px solid #5897fb;
320}
321.chzn-container-active .chzn-single-with-drop {
322  border: 1px solid #aaa;
323  -webkit-box-shadow: 0 1px 0 #fff inset;
324  -moz-box-shadow   : 0 1px 0 #fff inset;
325  box-shadow        : 0 1px 0 #fff inset;
326  background-color: #eee;
327  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0 );
328  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
329  background-image: -webkit-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
330  background-image: -moz-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
331  background-image: -o-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
332  background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);
333  -webkit-border-bottom-left-radius : 0;
334  -webkit-border-bottom-right-radius: 0;
335  -moz-border-radius-bottomleft : 0;
336  -moz-border-radius-bottomright: 0;
337  border-bottom-left-radius : 0;
338  border-bottom-right-radius: 0;
339}
340.chzn-container-active .chzn-single-with-drop div {
341  background: transparent;
342  border-left: none;
343}
344.chzn-container-active .chzn-single-with-drop div b {
345  background-position: -18px 2px;
346}
347.chzn-container-active .chzn-choices {
348  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
349  -moz-box-shadow   : 0 0 5px rgba(0,0,0,.3);
350  box-shadow        : 0 0 5px rgba(0,0,0,.3);
351  border: 1px solid #5897fb;
352}
353.chzn-container-active .chzn-choices .search-field input {
354  color: #111 !important;
355}
356/* @end */
357
358/* @group Disabled Support */
359.chzn-disabled {
360  cursor: default;
361  opacity:0.5 !important;
362}
363.chzn-disabled .chzn-single {
364  cursor: default;
365}
366.chzn-disabled .chzn-choices .search-choice .search-choice-close {
367  cursor: default;
368}
369
370/* @group Right to Left */
371.chzn-rtl { text-align: right; }
372.chzn-rtl .chzn-single { padding: 0 8px 0 0; overflow: visible; }
373.chzn-rtl .chzn-single span { margin-left: 26px; margin-right: 0; direction: rtl; }
374
375.chzn-rtl .chzn-single div { left: 3px; right: auto; }
376.chzn-rtl .chzn-single abbr {
377  left: 26px;
378  right: auto;
379}
380.chzn-rtl .chzn-choices .search-field input { direction: rtl; }
381.chzn-rtl .chzn-choices li { float: right; }
382.chzn-rtl .chzn-choices .search-choice { padding: 3px 5px 3px 19px; margin: 3px 5px 3px 0; }
383.chzn-rtl .chzn-choices .search-choice .search-choice-close { left: 4px; right: auto; }
384.chzn-rtl.chzn-container-single .chzn-results { margin: 0 0 4px 4px; padding: 0 4px 0 0; }
385.chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 15px; }
386.chzn-rtl.chzn-container-active .chzn-single-with-drop div { border-right: none; }
387.chzn-rtl .chzn-search input {
388  background: #fff url('chosen-sprite.png') no-repeat -30px -20px;
389  background: url('chosen-sprite.png') no-repeat -30px -20px, -webkit-gradient(linear, 0 0, 0 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
390  background: url('chosen-sprite.png') no-repeat -30px -20px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%); 
391  background: url('chosen-sprite.png') no-repeat -30px -20px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
392  background: url('chosen-sprite.png') no-repeat -30px -20px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
393  background: url('chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eeeeee 1%, #ffffff 15%);
394  padding: 4px 5px 4px 20px;
395  direction: rtl;
396}
397.chzn-container-single.chzn-rtl .chzn-single div b {
398  background-position: 6px 2px;
399}
400.chzn-container-single.chzn-rtl .chzn-single-with-drop div b {
401  background-position: -12px 2px;
402}
403/* @end */
404
405/* @group Retina compatibility */
406@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi)  {
407  .chzn-rtl .chzn-search input, .chzn-container-single .chzn-single abbr, .chzn-container-single .chzn-single div b, .chzn-container-single .chzn-search input, .chzn-container-multi .chzn-choices .search-choice .search-choice-close, .chzn-container .chzn-results-scroll-down span, .chzn-container .chzn-results-scroll-up span {
408      background-image: url('chosen-sprite@2x.png') !important;
409      background-repeat: no-repeat !important;
410      background-size: 52px 37px !important;
411  }
412}
413/* @end */
Note: See TracBrowser for help on using the repository browser.