chosen-koenpunt-rails 0.0.1

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