angular2-simple-ui/public/css/nav.less

Angular 2 Simple Material Design UI Components customisable with Simple 30 KB CSS with LESS support and full features support , just plugin up and run for clarity look at sample examples

ul.sui-ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	li {
		border-bottom: 1px solid @border;
		padding: 6px 2px 6px 16px;
		&:last-child {
			border-bottom: none;
		}
	}
}
.sui-nav-icon {
    border-radius: 31px;
    text-align: center;
    padding: 11px 9px;
    font-size: 20px;
    border: @nav-icon-border;
    background-color: @nav-icon-background-color;
}
.sui-navbar {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: @navbar-bg;
	li {
		a {
			color: @nav-link-color;
			display: block;
			opacity: 0.4;
			 padding: 13px;
			&:hover {
				background-color: @navbar-hover-bg-color;
				color: @navbar-hover-color;
				border-bottom: @navbar-hover-border-bottom;
				border-top: @navbar-hover-border-top;
				border-right: @navbar-hover-border-right;
				border-left: @navbar-hover-border-left;
				
			}
			&:acive {
				opacity:1;
				background-color: @navbar-active-bg-color;
				color: @navbar-active-color;
				border-bottom: @navbar-active-border-bottom;
				border-top: @navbar-active-border-top;
				border-right: @navbar-active-border-right;
				border-left: @navbar-active-border-left;
			}
		
		}
		
	}
		.img {
				padding: 8px;
				float: left;
				opacity: 1;
			}
	.sui-brand {
			color: @navbar-brand-color;
			opacity: 1;
			font-size: 20px;
			float: left;
			padding: 8px 16px;
			list-style-type: none;
			text-decoration: none;			
		}
		.sui-active {
			opacity:1;
				background-color: @navbar-active-bg-color;
				color: @navbar-active-color;
				border-bottom: @navbar-active-border-bottom;
				border-top: @navbar-active-border-top;
				border-right: @navbar-active-border-right;
				border-left: @navbar-active-border-left; 
		}
		
	.sui-dropdown-hover {
		position: static;
		&:hover {
			background-color: @navbar-hover-bg-color;
			color: @navbar-hover-color;
		}
		&:first-child {
			background: @navbar-bg;
			color: @nav-link-color;
		}
	}
	.sui-dropdown-click {
		position: static;
		&:hover {
			background-color: @navbar-hover-bg-color;
			color: @navbar-hover-color;
		}
	}
	.sui-opennav.sui-right {
		float: right!important;
	}
}
.sui-navitem {
	display: block;
	padding: 8px 16px;
}
.sui-navbar a, .sui-topnav a, .sui-sidenav a, .sui-dropdown-content a, .sui-accordion-content a, .sui-dropnav a  {
	text-decoration: none!important;
}
.sui-topnav {
	padding: 8px 8px;
	a {
		-webkit-transition: border-bottom .3s;
		border-bottom: 3px solid transparent;
		padding: 0 8px;
		transition: border-bottom .3s;
		color: @nav-link-color;		
		&:hover {
			border-bottom: 3px solid @bg-color;
		}
	}
	.sui-dropdown-hover {
		a {
			border-bottom: 0;
		}
	}
}
.sui-opennav {
	color: inherit;
	&:hover {
		cursor: pointer;
		opacity: 0.8;
	}
}
.sui-closenav {
	color: inherit;
	&:hover {
		cursor: pointer;
		opacity: 0.8;
	}
}
.sui-sidenav {
	background: @navbar-bg;
	height: 100%;
	overflow: auto;
	position: fixed!important;
	width: 200px;
	z-index: 1;
	list-style-type: none;
	margin: 0;
	padding: 0;
	a {
		    color: @nav-link-color;
			display: block;
			opacity: 0.4;
			padding: 4px;
			&:hover {
				background-color: @navbar-hover-bg-color;
				color: @navbar-hover-color;
				border-bottom: @navbar-hover-border-bottom;
				border-top: @navbar-hover-border-top;
				border-right: @navbar-hover-border-right;
				border-left: @navbar-hover-border-left;
				
			}
			&:acive {
				opacity:1;
				background-color: @navbar-active-bg-color;
				color: @navbar-active-color;
				border-bottom: @navbar-active-border-bottom;
				border-top: @navbar-active-border-top;
				border-right: @navbar-active-border-right;
				border-left: @navbar-active-border-left;
			}
	}
	.sui-dropdown-hover {
		width: 100%;
		.sui-dropdown-content {
			min-width: 100%;
		}
	}
	.sui-dropdown-click {
		width: 100%;
		.sui-dropdown-content {
			min-width: 100%;
		}
	}
}
.sui-dropnav {
	a {
		display: block;
	}
}
.sui-sidenav .sui-dropdown-hover:hover, .sui-sidenav .sui-dropdown-hover:first-child, .sui-sidenav .sui-dropdown-click:hover, .sui-dropnav a:hover  {
	background: @navbar-bg;
	color: @nav-link-color;
}

@media @mobile {
    .sui-topnav a {
        display: block
    }
    .sui-navbar li:not(.sui-opennav) {
        float: none;
        width: 100%!important
    }
    .sui-navbar li.sui-right {
        float: none!important
    }
}

@media @mobile {
    .sui-topnav .sui-dropdown-hover .sui-dropdown-content,
    .sui-navbar .sui-dropdown-click .sui-dropdown-content,
    .sui-navbar .sui-dropdown-hover .sui-dropdown-content {
        position: relative
    }
}

@media @mobile {
    .sui-topnav,
    .sui-navbar {
        text-align: center
    }
}

@media @tablet {
    .sui-sidenav.sui-collapse {
        display: none
    }
}

@media @desktop {
    .sui-sidenav.sui-collapse {
        display: block!important
    }
}

@media @desktop-xl {
    .sui-sidenav.sui-collapse {
        display: block!important
    }
}