sismica/liferay-plugins-sdk-6.2/themes/portos-public-theme/docroot/css/component/header.scss

#banner {
	position: fixed;
	background-color: $w;
	width: 100%;
	z-index: 1000;
	box-shadow: 0 0 5px $b!important;


	.toggled &{
		padding-right: 250px;

		@media (max-width: 991px)  {
			padding-right: 0px;
		}
	}

	.toggled.lfr-has-add-content & {
		padding-right: 600px;

		@media (max-width: 991px)  {
			padding-right: 0px;
		}
	}

	.lfr-has-add-content & {
		padding-right: 350px;

		@media (max-width: 991px)  {
			padding-right: 0px;
		}
	}

	#heading {
		@include display-flex();
		@include justify-content(space-between);
		@include align-items(center);

		.site-title {
			flex: 1;
			margin: 0;
			.logo-img {
				height: $height-header;
				width: auto;
			}
		}

		.page-title {
			margin: 0;
			.img-site {
				height: $height-header;
				width: auto;
			}
		}

		.navigation {
			@include display-flex();
			@include justify-content(flex-end);
			@include align-items(center);
			flex: 1;

			.main-menu {

				ul {
					list-style-type: none;
					@include display-flex();
					@include justify-content(flex-end);
					@include align-items(center);
					padding: 0;
					margin: 0;

					li {
						padding-left: 10px;
						padding-right: 10px;

						a {
							text-decoration: none;
							color: $header-menu;
							font-weight: 200;
							text-transform: uppercase;
							font-size: em(12px);
							font-family: $second-font;

							b {
								transition: color $speed;
							}
						}
					}
				}
			}

			.button-menu-right {
				margin-left: 0px;
				margin-right: 10px;
				width: 45px;
				height: 35px;
				padding-left: 8px;
				padding-right: 8px;
				background-color: $red-logo;
				border-color: $red-logo;

				.toggle {
					.toggle-line {
						display: block;
						height: 4px;
						margin-bottom: 4px;
						background-color: $w;
						transition: transform .5s;
						border-radius: 25px;
					}
				}

				&:hover {
					.toggle-line:nth-child(1), .toggle-line:nth-child(3) {
						transform: scaleX(.7) translateZ(0);

					}
				}
			}
		}
	}
}

.toggled .button-menu-right {
				.toggle-line:nth-child(1) {
					transform: translate3d( 0, 8px, 0) rotate(45deg);
				}
				
				.toggle-line:nth-child(2) {
					opacity: 0;
					visibility: hidden;
					transition: opacity .5s, visibility .5s!important;
				}
			
				.toggle-line:nth-child(3) {
					transform: translate3d( 0, -8px, 0) rotate(-45deg);
				}
				
				&:hover {
					.toggle-line:nth-child(2) {
					    opacity: 1;
					visibility: visible;
					}
				}
}

.aui {
	.notification-header {
		position: relative;

		.notification-header__icon {
			font-size: 20px;
			padding-left: em(25px, 20px);
			padding-right: em(35px, 20px);
		}

		#_2_WAR_notificationsportlet_userNotifications {
			position: absolute;
			width: 100%;
			height: 100%;
			right: 0;
			top: 0;
			list-style: none;

			.dockbar-user-notifications-container {
				background-color: $w;
				width: 100%;
			}

			.dropdown-toggle.user-notification-link {
				height: 100%;
				width: 100%;
				top: 0px;
				left: 0px;
				position: absolute;
				color: $b;

				#_2_WAR_notificationsportlet_userNotificationsCount {
					font-size: 12px;
					position: absolute;
					width: em(20px, 12px);
					height: em(20px, 12px);
					top: -15px;
					right: 25px;
					background-color: $red-logo;
					border-radius: 50px;
					@include display-flex();
					@include justify-content(center);
					@include align-items(center);
					border: none;
					color: $w;
				}
			}

			.dockbar-user-notifications-container {
				width: em(270px);
				position: absolute;
				top: 55px;
				right: 15px;

				.user-notifications-list {
					border: 0px solid transparent;

					.user-notification-header {
						border-color: $b;
						span {
							a {
								font-family: $second-font;
								color: $b;
							}
						}
					}

					.user-notification {
						.message {
							font-family: $second-font;
							color: $b;
						}
					}

				}
			}

			.dockbar-user-notifications-container.open {
				.user-notifications-list {
					border: 1px solid $header-menu;
					width: 100%;
				}
			}
		}

	}
}

.dockbar-user-notifications .user-notifications-header {
	border-color: $b;
	span {
		a {
			font-family: $second-font;
			color: $b;
		}
	}
}
.dockbar-user-notifications .user-notification  {
	border-color: $b;
	span {
		a {
			font-family: $second-font;
			color: $b;
		}
	}
}


header {
	transition: all .5s ease;
	top: 0;
}
header.nav-up {
	top: -60px;

	@media (max-width: 991px)  {
		top: 0px;
	}
}

.user-notification {
	margin: 0px!important;

	.user-thumbnail {
		box-shadow: 0 0 0 2px $red-logo!important;
	}
}


.aui {
	#heading {
		.navigation {
			nav {
				ul {
					@for $i from 1 through length($color-menu) {
						li:nth-child(#{length($color-menu)}n+#{$i}) {
							a:hover {
								text-decoration: none;
								b {
									color: nth($color-menu, $i);
								}
							}
						}
						li.selected:nth-child(#{length($color-menu)}n+#{$i}) {
							a {b {
								color: nth($color-menu, $i);
							}}
						}
					}
				}
			}
		}
	}
}