1// $Id$
2//Less file for the jQuery tablesorter plugin
3//base formatting that apply to all Tiki themes and included in tiki.less
4
5$filterTransitionTime : 0.1s;
6$filterRowHiddenHeight : 4px;
7// becomes height using padding (so it's divided by 2)
8
9// url(icons/loading.gif);
10$processingIcon : url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
11
12// Filter widget transition
13@mixin filterWidgetTransition {
14	-webkit-transition: line-height $filterTransitionTime ease;
15	-moz-transition: line-height $filterTransitionTime ease;
16	-o-transition: line-height $filterTransitionTime ease;
17	transition: line-height $filterTransitionTime ease;
18}
19
20// Arrows
21$arrowPosition : center right;
22
23// div around table
24div.tablesorter-resizable-container {
25	clear: both;
26	width: 100%;
27}
28
29table.tablesorter {
30	width: 100%;
31	margin-bottom: 2px;
32	// style header
33	thead {
34		tr.tablesorter-headerRow {
35			th.tablesorter-header {
36				background-repeat: no-repeat;
37				background-position: $arrowPosition;
38				background-color: $body-bg; // Added by Gary as a test.
39				cursor: pointer;
40				i {
41					font-weight: 400;
42					position: absolute;
43					right: 2px;
44					top: 50%;
45					margin-top: -7px; // half the icon height; older IE doesn't like this
46					width: 14px;
47					height: 14px;
48					background-repeat: no-repeat;
49					line-height: 14px;
50					display: inline-block;
51				}
52			}
53			th div.tablesorter-header-inner span {
54				padding-right: 10px;
55			}
56			th.sorter-false {
57				cursor: default;
58			}
59		}
60		tr.tablesorter-filter-row {
61			td {
62				text-align: center;
63				line-height: normal;
64				@include filterWidgetTransition;
65				input, select {
66					width: 98%;
67					height: auto;
68					margin: 0;
69					-webkit-box-sizing: border-box;
70					-moz-box-sizing: border-box;
71					box-sizing: border-box;
72					@include filterWidgetTransition;
73				}
74				label {
75					float: left;
76					clear: both;
77					font-size: 70%;
78				}
79				input.dateFrom,
80				input.dateTo {
81					width: 60px;
82					padding: 0;
83					font-size: 70%;
84					float: right;
85				}
86				.ui-slider {
87					width: 90%;
88					margin: 13px auto 2px auto; // add enough top margin so the tooltips will fit
89					font-size: 0.9em;
90				}
91				.ui-slider .ui-slider-handle {
92					width: 0.9em;
93					height: 0.9em;
94				}
95				.ui-datepicker {
96					font-size: 0.8em;
97				}
98				span.currange {
99					font-size: smaller;
100					font-weight: normal;
101				}
102				// Add tooltips to slider handles
103				.value-popup:after {
104					content: attr(data-value);
105					position: absolute;
106					bottom: 15px;
107					left: -3px;
108					min-width: 14px;
109					height: 12px;
110					background-color: #444444;
111					background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
112					background-image: -webkit-linear-gradient(top, #444444, #999999);
113					background-image: -o-linear-gradient(top, #444444, #999999);
114					background-image: linear-gradient(to bottom, #444444, #999999);
115					border-radius: 3px;
116					-webkit-background-clip: padding-box;
117					background-clip: padding-box;
118					-webkit-box-shadow: 0 0 4px 0 #777777;
119					box-shadow: 0 0 4px 0 #777777;
120					border: #444444 1px solid;
121					color: #ffffff;
122					font: bold 0.9em/1em Arial;
123					padding: 1px;
124					text-align: center;
125				}
126				.value-popup:before {
127					content: "";
128					position: absolute;
129					width: 0;
130					height: 0;
131					border-top: 8px solid #777777;
132					border-left: 8px solid transparent;
133					border-right: 8px solid transparent;
134					top: -8px;
135					left: 50%;
136					margin-left: -8px;
137					margin-top: -1px;
138				}
139			}
140		}
141		tr.tablesorter-filter-row.hideme td {
142			padding: $filterRowHiddenHeight / 2;
143			margin: 0;
144			line-height: 0;
145			cursor: pointer;
146		}
147		tr.tablesorter-filter-row.hideme .tablesorter-filter {
148			height: 1px;
149			min-height: 0;
150			border: 0;
151			padding: 0;
152			margin: 0;
153			// don't use visibility: hidden because it disables tabbing
154			opacity: 0;
155			filter: alpha(opacity=0);
156		}
157	}
158	// no formatting on filter row when filter-false
159	thead .disabled {
160		display: none;
161	}
162	tbody {
163		// rows hidden by filtering (needed for child rows)
164		tr.filtered {
165			display: none;
166		}
167		td[data-tsmath] {
168			font-weight: bold;
169			text-align: right;
170		}
171	}
172}
173
174table.tablesorter-processing tbody tr td {
175	opacity: .25;
176}
177
178// pager and other controls above the table
179div.ts-wrapperdiv {
180	span.tablesorter-column-selector {
181		label {
182			margin: 0 5px;
183		}
184		input[type="checkbox"] {
185			margin-right: 6px;
186		}
187	}
188	select {
189		width: auto;
190		display: inline;
191		option {
192			font-size: smaller;
193		}
194	}
195	select, input {
196		font-size: smaller;
197		border: none;
198	}
199	div.ts-pager {
200		margin-top: 3px;
201		margin-bottom: 3px;
202		font-size: smaller;
203		float: right;
204		clear: right;
205		&.ts-pager-bottom {
206			display: none;
207		}
208		.right-margin {
209			vertical-align: bottom;
210			margin-right: 4px;
211		}
212	}
213}
214
215table.tablesorter thead tr.tablesorter-filter-row td input.tablesorter-filter,
216table.tablesorter thead tr.tablesorter-filter-row td input.dateFrom,
217table.tablesorter thead tr.tablesorter-filter-row td input.dateTo {
218	color: $input-color;
219	background: $input-bg;
220	border: $input-border-color;
221}
222