SkinbaseNova/public/js/mmenu/src/scss/jquery.mmenu.oncanvas.scss

/*
	jQuery.mmenu oncanvas CSS
*/
@import "_inc/variables";


//	Generic classes
.mm-hidden
{
	display: none !important;
}


//	Container
.mm-wrapper
{
	overflow-x: hidden;
	position: relative;
}


//	Menu
.mm-menu,
.mm-menu > .mm-panel
{
	margin: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
}
.mm-menu
{
	background: inherit;
	display: block;
	overflow: hidden;
	padding: 0;
}


//	Panels
.mm-panel
{
	-webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction;
	-moz-transition: -moz-transform $mm_transitionDuration $mm_transitionFunction;
	-ms-transition: -ms-transform $mm_transitionDuration $mm_transitionFunction;
	-o-transition: -o-transform $mm_transitionDuration $mm_transitionFunction;
	transition: transform $mm_transitionDuration $mm_transitionFunction;

	@include mm_webkit_prefix( 'transform', translate3d( 100%, 0, 0 ) );
	
	&.mm-opened
	{
		@include mm_webkit_prefix( 'transform', translate3d( 0%, 0, 0 ) );
	}
	&.mm-subopened
	{
		@include mm_webkit_prefix( 'transform', translate3d( -$mm_subpanelOffset, 0, 0 ) );
	}
	&.mm-highest
	{
		z-index: 1;
	}
}

.mm-menu > .mm-panel
{
	background: inherit;

	-webkit-overflow-scrolling: touch;
	overflow: scroll;
	overflow-x: hidden;
	overflow-y: auto;

	box-sizing: border-box;	
	padding: 0 $mm_panelPadding;

	&.mm-hasheader
	{
		padding-top: $mm_headerHeight;
	}

	//	Because padding-bottom in some browsers is ignored when a DIV is scrollable
	&:before,
	&:after
	{
		content: '';
		display: block;
		height: $mm_panelPadding;
	}
}


//	Vertical
.mm-vertical .mm-panel
{
	@include mm_webkit_prefix( 'transform', none !important );
}

.mm-vertical .mm-listview .mm-panel,
.mm-listview .mm-vertical .mm-panel
{
	display: none;
	padding: $mm_padding 0 $mm_padding $mm_padding;

	.mm-listview > li:last-child:after
	{
		border-color: transparent;
	}
}
.mm-vertical li.mm-opened > .mm-panel,
li.mm-vertical.mm-opened > .mm-panel
{
	display: block;
}
.mm-vertical .mm-listview > li,
.mm-listview > li.mm-vertical
{
	> .mm-next
	{
		height: $mm_btnSize;
		bottom: auto;

		&:after
		{
			top: ( $mm_btnSize / 2 ) - 4;
			bottom: auto;
		}
	}
	&.mm-opened
	{
		> .mm-next:after
		{
			@include mm_webkit_prefix( "transform", rotate( 45deg ) );
		}
	}
}

.mm-header
{
	border-bottom: 1px solid transparent;
	text-align: center;
	line-height: $mm_btnSize / 2;

	height: $mm_headerHeight;
	padding: 0 $mm_btnSize;

	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;

	> a
	{
		text-decoration: none;
		display: block;
		padding: ( $mm_btnSize / 4 ) 0;
	}
	.mm-title
	{
		@include mm_ellipsis;
	}
	.mm-btn
	{
		box-sizing: border-box;
		width: $mm_btnSize;
		height: $mm_btnSize;
		position: absolute;
		top: 0;
		z-index: 1;

		&:first-child
		{
			padding-left: $mm_panelPadding;
			left: 0;
		}
		&:last-child
		{
			padding-right: $mm_panelPadding;
			right: 0;
		}
	}
}


//	Listviews
.mm-listview,
.mm-listview > li
{
	list-style: none;
	display: block;
	padding: 0;
	margin: 0;
}
.mm-listview
{
	font: inherit;
	font-size: $mm_fontSize;

	a,
	a:hover
	{
		text-decoration: none;
	}

	> li
	{
		position: relative;

		> a,
		> span
		{
			@include mm_ellipsis;

			color: inherit;
			line-height: $mm_btnSize - ( $mm_padding * 2 );
			display: block;
			padding: $mm_listitemPadding $mm_listitemPadding $mm_listitemPadding $mm_listitemIndent;
			margin: 0;
		}
		
		&:not(.mm-divider)
		{
			@include mm_border_bottom;

			&:after
			{
				left: $mm_listitemIndent;
			}
		}
	}

	// subopen
	.mm-next
	{
		@include mm_border_left;

		background: rgba( 3, 2, 1, 0 );
		width: $mm_subopenWidth;
		padding: 0;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 2;

		+ a,
		+ span
		{
			margin-right: $mm_subopenWidth;
		}

		&.mm-fullsubopen
		{
			width: 100%;
			
			&:before
			{
				border-left: none;
			}
			
			+ a,
			+ span
			{
				padding-right: $mm_subopenWidth;
				margin-right: 0;
			}
		}
	}
}
.mm-menu > .mm-panel
{
	> .mm-listview
	{
		margin-left: -$mm_panelPadding;
		margin-right: -$mm_panelPadding;

		&.mm-first
		{
			margin-top: -$mm_panelPadding;
		}
		&.mm-last
		{
			padding-bottom: $mm_panelPadding;
		}
	}
}


// Arrows
.mm-prev:before,
.mm-next:after
{
	@include mm_arrow;
}
.mm-prev:before
{
	@include mm_arrow_prev;
}
.mm-next:after
{
	@include mm_arrow_next;	
}


// Dividers
.mm-divider
{
	@include mm_ellipsis;

	font-size: $mm_dividerFontSize;
	text-transform: uppercase;
	text-indent: $mm_listitemIndent;
	line-height: $mm_dividerHeight;
}


// Spacers
.mm-listview > li
{
	&.mm-spacer
	{
		padding-top: $mm_btnSize;
		
		> .mm-next
		{
			top: $mm_btnSize;
		}
		
		&.mm-divider
		{
			padding-top: $mm_dividerHeight;
		}
	}
}


@include mm_colors;