// $Id: _tablesorter-tiki.scss 67904 2018-10-09 08:41:26Z chibaguy $
//Less file for the jQuery tablesorter plugin
//base formatting that apply to all Tiki themes and included in tiki.less

$filterTransitionTime  : 0.1s;
$filterRowHiddenHeight : 4px;
// becomes height using padding (so it's divided by 2)

// url(icons/loading.gif);
$processingIcon        : url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');

// Filter widget transition
@mixin filterWidgetTransition {
	-webkit-transition: line-height $filterTransitionTime ease;
	-moz-transition: line-height $filterTransitionTime ease;
	-o-transition: line-height $filterTransitionTime ease;
	transition: line-height $filterTransitionTime ease;
}

// Arrows
$arrowPosition         : center right;

// div around table
div.tablesorter-resizable-container {
	clear: both;
	width: 100%;
}

table.tablesorter {
	width: 100%;
	margin-bottom: 2px;
	// style header
	thead {
		tr.tablesorter-headerRow {
			th.tablesorter-header {
				background-repeat: no-repeat;
				background-position: $arrowPosition;
			  	background-color: $body-bg; // Added by Gary as a test.
				cursor: pointer;
				i {
					font-weight: 400;
					position: absolute;
					right: 2px;
					top: 50%;
					margin-top: -7px; // half the icon height; older IE doesn't like this
					width: 14px;
					height: 14px;
					background-repeat: no-repeat;
					line-height: 14px;
					display: inline-block;
				}
			}
			th div.tablesorter-header-inner span {
				padding-right: 10px;
			}
			th.sorter-false {
				cursor: default;
			}
		}
		tr.tablesorter-filter-row {
			td {
				text-align: center;
				line-height: normal;
				@include filterWidgetTransition;
				input, select {
					width: 98%;
					height: auto;
					margin: 0;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					@include filterWidgetTransition;
				}
				label {
					float: left;
					clear: both;
					font-size: 70%;
				}
				input.dateFrom,
				input.dateTo {
					width: 60px;
					padding: 0;
					font-size: 70%;
					float: right;
				}
				.ui-slider {
					width: 90%;
					margin: 13px auto 2px auto; // add enough top margin so the tooltips will fit
					font-size: 0.9em;
				}
				.ui-slider .ui-slider-handle {
					width: 0.9em;
					height: 0.9em;
				}
				.ui-datepicker {
					font-size: 0.8em;
				}
				span.currange {
					font-size: smaller;
					font-weight: normal;
				}
				// Add tooltips to slider handles
				.value-popup:after {
					content: attr(data-value);
					position: absolute;
					bottom: 15px;
					left: -3px;
					min-width: 14px;
					height: 12px;
					background-color: #444444;
					background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
					background-image: -webkit-linear-gradient(top, #444444, #999999);
					background-image: -o-linear-gradient(top, #444444, #999999);
					background-image: linear-gradient(to bottom, #444444, #999999);
					border-radius: 3px;
					-webkit-background-clip: padding-box;
					background-clip: padding-box;
					-webkit-box-shadow: 0 0 4px 0 #777777;
					box-shadow: 0 0 4px 0 #777777;
					border: #444444 1px solid;
					color: #ffffff;
					font: bold 0.9em/1em Arial;
					padding: 1px;
					text-align: center;
				}
				.value-popup:before {
					content: "";
					position: absolute;
					width: 0;
					height: 0;
					border-top: 8px solid #777777;
					border-left: 8px solid transparent;
					border-right: 8px solid transparent;
					top: -8px;
					left: 50%;
					margin-left: -8px;
					margin-top: -1px;
				}
			}
		}
		tr.tablesorter-filter-row.hideme td {
			padding: $filterRowHiddenHeight / 2;
			margin: 0;
			line-height: 0;
			cursor: pointer;
		}
		tr.tablesorter-filter-row.hideme .tablesorter-filter {
			height: 1px;
			min-height: 0;
			border: 0;
			padding: 0;
			margin: 0;
			// don't use visibility: hidden because it disables tabbing
			opacity: 0;
			filter: alpha(opacity=0);
		}
	}
	// no formatting on filter row when filter-false
	thead .disabled {
		display: none;
	}
	tbody {
		// rows hidden by filtering (needed for child rows)
		tr.filtered {
			display: none;
		}
		td[data-tsmath] {
			font-weight: bold;
			text-align: right;
		}
	}
}

table.tablesorter-processing tbody tr td {
	opacity: .25;
}

// pager and other controls above the table
div.ts-wrapperdiv {
	span.tablesorter-column-selector {
		label {
			margin: 0 5px;
		}
		input[type="checkbox"] {
			margin-right: 6px;
		}
	}
	select {
		width: auto;
		display: inline;
		option {
			font-size: smaller;
		}
	}
	select, input {
		font-size: smaller;
		border: none;
	}
	div.ts-pager {
		margin-top: 3px;
		margin-bottom: 3px;
		font-size: smaller;
		float: right;
		clear: right;
		&.ts-pager-bottom {
			display: none;
		}
		.right-margin {
			vertical-align: bottom;
			margin-right: 4px;
		}
	}
}

table.tablesorter thead tr.tablesorter-filter-row td input.tablesorter-filter,
table.tablesorter thead tr.tablesorter-filter-row td input.dateFrom,
table.tablesorter thead tr.tablesorter-filter-row td input.dateTo {
  color: $input-color;
  background: $input-bg;
  border: $input-border-color;
}