/**
* Responsive classes
*
* @author splitfire - http://splitfire.fr
* @version 1.0
*
*/ 


/** 
 *	Configuration module JS via media-queries
 *	idea: http://css-tricks.com/making-sass-talk-to-javascript-with-json/
 */
 
body:before
{
	display: none;
}    


//Configuration list
$mapKey-breakpoints  	: map-keys($mq-configs);
$first-breakpoints		: first($mapKey-breakpoints);
$last-breakpoints		: last($mapKey-breakpoints);

@each $mq-breakpoint, $config in $mq-configs 
{	
	
	@if( ($mq-breakpoint != $first-breakpoints) and ($mq-breakpoint != $last-breakpoints))
	{	
		$previousDevice 	: nth($mapKey-breakpoints, (index($mapKey-breakpoints,$mq-breakpoint) - 1)) ;	
		@include mq(#{$previousDevice}, #{$mq-breakpoint}) 
		{
			body:before
			{
				content: $config;
			}
		}			
	}
	@else if ($mq-breakpoint == $first-breakpoints)
	{
		@include mq($to :#{$mq-breakpoint}) 
		{
			body:before
			{
				content: $config;
			}
		}
	}
	@else if ($mq-breakpoint == $last-breakpoints)
	{
		@include mq($from : #{$mq-breakpoint}) 
		{
			body:before
			{
				content: $config;
			}
		}
	}

}


/**
 *
 * Viewport
 *
 **/
 
@-webkit-viewport 
{
  width: device-width;
  zoom: 1.0;
}
@-moz-viewport 
{
  width: device-width;
  zoom: 1.0;
}
@-ms-viewport 
{
  width: device-width;
  zoom: 1.0;
}
@-o-viewport 
{
  width: device-width;
  zoom: 1.0;
}
@viewport 
{
  width: device-width;
  zoom: 1.0;
}


/**
 *
 * Classe générique RWD
 *
 **/


/* old browser
----------------*/
.no-mq
{
	#html_wrapper
	{
		& .hidden-on-full,
		& .visible-only-tablet,
		& .visible-only-phone
		{
			display: none;
		}

	}
}

/* mq destkop
--------------*/
@include mq($from:wide)
{
	#html_wrapper
	{
		.hidden-on-full,
	    .visible-only-tablet,
	    .visible-only-phone 
	    {
	        display: none;
	    }	
	}
}


/* mq tablette
----------------*/
@include mq(phone, tablet)
{
	#html_wrapper
	{
		.hidden-on-tablet,
	    .visible-only-full,
	    .visible-only-phone 
	    {
	        display: none;
		}
		& .tablet-no-float
		{
			float:none;
		}
		& .tablet-wd-100
		{
			width: 100%;
			display: block;
			float: none;
			margin-left:0;
			margin-right:0;
		}
	}
}

/* mq phone
------------------*/
@include mq($to:phone) 
{
	#html_wrapper
	{
	    .hidden-on-phone,
	    .visible-only-full,
	    .visible-only-tablet 
	    {
	        display: none;
	    }
		& .phone-no-float
		{
			float:none;
		}
		& .phone-wd-100
		{
			width: 100%;
			display: block;
			float: none;
			margin-left:0;
			margin-right:0;
		}
		& .phone-wd-auto
		{
			width: auto;
			margin-left:0;
			margin-right:0;
		}
		& .phone-100
		{
			width: 100%;
		}
		& .row-fluid
		{
			> [class*="span"]
			{
				@extend .phone-wd-100;
				margin-bottom:10px;
			}
		}
	}
}


/*
 *
 * 1) Sur device non touch les select sont modifiés par la librairie chosen.
 * 2) Sur device touch la librairie chosen n'est pas chargée et on a donc les select natif mais sans label
 * 3) sur device touch et input type="date" et reconnue les input sont natif mais sans label
 */


//Par defaut les labels sont cachés.
.placeholder_chosen
{
	position: absolute;
	display: block;
	top: -9999px;
	left: -9999px;	
}

//Detection d'un device de type touch via Moderniz
.touch
{
	//Detection d'un device compatible <input type="date"/>
	&.date
	{
		& input[type="date"]
		{
			position: relative;
			margin-top: 20px;
			overflow: visible;
			&:before
			{
				display: block;
				position: absolute;
				content: attr(placeholder);
				white-space: nowrap;
				bottom: 115%;
			}
		}
	}
	& select
	{
		max-width: 100%;
	}
	//Cas des label liés à un select chosen
	& .placeholder_chosen
	{
		position:static;
		line-height:normal;
		margin:0;
		padding:0;
	}
	& .subtitle.touch
	{
		display: none;
	}
}