GSYH/WebRoot/static/ace/css/less/sidebar/horizontal.less

@h-sidebar-background: @nav-item-background;
@h-sidebar-preground: #E4E4E4;
@h-sidebar-preshadow: ~"0 -1px 1px 0 rgba(0, 0, 0, 0.05) inset";

@h-nav-item-border-active: #79B0CE;
@h-nav-item-border-hover: #CEDDE5;

@h-navbar-shadow: ~"0 2px 4px 0 rgba(0, 0, 0, 0.25)";


.enable_horizontal_menu() when (@enable-horizontal-menu = true) {
	@media only screen and (min-width: @grid-float-breakpoint) {
	 .navbar.h-navbar {
		.box-shadow(@h-navbar-shadow);
	 }

	 .sidebar.h-sidebar {
		position: relative;
		float: none !important;
		width: auto;// !important;
		margin-top: 17px;

		border-width: 0 !important;
		box-shadow: none;
		
		&.menu-min, &.compact {
			width: auto;
		}

		&.sidebar-fixed {
			position: fixed;
		}
		&.no-gap {
			margin-top: auto;
			.nav-list {
				padding-top: 3px;
			}
		}

		&:before {
			display: block;
			position: absolute; 
			z-index: -1;

			left:0 !important;
			right: 0 !important;
			top: -17px;
			bottom: auto;

			height: 17px;
			width: auto;

			border-width: 0;
			border-bottom: 1px solid; 
			border-bottom-color: inherit;
		}

		&.lower-highlight .nav-list > li:before {
			top: 0;
		}
		.main-content & .nav-list > li:before {
			top: 0;
		}

		.nav-list {
			border-width: 0;
			border-bottom: 2px solid @h-nav-item-border-active;
		}
		.nav-list > li {
			float: left;

			border-width: 0 0 0 1px;
			margin-left: 0;
			
			&:last-child {
				border-right-width: 1px;
			}

			//the hover highlight line
			&:before {
				left: -1px;
				right: -1px;
				bottom: auto;
				top: -2px;

				max-width: none;
				width: auto; 
				height: 2px;

				border-width: 0;
			}
			&.active:before {
				display: block;
			}
			&.active:after {
				display: none;
			}

			//&:hover, &.hover-show {
				//z-index: @zindex-submenu;
			//}
			//&.active {
				//z-index: @zindex-submenu + 1;
			//}
		}
	
		.nav-list > li:first-child {
			border-left-width: 0;
			margin-left: 0
		}
		.sidebar-shortcuts + .nav-list > li:first-child {
			border-left-width: 1px;
			margin-left: -1px;
		}

		//!importants are for overriding .menu-min and .compact
		.nav-list > li > a {
			line-height: 22px;
			height: auto;

			padding: 10px 14px;
			
			> .menu-icon {
				display: block;
				margin: 1px 0 4px;
				line-height: inherit;
				width: auto;
			}
			
			> .arrow {
				display: none;
			}
		}




		//hover submenu
		.nav-list > li.hover {
			&.pull_right {
				float: none !important;
			}
			> .submenu {
				top: 100%;
				left: 1px;
				margin-top: auto;
				margin-left: -2px;
				width: @sidebar-width;
				z-index: @zindex-submenu;
			}
			&.pull_right > .submenu {
				left: auto;
				right: 1px;
			}

			//-li > .arrow
			> .arrow {
				right: auto;
				top: auto;
				left: 24px; 
				bottom: 7px;
			}
			&.pull_right > .arrow {
				left: auto;
				right: 24px;
			}

			
				> .arrow:before, > .arrow:after {
					border-width: 0 8px 8px !important;
				}
				> .arrow:after {
					border-color: transparent;
					//!importants are for overriding .menu-min+.rtl
					border-left-color: transparent !important;
					border-right-color: transparent !important;
					
					-moz-border-right-colors: none !important;
					-moz-border-left-colors: none !important;
					-moz-border-top-colors: none;
					-moz-border-bottom-colors: none;
				
					left: -10px !important;
					right: auto !important;
				}
				> .arrow:before {
					border-color: transparent;
					//!importants are for overriding .menu-min+.rtl
					border-left-color: transparent !important;
					border-right-color: transparent !important;
	
					-moz-border-right-colors: none !important;
					-moz-border-left-colors: none !important;
					-moz-border-top-colors: none;
					-moz-border-bottom-colors: none;

					right: auto !important;
					left: -10px !important;
					top: -1px !important;
				}


			&:hover > a ~ .arrow , &.hover-show > a ~ .arrow {
				display: none;
			}
			&:hover > a.dropdown-toggle ~ .arrow , &.hover-show > a.dropdown-toggle ~ .arrow {
				display: block;
			}
		}	
		
		
		//hover flip is when horizontal menu is shown on opposite direction so that it doesn't go out of window!
		.nav-list > li.hover-flip > .submenu {
			left: auto;
			right: 1px;
			
			margin-left: auto;
			margin-right: -2px;
		}
		.nav-list > li.hover-flip > .arrow {
			left: auto;
			right: 24px;
		}
		
		.nav-list li li.hover-flip > .submenu {
			left: auto;
			right: 100%;
			
			margin-left: auto;
			margin-right: -2px;
		}
		.nav-list li li.hover-flip > .arrow {
			filter: ~"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
			.transform(~"scale(-1, 1)");
			left: 0;
			right: auto;
		}
		

		

		//add an arrow to shortcuts dropdown like //-li > .arrow
		.sidebar-shortcuts-large {
			&:before, &:after {
				display: block;
				content: "";
				position: absolute;
				 
				left: 50%;			
				margin-left: -8px;
				 
				border: 1px solid transparent;
				border-width: 0 8px 8px;
			}
		}
		.sidebar-shortcuts-large:after {
			//border-bottom-color: #FFF;
			border-right-color: transparent;
			
			//-moz-border-bottom-colors: #FFF;
			-moz-border-right-colors: none;

			top: -8px;
		}
		.sidebar-shortcuts-large:before {
			-moz-border-bottom-colors: #CCC;
			border-bottom-color: #CCC;

			top: -9px;
		}


		
		.sidebar-toggle {
			position: absolute;
			top: 12px;
			right: 6px;
			background-color: transparent;
			border-width: 0;
		}
		.sidebar-shortcuts {
			float: left;
			display: block;
			overflow: visible;
			position: relative;
	 
			margin: 0;
			padding: 12px 8px 9px;
			max-height: none !important;
	 
			background-color: transparent;
			
			&:hover .sidebar-shortcuts-large, &.hover-show .sidebar-shortcuts-large {
				display: block;
			}
		}
		.sidebar-shortcuts-large {
			display: none;
			width: 52px;
			height: auto;

			position: absolute;
			z-index: @zindex-submenu - 1;
			top: 100%;
			margin-top: -5px;
			left: 10px;

			padding: 3px 2px;
			border: 1px solid;
		}
		
		.sidebar-shortcuts-mini {
			width:auto;
			max-width: 52px;

			display: block;
			background-color: transparent;
			padding-top: 3px;
			padding-bottom: 5px; // for .sidebar-shortcuts-large:"margin-top: -5px" to work, so that as soon as mouse is inside .sidebar-shortcuts, ".sidebar-shortcuts-large" is displayed

			> .btn {
				padding: 9px;
			}
		}
		


		.nav-list a .badge, .nav-list a .label {
			position: absolute;
			top: 11px;
			right: auto !important;
			left: 50%;
			margin-left: 10px;
		}

		
		
		+ .main-content {
			margin-left: 0;
			.breadcrumbs {
				margin: 6px 9px;
				border: 1px solid;
				//.no-skin & {
					border-color: #E5E5E5;
				//}

				@media (max-width: @grid-float-breakpoint-max) {
					& {	
						margin: 0; 
						border-width: 0 0 1px;
					}
				}
			}
		}


	 }//.h-sidebar



	 .h-sidebar.sidebar-fixed {
		//z-index: 1000;
		top: auto;
		width: 100%;
		left:0; 
		right: 0;
		&:before {
			z-index: auto;
		}
		
		&  , .nav-list {
			border-right-width: 0;
			border-left-width: 0;
		}
		.sidebar-shortcuts  {
			border-width: 0;
		}
	 }
	 
	 .h-sidebar.sidebar-fixed {
		+ .main-content {
			padding-top: 88px;
		}
		&.no-gap + .main-content {
			padding-top: 74px;
		}
		
		&.menu-min + .main-content {
			padding-top: 63px;
		}
		&.menu-min.no-gap + .main-content {
			padding-top: 49px;
		}
	 }
	}//@media




	.enable_container_horizontal_menu() when(@enable-container = true) {
	//inside .container
	.main-container.container .h-sidebar.sidebar-fixed  {
		left: 0;// !important;
		right: 0;// !important;
		width: auto;// !important;
	}

	@media (min-width: @screen-sm-min) {
	 .main-container.container .h-sidebar.sidebar-fixed {
		left: auto !important;
		right: auto !important;
		width: @container-sm;// !important;
	 }
	}
	@media (min-width: @screen-md-min) {
	 .main-container.container .h-sidebar.sidebar-fixed {
		width: @container-md;// !important;
	 }
	}
	@media (min-width: @screen-lg-min) {
	 .main-container.container .h-sidebar.sidebar-fixed {
		width: @container-lg;// !important;
	 }
	}

	/**
	@media (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) {
	 .main-container.container .sidebar.sidebar-fixed
	 {
		left: auto;// !important;
		right: auto;// !important;
		width: @container-sm;// !important;
	 }
	}


	@media (max-width: @grid-float-breakpoint-max) {
		.main-container.container .sidebar.sidebar-fixed {
			.sidebar-shortcuts {
				max-height: none;
				border-bottom-width: 0;
			}
		}
	}
	*/
	}
	.enable_container_horizontal_menu();


	
	
  @media (min-width: @grid-float-breakpoint) {
	
	.sidebar.h-sidebar {
		
		&.menu-min {
			&, &.compact {//compact here to override RTL's
				.nav.nav-list > li > a {
					padding: 9px 12px;
				}
			}
			.nav-list > li > a > .menu-text {
				left: -1px;
				top: 100%;
				width: @hover-submenu-width;
			}
			.nav-list > li > a > .menu-icon {
				margin: 2px 0;
			}
			.nav-list > li.hover > .submenu {
				top: 100%;
				margin-top: @sidebar-menu-min-text-height;
			}
			.nav-list > li.hover {
			  &:hover > a ~ .arrow , &.hover-show > a ~ .arrow {
				display: block;
			  }
			}
			
			.sidebar-toggle {
				top: 6px;
			}
			.sidebar-shortcuts {
				padding: 0;
			}
			.sidebar-shortcuts-mini {
				padding-bottom: 4px;
				padding-top: 4px;
				> .btn {
					padding: 8px;
				}
			}
			.sidebar-shortcuts-large {
				left: 1px;
				margin-top: 4px;
			}
		}
		
		&.compact {
			.nav-list > li > a > .menu-icon {
				font-size: @nav-item-icon-size;
				height: auto;
			}
			&.menu-min .nav-list > li > a {
				height: auto;
				line-height: 22px;
			}
		}
	}
  }

}
.enable_horizontal_menu();




/**
@media only screen and (max-width: @grid-float-breakpoint-max) {
	.menu-toggler + .sidebar.h-sidebar {
		margin-top: (@breadcrumb-height - 1) !important;
	}
	.sidebar.h-sidebar.responsive-min , .sidebar.h-sidebar.navbar-collapse {
		margin-top: auto !important;
	}
}
*/