/**
* Table classes
*
* @date 	26/04/2013
* @author splitfire - http://splitfire.fr
* @version 1.0
*
*
*/ 

.table 
{
    display: table;
    width: 100%; 
}      
.th
{
	font-weight: bold;
	padding: 10px;
	text-align: left;
	vertical-align: middle;
	@include text();
	background-color: $tableColor;
	color:white;
	line-height: 2.5em;
	
	& a 
	{
		color: white;
	}
}
.tr 
{
	display: table-row;
	width: 100%;
}
.td
{
	border-top: 1px solid #e1e1e1;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    @include text();
	background-color:#fff ;//#FDFDFA;
	& img
	{
		vertical-align:middle;
	}
}
.tr:nth-child(4n+2) .td
{
	background-color:#F9F9F9; //darken(#F0F0F0, 5%); //#E3E3E3
}
// Archive dans les tableaux
.tr.archived .td,
.tr.trashed .td
{
	background-color:lighten($dangerColor, 6);
	color: white;
	& .btn.disabled
	{
		display: none;
	}
	& .link
	{
		color: #37D0FF;
	}
}
//On cache par defaut les ligne tr_item qui servent pour le responsive
.tr_item,
.no-mq .tr_item
{
	display: none;
}
.tr.success .td
{
	background-color: ligthen($successColor,9); 
	color: white;
	& .btn.disabled
	{
		display: none;
	}
	& .link
	{
		color: #37D0FF;
	}
}
.td, 
.th 
{
	display: table-cell;
}

.tr:last-child .td
{
	border-bottom: 1px solid #e1e1e1;
}
.thead 
{
    display: table-header-group;
    border-top: 1px solid #e1e1e1;
}
.tbody 
{
    display: table-row-group;	    
}
.tfoot 
{
    display: table-footer-group;
}
.table-fixed
{
	table-layout:fixed;
}

/* table quadrillé
__________________________*/
.table-squared
{
	& .td,
	{
		border-right: 1px solid #ccc;;
		&.td:first-child
		{
			border-left: 1px solid #ccc;;
		}

	}
	& .th
	{
		border-right: 1px solid #ccc;;
		border-top:1px solid #ccc;
		&.th:first-child
		{
			border-left: 1px solid #ccc;
		}		
	}
}

/* support des tri par colonne (datatable)
__________________________*/
.th .th--order
{
	display: inline-block;
	line-height: 2.5em;
	position: relative;
	text-decoration: none;
	white-space: nowrap;

	&.order-active
	{
	}
	& .order-icon
	{
		@extend %icon-style;
		color: #fff;
		vertical-align: middle;
		height: 30px;
		margin-left: 3px;
		&:before
		{
			@extend .icon-chevron-up:before;
			display: block;
		}
		&:after
		{
			@extend .icon-chevron-down:before;
		}
	}
	&.order-asc .order-icon
	{	
		@include opacity(1);
		@include rem((
			height:$fontSize
		));
		&:before
		{
			@extend .icon-chevron-down:before;
			display: inherit;
		}
		&:after
		{
			display: none;
		}
	}
	&.order-desc .order-icon
	{
		@include opacity(1);
		@include rem((
			height: $fontSize
		));
		&:before
		{
			@extend .icon-chevron-up:before;
			display: inherit;

		}
		&:after
		{
			display: none;
		}
	}
}

/* Partie responsive
---------------------*/
@include mq($to:900px)
{
	.table
	{
		display: block;
		margin: 0;
	}
	.thead 
	{
		position: absolute;
		display: block;
		top: -9999px;
		left: -9999px;	
	}
	.tbody
	{
		display: block;
	}
	//
	.tr_item
	{
		display: block;
		box-sizing : border-box;
		margin-bottom:10px;
		& .td
		{
			display:block;
			box-sizing : border-box;
			& a
			{
				text-decoration: none;
				outline: none;					
			}
			
		}
		& .td
		{
			border:none;
			padding:0;
			background-color:#F9F9F9;
		}
		//Container de la fiche
		& .td_container
		{
			display: block;
			padding:10px;
			position: relative;
		}
		// Icon uniquement sur la partie de la fiche qui est un lien
		& .td_link:after
		{
			display: inline-block;
			@include rem((
				width		:$fontSize,
				height		:$fontSize,
				font-size	:$fontSize
			));
			font-family: 'icon';
			speak: none;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			color: $darkColor;
			position: absolute;
			content: "\f054";	
			right: 10px;		
			top: 50%;
			transform: translate(0, -50%);
		}
		
		//Partie importante
		& .td_info
		{
			color: #000;
			margin:0 0 10px 0;
			@include rem((
				padding-right : $fontSize +2
			))
		}
		//Sous titres
		& .td_subtitle
		{
			color: #B0B0B1;
			@include rem((
				font-size: $fontSize - 1,
				padding-right : $fontSize +2			
			));

		}
		//Footer composé de lien
		& .td_footer
		{
			margin:5px 0 0 0;
			border-top:solid 1px #F4F4F5;
			background-color: lighten(#e1e1e1, 3);	
			& .td_footer--item
			{
				display: inline-block;
				color: #4d4d4d;
				border-left:solid 1px #F4F4F5;
				padding:8px;
			}
			& span:hover
			{
				opacity: .5;
			}
		}
		//Reset de la couleur lorsque la vignette est archivée
		&.archived .td_info,
		&.archived .td_subtitle,
		&.archived .td_link:after,
		&.trashed .td_info,
		&.trashed .td_subtitle,
		&.trashed .td_link:after
		{
			color: #fff;
		}
	}
	//On cache les autres tr non rwd
	.tr:not(.tr_item)
	{
		display: none;
	}
}