pillar/src/styles/components/_navbar.sass

// Navigation.
.navbar-overlay
	+media-lg
		display: block
	bottom: 0
	display: none
	left: 0
	height: 100%
	position: absolute
	right: 0
	top: 0
	transition: background-color 350ms ease-in-out
	width: 100%
	z-index: 0

	&.is-active
		background-color: $color-background-nav
		text-shadow: none

.navbar-brand
	padding-left: 10px
	color: $color-text
	width: 120px // Blender Cloud logo width

	&:hover
		color: $color-text-dark-primary


nav.navbar
	.navbar-collapse
		> ul > li > .navbar-item
			padding: $navbar-nav-link-padding-x
			height: $nav-link-height

.navbar,
nav.sidebar
	align-items: center
	background-color: $color-background-nav
	border: none
	display: flex
	padding: 0
	z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */

	nav
		margin-left: auto
		margin-right: 0

		.navbar-nav
			margin-right: 0
			+media-xs
				margin: 0
				width: 100%

	.navbar-item
		align-items: center
		color: $color-text
		display: flex
		user-select: none
		transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out

		+media-sm
			padding-left: 10px
			padding-right: 10px

		&:hover, &:focus
			color: $color-primary
			background-color: transparent
			box-shadow: inset 0 -3px 0 $color-primary
			text-decoration: none

		&:focus
			box-shadow: inset 0 -3px 0 $color-primary

		&.active
			color: $color-primary
			box-shadow: inset 0 -3px 0 lighten($color-secondary, 10%)

			&:hover
				box-shadow: inset 0 -3px 0 lighten($color-secondary, 20%)

		.pi-angle-down
			position: relative
			left: 5px

	li
		user-select: none
		position: relative

		&.nav-item-sign-in
			i
				padding-right: 6px
				font-size: 1.1em

		img.gravatar
			border-radius: 999em
			height: 32px
			width: 32px
			box-shadow: 1px 1px 0 rgba(black, .2)
			position: relative

		.special
			width: 18px
			height: 18px
			border-radius: 999em
			position: absolute
			background-color: white
			z-index: 2
			display: inline-block
			top: 10px
			left: 38px
			font-size: 1.2em
			box-shadow: 1px 1px 1px rgba(black, .2)

			&.subscriber
				background-color: $color-success
				color: white
				font-size: .6em

			&.demo
				background-color: $color-info
				color: white
				font-size: .6em

			&.none
				color: $color-danger

			i
				+position-center-translate

	.dropdown
		min-width: 60px // navbar avatar size

		// Removes angle-down icon from bootstrap,
		// since we use a nicer chevron.
		a:after
			display: none

		span.fa-stack
			position: absolute
			top: 50%
			left: 50%
			transform: translate(-50%, -50%)

		ul.dropdown-menu
			li
				a
					white-space: nowrap

					&:hover
						box-shadow: none // removes underline

					&.subitem // e.g. "Not Sintel? Log out"
						font-size: .8em
						padding-top: 0
						text-transform: initial

				i
					width: 30px

				&.subscription-status
					&.none a
						color: $color-danger

					&.subscriber a
						color: $color-success

					&.demo a
						color: $color-info

					span.info
						display: block

						span.renew
							display: block
							color: $color-text-dark-primary
							font-size: .9em


nav.sidebar
	ul li.nav-item-sign-in a.navbar-item
		font-size: .8em


.navbar-backdrop-container
	width: 100%
	height: 100%
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0

	img
		display: none
		position: fixed
		width: 100%
		align-self: flex-start
		+media-md
			display: block
		+media-lg
			display: block


.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu
	margin-top: 0

.navbar+.page-content
	padding-top: $nav-link-height

// Secondary navigation for
.nav-secondary
	align-items: center
	box-shadow: 0 2px 0 0 $color-background

	.nav-link
		color: $color-text
		transition: box-shadow 150ms ease-in-out

		&:hover,
		&.active
			box-shadow: 0 2px 0 0 $color-primary

	.nav-title
		font-weight: bold
		padding-right: 20px