/**
* Toolbar classes
*
* @author splitfire - http://splitfire.fr
* @version 1.0
*
* Il existe trois toolbar sur CourtApp
* - Toolbar Action où l'on retrouve les actions génériques de chaque pages
* - Toolbar filter où l'on retrouve les filtres pour le moteur de recherche
* - Toolbar Result qui permet la soumission de formulaire
* 
*/


/* Toolbar action (list, create etc...)
-----------------------------------------*/
.toolbar_action
{
	position: fixed;
	width: 100%;
	min-height: $toolbarActionHeight;  //min-height pour 
	line-height: $toolbarActionHeight;
	overflow: hidden;
	background-color: $toolbarActionColor;
	top: $headerHeight;
	left: 0;
	z-index: 10;
	//On cache la toolbar dans la fancybox car le menu est maintenant inclus dans les vues qui peuvent être vu dans fancybox.
	//Obligation liée au contexte mobile où on supprime les fancybox
	.fancybox-inner &
	{
		display: none;
	}
	//Positionne de la toolbar quand le menu est ouvert
	.menu-open &
	{
		@include mq($to: tablet)
		{
			left:$menuOpen - ($paddingContentRwd * 2);
		}
	}	
}
.toolbar_action--menu
{
	@extend %clearfloat;	
	padding-left: $menuOpen;
	
	// Traitement du padding lorsque le Menu est ouvert en rwd
	@include mq(phone,tablet){padding-left: $paddingContent;}
	
	// Traitement du padding lorsque le menu est fermé
	.menu-close &
	{
		padding-left: $menuClose ;
		@include mq($to: phone){padding-left:  $paddingContentRwd;}

	}
	// Traitement du padding en mode phone
	// Le menu étant surppimé on applique qu'un petit padding
	@include mq($to: phone){padding-left:  $paddingContentRwd;}
	
}

.toolbar_action--menu_container
{
	// Représente un li du menu
	& .toolbar_action--menu_item
	{
		float: left;
		//margin-right:8px;
		/* El présent dans les li.toolbar_action--menu_item
		---------------------------------------------------*/
		& .toolbar_action--menu_link
		{
			display: block;
			outline: none;
			padding: 0 8px;
			text-decoration: none;
			color: #fff;
			
			&:hover, 
			&.active
			{
				background-color:rgba(255,255,255, 0.25);

			}
			&.active
			{
				background-color:rgba(255,255,255, 0.25);
			}
		}
		// Margin appliqué lorsque qu'il y a plus d'un element cote à cote
		& + .toolbar_action--menu_item
		{
			//margin-left:8px;
			& .toolbar_action--menu_link
			{
				//padding-left: 8px;
			}
		}
		// Support des boutons
		& .btn
		{
			margin-top: 2px;
		}		
	}
	
	// Placement de liens sur la droite
	&.toolbar_action--menu_right
	{
		float: right;
	}
}

/* Toolbar filter (select, radio etc...)
------------------------------------------*/
.toolbar_filter
{
	position: fixed;
	width: 100%;
	min-height: 40px; // hauteur du champs de recherche
	//@include mq(phone){height: 85px;} en test
	line-height: 40px;
	padding: 4px 0;
	background-color: #fff;
	top: $headerHeight + $toolbarActionHeight;
	left: 0;
	z-index: 10;
	&:after
	{
		content: "";
		display: block;
		margin-top: 5px;
		width: 100%;
		height: 5px;
		box-shadow: 0 -1px 0 #f1f1f1;
		background : linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
		@include mq($to:phone)
		{
			box-shadow:none;
			background:none;
		}
		
	}
	@include mq($to: tablet)
	{
		position: static;
		&:after
		{
			height: auto;
		}
		.no-touch & 
		{
			& .placeholder_chosen
			{
				position:static;
				line-height:normal;
				margin:0;
				padding:0;
			}
			& .chosen { display: inline-block !important; }
			& .chzn-container 
			{ 	
				display: none;
			}
		}
	}
}
.toolbar_filter--menu
{
	@extend %clearfloat;	
	padding-left: $menuOpen + 5px;
	//@include mq($to: tablet){padding-left: $menuClose + 5px; }
	@include mq($to: tablet){padding-left: 5px; }

	.menu-close &
	{
		padding-left: $menuClose + 5px;
		@include mq($to: tablet){padding-left:  5px;}	

	}	
	& .toolbar_filter--menu_item
	{
		display: block !important;
		float: left;
		position: relative;
		min-height: 40px;
		padding-right: 18px;
		&.toolbar_filter--separator:after
		{
			display: block;
			position: absolute;
			top:0;
			right: 0;
			content: "";
			width: 1px;
			height: 100%;
			border-left: 1px solid #f1f1f1;
			@include mq($to: phone){display: none;}

		}
		// Lorsque plusieurs filtre sont l'un à coté de l'autre.
		&.toolbar_filter--separator + *
		{
			margin-left:10px;
			@include mq($to: phone){margin-left:0;}
		}
	}
	& .toolbar_filter--menu_item_right
	{
		float: right;
	}
}

// Gestion des filtre en mode rwd

//Icon d'ouverture/fermeture des filtres en rwd
.toolbar_filter--menu_push
{
	display: none; // caché par defaut

	@include mq($to: tablet)
	{
		display: inline-block;
		vertical-align: middle;
		font-family: 'icon';
		//@include px2em($px: $fontSize + 5, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : font-size); 
		//@include px2em($px: $fontSize + 5, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : height) ;
		@include rem((
			font-size 	: $fontSize +5,
			height		: $fontSize +5
		));
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		color: black;
		&:after
		{
			content: attr(data-label);
			font-family: $defaultFont;
			margin:0 0 0 5px;
		}
		
		&:before 
		{
			content: "\f078";
		}
		& + .toolbar_filter--menu_item
		{
			display: none !important;
		}
	}
	&.active
	{
		&:before
		{
			content: "\f077";
		}
		& + .toolbar_filter--menu_item
		{
			background-color: white;
			float: none;
			display: block !important;		
		}
		& + .toolbar_filter--menu_item .toolbar_filter--menu_item
		{
			float: none;
			margin-left: 0;
		}		
	}

}

/* Toolbar form (input, cancel)
----------------------------------*/
.toolbar_result
{
	position: fixed;
	width: 100%;
	height: 40px;
	line-height: 40px;
	padding: 4px 0;
	background-color: $toolbarResultColor;
	bottom: 0;
	left: 0;
	z-index: 10;
}
.toolbar_result--menu
{

	@extend %clearfloat;	
	padding-left: $menuOpen + 5px;

	// Traitement du padding lorsque le Menu est fermé
	.menu-close &
	{
		padding-left: $menuClose + 5px;
	}
	// Traitement du padding lorsque le Menu est ouvert/fermé en rwd
	// On ne fait aucune disctinction, car le menu passe au-dessus du content
	@include mq($to: tablet){padding-left: $menuClose + 5px;}	
}