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