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

Last change on this file since 25751 was 25751, checked in by plg, 10 years ago

bug 3004 fixed: add jQuery Chosen icons for iPad (high pixelratio).

update Chosen to version 1.0.0

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