/**
* 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;
			}
		}
	}
}