angular2-boiler-plate/public/css/table.less

Angular 2 Boiler plate that integrated with WebPack, TypeScript, DatePicker, RxJs for Reactive Extensions in Java Script , Karma , Jasmine for unit testing , WebKit ,protractor e2e testing

@import 'variables.less';


.sui-table {
	border-collapse: collapse;
	border-spacing: 0;
	display: table;
	width: 100%;
	background-color:@table-background-color;
}

.sui-table-container {
  overflow: auto;
  background-color:@table-background-color;	
  height: 600px;
}
.sui-pagination-container {
	margin: 0;
	height: 60px;
	padding: 16px;
	background-color:@pagination-container-background-color;	
}
.sui-table-all {
	border-collapse: collapse;
	border-spacing: 0;
	background-color:@table-background-color;	
	border: 1px solid @table-border;
	display: table;
	width: 100%;
	tr {
		border-bottom: 1px solid @table-border;
		&:nth-child(odd) {
			background-color: @table-odd;
		}
		&:nth-child(even) {
			background-color: @table-striped;
		}
	}
}
.sui-bordered {
	tr {
		border-bottom: 1px solid @table-border;
	}
}
.sui-striped {
	tbody {
		tr {
			&:nth-child(even) {
				background-color: @table-striped;
			}
		}
	}
}
.sui-hoverable {
	tbody {
		tr {
			&:hover {
				background-color: @table-hover;
			}
		}
	}
}
.sui-ul.sui-hoverable {
	li {
		&:hover {
			background-color: @table-hover;
		}
	}
}
.sui-centered {
	tr {
		th {
			text-align: center;
		}
		td {
			text-align: center;
		}
	}
}
 .sui-table th, .sui-table-all th  {
	display: table-cell;
	padding-left: 24px;
	text-align: center;
	vertical-align: top;
	white-space: nowrap;
}
.sui-table td, .sui-table-all td  {
	display: table-cell;
	padding-left: 24px;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}
.sui-table th:first-child, .sui-table td:first-child, .sui-table-all th:first-child, .sui-table-all td:first-child  {
	padding-left: 16px;
}
input[type=checkbox].sui-table-check {
 height: 16px;
 text-align: center; 
 vertical-align: middle; 
 width: 100%
}
.sui-table td  input[type=checkbox] {
 text-align: center; 
 vertical-align: middle; 
}
.sui-pagination {
	display: inline-block;
	margin: 0;
	padding: 0;
	li {
		display: inline;
		a {
			color: @pagination-text-color;
			float: left;
			padding: 8px 16px;
			text-decoration: none;
			&:hover {
				background-color: @table-hover;
			}
		}
	}
}