whmcsCrosterTemplates/assets/less/nav-bars.less

.@{brand}-navbar {
	background-color: @white;
	border-radius: 0 !important;
	border-bottom: 1px solid @default-border-color;
	padding: 0;
	.pre-header {
		.container {
		 min-height: unset;
		}
	}
	.container {
		min-height: 50px;
	}
	
	.navbar-right {
		margin-right: 0;
	}
	.navbar-right, .secondary-menu-mobile {
		.dropdown, .lang-btn {
			.dropdown-toggle, .btn, .nav-link {
				padding: 0.25rem 0;
				@media (min-width: 992px) {
					padding: 0.5rem 0;
				}
			}
			&:not(last-child) {
				.dropdown-toggle, .btn, .nav-link {
					margin-left: 1.25rem;
				}
			}
		}
	}
	
	.user-info {
		display: none;
	}

	&.navbar-fixed-top {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1030;
	}
	
	&.left-layout {
		&.primary {
			border-color: @themeColor;
		}
		&.dark {
			border-color: @gray-darker;
		}
		&.navbar-fixed-top {
			@media (min-width: 992px) {
				margin-left: 230px;
			}
			.pre-header {
				display: block;
			}
		}
		@media (min-width: 992px) {
			.user_icon {
				a {
					span {
						display: flex;
						align-items: center;
						justify-content: center;
						&.user-info {
							display: flex;
							align-items: center;
							margin-left: 4px;
							&:after {
								content: "";
								margin-left: 2px;
								vertical-align: middle;
								border-top: 4px dashed;
								border-right: 4px solid transparent;
								border-left: 4px solid transparent;								
							}
						}
					}
				}
			}
		}
	}
	
	@media (max-width: 991px) {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1030;
		box-shadow: none!important;
		
		&.animation {
			animation-duration: unset!important;
			animation-fill-mode: unset!important;
		}
		&.slideInDown {
			animation-name: none!important;
		}
		
		.container {
			width: 100% !important;
			max-width: 100%!important;
		}
		
		.show .dropdown-menu {
			border-radius: 4px;
		}
		
		.navbar-header {
			display: flex;
			align-items: center;
			flex-direction: row;
			flex-grow: 1;
		
			.logo-section {
				display: flex;
				align-items: center;
				margin-right: auto;
				min-height: 50px;
				.navbar-toggler {
					outline: none;
					margin: 0 15px;
					padding: 0;
					float: none;
					width: 30px;
					display: block;
					text-align: center;
					background-color: transparent!important;
					border: 0 none!important;
					border-radius: 0!important;
					
					span {
						transition: 0.24s ease;
						color: @baseFontcolor;
						
						&:before {
							content: "\f0c9"!important;
							font-size: 21px;
							font-family: "Font Awesome 5 Pro";
							font-weight: 300;
							-moz-osx-font-smoothing: grayscale;
							-webkit-font-smoothing: antialiased;
							display: inline-block;
							font-style: normal;
							font-variant: normal;
							text-rendering: auto;
							line-height: 1;
						}
					}
					
					&.display {
						span {
							&:before {
								content: "\f00d"!important;
							}
						}
					}
				}
			}
		}
	}
	
	.navbar-header {
		.logo-section {
			min-width: 145px;
			@media (max-width: 633px) {
				min-width: 100px;
			}
			.logo {
				display: flex;
				align-items: center;
				font-size: 1.3em;
				text-decoration: none;
				color: @baseFontcolor;
				font-weight: 900;
				white-space: nowrap;
				img {
					max-width: 175px;
					max-height: 40px;
					@media (max-width: 633px) {
						width: 80%;
					}
				}				
			}
		}
	}
	
	
	.nav .show>a, .nav .show>a:hover, .nav .show>a:focus {
		background-color: transparent;
	}
	
	.navbar-nav {
		@media (max-width: 991px) {
			margin: 7.5px auto;
		}
		li {
			position: relative;
			a {
				font-size: @baseFontSize + 2;
				font-weight: 500;
				color: @baseFontcolor;
				text-decoration: none;			
				 .badge {
					position: absolute;
					top: -7px;
					right: -10px;
				 }
				 
				 @media (min-width: 1280px) {
					font-size: @baseFontSize + 3;
				 }
			}
			
			ul.dropdown-menu {
				background-color: @white;
				background-clip: padding-box;
				padding: 0;
				
				li {
					a:not(.item-heading) {
						font-size: @baseFontSize;
						font-weight: 400;
						color: @baseFontcolor;
						padding: 7.5px 15px;
						
						&:hover, &:focus, &:active, &.active > a, &.active > a:hover, &.active > a:focus {
							background-color: @themeColor;
							color: @white;
						}
					}
					
					&.nav-divider {
						display: none;
					}
				}
			}
			
			@media (min-width: 992px) {
				ul.dropdown-menu {
					transform: translateY(20px);
					transition: all 0.3s ease-in;
					opacity: 0;
					visibility: hidden;
					display: block;
					padding: 0;
					margin-top: -4px;
					border-radius: 4px;
				}				
				&.dropdown {
					&.show {
						ul.dropdown-menu {
							transform: translateY(0);
							opacity: 1;
							visibility: visible; //enable this for auto open
						}						
					}
				}
			}
			
			&.Secondary_Navbar-Account {
				&.user_icon {
					.nav-link {
						display: flex;
						align-items: center;
						justify-content: center;
						[class*="fa-"] {
							margin-right: -4px;
						}
					}
				}
			}
		}

	}
	
	@media (min-width: 1200px){
		.navbar-nav { 
			li {
				.nav-link {
					padding: 1rem;
				}
			}
		}
	}
	
	
	.navbar-nav>.show>a, .navbar-nav>.show>a:focus, .navbar-nav>.show>a:hover {
		background-color: transparent;
	}

	@media (min-width: 992px) {
		.navbar-right {
			.dropdown-menu {
				margin-top: 10px!important;
				right: 0;
				left: auto;
			
				&.dropdown-user {
					margin-top: -10px!important;
				}
			}
		}
	}	
	
	.dropdown-tasks {
		width: 220px;
		li {
			&:first-child {
				border-top: 2px solid  transparent!important;
			}
		}
		
		#langScroll, #CurrencyScroll {
			max-height: 190px;
			overflow-y:auto;
			height: auto;
		}
		li a:hover, li a:focus  {
			background-color: @gray-lighter!important;
			color: @baseFontcolor!important;
		}
		.dropdown-header, .dropdown-header:hover{
			color: @baseFontcolor;
			
			&:hover {
				color: @baseFontcolor;
			}
		}
		.dropdown-footer, .dropdown-footer a, .dropdown-footer a:hover, .dropdown-footer:hover {
			color: @white!important;
			background: @themeColor!important;
		}
	}
	.dropdown-tasks {
		&.auto-width {
			width: auto;
		}
	}
	.dropdown-user, .dropdown-search {
		[class*="fa-"], [class*="glyphicon-"] {
			font-size: @baseFontSize;
		}
	}
	.dropdown-scroll {
		padding: 0;
		margin: 0;
		.dropdown-header {
			padding: 10px;
			margin: 1px 1px 0;
			font-size: @baseFontSize;
			
		}
		li {
			background: @white;
			margin: 0;
			border-bottom: 1px dotted @default-border-color;
			&:last-child {
				border-bottom: 0 none;
			}
			a {
				display: block;
				padding: 10px;
				color: @baseFontcolor!important;
				.btn {
					margin-left: 0!important;
					padding: 4px 10px!important;
				}
				&:hover {
					text-decoration: none!important;
					background-color: inherit;
				}
			}
			a, p {
				font-size: @baseFontSize!important;
			}
		}
		.dropdown-footer {
			border-bottom: 0 none;
			display: block;
			text-align: center;
			
			& a:after {
				content: "\f101";
				margin-left: 4px;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: 400;
			}
		}
		p {
			margin: 0 0 0 10px;
			
			&.small {
				color:@gray-light;
				margin-top: 3px;
				font-size: 85%;
			}
		}
	}
	.dropdown-scroll li a, .dropdown-scroll li a:hover, .dropdown-tasks li a:hover {
		color: @baseFontcolor;
	}
	
	.lang-btn {
		.btn {
			display: flex;
			align-items: center;
			font-size: @baseFontSize + 2;
			font-weight: 500;
			border: 0 none;
			outline:0 none !important;
			box-shadow: none!important;
			
			.iti-flag {
				margin-right: 4px;
			}
		}
	}
	
	.nocaret {
		a {
			&:after {
				display: none;
			}
		}
	}
	.navbar-header {
		.secondary-menu-mobile {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			
			@media (min-width: 992px) {
				display: none;
			}
			&.nav {
				li {
					position: relative;
					a {
						color: @baseFontcolor;
						.badge {
							position: absolute;
							top: -7px;
							right: -10px;
						 }					
					}
					
					&.user_icon {
						.dropdown-menu {
							margin-top: 0;
						}
						.nav-link {
							display: flex;
							align-items: center;
							justify-content: center;
							[class*="fa-"] {
								margin-right: -4px;
							}
						}
					}
				}
				.dropdown-toggle {
					font-size: @baseFontSize + 2;
					color: @baseFontcolor;
					font-weight: 500;
					&:hover, &:focus, &:active, &.active {
						background-color: transparent;
					}
				}
				.show>a, .show>a:focus, .show>a:hover {
					background-color: transparent;
				}
				.dropdown-menu {
					margin-top: 6px;
					right: 0!important;
					left: auto!important;
					float: right!important;
					padding: 0;
					
					> li > a:hover,
					> li > a:focus,
					> .active > a,
					> .active > a:hover,
					> .active > a:focus,
					> .show > a,
					> .show > a:hover,
					> .show > a:focus {
						color: @white;
						background-color: @themeColor;
					}
					
					li {
						float: none;
						
						a {
							font-size: @baseFontSize;
							font-weight: 400;
							padding: 7.5px 15px;
						}
						
						&.nav-divider {
							display: none;
						}						

					}
				}
			}
		}
		
		.top {
			padding: 0 15px;
			@media (max-width: 991px) {
				display: flex;
				align-items:center;
				min-height: 56px;
			}
		}
	}
	
	.tooltip-inner {
		margin-left: -200px;
		min-width: 250px;
		width: 250px;
	}
	
	@media (max-width: 633px) {
		.navbar-header {
			.top {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
	@media (min-width: 992px) {
		&.navbar-fixed-top {
			.pre-header {
				display: none;
			}
		}		
		.navbar-nav {
			float: none!important;
			display: flex!important;
			flex-direction: row;
			justify-content: center!important;
			align-items: center;
		}
	}
	
	&.primary, &.dark {
		background-color: @themeColor;
		.navbar-nav {
			li {
				a {
					color: @navbarDarklink;
					&:hover, &:focus, &:active, &.active {
						background-color: transparent;
					}
					
					.badge {
						background-color: @navbarDarklink!important;
						color: @baseFontcolor;
					}
				}
				&.show {
					a {
					&.dropdown-toggle {
						background-color: transparent;
						color: @navbarDarklink;
							&:hover, &:focus, &:active, &.active {
								background-color: transparent;
								color: @navbarDarklink-hover;
							}
						}
					}
				}
				&.Secondary_Navbar-Account {
					&.user_icon {
						.nav-link {
							img, [class*="fa-"] {
								border: 2px solid rgba(255,255,255,0.2);
							}
						}
					}
				}
			}

		}
		
		.lang-btn {
			 .btn {
				color: @navbarDarklink;
			 }
		}
		.tswicther[type=checkbox] + span {
			color: @navbarDarklink;
		}
		.navbar-header {
			.secondary-menu-mobile {
				&.nav {
					.dropdown-toggle {
						background-color: transparent;
						color: @navbarDarklink;
						&:hover, &:focus, &:active, &.active {
							background-color: transparent;
						}
						
						.badge {
							background-color: @navbarDarklink!important;
							color: @baseFontcolor;
						}
					}
					
					.Secondary_Navbar-Account {
						&.user_icon {
							.nav-link {
								img, [class*="fa-"] { 
									border: 2px solid rgba(255,255,255,0.2);
								}
							}
						}
					}
				}
			}
		}
		
		.navbar-header {	
			.logo-section {			
				.navbar-toggler {		
					span {
						color: @navbarDarklink;
					}
				}
				
				.logo {
					color: @navbarDarklink;
				}
			}
		}
		
		.logo-light {
			display: none;
		}
		.logo-dark {
			display: block;
		}
		
	}
	
	&.dark {
		.navbar-nav {
			li {
				ul.dropdown-menu, &.show ul.dropdown-menu {
					li {
						a {
							&:hover, &:focus {
								background-color: @gray-darker;
							}
						}
					}
				}
			}
		}
		
		.navbar-header {
			.secondary-menu-mobile {
				.dropdown-menu {					
					> li > a:hover,
					> li > a:focus,
					> .active > a,
					> .active > a:hover,
					> .active > a:focus,
					> .show > a,
					> .show > a:hover,
					> .show > a:focus {
						color: @white;
						background-color: @gray-darker;
					}
				}
			}
		}
		.mega-menu {
			p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
				color: @baseFontcolor;
			}
		}
	}
	
	&.submenu1 {
		.navbar-nav {
			li {
				ul.dropdown-menu, &.show ul.dropdown-menu {
					background-color: @themeColor;
					li {
						a {
							color: @navbarDarklink; 
							&:hover, &:focus {
								background-color: transparent;
								text-decoration: underline;
							}
						}
					}
					&:after {
						left: 8px;
						right: auto;
						top: -8px;
						width: 0;
						height: 0;
						z-index: 2;
						content: " ";
						display: block;
						position: absolute;
						border-bottom: 8px solid @themeColor;
						border-right: 8px solid transparent;
						border-left: 8px solid transparent;					
					}
				}
			}
			
			&.navbar-right {
				li {
					ul.dropdown-menu, &.show ul.dropdown-menu {
						&:after {
							left: auto;
							right: 8px;
						}
					}
				}
			}
			
			.dropdown-tasks {
				.dropdown-header {
					background-color: @themeColor;
					color: @navbarDarklink;
				}
			}
			.dropdown-header {
				color: @navbarDarklink;
			}
		}
		
		.navbar-header {
			.secondary-menu-mobile {
				.dropdown-menu {
					background-color: @themeColor;
					> li > a {
						color: @navbarDarklink;
					}
					> li > a:hover,
					> li > a:focus,
					> .active > a,
					> .active > a:hover,
					> .active > a:focus,
					> .show > a,
					> .show > a:hover,
					> .show > a:focus {
						color: @navbarDarklink;
						background-color: transparent;
						text-decoration: underline;
					}
					
					&:after {
						left: auto;
						right: 8px;
						top: -8px;
						width: 0;
						height: 0;
						z-index: 2;
						content: " ";
						display: block;
						position: absolute;
						border-bottom: 8px solid @themeColor;
						border-right: 8px solid transparent;
						border-left: 8px solid transparent;					
					}
				}
				.dropdown-header {
					color: @navbarDarklink;
				}
			}
		}		
	}
	
	&.submenu2 {
		.navbar-nav {
			li {
				ul.dropdown-menu, &.show ul.dropdown-menu {
					background-color: @gray-darker;
					li {
						a {
							color: @navbarDarklink;							
							&:hover, &:focus {
								background-color: transparent;
								text-decoration: underline;
							}
						}
					}
					
					&:after {
						left: 8px;
						right: auto;
						top: -8px;
						width: 0;
						height: 0;
						z-index: 2;
						content: " ";
						display: block;
						position: absolute;
						border-bottom: 8px solid @gray-darker;
						border-right: 8px solid transparent;
						border-left: 8px solid transparent;					
					}
				}
			}
			
			&.navbar-right {
				li {
					ul.dropdown-menu, &.show ul.dropdown-menu {
						&:after {
							left: auto;
							right: 8px;
						}
					}
				}
			}
			
			.dropdown-tasks {
				.dropdown-header {
					background-color: @gray-darker;
					color: @navbarDarklink;
				}
			}
			
			.dropdown-header {
				color: @navbarDarklink;
			}
		}
		
		.navbar-header {
			.secondary-menu-mobile {
				.dropdown-menu {
					background-color: @gray-darker;
					> li > a {
						color: @navbarDarklink;
					}
					> li > a:hover,
					> li > a:focus,
					> .active > a,
					> .active > a:hover,
					> .active > a:focus,
					> .show > a,
					> .show > a:hover,
					> .show > a:focus {
						color: @navbarDarklink;
						background-color: transparent;
						text-decoration: underline;
					}
					
					&:after {
						left: auto;
						right: 8px;
						top: -8px;
						width: 0;
						height: 0;
						z-index: 2;
						content: " ";
						display: block;
						position: absolute;
						border-bottom: 8px solid @gray-darker;
						border-right: 8px solid transparent;
						border-left: 8px solid transparent;					
					}
				}
				.dropdown-header {
					color: @navbarDarklink;
				}
			}
		}		
	}
	
	&.submenu1, &.submenu2 {
		h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, p, .html-item {
			color: @navbarDarklink;
		}
		.item-with-icons {
			.item-icon {
				color: @navbarDarklink;
			}
			.menu-name, .menu-name span {
				color: @navbarDarklink;
			}
		}
		.mega-menu {
			ul {
				li {
					a {
						&:hover, &:focus {
							color: @navbarDarklink!important;
						}
					}
				}
			}
		}	
	
	}
	
	//hover menu
	&.menu-hover {
		.navbar-nav {
			li {
				@media (min-width: 992px) {
					&:hover, &:focus {
						ul.dropdown-menu {
							transform: translateY(0);
							opacity: 1;
							visibility: visible; //enable this for auto open

						}			
					}
				}
			}

		}	
	}
}

			
section#header {
	padding: 0;
}

