/**
* Timeline classes
*
* @author splitfire - http://splitfire.fr
* @version 1.0
*
* @ref http://jsfiddle.net/necolas/vhZds/
*/ 



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


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

//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);
	}	
}
//container d'un event
.time--line
{
	position:relative;
    margin: 0 0 $space $space;
	
	//style de l'icon
	&:before
	{
		position: absolute;
		@include px2em($px : $sfontSize + $size, $base-font-size: $base-font-size, $em : false, $rem: false, $percent: false, $property :width) ;
		@include px2em($px : $fontSize + $size, $base-font-size: $base-font-size, $em : false, $rem: false, $percent: false, $property :height) ;
		@include px2em($px : $fontSize + $size, $base-font-size: $base-font-size, $em : false, $rem: false, $percent: false, $property :line-height) ;
		color: $toolbarActionColor;
		text-align:center;
		font-family: 'icon';
		@include px2em($px : $fontSize + ($size/2), $base-font-size: $base-font-size, $em : false, $rem: true, $percent: false, $property : font-size) ;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		-webkit-font-smoothing: antialiased;
		top: 0;
		left: - $space - (($fontSize + $size)/2) ;
		border: 1px solid rgba(0,0,0,0.1);
		border-radius:50%;
		background: white;
	}
	//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: #FFFFFF;
    	border-color: rgba(0,0,0,0.1);
		border-style: solid;
    	border-width: 0 0 1px 1px;
		@include 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;
		@include after();
	}
	//container de l'avatar
	& .time--line_img
	{
		float:left;
		height:$sizeImg;
		line-height:$sizeImg;
		margin:0 10px 0 0;
		& > img
		{
			height:$sizeImg;
			vertical-align:middle;
		}
		
	}
	//container des infos d'un event
	& .time--line_info
	{
		float:left;
		min-height:$sizeImg;
		line-height:$sizeImg;		
		& > *
		{
			display:block;
			@include after();
			min-height: ($sizeImg/2);
			line-height:($sizeImg/2);
		}
	}
}