keystone/admin/public/styles/keystone/tables.less

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

// 
// TABLES
// ==============================




// Base
// ------------------------------


table {
	max-width: 100%;
}


// Helpers
// ------------------------------


// header cells

.table > thead > tr > th {
	color: mix(@body-bg, @text-color, 35%);
	font-weight: 500;
	text-transform: uppercase;
}


// valign cells middle

.table--valign-middle > thead > tr > th,
.table--valign-middle > tbody > tr > th,
.table--valign-middle > tfoot > tr > th,
.table--valign-middle > thead > tr > td,
.table--valign-middle > tbody > tr > td,
.table--valign-middle > tfoot > tr > td {
	vertical-align: middle;
}




// Sortable Table Columns
// ------------------------------

/*

	Usage:
	
	<table class="table">
		<thead>
			<tr>
				<!-- selected, sortable column -->
				<th>
					<a class="th-sort th-sort--desc" href="...">
						Selected Column Label 
						<span class="th-sort__icon"></span>
					</a>
				</th>
				<!-- unselected, sortable column -->
				<th>
					<a class="th-sort" href="...">
						Unselected Column Label 
						<span class="th-sort__icon"></span>
					</a>
				</th>
				<!-- unsortable column -->
				<th>
					Unsortable Column Label
				</th>
				...
			</tr>
		</thead>
		<tbody>...</tbody>
	</table>

*/


// label and clickable area

.th-sort {
	color: inherit;
	display: block;
	
	&:hover,
	&:focus {
		color: @text-color;
		text-decoration: none;
		
		.th-sort__icon {
			opacity: 1;
		}
	}
}


// indicate sort order

.th-sort--asc,
.th-sort--desc {
	color: @text-color;
	
	.th-sort__icon {
		opacity: 1;
	}
}


// combo arrows

.th-sort__icon {
	.transition( opacity 150ms linear );
	.square( (@comboarrow-size * 4) + 2 ); // fit the arrows with a 2px gap between them
	display: inline-block;
	margin-left: @comboarrow-size;
	opacity: 0;
	position: relative;
	top: 3px;
	
	&:before,
	&:after {
		.square(0);
		border: @comboarrow-size solid transparent;
		content: "";
		position: absolute;
	}
	
	// up arrow
	&:before {
		border-bottom-color: @text-color;
		top: 0;
	}
	
	// down arrow
	&:after {
		border-top-color: @text-color;
		bottom: 0;
	}
	
	// differentiate between asc/desc
	.th-sort--asc &:after {
		opacity: .5;
	}
	.th-sort--desc &:before {
		opacity: .5;
	}
}