GSYH/WebRoot/static/ace/css/less/sidebar/responsive-3.less

.enable_collapsible_responsive_menu() when(@enable-collapsible-responsive-menu = true) {

//3rd style responsive menu (the collapsible menu)

@media only screen and (min-width: @grid-float-breakpoint) {
 .sidebar.navbar-collapse {
	max-height: none;
 }
}

@media only screen and (max-width: @grid-float-breakpoint-max) {
 .sidebar.navbar-collapse {
	position: relative;
	float: none !important;//to override .rtl's
	margin-top: auto !important;//to override inline h-sidebar margin-top!
	z-index: 1;//for box-shadow to be visible

	width: 100% !important;
	max-height: @pre-scrollable-max-height;
	margin-left: 0;
	margin-right: 0;

	&:before {
		display: none;
	}

	.nav-list > li:last-child {
		border-bottom-width: 0;
	}
	.nav-list > li > a {
		padding-top: 10px !important;//to override .compact, etc
		padding-bottom: 10px !important;

		line-height: 20px;
		height: @nav-item-height + 2;
	}
	.nav-list > li:before {
		height: @nav-item-height + 4;
	}
	.nav-list > li.active:after {
		display: none;
	}

	//-li > .arrow
	li > .arrow {
		display: none !important;
	}

	.nav-list li > .submenu {
		border-left-width: 0;
	}

	.sidebar-toggle {
		display: none;
	}
	.sidebar-shortcuts {
		padding: 3px 0 6px;
		max-height: none;
		border-bottom-width: 0;
	}

	+ .main-content {
		margin-left: 0 !important;
		margin-right: 0 !important;//to override rtl's
		.breadcrumb {
			margin-left: @breadcrumb-margin-left;
		}
	}
	
	//first sidebar scroll style
	.nav-wrap + .ace-scroll {
		display: none;
	}

	&.menu-min {
		.nav-list > li > .submenu {
			position: relative;
			left: auto;
			top: auto;
			width: auto;
			z-index: auto;
			
			margin-top: auto;
			padding-top: 0;
			padding-bottom: 0;

			border-width: 1px 0 0 0 !important;
			.box-shadow(none) !important;//to override .rtl's

			&:before {
				display: block;
			}
			> li:before {
				display: block;
			}
			li > a  {
				> .menu-icon {
					left: 10px;
				}
			}
			
			//hide the extra pixel
			&:after {
				display: none;
			}
		}
		
		.nav-list > li > .submenu li > a {
			padding: 7px 0 9px 37px;
		}
		.nav-list > li > .submenu li > .submenu > li > a {
			margin-left: 20px;
			padding-left: 22px;
		}
		.nav-list > li > .submenu li > .submenu > li > .submenu > li > a {
			margin-left: 20px;
			padding-left: 38px;
		}
		
		
		
		.nav-list > li > a:hover:before {// the left side border on hover
			width:3px;
		}
		
		.nav-list > li > a {
			text-align: left;
			padding-left: 7px;
		}
		.nav-list > li > a > .menu-icon {
			display: inline-block;
			width: auto;
			margin-right: 2px;
		}
		.nav-list > li > a > .menu-text {
			position: relative;
			display: inline;
			line-height: normal;
			padding-left: 0;
			height: auto;
						
			top: auto;
			left: auto;
			z-index: auto;
			width: auto;

			border-width: 0 !important;
			background-color: transparent !important;

			.box-shadow(none) !important;
		}
		.nav-list a > .arrow {
			display: block;
		}
		
		.nav-list > li:hover > .submenu {
			display: none !important;
		}
		.nav-list > li.active > .submenu	{
			display: block !important;
		}
		.nav-list > li > .submenu.nav-show {
			display: block !important;
		}
		.nav-list > li > .submenu.nav-hide {
			display: none !important;
		}

		.sidebar-shortcuts-large {
			display: block;
			position: static;
			.box-shadow(none) !important;//to override .rtl's;
			border-width: 0 !important;
			background-color: transparent !important;
			width: auto;

			padding: 0;//override that of .menu-min
		}
		.sidebar-shortcuts-mini {
			display: none;
		}
	}//menu-min


	.nav-list a {
	  .badge , .label {
		position: relative;
		top: -1px;
		right: auto;
		left: 4px;
	  }
	}

	.nav-list > li.active:after, 
	.nav-list li.active > a:before,
	.nav-list li.active > a:after {
		display: none !important;
	}

	
	//.highlight
	.nav-list > li.highlight.active > a {
		&:before, &:after {
			display: none !important;
		}
	}
 }
}


//
@media (max-width: @grid-float-breakpoint-max) and (max-height: 400px){
 .sidebar.navbar-collapse {
	max-height: 300px;
 }
}
@media (max-width: @grid-float-breakpoint-max) and (max-height: 350px){
 .sidebar.navbar-collapse {
	max-height: 250px;
 }
}
@media (max-width: @grid-float-breakpoint-max) and (max-height: 300px){
 .sidebar.navbar-collapse {
	max-height: 200px;
 }
}
@media (max-width: @grid-float-breakpoint-max) and (max-height: 250px){
 .sidebar.navbar-collapse {
	max-height: 150px;
 }
}


.enable_hover_submenu_responsive_style_3() when(@enable-submenu-hover = true) {
@media (min-width: @screen-hover-menu) and (max-width: @grid-float-breakpoint-max) {
  .sidebar.navbar-collapse {
	.nav-list > li > .submenu li.hover > .submenu > li > a,
	.nav-list > li > .submenu li > .submenu > li.hover > .submenu > li > a {
			margin-left: 20px !important;
	}
  }
}
}
.enable_hover_submenu_responsive_style_3();


 //if .sidebar is .navbar-collapse, and .navbar is fixed, make .sidebar fixed as well
 @media (max-width: @grid-float-breakpoint-max) {
   .navbar-fixed-top + .main-container .sidebar.navbar-collapse {
		position: fixed;
		z-index: @zindex-sidebar-fixed;
   }
 }
 @media (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) {
   .navbar-fixed-top + .main-container.container .sidebar.navbar-collapse {
		width: @container-sm !important;
   }
 }

}
.enable_collapsible_responsive_menu();