angular2-boiler-plate/public/css/nav.less

Angular 2 Boiler plate that integrated with WebPack, TypeScript, DatePicker, RxJs for Reactive Extensions in Java Script , Karma , Jasmine for unit testing , WebKit ,protractor e2e testing

@import 'variables.less';


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-navbar {
	list-style-type: none;
	margin: 0;
	overflow: hidden;
	background: @navbar-bg;
	
	padding: 0;
	li {
		float: left;
		a {
			color: @nav-link-color;
			display: block;
			opacity: 1;
			padding: 8px 16px;
			&:hover {
				background-color: @navbar-hover-bg-color;
				color: @navbar-hover-color;
			}
		}
	}
	.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;
	a {
		display: block;
		padding: 4px 2px 4px 16px;
		color: @nav-link-color;
		&:hover {
			background-color: @navbar-hover-bg-color;
		}
	}
	.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
    }
}