@import '../../index';

/*	<ul class="table-list table-list-basic">
		<li class="table-list-row">
				<div class="table-list-column">
					<i class="icon-plus"></i>
					First column
				</div>

				<div class="table-list-column">
					Column A
				</div>

				<div class="table-list-column">
					Column B
				</div>

				<div class="table-list-column">
					Column C
				</div>

				<div class="table-list-column">
					Column D
				</div>

				<div class="table-list-column">
					Last column
				</div>
			</li>
	</ul>
*/
.table-list-bare,
.table-list-basic
	color: grey;
	font-size: 1.25em;
	table-layout: fixed;


.table-list-bare .table-list-column,
.table-list-basic .table-list-column
	background-color:  $app['palette']['bg-secondary']['1']
	box-shadow: 0 1px 0 lightgrey
	border-top: 2px solid white
	border-bottom: 2px solid white
	line-height: 1.8em
	position: relative
	white-space: nowrap
	text-overflow: ellipsis
	overflow: hidden
	padding-right: 1em
	cursor: default


.table-list-basic .table-list-column:hover
	background-color:  $app['palette']['bg-secondary']['2']

.table-list-bare .table-list-column
	padding: 0.5em;


.table-list-bare .table-list-column > *,
.table-list-basic .table-list-column > *
	vertical-align: middle;


.table-list-basic .table-list-title-col,
.table-list-basic .table-list-column:first-child
	color: dodgerblue;
	font-size: 1.4em;
	border-left: 2px solid white;


.table-list-basic .table-list-title-col,
.table-list-basic .table-list-column:first-child > i
	 $app['palette']['bg-secondary']['2']
	color: white;
	font-size: 1.3em;
	padding: 0.2em;
	vertical-align: middle;


.table-list-basic .table-list-column:last-child
	border-right: 2px solid white;
	position: relative;


.table-list-basic .table-list-row:hover .table-list-column:first-child > i
	 $app['palette']['bg-secondary']['2']