jquery-datatables-rails 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,521 @@
1
+ /*
2
+ * File: demo_table_jui.css
3
+ * CVS: $Id$
4
+ * Description: CSS descriptions for DataTables demo pages
5
+ * Author: Allan Jardine
6
+ * Created: Tue May 12 06:47:22 BST 2009
7
+ * Modified: $Date$ by $Author$
8
+ * Language: CSS
9
+ * Project: DataTables
10
+ *
11
+ * Copyright 2009 Allan Jardine. All Rights Reserved.
12
+ *
13
+ * ***************************************************************************
14
+ * DESCRIPTION
15
+ *
16
+ * The styles given here are suitable for the demos that are used with the standard DataTables
17
+ * distribution (see www.datatables.net). You will most likely wish to modify these styles to
18
+ * meet the layout requirements of your site.
19
+ *
20
+ * Common issues:
21
+ * 'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
22
+ * no conflict between the two pagination types. If you want to use full_numbers pagination
23
+ * ensure that you either have "example_alt_pagination" as a body class name, or better yet,
24
+ * modify that selector.
25
+ * Note that the path used for Images is relative. All images are by default located in
26
+ * ../images/ - relative to this CSS file.
27
+ */
28
+
29
+
30
+ /*
31
+ * jQuery UI specific styling
32
+ */
33
+
34
+ .paging_two_button .ui-button {
35
+ float: left;
36
+ cursor: pointer;
37
+ * cursor: hand;
38
+ }
39
+
40
+ .paging_full_numbers .ui-button {
41
+ padding: 2px 6px;
42
+ margin: 0;
43
+ cursor: pointer;
44
+ * cursor: hand;
45
+ }
46
+
47
+ .dataTables_paginate .ui-button {
48
+ margin-right: -0.1em !important;
49
+ }
50
+
51
+ .paging_full_numbers {
52
+ width: 350px !important;
53
+ }
54
+
55
+ .dataTables_wrapper .ui-toolbar {
56
+ padding: 5px;
57
+ }
58
+
59
+ .dataTables_paginate {
60
+ width: auto;
61
+ }
62
+
63
+ .dataTables_info {
64
+ padding-top: 3px;
65
+ }
66
+
67
+ table.display thead th {
68
+ padding: 3px 0px 3px 10px;
69
+ cursor: pointer;
70
+ * cursor: hand;
71
+ }
72
+
73
+ div.dataTables_wrapper .ui-widget-header {
74
+ font-weight: normal;
75
+ }
76
+
77
+
78
+ /*
79
+ * Sort arrow icon positioning
80
+ */
81
+ table.display thead th div.DataTables_sort_wrapper {
82
+ position: relative;
83
+ padding-right: 20px;
84
+ padding-right: 20px;
85
+ }
86
+
87
+ table.display thead th div.DataTables_sort_wrapper span {
88
+ position: absolute;
89
+ top: 50%;
90
+ margin-top: -8px;
91
+ right: 0;
92
+ }
93
+
94
+
95
+
96
+
97
+ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
98
+ *
99
+ * Everything below this line is the same as demo_table.css. This file is
100
+ * required for 'cleanliness' of the markup
101
+ *
102
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
103
+
104
+
105
+
106
+ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
107
+ * DataTables features
108
+ */
109
+
110
+ .dataTables_wrapper {
111
+ position: relative;
112
+ min-height: 302px;
113
+ _height: 302px;
114
+ clear: both;
115
+ }
116
+
117
+ .dataTables_processing {
118
+ position: absolute;
119
+ top: 0px;
120
+ left: 50%;
121
+ width: 250px;
122
+ margin-left: -125px;
123
+ border: 1px solid #ddd;
124
+ text-align: center;
125
+ color: #999;
126
+ font-size: 11px;
127
+ padding: 2px 0;
128
+ }
129
+
130
+ .dataTables_length {
131
+ width: 40%;
132
+ float: left;
133
+ }
134
+
135
+ .dataTables_filter {
136
+ width: 50%;
137
+ float: right;
138
+ text-align: right;
139
+ }
140
+
141
+ .dataTables_info {
142
+ width: 50%;
143
+ float: left;
144
+ }
145
+
146
+ .dataTables_paginate {
147
+ float: right;
148
+ text-align: right;
149
+ }
150
+
151
+ /* Pagination nested */
152
+ .paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
153
+ height: 19px;
154
+ width: 19px;
155
+ margin-left: 3px;
156
+ float: left;
157
+ }
158
+
159
+ .paginate_disabled_previous {
160
+ background-image: url('../images/back_disabled.jpg');
161
+ }
162
+
163
+ .paginate_enabled_previous {
164
+ background-image: url('../images/back_enabled.jpg');
165
+ }
166
+
167
+ .paginate_disabled_next {
168
+ background-image: url('../images/forward_disabled.jpg');
169
+ }
170
+
171
+ .paginate_enabled_next {
172
+ background-image: url('../images/forward_enabled.jpg');
173
+ }
174
+
175
+
176
+
177
+ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
178
+ * DataTables display
179
+ */
180
+ table.display {
181
+ margin: 0 auto;
182
+ width: 100%;
183
+ clear: both;
184
+ border-collapse: collapse;
185
+ }
186
+
187
+ table.display tfoot th {
188
+ padding: 3px 0px 3px 10px;
189
+ font-weight: bold;
190
+ font-weight: normal;
191
+ }
192
+
193
+ table.display tr.heading2 td {
194
+ border-bottom: 1px solid #aaa;
195
+ }
196
+
197
+ table.display td {
198
+ padding: 3px 10px;
199
+ }
200
+
201
+ table.display td.center {
202
+ text-align: center;
203
+ }
204
+
205
+
206
+
207
+ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
208
+ * DataTables sorting
209
+ */
210
+
211
+ .sorting_asc {
212
+ background: url('../images/sort_asc.png') no-repeat center right;
213
+ }
214
+
215
+ .sorting_desc {
216
+ background: url('../images/sort_desc.png') no-repeat center right;
217
+ }
218
+
219
+ .sorting {
220
+ background: url('../images/sort_both.png') no-repeat center right;
221
+ }
222
+
223
+ .sorting_asc_disabled {
224
+ background: url('../images/sort_asc_disabled.png') no-repeat center right;
225
+ }
226
+
227
+ .sorting_desc_disabled {
228
+ background: url('../images/sort_desc_disabled.png') no-repeat center right;
229
+ }
230
+
231
+
232
+
233
+
234
+ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
235
+ * DataTables row classes
236
+ */
237
+ table.display tr.odd.gradeA {
238
+ background-color: #ddffdd;
239
+ }
240
+
241
+ table.display tr.even.gradeA {
242
+ background-color: #eeffee;
243
+ }
244
+
245
+
246
+
247
+
248
+ table.display tr.odd.gradeA {
249
+ background-color: #ddffdd;
250
+ }
251
+
252
+ table.display tr.even.gradeA {
253
+ background-color: #eeffee;
254
+ }
255
+
256
+ table.display tr.odd.gradeC {
257
+ background-color: #ddddff;
258
+ }
259
+
260
+ table.display tr.even.gradeC {
261
+ background-color: #eeeeff;
262
+ }
263
+
264
+ table.display tr.odd.gradeX {
265
+ background-color: #ffdddd;
266
+ }
267
+
268
+ table.display tr.even.gradeX {
269
+ background-color: #ffeeee;
270
+ }
271
+
272
+ table.display tr.odd.gradeU {
273
+ background-color: #ddd;
274
+ }
275
+
276
+ table.display tr.even.gradeU {
277
+ background-color: #eee;
278
+ }
279
+
280
+
281
+ tr.odd {
282
+ background-color: #E2E4FF;
283
+ }
284
+
285
+ tr.even {
286
+ background-color: white;
287
+ }
288
+
289
+
290
+
291
+
292
+
293
+ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
294
+ * Misc
295
+ */
296
+ .dataTables_scroll {
297
+ clear: both;
298
+ }
299
+
300
+ .top, .bottom {
301
+ padding: 15px;
302
+ background-color: #F5F5F5;
303
+ border: 1px solid #CCCCCC;
304
+ }
305
+
306
+ .top .dataTables_info {
307
+ float: none;
308
+ }
309
+
310
+ .clear {
311
+ clear: both;
312
+ }
313
+
314
+ .dataTables_empty {
315
+ text-align: center;
316
+ }
317
+
318
+ tfoot input {
319
+ margin: 0.5em 0;
320
+ width: 100%;
321
+ color: #444;
322
+ }
323
+
324
+ tfoot input.search_init {
325
+ color: #999;
326
+ }
327
+
328
+ td.group {
329
+ background-color: #d1cfd0;
330
+ border-bottom: 2px solid #A19B9E;
331
+ border-top: 2px solid #A19B9E;
332
+ }
333
+
334
+ td.details {
335
+ background-color: #d1cfd0;
336
+ border: 2px solid #A19B9E;
337
+ }
338
+
339
+
340
+ .example_alt_pagination div.dataTables_info {
341
+ width: 40%;
342
+ }
343
+
344
+ .paging_full_numbers span.paginate_button,
345
+ .paging_full_numbers span.paginate_active {
346
+ border: 1px solid #aaa;
347
+ -webkit-border-radius: 5px;
348
+ -moz-border-radius: 5px;
349
+ padding: 2px 5px;
350
+ margin: 0 3px;
351
+ cursor: pointer;
352
+ *cursor: hand;
353
+ }
354
+
355
+ .paging_full_numbers span.paginate_button {
356
+ background-color: #ddd;
357
+ }
358
+
359
+ .paging_full_numbers span.paginate_button:hover {
360
+ background-color: #ccc;
361
+ }
362
+
363
+ .paging_full_numbers span.paginate_active {
364
+ background-color: #99B3FF;
365
+ }
366
+
367
+ table.display tr.even.row_selected td {
368
+ background-color: #B0BED9;
369
+ }
370
+
371
+ table.display tr.odd.row_selected td {
372
+ background-color: #9FAFD1;
373
+ }
374
+
375
+
376
+ /*
377
+ * Sorting classes for columns
378
+ */
379
+ /* For the standard odd/even */
380
+ tr.odd td.sorting_1 {
381
+ background-color: #D3D6FF;
382
+ }
383
+
384
+ tr.odd td.sorting_2 {
385
+ background-color: #DADCFF;
386
+ }
387
+
388
+ tr.odd td.sorting_3 {
389
+ background-color: #E0E2FF;
390
+ }
391
+
392
+ tr.even td.sorting_1 {
393
+ background-color: #EAEBFF;
394
+ }
395
+
396
+ tr.even td.sorting_2 {
397
+ background-color: #F2F3FF;
398
+ }
399
+
400
+ tr.even td.sorting_3 {
401
+ background-color: #F9F9FF;
402
+ }
403
+
404
+
405
+ /* For the Conditional-CSS grading rows */
406
+ /*
407
+ Colour calculations (based off the main row colours)
408
+ Level 1:
409
+ dd > c4
410
+ ee > d5
411
+ Level 2:
412
+ dd > d1
413
+ ee > e2
414
+ */
415
+ tr.odd.gradeA td.sorting_1 {
416
+ background-color: #c4ffc4;
417
+ }
418
+
419
+ tr.odd.gradeA td.sorting_2 {
420
+ background-color: #d1ffd1;
421
+ }
422
+
423
+ tr.odd.gradeA td.sorting_3 {
424
+ background-color: #d1ffd1;
425
+ }
426
+
427
+ tr.even.gradeA td.sorting_1 {
428
+ background-color: #d5ffd5;
429
+ }
430
+
431
+ tr.even.gradeA td.sorting_2 {
432
+ background-color: #e2ffe2;
433
+ }
434
+
435
+ tr.even.gradeA td.sorting_3 {
436
+ background-color: #e2ffe2;
437
+ }
438
+
439
+ tr.odd.gradeC td.sorting_1 {
440
+ background-color: #c4c4ff;
441
+ }
442
+
443
+ tr.odd.gradeC td.sorting_2 {
444
+ background-color: #d1d1ff;
445
+ }
446
+
447
+ tr.odd.gradeC td.sorting_3 {
448
+ background-color: #d1d1ff;
449
+ }
450
+
451
+ tr.even.gradeC td.sorting_1 {
452
+ background-color: #d5d5ff;
453
+ }
454
+
455
+ tr.even.gradeC td.sorting_2 {
456
+ background-color: #e2e2ff;
457
+ }
458
+
459
+ tr.even.gradeC td.sorting_3 {
460
+ background-color: #e2e2ff;
461
+ }
462
+
463
+ tr.odd.gradeX td.sorting_1 {
464
+ background-color: #ffc4c4;
465
+ }
466
+
467
+ tr.odd.gradeX td.sorting_2 {
468
+ background-color: #ffd1d1;
469
+ }
470
+
471
+ tr.odd.gradeX td.sorting_3 {
472
+ background-color: #ffd1d1;
473
+ }
474
+
475
+ tr.even.gradeX td.sorting_1 {
476
+ background-color: #ffd5d5;
477
+ }
478
+
479
+ tr.even.gradeX td.sorting_2 {
480
+ background-color: #ffe2e2;
481
+ }
482
+
483
+ tr.even.gradeX td.sorting_3 {
484
+ background-color: #ffe2e2;
485
+ }
486
+
487
+ tr.odd.gradeU td.sorting_1 {
488
+ background-color: #c4c4c4;
489
+ }
490
+
491
+ tr.odd.gradeU td.sorting_2 {
492
+ background-color: #d1d1d1;
493
+ }
494
+
495
+ tr.odd.gradeU td.sorting_3 {
496
+ background-color: #d1d1d1;
497
+ }
498
+
499
+ tr.even.gradeU td.sorting_1 {
500
+ background-color: #d5d5d5;
501
+ }
502
+
503
+ tr.even.gradeU td.sorting_2 {
504
+ background-color: #e2e2e2;
505
+ }
506
+
507
+ tr.even.gradeU td.sorting_3 {
508
+ background-color: #e2e2e2;
509
+ }
510
+
511
+
512
+ /*
513
+ * Row highlighting example
514
+ */
515
+ .ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
516
+ background-color: #ECFFB3;
517
+ }
518
+
519
+ .ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
520
+ background-color: #E6FF99;
521
+ }