Reduced backdrop z-index

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / menuMobile.scss

@include screen-sm-up {
	.pageContainer {
		&.menuOverlay-pageMainMenuMobile {
			transform: translateX(350px);
			
			.mainMenu {
				visibility: hidden;
			}
		}
		
		&.menuOverlay-pageUserMenuMobile {
			transform: translateX(-350px);
			
			.userPanel {
				visibility: hidden;
			}
		}
	}
}

/* menu container */
.menuOverlayMobile {
	background-color: rgb(52, 73, 94);
	bottom: 0;
	display: none;
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index: 320;
	
	&.open {
		display: block;
		
		@include screen-sm-up {
			+ .menuOverlayMobileBackdrop {
				display: block;
			}
		}
	}
	
	> .menuOverlayItemList {
		// we use `transform: translateX()` for performance reasons
		transition: transform .24s cubic-bezier(.25, .46, .45, .94);
		
		/* work-around to avoid setting explicit visibility */
		visibility: visible;
	}
	
	&.allowScroll {
		.menuOverlayItemList:not(.hidden) {
			overflow: auto;
		}
	}
	
	&:not(.allowScroll) {
		// block UI while switching between menus
		&::before {
			bottom: 0;
			content: "";
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 500;
		}
	}
	
	@include screen-xs {
		left: 0;
		max-width: 100vw;
		right: 0;
		
		.menuOverlayItemList {
			right: 0;
		}
	}
	
	@include screen-sm-up {
		width: 350px;
		
		&.pageMainMenuMobile {
			left: 0;
			
			& + .menuOverlayMobileBackdrop {
				box-shadow: inset 5px 0 10px -5px rgba(0, 0, 0, .6);
				left: 350px;
			}
			
			.menuOverlayItemList {
				left: 0;
			}
		}
		
		&.pageUserMenuMobile {
			right: 0;
			
			& + .menuOverlayMobileBackdrop {
				box-shadow: inset -5px 0 10px -5px rgba(0, 0, 0, .6);
				right: 350px;
			}
			
			.menuOverlayItemList {
				right: 0;
			}
		}
	}
}

.menuOverlayMobileBackdrop {
	background-color: rgba(0, 0, 0, .4);
	bottom: 0;
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 445;
}

.menuOverlayItemWrapper {
	display: flex;
	justify-content: flex-end;
	
	> .menuOverlayItemLink {
		flex: 1 1 auto;
	}
}

.menuOverlayItemList {
	background-color: rgb(52, 73, 94);
	height: 100%;
	list-style-type: none;
	margin: 0;
	padding: 5px 0;
	position: absolute;
	top: 0;
	left: -1px;
	bottom: 0;
	width: calc(100% + 1px);
	z-index: 450;
	
	@include screen-sm-up {
		width: 350px;
	}
	
	&:not(.activeList) {
		display: none;
	}
}

.menuOverlayItemSpacer {
	margin-top: 20px;
	
	/* avoid successive spacers piling up */
	& + .menuOverlayItemSpacer {
		display: none;
	}
}

.menuOverlayItem {
	&:not(:last-child) {
		margin-bottom: 1px
	}
	
	/* nested item list */
	> .menuOverlayItemList {
		margin-left: 100%;
		z-index: 500;
	}
}

.menuOverlayItemLink,
.menuOverlayTitle,
.menuOverlayBackLink {
	color: rgb(255, 255, 255);
	display: block;
	font-size: 14px;
	padding: 10px 30px;
	position: relative;
}

.menuOverlayItemLink {
	align-items: center;
	background-color: rgb(44, 62, 80);
	display: flex;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	
	.icon::before {
		color: #fff;
	}
	
	&:hover {
		color: rgb(255, 255, 255);
	}
	
	/* wrapper class for links containing an additional badge */
	&.menuOverlayItemBadge {
		align-items: center;
		display: flex;
		padding-right: 10px;
		
		/* different padding if there is no additional icon after the link,
		   ensures proper alignment for links with badges containing a child
		   item list */
		&:last-child {
			/* 55px = 10px padding + 1px margin + icon */
			/* icon = 2x 10px padding + 16px width */
			padding-right: 55px;
		}
		
		> .menuOverlayItemTitle {
			flex: 1 1 auto;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		> .badge {
			flex: 0 0 auto;
		}
	}
	
	&.menuOverlayItemLinkMore::after {
		color: rgb(204, 204, 204);
		content: $fa-var-angle-right;
		display: block;
		font-family: FontAwesome;
		font-size: 24px;
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
	}
}

.pageUserMenuMobile .menuOverlayItemBadge:last-child {
	padding-right: 10px !important;
}

.menuOverlayItemLink.active,
.menuOverlayItemLinkIcon.active {
	background-color: rgb(34, 49, 63);
}

.menuOverlayTitle {
	color: rgb(204, 204, 204);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	
	&:not(:first-child) {
		margin-top: 10px;
	}
}

/* icon link sharing the space with a link or (header only) the logo */
.menuOverlayItemLinkIcon {
	background-color: rgb(44, 62, 80);
	flex: 0 0 auto;
	margin-left: 1px;
	padding: 10px;
	
	/* force explicit dimensions because no each .icon24 is of equal height/width */
	height: 44px;
	width: 44px;
	
	> .icon::before {
		color: #fff;
	}
}

.menuOverlayBackLink::before {
	color: rgb(204, 204, 204);
	content: $fa-var-angle-left;
	display: block;
	font-family: FontAwesome;
	font-size: 18px;
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.menuOverlayLogoWrapper {
	flex: 1 1 auto;
	padding: 5px;
	display: flex;
	
	.menuOverlayLogo {
		flex: 1 1 auto;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
}