elemental/less/base/tables.less

React UI Framework

//
// Tables
// ==============================



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

table {
	border-collapse: collapse;
}
.Table {
	text-align: left;
	width: 100%;

	// alternate alignment (defaults to `middle`)
	&.align-bottom td,
	&.align-bottom th { vertical-align: bottom; }
	&.align-top td,
	&.align-top th { vertical-align: top; }
}



// Cells
// ------------------------------

// common

.Table td,
.Table th {
	border-top: 1px solid @table-border-color;
	display: table-cell;
	padding: @table-padding;
	vertical-align: middle;

	// make the content flush
	&:first-child {
		padding-left: 0;

		// > a {
		// 	margin-left: 0;
		// 	padding-left: 0;
		// }
	}
	&:last-child {
		padding-right: 0;

		// > a {
		// 	margin-right: 0;
		// 	padding-right: 0;
		// }
	}
}

// links in cells

// .Table td > a {
// 	color: @text-color;
// 	display: inline-block;
// 	margin: -@table-padding;
// 	padding: @table-padding;
//
// 	&:hover,
// 	&:focus {
// 		color: @text-color;
// 		outline: none;
// 	}
// }


// header

.Table th {
	border-bottom: 2px solid @table-border-color;
	border-top: 0;
	color: @gray-light;
	display: table-cell;
	font-weight: normal;
	// text-transform: uppercase;
	text-align: left;
	vertical-align: bottom;
}


// section

.Table-section {
	background-color: #fafafa;
	color: @gray;
	font-size: @font-size-sm;
	font-weight: 500;
	text-transform: uppercase;
}


// selected rows

/*tr*/.row-selected > td {
	background-color: @table-selected-row-bg;
	color: @table-selected-row-color;
}




// Sorting
// ------------------------------


// 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( (@table-sort-arrow-width * 4) + 2 ); // fit the arrows with a 2px gap between them
	display: inline-block;
	margin-left: @table-sort-arrow-width;
	opacity: 0;
	position: relative;
	top: 3px;

	&:before,
	&:after {
		.square(0);
		border: @table-sort-arrow-width 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;
	}
}