_sizing.scss 5.4 KB
//	Sizing left
@mixin mm_sizing( $cls: "",
	$width: $mm_width, $minWidth: $mm_minWidth, $maxWidth: $mm_maxWidth,
	$height: $mm_height, $minHeight: $mm_minHeight, $maxHeight: $mm_maxHeight
) {
	html.mm-opening#{$cls}
	{
		.mm-page,
		#mm-blocker,
		.mm-fixed-top,
		.mm-fixed-bottom
		{
			left: percentage( $width );
		}
	}
	.mm-menu#{$cls}
	{
		width: percentage( $width );
	}
	@media all and (max-width: $minWidth / $width ) {
		.mm-menu#{$cls}
		{
			width: $minWidth;
		}
		html.mm-opening#{$cls}
		{
			.mm-page,
			#mm-blocker,
			.mm-fixed-top,
			.mm-fixed-bottom
			{
				left: $minWidth;
			}
		}
	}
	@media all and (min-width: $maxWidth / $width ) {
		.mm-menu#{$cls}
		{
			width: $maxWidth;
		}
		html.mm-opening#{$cls}
		{
			.mm-page,
			#mm-blocker,
			.mm-fixed-top,
			.mm-fixed-bottom
			{
				left: $maxWidth;
			}
		}
	}
}

//	Sizing top/right/bottom
@mixin mm_sizing_position( $cls: "",
	$width: $mm_width, $minWidth: $mm_minWidth, $maxWidth: $mm_maxWidth,
	$height: $mm_height, $minHeight: $mm_minHeight, $maxHeight: $mm_maxHeight
) {
	// top
	.mm-menu.mm-top#{$cls}
	{
		height: percentage( $height );
	}
	html.mm-top.mm-opening#{$cls}
	{
		.mm-page,
		#mm-blocker,
		.mm-fixed-top
		{
			top: percentage( $height );
		}
		.mm-fixed-bottom
		{
			bottom: -( percentage( $height ) );
		}
	}
	@media all and ( max-height: $minHeight / $height ) {
		.mm-menu.mm-top#{$cls}
		{
			height: $minHeight;
		}
		html.mm-top.mm-opening#{$cls}
		{
			.mm-page,
			#mm-blocker,
			.mm-fixed-top
			{
				top: $minHeight;
			}
			.mm-fixed-bottom
			{
				bottom: -$minHeight;
			}
		}
	}
	@media all and ( min-height: $maxHeight / $height ) {
		.mm-menu.mm-top#{$cls}
		{
			height: $maxHeight;
		}
		html.mm-top.mm-opening#{$cls}
		{
			.mm-page,
			#mm-blocker,
			.mm-fixed-top
			{
				top: $maxHeight;
			}
			.mm-fixed-bottom
			{
				bottom: -$maxHeight;
			}
		}
	}

	// right
	.mm-menu.mm-right#{$cls}
	{
		width: percentage( $width );
	}
	html.mm-right.mm-opening#{$cls}
	{
		.mm-page,
		#mm-blocker,
		.mm-fixed-top,
		.mm-fixed-bottom
		{
			right: percentage( $width );
		}
	}
	@media all and ( max-width: $minWidth / $width ) {
		.mm-menu.mm-right#{$cls}
		{
			width: $minWidth;
		}
		html.mm-right.mm-opening#{$cls}
		{
			.mm-page,
			#mm-blocker,
			.mm-fixed-top,
			.mm-fixed-bottom
			{
				right: $minWidth;
			}
		}
	}
	@media all and ( min-width: $maxWidth / $width ) {
		.mm-menu.mm-right#{$cls}
		{
			width: $maxWidth;
		}
		html.mm-right.mm-opening#{$cls}
		{
			.mm-page,
			#mm-blocker,
			.mm-fixed-top,
			.mm-fixed-bottom
			{
				right: $maxWidth;
			}
		}
	}

	// bottom
	.mm-menu.mm-bottom#{$cls}
	{
		height: percentage( $height );
	}
	html.mm-bottom.mm-opening#{$cls}
	{
		.mm-page,
		#mm-blocker,
		.mm-fixed-bottom
		{
			bottom: percentage( $height );
		}
		.mm-fixed-top
		{
			top: -( percentage( $height ) );
		}
	}
	@media all and ( max-height: $minHeight / $height ) {
		.mm-menu.mm-bottom#{$cls}
		{
			height: $minHeight;
		}
		html.mm-bottom.mm-opening#{$cls}
		{
			.mm-page,
			#mm-blocker,
			.mm-fixed-bottom
			{
				bottom: $minHeight;
			}
			.mm-fixed-top
			{
				top: -$minHeight;
			}
		}
	}
	@media all and ( min-height: $maxHeight / $height ) {
		.mm-menu.mm-bottom#{$cls}
		{
			height: $maxHeight;
		}
		html.mm-bottom.mm-opening#{$cls}
		{
			.mm-page,
			#mm-blocker,
			.mm-fixed-bottom
			{
				bottom: $maxHeight;
			}
			.mm-fixed-top
			{
				top: -$maxHeight;
			}
		}
	}
}