.pre-header {
	background-color: @gray-darker;
	padding: 7.5px 0;
	color: @white;
	border-bottom: 1px solid transparent;
	width: 100%;
	
	.container {
		padding-top: 0!important;
		padding-bottom: 0!important;
		display: block;
	}
	
	ul {
		margin: 0;
		li {
			padding-right: 15px;
			border-right: 1px solid @default-border-color;
			
			&:first-child {
				padding-left: 0;
			}
			&:last-child {
				border-right: 0 none;
				padding-right: 0;
			}
			
			a {
				position: relative;
				color: @white;
				.badge {
					position: absolute;
					top: -7px;
					right: -10px;
				}
				
				&:hover, &:focus, &.active, &:active {
					text-decoration: none;
				}
			}
			
			&.lang-btn {
				padding-left: 5px;
				.btn {
					display: flex;
					align-items: center;
					background-color: transparent!important;
					color: @white;
					font-size: @baseFontSize + 1;
					font-weight: normal;
					border: 0 none;
					padding: 0;
					
					.iti-flag {
						margin-right: 4px;
					}
				}
			}
			
			&.nocaret {
				.dropdown-toggle {
					&:after {
						display: none;
					}
				}
			}
			
			&#taskScroll {
				padding: 0;
				ul {
					li {
						padding: 0;
					}
				}
			}
		}
	}
	
	&.primary {
		background-color: @themeColor;
		li {
			a {
				.badge {
					background-color: @navbarDarklink!important;
					color: @baseFontcolor;				
				}			
			}
		}
	}
	&.light {
		background-color:@gray-lighter;
		border-bottom: 1px solid @default-border-color;
		li {
			a {
				color: @baseFontcolor;
			}
			
			&.lang-btn {
				.btn {
					color: @baseFontcolor;
				}
			}
		}
	}
}


