GSYH/WebRoot/WEB-INF/classes/static/ace/css/less/skins/no-skin.less

@menumin-submenu-top-border: lighten(@menumin-border , 10%);

.no-skin {
	.navbar .navbar-toggle {
		background-color: #75B3D7;
		&:focus {
			background-color: #75B3D7;
			border-color: transparent;
		}
		&:hover {
			background-color: darken(#75B3D7 , 5%);
			border-color: rgba(255,255,255,0.1);
		}
		
		&.display, &[data-toggle=collapse]:not(.collapsed) {
			background-color: darken(#75B3D7 , 10%);
			box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
			border-color: rgba(255, 255, 255, 0.35);
		}
	}

	.sidebar {
		background-color: @sidebar-background;
		border-style: solid;
		border-color: @sidebar-border;
		border-width: 0 1px 0 0;
	}

	.nav-list .open > a {
		& , &:hover, &:focus {
			background-color: @nav-item-background-open;
		}
	}


	.nav-list > li {
		border-color: @nav-item-border;
		> a {
			background-color: @nav-item-background;
			color: @nav-item-color;
			
			&:focus {
				background-color: @nav-item-background;
				color: @nav-item-color-focus;
			}
		}

		&:hover > a {
			background-color: @nav-item-background-hover;
			color: @nav-item-color-hover;
		}
		
		&.open > a {
			background-color: @nav-item-background-open;
			color: @nav-item-color-focus;
		}
		
		&.active > a {
			font-weight: bold;
			color: @nav-item-color-active;
			& , &:hover, &:focus {
				background-color: @nav-item-background-active;
			}
		}
	}


	//submenu
	.nav-list > li .submenu {
		background-color: @submenu-background;
		border-color: @submenu-border;

		> li > a {
			border-top-color: @submenu-item-border;
			background-color: @submenu-item-background;
			color: @submenu-item-color;
			
			&:hover {
				color: @submenu-item-color-hover;
				background-color: @submenu-item-background-hover;
			}
		}
		> li.active > a {
			color: @nav-item-color-active;
			> .menu-icon {
				color: @submenu-item-icon-active;
			}
		}
		> li.active.open > a > .menu-icon {
			color: inherit;
		}
		
		@media only screen and (min-width: @screen-hover-menu) {
			> li.active.hover > a.dropdown-toggle > .menu-icon {
				color: inherit;
			}
		}


		> li.active:not(.open) > a {
			background-color: @submenu-item-background-active;
			&:hover {
				background-color: @submenu-item-background-hover;
			}
		}
	}

	.nav-list > li > .submenu {
		.open > a, .open > a:hover, .open > a:focus {
			border-color: @submenu-item-border;
		}
		
		li > .submenu > li a{
			color: lighten(@submenu-item-color , 8%);
			&:hover {
				color: @3rd-level-item-color-hover;
				background-color: @3rd-level-item-background-hover;
			}
		}
		
		li.open > a {
			color: @3rd-level-item-color-hover;
		}
		li > .submenu li.open > a , li > .submenu li.active > a {
			color: @3rd-level-item-color-hover;
		}
	}
	
	//the tree line
	.nav-list > li {
		> .submenu:before,
		> .submenu > li:before {
			border-color: @submenu-tree-line-color;
		}
		&.active > .submenu:before,
		&.active > .submenu > li:before	{
			border-color: @submenu-tree-line-color-active;
		}
	}



	//extra
	.sidebar-toggle {
		background-color: @sidebar-toggle-background;
		border-color: @sidebar-toggle-border;

		> .@{icon} {
			border-color: @sidebar-toggle-icon-border;
			color: @sidebar-toggle-icon-color;
			background-color: @sidebar-toggle-icon-background;
		}
	}
	.sidebar-shortcuts {
		background-color: @shortcuts-background;
	}
	.sidebar-fixed .sidebar-shortcuts {
		border-color: @shortcuts-border;
	}
	.sidebar-shortcuts-mini {
		background-color: @submenu-background;
	}



	//-li > .arrow
	.nav-list li > .arrow {
		&:before {
			border-right-color: #B8B8B8;
			-moz-border-right-colors: #B8B8B8;
			
			border-width: 10px 10px 10px 0;
			//because border-width: 10px in firefox doesn't look good
			//but on other skins, it has a bad edge on firefox
			left: -11px;
		}
		&:after {
			border-right-color: @submenu-background;
			-moz-border-right-colors: @submenu-background;
			
			border-width: 10px 10px 10px 0;
			left: -10px;
		}
	}
	.nav-list > li.pull_up > .arrow {
		&:after {
			border-right-color: @submenu-background !important;
			-moz-border-right-colors: @submenu-background !important;
			
			border-width: 10px 10px 10px 0 !important;//to override .menu-min
			left: -10px !important;
		}
		&:before {
			border-width: 10px 10px 10px 0 !important;
			left: -11px !important;
		}
	}



	//active state
	.nav-list li.active > a:after {
		border-right-color: @nav-item-color-active;
		-moz-border-right-colors: @nav-item-color-active;
	}
	//the border on right of active item
	.nav-list > li.active:after {
		display: block;
		content: "";
		position: absolute;
		right: -2px;
		top: -1px;
		bottom: 0;
		z-index: 1;

		border: 2px solid;
		border-width: 0 2px 0 0;
		border-color: @nav-item-color-active
	}
	.sidebar-scroll .nav-list > li.active:after {
		//so that its inside sidebar
		right: 0;
	}

	
	//show active caret only for 1st level item
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		.sidebar.responsive .nav-list > li.active.open > a:after,
		.sidebar.responsive-max .nav-list > li.active.open > a:after
		{
			display: block;
		}
		
		.sidebar.responsive .nav-list li li.active > a:after,
		.sidebar.responsive-max .nav-list li li.active > a:after
		{
			display: none;
		}
		
		.sidebar.responsive .nav-list > li.active:after,
		.sidebar.responsive-max .nav-list > li.active:after
		{
			height: @nav-item-height + 2;
		}
	}




	 //menu min
	.menu_min_no_skin() {
		 .nav-list > li > a {
			> .menu-text {
				background-color: @menumin-text-background;
				.box-shadow(@menumin-shadow1);
				border-color: @menumin-border;
			}
			&.dropdown-toggle > .menu-text {
				.box-shadow(@menumin-shadow2);
			}
		 }
		 .nav-list > li {
			 &.active > .submenu {
				border-left-color: @submenu-border-active;
			 }
		 }
		 .nav-list > li > .submenu {
				background-color: @submenu-background;
				border: 1px solid @menumin-border;
				border-top-color: @menumin-submenu-top-border;
				.box-shadow(@menumin-shadow2);
		 }
		 
		 //-li > .arrow
		.nav-list > li {
			 > .arrow:after {
				border-right-color: @menumin-text-background;
				-moz-border-right-colors: @menumin-text-background;
				
				border-width: 8px 8px 8px 0;
				left: -8px;
			 }
			 > .arrow:before {
				border-width: 8px 8px 8px 0;
				left: -9px;
			 }

			 &.active > .arrow:before {
				border-right-color: darken(@submenu-border-active , 11%);
				-moz-border-right-colors: darken(@submenu-border-active , 11%);
			 }
			 &.active > a > .menu-text {
				border-left-color: @submenu-border-active;
			 }
		}

		
		.sidebar-shortcuts-large {
			background-color: @submenu-background;
			.box-shadow(@menumin-shadow1);
			border-color: @menumin-border;
		}
		.sidebar-toggle > .@{icon} {
			border-color: darken(@sidebar-toggle-icon-border, 4%);
		}
	}

	.enable_sidebar_collapse_no_skin() when(@enable-sidebar-collapse = true) {
		.sidebar.menu-min {
			.menu_min_no_skin();
		}
	}
	.enable_sidebar_collapse_no_skin();
	
	.enable_minimized_responsive_menu_no_skin() when(@enable-minimized-responsive-menu = true) {
		@media (max-width: @grid-float-breakpoint-max) {
			.sidebar.responsive-min {
				.menu_min_no_skin();
			}
		}
	}
	.enable_minimized_responsive_menu_no_skin();




  .enable_hover_submenu_no_skin() when(@enable-submenu-hover = true) {
	//.hover menu
	@media only screen and (min-width: @screen-hover-menu) {
	.nav-list li.hover {
		> .submenu {
			.box-shadow(@menumin-shadow1);
			border-color: @hover-submenu-border;

			> li.active > a {
				background-color: @hover-submenu-background-active;
			}

			> li:hover > a {
				background-color: @hover-submenu-item-background-hover;
				color: @hover-submenu-item-color-hover;
			}

		}
	}
	}

	
   .enable_collapsible_responsive_hover_menu_no_skin() when(@enable-collapsible-responsive-menu = true) {
	@media only screen and (min-width: @screen-hover-menu) and (max-width: @grid-float-breakpoint-max) {
	 .sidebar.navbar-collapse {
		.nav-list li li.hover.active.open > a {
			background-color: @nav-item-background-active;
		}
		//in wide view when we hover a submenu item, its parent LI > A are highlighted, but not needed in small view
		//so remove "li.hover:hover > a" highlight
		.nav-list li li.hover:hover > a {
			background-color: @submenu-item-background;
		}
		//and instead highlight "li.hover > a:hover"
		.nav-list li li.hover > a:hover,
		.nav-list li li.hover.open > a:hover,
		.nav-list li li.hover.open.active > a:hover {
			background-color: @submenu-item-background-hover;
		}

		//active submenu item icon is red
		.nav-list > li .submenu > li.active.hover > a.dropdown-toggle > .menu-icon {
			color: @submenu-item-icon-active;
		}
		//active submenu item icon inherits color
		.nav-list > li .submenu > li.active.open.hover > a.dropdown-toggle > .menu-icon {
			color: inherit;
		}

	  }
	}

	//sometimes .hover items are opened in small view, and back in large view we reset the highlight state
	@media only screen and (min-width: max(@screen-hover-menu, @grid-float-breakpoint)) {
	  .sidebar.navbar-collapse {
		.nav-list > li.open.hover:not(:hover):not(:focus):not(.active) > a {
			color: @nav-item-color;
			> .arrow {
				color: inherit;
			}
		}
		.nav-list > li.open.hover:hover > a {
			background-color: @nav-item-background-hover;
		}

		.nav-list > li > .submenu li.open.hover:not(:hover):not(:focus):not(.active) > a {
			color: @submenu-item-color;
			> .arrow {
				color: inherit;
			}
		}
	  }
	}//@media
	//reset .hover to normal
	@media only screen and (min-width: @screen-hover-menu) and (max-width: @grid-float-breakpoint-max) {
		.sidebar.navbar-collapse {
			.nav-list li.hover > .submenu {
				border-top-color: @submenu-border;
				background-color: @submenu-background;
			}
		}
		
		.nav-list li.hover > .submenu > li.active:not(.open) > a {
			background-color: @submenu-item-background-active;
			&:hover {
				background-color: @submenu-item-background-hover;
			}
		}
	}
   }
   .enable_collapsible_responsive_hover_menu_no_skin();

	
  }
  .enable_hover_submenu_no_skin();




	//horizontal
	.enable_horizontal_menu_no_skin() when(@enable-horizontal-menu = true) {
	  @media only screen and (min-width: @grid-float-breakpoint) {
		 .sidebar.h-sidebar {
			background-color: @h-sidebar-background;
			&:before {
				background-color: @h-sidebar-preground;
				.box-shadow(@h-sidebar-preshadow);
			}

			.nav-list > li {
				&:hover , &:hover + li {
					border-left-color: @h-nav-item-border-hover;
				}
				&:last-child:hover {
					border-right-color: @h-nav-item-border-hover;
				}
				&.active , &.active + li , &:hover + li.active {
					border-left-color: @h-nav-item-border-active;
				}
				&.active:last-child {
					border-right-color: @h-nav-item-border-active;
				}
			}
			.nav-list > li.active:before {
				background-color: @nav-item-color-active;//#2B7DBC;
			}
			
			//a white line on bottom of active item to cover the blue separator
			.nav-list > li.active > a:after {
				border-width: 0 0 2px 0;
				border-color: transparent;
				border-bottom-color: #FFF;

				left: 0;
				right: 0;
				top: auto;
				bottom: -2px;
			}

			
			
			.sidebar-shortcuts-large {
				background-color: #FFF;
				border-color: @menumin-border;
				.box-shadow(~"2px 1px 2px 0 rgba(0,0,0,0.1)");
			}
			.sidebar-shortcuts-large:after {
				border-bottom-color: #FFF;
				-moz-border-bottom-colors: #FFF;
			}
		 }

		 .sidebar.h-sidebar {
			.nav-list > li.hover {
				> .submenu {
					border-color: @hover-submenu-border;
				}
			}
			&.menu-min {
				.nav-list > li.hover {
					> .submenu {
						border-top-color: @menumin-submenu-top-border;
					}
				}				
			}

			.nav-list > li.hover {
				> .arrow:after {
					border-color: transparent;
					-moz-border-right-colors: none;
					-moz-border-top-colors: none;
					-moz-border-left-colors: none;					

					border-bottom-color: #FFF;
					-moz-border-bottom-colors: #FFF;
				}
				> .arrow:before {
					border-color: transparent;
					-moz-border-right-colors: none;
					-moz-border-top-colors: none;
					-moz-border-left-colors: none;

					-moz-border-bottom-colors: #B8B8B8;
					border-bottom-color: #B8B8B8;
				}
			}
			
			
			&.menu-min .nav-list > li.hover > .arrow:after {
				-moz-border-bottom-colors: #F5F5F5;
				border-bottom-color: #F5F5F5;
			}
			&.menu-min .nav-list > li.active > a > .menu-text {
				border-left-color: @menumin-border;
			}
		}
	  }
	}
	.enable_horizontal_menu_no_skin();



	@media only screen and (max-width: @grid-float-breakpoint-max) {
		.sidebar {
			border-width: 0 1px 1px 0;
			border-top-color: lighten(@sidebar-border , 4%);
		}
		.menu-toggler + .sidebar.responsive {
			border-top-width: 1px;
		}

		.sidebar.responsive-min {
			border-width: 0 1px 0 0;
		}

		.sidebar.navbar-collapse {
			border-width: 0;
			border-bottom-width: 1px !important;//to override .rtl's
			border-bottom-color: @sidebar-border;
			.box-shadow(~"0 2px 2px rgba(0, 0, 0, 0.1)") !important;//to override .rtl's
			
			&.menu-min {
				.nav-list > li > .submenu {
					background-color: @submenu-background;
				}
			}
		}
	}//@media
	

	
	.sidebar-scroll {
	 .sidebar-shortcuts {
		border-bottom-color: darken(@nav-item-border , 3%);
	 }
	 .sidebar-toggle {
		border-top-color: darken(@nav-item-border , 3%);
	 }
	}




	.enable_old_menu_toggle_button_no_skin() when(@enable-old-menu-toggle-button = true) {
	  .main-container .menu-toggler {
		background-color: @sidebar-toggler-background;
		&:before {
			border-top-color: @sidebar-toggler-line-1;
			border-bottom-color: @sidebar-toggler-line-2;
		}
		
		&:after {
			border-top-color: @sidebar-toggler-line-3;
			border-bottom-color: @sidebar-toggler-line-4;
		}
		> .toggler-text {
			border-top-color: @sidebar-toggler-background;
			-moz-border-top-colors: @sidebar-toggler-background;
		}
	  }
	}
	.enable_old_menu_toggle_button_no_skin();
	
	
	
	//disabled state
	.nav-list > li.disabled:before {
		display: none !important;
	}
	.nav-list > li.disabled > a {
		background-color: darken(@nav-item-background, 5%) !important;
		color: lighten(@nav-item-color, 5%) !important;
	}
	
	
	.nav-list li .submenu > li.disabled > a,
	.nav-list li.disabled .submenu > li > a {
		background-color: darken(@submenu-item-background, 5%) !important;
		color: desaturate(lighten(@submenu-item-color, 10%), 10%) !important;
		cursor: not-allowed !important;
		> .menu-icon {
			display: none;
		}
	}
	/**
	.nav-list > li.disabled.active:after {
		border-color: #999;
	}
	.nav-list li.disabled li.active > a:after,
	.nav-list li.active.disabled > a:after {
		-moz-border-right-colors: #999 !important;
		border-right-color: #999 !important;
	}
	*/
	
}//.no-skin


//hover highlight
@import "../sidebar/highlight.less";