basic styling Community page

[people/shoehn/ipfire.org.git] / static / scss / _nav.scss

#mask {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .4);
	display: none;
	visibility: hidden;
	&.open {
		display: block;
		visibility: visible;
	}
}

.tux {
	position: absolute;
	top: 12px;
	left:50%;
	transform: translateX(-50%);
	h1 {
		font-weight: 300 !important;
		color: $blue-grey-900;
		font-size: 20px;
		line-height: 28px;
		margin-bottom: 0;
		strong {
			font-weight: 700 !important;
		}
	}
	h1:before {
		content: "";
		height: 32px;
		width: 25px;
		background-image: url('../img/ipfire-tux.png');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		display: inline-block;
		position: relative;
	}
}

.menu-text {
	transition: opacity .25s ease-in-out;
}

.menu-text.hidden {
	opacity: 0;
	transition: opacity .35s ease-in-out;
}

.fixed-top {
	transition: background-color .25s linear;
	height: 56px;
	@include media-breakpoint-up(sm) {
		height: 72px;
	}
	@include media-breakpoint-up(lg) {
		height: 96px;
	}
	.navbar {
		width: 100%;
		a {
			color: $blue-grey-900;
			@include media-breakpoint-up(sm) {
				margin-top: 8px;
			}
		}
		.navbar-toggler-left {
			left: -12px;
			top: 8px;
			@include media-breakpoint-up(sm) {
				top: 17px;
			}
		}
		.btn {
			margin-top: .15rem;
		}
	}
}

.navbar-brand {
	font-size: 20px;
	font-weight: 300;
	opacity: 0;
	margin: 0;
	transition: opacity .7s linear;
	@include media-breakpoint-up(lg) {
		opacity: 1;
		font-size: 36px;
	}
	strong {
		font-weight: 900;
	}
	img {
		margin-right: 4px;
		transform: translateY(-5px);
		height: 32px;
		width: auto;
		@include media-breakpoint-up(lg) {
			height: 40px;
		}
	}
}

.scrolled {
	background-color: rgba(255, 255, 255, .96);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
	height: 56px;
	@include media-breakpoint-up(sm) {
		height: 72px;
	}
	@include media-breakpoint-up(lg) {
		height: 96px;
	}
	.navbar-brand {
		opacity: 1;
	}
}

.scrolled.fadeout {
	background-color: rgba(100, 100, 100, .5);
	a.btn-donate {
		opacity: .5;
	}
	a.navbar-brand {
		opacity: .5;
	}
}

#navbarSupportedContent {
	width: 100%;
	@include media-breakpoint-down(md) {
		background: white;
		position: fixed;
		top: 0;
		left: 0;
		width: 256px;
		height: 100vh;
		padding-top: 64px;
		transform: translateX(-256px);
		transition: all .15s ease-in-out;
		&.open {
			transform: translateX(0);
			transition: all .15s ease-in-out;
			box-shadow: 14px 0 28px 0 rgba(0, 0, 0, 0.25), 10px 0 10px 0 rgba(0, 0, 0, 0.26);
		}
	}
}

.navbar-nav {
	@include media-breakpoint-up(lg) {
		padding-top: 2px;

	}
}

.navbar-nav .nav-link {
	color: $blue-grey-900;
	padding: 16px !important;
	display: block;
	position: relative;
	@include media-breakpoint-up(lg) {
		margin-right: 16px;
		display: block;
		position: relative;
		&:after {
			content: "";
			border-bottom: 2px solid $red_900;
			position: absolute;
			transform: scaleX(0);
			width: 100%;
			left: 0;
			top: 44px;
			padding: inherit;
			transition: transform .3s ease-out, color .3s ease-out;
		}
	}
}

.navbar-nav .nav-link:active {
	@include media-breakpoint-down(lg) {
		color: $red_900
	}
}

.navbar-nav .nav-link:active:before {
	@include media-breakpoint-down(lg) {
		content: "";
		border-left: 2px solid $red_900;
		position: absolute;
		left: 0;
		height: 36px;
		transform: translateY(-4px);
	}
}

.navbar-nav .nav-link:hover {
	@include media-breakpoint-up(lg) {
		color: $red_900;
	}
}

.navbar-nav .nav-link:hover:after {
	@include media-breakpoint-up(lg) {
		transform: scaleX(1);
	}
}

body.About li.nav-item a.about,
body.Download li.nav-item a.download,
body.Support li.nav-item a.support,
body.Involved li.nav-item a.community {
	@include media-breakpoint-up(lg) {
		color: $red_900;
		&:after {
			content: "";
			border-bottom: 2px solid $red_900;
			position: absolute;
			width: 100%;
			left: 0;
			top: 44px;
			padding: inherit;
			transform: scale(1);
		}
	}
}

#sidebar {
	padding: 0;
	@include media-breakpoint-down(md) {
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16),
				0 1px 2px 0 rgba(0, 0, 0, 0.23);
		position: fixed;
		top: 52px;
		z-index: 9999;
		background-color: white;
	}
	ul {
		list-style: none;
		&.features_nav {
			padding: 0 0 24px 0;
			overflow-x: auto;
			&.fixed {
				position: fixed;
				top: 100px;
				outline: 1px solid grey;
			}
		}
		ul {
			margin: 0;
			padding-left: 0;
			li:last-child {
				margin-bottom: 0;
			}
		}
		li {
			padding: 0 16px;
			margin: 8px 0;
			a.nav-link {
				padding: inherit;
				color: $blue-grey-900;
				height: 32px;
				padding: 0 8px;
				line-height: 2;
				&.active {
					color: $red_900;
					border-left: 2px solid $red_900;
					padding: 0 8px 0 6px;
				}
			}
		}
	}
}

// Feature mobile Menu

/* Fix for Android */
body {
	-webkit-animation: bugfix infinite 1s; 
}
@-webkit-keyframes bugfix {
	from { padding: 0; }
	to { padding: 0; } 
}

/* default checkbox */
input[type=checkbox] {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

label {
	cursor: pointer;
	user-select: none;
}

nav[role="dropdown"] {
	label { display: none; }
}

@media screen and (max-width: 44em) {
	nav[role="dropdown"] {
		ul {
			height: 48px;
			overflow: hidden;
		}
		
		label {
			position: relative;
			display: block;
			width: 100%;
		}
		
		label:after {
			font-family: FontAwesome;
			font-size: 24px;
			content: "\f107";
			position: absolute;
			top: 0;
			right: 0;
			z-index: 9999;
			width: 100%;
			height: 56px;
			padding: 12px 12px 0;
			text-align: right;
		}
		
		input:checked ~ label:after {
			content: "\f106";
		}
		
		input:checked ~ ul {
			display: block;
			height: 40vh;
			overflow-y: scroll;
		}
	}
}