whmcsCrosterTemplates/assets/less/side-menu.less

@sidebar-min: 50px;

.navbar-side {
	background: @sideBar;
	width: @navSideWidth;
	position: fixed;
	border-width: 0 1px 0 0;
	z-index: 1027;
	box-shadow: 13px 19px 45px -24px rgba(0,0,0,0.72);
	
	.slimScrollBar  { background: @white!important; background-color: @white!important; }

	.logo {
		display: flex;
		align-items: center;
		padding: 30px 15px;
		font-size: 1.3em;
		text-decoration: none;
		color: @baseHeadingcolor;
		font-weight: 900;
		white-space: nowrap;
		img {
			height: 40px;
			max-height: 40px;
		}
	}
	.navbar-nav {
		margin: 0;
		display: block;
	}
		
	.side-nav {
		border-radius: 0; border: none;
		float:none;
		li {
			border-bottom: 0 none; // for menu border
			float: none;
			> a {
				color: @navSidebarLink;
				background-color: @navSidebarLinkBg;
				outline: none;
				padding: 15px;
				text-shadow: none !important;
				display:block;
				text-decoration:none!important;
				transition: all 0.3s ease-in-out;
				
				.mtext {
					margin-left: 4px;
				}
	
				.fa, .fas, far, .fal, .fab, .fad, .glyphicon {
					font-size: @baseFontSize + 3;
				}
				.fa, .fas, far, .fal, .fab, .fad {
					min-width: 20px;
				}
				.glyphicon {
					min-width: 21px;
				}
		 
				&.active {
					border-color: @themeColor;
					color: @navSidebarActive;
		
					.fa, .fas, far, .fal, .fab, .fad, .glyphicon {
						color: @navSidebarActive;
					}		
					&:after {
						display: block;
						content: "";
						position: absolute!important;
						right: 0;
						top: 4px;
						border-color: transparent @themeColor transparent transparent;
						border-width: 16px 10px;
						border-style: solid;
					}
					
					&:hover, &:focus {
						border-color: @themeColor;
					}
				}
				&:hover, &:focus, &:active {
					.mtext {
						color: darken(@navSidebarLink, 20%);
					}
				}
			}
	  
			&.panel {
				border-width: 0; margin: 0; border-radius: 0; box-shadow:none!important;
				ul li {
					border-top: none;
					border-bottom: none;
					position: relative;
					width: 100%;
						&:before {
							content: "";
							display: block;
							position: absolute;
							z-index: 1;
							left: 18px;
							top: 0;
							bottom: 0;
							border: 1px dotted;
							border-width: 0 0 0 1px;
							border-color: @navSidebarBorder;
						}
		  
					a {
						color: @navSidebarDropdownLink;
						background-color: transparent;
						padding: 7px 0 9px 37px;						
						font-size: @font-size-sm;
			
						&.active {
							color: @navSidebarActive;
						}
						
						&:before {
							content: "";
							display: block;
							width: 7px;
							position: absolute;
							z-index: 1;
							left: 20px;
							top: 17px;
							border: 1px dotted;
							border-width: 1px 0 0;
							border-color: @navSidebarBorder;
						}

					}
		  
					a:hover, a:focus, a:active {
						color: @navbarDarklink-hover;
					}
				}
				
				&.open {
					a {
						background-color: @navSidebarDropdownBg;
						.mtext {
							color: @navbarDarklink-hover;
						}
					}
					.fa, .fas, far, .fal, .fab, .fad, .glyphicon {
						color: @navbarDarklink-hover;
					}
				
					li {
						.fa, .fas, far, .fal, .fab, .fad, .glyphicon {
							color: @navbarDarklink-hover;
						}				
					}
				}
			}
			// Meag Menu Start
			&.dropdown-megamenu {
				.dropdown-mega {
					[class*="col-"] {
						width: 100%;
						max-width: 100%; min-width: 100%;
						flex:1 1 100%;
						&.col-html {
							margin: 20px 0;
							color: @navSidebarDropdownLink;
							h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
								margin-top: 0;
								color: @navSidebarDropdownLink;
							}
							a {
								padding: 0;
								display: block;
							}
							.menu-name {
								display: none;
							}
							.img-responsive {
								display: block;
								max-width: 100%;
								height: auto;
							}							
						}
					}
				}
				
				&.panel {
					ul {
						li {
							&:before {
								display: none;
							}
							a {
								padding: 7px 0 9px 0;
								background-color: transparent!important;
								&:before {
									display: none;
								}
							}
							
							ul {
								li {
									position: relative;
									&:before {
										content: "";
										display: block;
										position: absolute;
										z-index: 1;
										left: 18px;
										top: 0;
										bottom: 0;
										border: 1px dotted;
										border-width: 0 0 0 1px;
										border-color: @navSidebarBorder;
									}
									a {
										padding: 7px 0 9px 37px;
										
										&:before {
											content: "";
											display: block;
											width: 7px;
											position: absolute;
											z-index: 1;
											left: 20px;
											top: 17px;
											border: 1px dotted;
											border-width: 1px 0 0;
											border-color: @navSidebarBorder;
										}
									}
								}
							}
							
							&.menu-divider {
								height: 1px;
								margin: 9px 0;
								overflow: hidden;
								background-color: @navSidebarBorder;
								width: 100%;
								a {
									visibility: hidden;
								}
							}
						}
					}
				}
			}
			
			&.mega-menu {
				&:before {
					display: none!important;
				}
				.menu-small-box  {
					color: @navSidebarDropdownLink;
					.item-with-icons {
						border-bottom-style: dotted;
					}
					.menu-name {
						color: @navSidebarDropdownLink;
						span {
							display: block;
						}
					}
				}
			}
			
			.menu-name {
				span {
					display: inline-block;
				}
			}
			// Mega Menu End
			
			
		}

		.arrow {
			float: right;
			text-align: center;
			margin-top: 3px;
		}
		.fa.arrow:before {
			content: "\f104";
		}
		.open > a > .fa.arrow:before {
			content: "\f107";
		}
		.badge, .label {
			position: absolute;
			top: 11px;
			right: 15px;
		}	
		a.accordion-toggle {
			.badge, .label {
				right: 30px;
			}
		}	
		.nav {
			background: @navSidebarDropdownBg;   /* open menu group background */
			
			>li>a {
				padding: 10px 7.5px;
			}
			
			.nav-divider {
				display: none;
			}
		}
	}
    .media {
		padding: 1px 0 2px;		
		.sidebar-shortcuts {
			display: block;
			padding: 10px;
			list-style: none;
			margin-bottom: 0;
			
			li {
				display: inline-block;
				position: relative;
				
				.btn {
					padding: 5px 10px;
					line-height: 1.5;
				}
				
				.badge {
					position:absolute;
					top: -7px;
					right: -1px;
					padding: 3px 5px;
					font-size: 10px;
					border: 0 none;
					color: @white;
				}
			}
				
			a {					
				.fa, .fas, .far, .fal, .fab, .fad {
					font-size: @baseFontSize + 1;
				}
			}
		}
		
	}
	.user-profile {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-flow: column;
		
		padding: 15px 0;
		border-bottom: 1px solid @navSidebarBorder;
		img {
			width: 60px; height: 60px; 
			border: 3px solid @navSidebarBorder;
			border-radius: 4px;
			margin-bottom: 4px;
		}
	}
	.media-search {
		padding: 4px 10px;
		.input-menu {
			border: 1px solid @navSidebarBorder;
			font-size: @baseFontSize - 1;
			color: @gray-light;
			width: 100%;
			background-color: lighten(@sideBar, 4%)!important;
			padding: 7.5px; margin: 4px 0;
			padding-left: 33px!important;
			border-radius: 4px;
			
			 &:focus {
				box-shadow:none;
				outline:0 none;
				transition-duration: 0.1s;
			 }
		}
		
		.input-icon {
			position: relative;
			
			[class*="fa-"], [class^="fa-"], [class*=" glyphicon-"], [class^="glyphicon-"]  {
				display: block;
				position: absolute;
				margin: 14px 2px 4px 10px;
				width: 16px;
				min-width: 16px;
				height: 16px;
				font-size: 16px;
				color: @navSidebarIconColor;
			}
		}
		
		
	}
	.media, .media-search, .sidebar-labels {
		border-bottom: 1px solid @navSidebarBorder;
	}
	
	&.no-sidebar {
		display: none;
			
		&:hover, &:focus {
			display: none;
		}
	}
	&.primary {
		background-color: @themeColor;
	}
	&.primary, &.dark {
		.logo {
			color: @DarknavSidebarLink;
		}
		.side-nav {
			li {
				> a {
					color: @DarknavSidebarLink;
					background-color: @themeColor;
		
					.fa, .glyphicon {
						color: @DarknavSidebarIconColor;
					}
					&.active {
						border-color: @themeColor;
						color: @DarknavSidebarActive;
			
						.fa, .fas, far, .fal, .fab, .fad, .glyphicon {
							color: @DarknavSidebarActive;
						}		
						&:after {
							border-color: transparent @themeColor transparent transparent;
						}
						
						&:hover, &:focus {
							border-color: @themeColor;
						}
					}
					&:hover, &:focus, &:active {
						.mtext {
							color: @DarknavSidebarLinkHover;
						}
					}
				}
		  
				&.panel {
					ul li {					
							&:before {
								border-color: @DarknavSidebarBorder;
							}
			  
						a {
							color: @DarknavSidebarDropdownLink;
							background-color: transparent;
				
							&.active {
								color: @DarknavSidebarActive;
							}
							
							&:before {
								border-color: @DarknavSidebarBorder;
							}

						}
			  
						a:hover, a:focus, a:active {
							color: @DarknavSidebarLinkHover;
						}
					}
					
					&.open {
						a {
							background-color: @DarknavSidebarDropdownBg;
							.mtext {
								color: @DarknavSidebarLinkHover;
							}
						}
						.fa, .fas, far, .fal, .fab, .fad, .glyphicon {
							color: @DarknavSidebarLinkHover;
						}
					
						li {
							.fa, .fas, far, .fal, .fab, .fad, .glyphicon {
								color: @DarknavSidebarIconColor;
							}				
						}
					}
				}
			}	
			.nav {
				background: @DarknavSidebarDropdownBg;   /* open menu group background */
			}
		}
		.user-profile {
			border-bottom: 0 none;
			.action-buttons a {
				color: @DarknavSidebarLink;
			}
			img { 
				border: 3px solid @DarknavSidebarBorder;
			}
		}
		.media-search {
			.input-menu {
				border: 1px solid @DarknavSidebarBorder;
				color: @DarknavSidebarLink;
				background-color: @themeColor!important;
			}
			.input-icon {		
				[class*="fa-"], [class^="fa-"], [class*=" glyphicon-"], [class^="glyphicon-"]  {
					color: @DarknavSidebarIconColor;
				}
			}
		}
		.media, .media-search, .sidebar-labels {
			border-bottom: 0 none;
		}
		.logo-light {
			display: none;
		}
		.logo-dark {
			display: block;
		}
		.sidebar-shortcuts {
			.lang-btn {
				.btn-default {
					color: @DarknavSidebarLink;
				}
			}
		}
	}
	&.dark {
		background-color: @gray-darker;
		.side-nav {
			li {
				> a {
					background-color: @gray-darker;
				}
				&.panel {					
					&.open {
						a {
							background-color: @DarknavSidebarDropdownBg;
						}
					}
				}
			}	
			.nav {
				//background: @gray-darker!important;   /* open menu group background */
			}
		}
		.media-search {
			.input-menu {
				background-color: @gray-darker!important;
			}
		}
	}
}


@media (min-width:992px) {
  .navbar-side {
	border-radius: 0;
	bottom:0; top:0!important;
	-webkit-transform: translateZ(0);
	z-index: 1037;
	min-height: 100vh;

  }
}

@media (max-width: 991px) {
	.navbar-side {
		margin: 0;
		transform: translateX(-(@navSideWidth + 10));
		-webkit-transition: -webkit-transform 0.2s linear 0s, max-height 0s linear 0.2s;
		-moz-transition: -moz-transform 0.2s linear 0s, max-height 0s linear 0.2s;
		-o-transition: -o-transform 0.2s linear 0s, max-height 0s linear 0.2s;
		transition: transform 0.2s linear 0s, max-height 0s linear 0.2s;
			
		&.display {
			transform:none!important;
		}
		
		&.sidebar-light {
			box-shadow: 2px 1px 2px 0 rgba(0,0,0,0.15);
		}
	}
}