trln-chosen-rails 1.20.0 → 1.30.0.pre.beta

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