@media (max-width: 389px) {
	.@{brand}-navbar .navbar-header .logo-section .navbar-toggler {
		margin:0 4px 0 10px;
	}
	
	.@{brand}-navbar .navbar-header .top {
		padding: 4px 10px 4px 4px;
	}
	
	.@{brand}-navbar .navbar-right .dropdown:not(last-child) .dropdown-toggle,
	.@{brand}-navbar .secondary-menu-mobile .dropdown:not(last-child) .dropdown-toggle, 
	.@{brand}-navbar .navbar-right .lang-btn:not(last-child) .dropdown-toggle, 
	.@{brand}-navbar .secondary-menu-mobile .lang-btn:not(last-child) .dropdown-toggle, 
	.@{brand}-navbar .navbar-right .dropdown:not(last-child) .btn, 
	.@{brand}-navbar .secondary-menu-mobile .dropdown:not(last-child) .btn, 
	.@{brand}-navbar .navbar-right .lang-btn:not(last-child) .btn, 
	.@{brand}-navbar .secondary-menu-mobile .lang-btn:not(last-child) .btn, 
	.@{brand}-navbar .navbar-right .dropdown:not(last-child) .nav-link, 
	.@{brand}-navbar .secondary-menu-mobile .dropdown:not(last-child) .nav-link, 
	.@{brand}-navbar .navbar-right .lang-btn:not(last-child) .nav-link, 
	.@{brand}-navbar .secondary-menu-mobile .lang-btn:not(last-child) .nav-link {
		margin-left: 0.5rem;
	}
	
	.pre-header {
		[class*="col-"] {
			&:first-child {
				padding-left: 10px;
				padding-right: 0;
			}
			&:last-child {
				padding-left: 0;
				padding-right: 10px;
			}
		}
	}
}