Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
4207 mandeep.dh 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
}