_blocks.scss

// =============================================
//
//	Blocks Mixins
//
// =============================================

//	
//	@mixin block-absoluteCenter
//	@param $width {px} the block width in pixels
//	@param $height {px} the block height in pixels
//
// 	@desc:
// 		Center horizontally and vertically a block with absolute position
//
@mixin block-absoluteCenter($width, $height){
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -$height/2;
	margin-left: -$width/2;
	height: $height;
	width: $width;
}

//	
//	@mixin block-alignCenter
//	@param $width {px} the block width in pixels
//
// 	@desc:
// 		Center a block with relative/static position
//
@mixin block-alignCenter($width) {
	margin-left: auto;
	margin-right: auto;
	width: $width;
}

//	
//	@mixin block-pseudo
//
// 	@desc:
// 		Create a before/after pseudo block
//
@mixin block-pseudo() {
	display: block;
	content: '';
}


// =============================================
//
//	Blocks Extends
//
// =============================================

//	
//	@extend %block-pseudo
//
// 	@desc:
// 		Create a before/after pseudo block
//
%block-pseudo {
	display: block;
	content: '';
}

//	
//	@extend %block-empty
//
// 	@desc:
// 		Make sur an empty block has no height by default
//
%block-empty {
	font-size: 0;
	line-height: 0;
}

//	
//	@extend %block-fill
//
// 	@desc:
// 		Define a block filling its parent
//
%block-fill {
	width: 100%;
	height: 100%;
}

//	
//	@extend %block-absoluteFill
//
// 	@desc:
// 		Make the block filling its parent using absolute positionning
//
%block-absoluteFill {
	@extend %block-fill;
	position: absolute;
	top: 0;
	left: 0;
}