/**
* Timeline classes
*
* @author splitfire - http://splitfire.fr
* @version 1.0
*
* @ref http://jsfiddle.net/necolas/vhZds/
*
* Module qui liste l'ensemble des actions réalisées par les utilisateurs.
*
*/ 



//var
$size : 35px;
$space: 50px;
$sizeImg: 64px;


//Container principale
.time_content
{
	text-align:center;
	padding :20px 0 0 20px;
}

//Container limiter en hauteur

//Container qui dessine le border
.time
{
	display:inline-block;
	position:relative;
	text-align:left;
	&:before
	{
		content: "";
    	position: absolute;
    	top: 0;
    	left: 0;
		width: 1px;
		top: -20px;
		bottom: -20px;
		//background: rgba(0,0,0,0.1);
		@include background-color-rgba($color : #000, $opacity : .1);
	}	
}
//container d'un event
.time--line
{
	position:relative;
    margin: 0 0 $space $space;
	
	//style de l'icon
	&:before
	{
		@extend %icon-style;
		position: absolute;
		width: $fontSize + $size;
		height: $fontSize + $size;
		line-height : $fontSize + $size;
		color: $toolbarActionColor;
		text-align:center;
		//@include px2em($px : $fontSize + ($size/2), $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : font-size) ;
		@include rem((
			font-size: $fontSize + ($size /2)
		));
		top: 0;
		left: - $space - (($fontSize + $size)/2) ;
		border: 1px solid rgba(0,0,0,0.1);
		border-radius:50%;		
		background-color: #fff;
		@include opacity(1);		
		
	}
	//parsing des differentes configuration des icons
	@each $event in $event-config
	{
		$eventClass :nth($event,2);
		$eventIcon : nth($event,3);
		@include add-icon($eventClass, $eventIcon);

	}
	//style du caret
	&:after
	{
		position: absolute;	
		content:"";
		width: 9px;
		height: 9px;
		top:15px;
		left:-5px;
		background-color: #fff;
    	border-color: rgba(0,0,0,0.1);
		border-style: solid;
    	border-width: 0 0 1px 1px;
		transform : rotate(45deg);		
	}
	
	//container d'information d'un event
	& .time--line_content
	{
		min-height:$sizeImg;
		padding: 10px;
		border: 1px solid rgba(0,0,0,0.1);
		border-radius: 5px;
		background: #fff;
		@extend %clearfloat;
	}
	//container de l'avatar
	& .time--line_img
	{
		float:left;
		width: 15%;
		height:$sizeImg;
		line-height:$sizeImg;
		padding:0 10px 0 0;
		box-sizing : border-box;
		& > img
		{
			width: 100%;
			max-width: $sizeImg;
			max-height:$sizeImg;
			vertical-align:middle;
		}
		@include mq($to: phone) {width: 100%;}		
	}
	//container des infos d'un event
	& .time--line_info
	{
		float:left;
		width: 85%;
		min-height:$sizeImg;
		line-height:$sizeImg;	
		@include mq($to : phone){width: 100%; margin-top: 10px;}	
		& > *
		{
			display:block;
			@extend %clearfloat;
			min-height: ($sizeImg/2);
			line-height:($sizeImg/2);
		}
		& > span
		{
			line-height: normal;
			word-wrap: break-word;
		}
	}
}