//	Sizing z-position
@mixin mm_sizing_zposition( $cls: "",
	$width: $mm_width, $minWidth: $mm_minWidth, $maxWidth: $mm_maxWidth,
	$height: $mm_height, $minHeight: $mm_minHeight, $maxHeight: $mm_maxHeight
) {
	// left
	.mm-menu#{$cls}
	{
		&.mm-front,
		&.mm-next
		{
			left: -( percentage( $width ) );
		}
	}
	@media all and ( max-width: $minWidth / $width ) {
		.mm-menu#{$cls}
		{
			&.mm-front,
			&.mm-next
			{
				left: -$minWidth;
			}
		}
	}
	@media all and ( min-width: $maxWidth / $width ) {
		.mm-menu#{$cls}
		{
			&.mm-front,
			&.mm-next
			{
				left: -$maxWidth;
			}
		}
	}

	// top
	.mm-menu.mm-top#{$cls}
	{
		&.mm-front,
		&.mm-next
		{
			top: -( percentage( $height ) );
		}
	}
	@media all and ( max-height: $minHeight / $height ) {
		.mm-menu.mm-top#{$cls}
		{
			&.mm-front,
			&.mm-next
			{
				top: -$minHeight;
			}
		}
	}
	@media all and ( min-height: $maxHeight / $height ) {
		.mm-menu.mm-top#{$cls}
		{
			&.mm-front,
			&.mm-next
			{
				top: -$maxHeight;
			}
		}
	}

	// right
	.mm-menu.mm-right#{$cls}
	{
		&.mm-front,
		&.mm-next
		{
			right: -( percentage( $width ) );
		}
	}
	@media all and ( max-width: $minWidth / $width ) {
		.mm-menu.mm-right#{$cls}
		{
			&.mm-front,
			&.mm-next
			{
				right: -$minWidth;
			}
		}
	}
	@media all and ( min-width: $maxWidth / $width ) {
		.mm-menu.mm-right#{$cls}
		{
			&.mm-front,
			&.mm-next
			{
				right: -$maxWidth;
			}
		}
	}

	// bottom
	.mm-menu.mm-bottom#{$cls}
	{
		&.mm-front,
		&.mm-next
		{
			bottom: -( percentage( $height ) );
		}
	}
	@media all and ( max-height: $minHeight / $height ) {
		.mm-menu.mm-bottom#{$cls}
		{
			&.mm-front,
			&.mm-next
			{
				bottom: -$minHeight;
			}
		}
	}
	@media all and ( min-height: $maxHeight / $height ) {
		.mm-menu.mm-bottom#{$cls}
		{
			&.mm-front,
			&.mm-next
			{
				bottom: -$maxHeight;
			}
		}
	}


	//	Fixed elements
	html.mm-front,
	html.mm-opening.mm-front
	{
		.mm-fixed-top,
		.mm-fixed-bottom
		{
			left: 0;
			right: auto;
		}
		.mm-fixed-top
		{
			top: 0;
		}
		.mm-fixed-bottom
		{
			bottom: 0;
		}
	}
}