GSYH/WebRoot/static/ace/css/less/tab-accordion.less

@accordion-border:#CDD8E3;
@accordion-header-text:@ace-blue;
@accordion-header-text-hover:#6EA6CC;
@accordion-header-hover-bg:#F1F8FD;
@accordion-active-bg:#EEF4F9;


.enable_tabs() when(@enable-tabs = true) {

.tab-content {
 border: 1px solid @tab-border;
 padding: 16px 12px;
 position: relative;
 //z-index:11;
}
.tab-content.no-padding {
 padding:0;
}
.tab-content.no-border {
  border:none;
  padding:12px;
}
.tab-content {
 .tab-paddingX (@index) when (@index >= 0) {
	&.padding-@{index} { padding:unit(@index,px) unit(ceil(@index * 0.75),px); }
	&.no-border.padding-@{index} { padding:unit(@index,px); }
	.tab-paddingX(@index - 2);
  }
  .tab-paddingX(32);
}


.nav.nav-tabs {
 .navtab-paddingX (@index) when (@index > 0) {
	&.padding-@{index} { padding-left:unit(@index,px); }
	.tabs-right > &.padding-@{index} , .tabs-left > &.padding-@{index} { padding-left:0; padding-top:unit(@index,px); }	
	.navtab-paddingX(@index - 2);
  }
  .navtab-paddingX(32);
}


.nav-tabs {
  border-color: #C5D0DC;
  margin-bottom: 0 !important;//to override .rtl's
  margin-left: 0;
  position: relative;
  top: 1px;
  
  > li {
    > a {
		padding: 7px 12px 8px;
		
		&,&:focus {
			border-radius: 0 !important;
			border-color: @tab-border;

			background-color: #F9F9F9;
			color: #999;

			margin-right: -1px;
			line-height: 18px;
	 
			position:relative;
			//z-index:11;
		}
		&:hover {
			background-color: #FFF;
			color: @tab-hover-color;
			border-color: @tab-border;
		}
		&:active, &:focus {
			outline:none !important;
		}
	}//a
	
	&:first-child > a {
		margin-left:0;
	}
	
	&.active > a{
		&,&:hover,&:focus {
			color: @tab-active-color;
			border-color: @tab-border;
			border-top: 2px solid @tab-active-border;
			border-bottom-color: transparent;
			background-color: #FFF;

			z-index: 1;
			line-height: 18px;
			margin-top: -1px;

			box-shadow: 0 -2px 3px 0 rgba(0,0,0,0.15);
		}
	}

   }


   .enable_tab_positions() when(@enable-tab-positions = true) {
	.tabs-below > & {
	   /* tabs below */
		top:auto;
		margin-bottom:0;
		margin-top:-1px;
		border-color:@tab-border;
		border-bottom-width:0;
		
		> li {
			> a {
				&,&:hover,&:focus {
					border-color:@tab-border;	
				}
			}
			
			&.active > a {
				&,&:hover,&:focus {
					 border-color:@tab-border;
					 border-top-width:1px;
					 border-bottom:2px solid @tab-active-border;
					 border-top-color:transparent;

					 margin-top:0;
					 box-shadow: 0 2px 3px 0 rgba(0,0,0,0.15);
				}
			}
		}
	 }
	
	
	 .tabs-left > & > li > a, .tabs-right > & > li > a {
		//tabs left
		min-width:60px;
	 }
	 .tabs-left > & {
		top:auto;
		 margin-bottom:0;
		 border-color:@tab-border;

		 float: left;

		 > li {
			float: none !important;//to override .rtl's
			
			> a {
				&,&:focus,&:hover {
					border-color:@tab-border;
					margin:0 -1px 0 0;
				}
			}
			
			&.active {
				> a {
					& , &:focus , &:hover {
						border-color: @tab-border;
						border-top-width: 1px;
						border-left: 2px solid @tab-active-border;
						border-right-color: transparent;
						margin: 0 -1px 0 -1px;
						 
						.box-shadow(~"-2px 0 3px 0 rgba(0,0,0,0.15)") !important;//to override .rtl's
					}
				}
			}
		 }
	 }
	
	
	
	 .tabs-right > & {
		//tabs right
		top:auto;
		margin-bottom: 0;
		border-color: @tab-border;
		
		float: right;
		
		 > li {
			float: none !important;//to override RTL's
			
			> a {
				&,&:focus,&:hover {
					border-color: @tab-border;
					margin: 0 -1px;
				}
			}
			
			&.active {
				> a {
					&  , &:focus , &:hover {
						border-color: @tab-border;
						border-top-width: 1px;
						border-right: 2px solid @tab-active-border;
						border-left-color: transparent;
						margin: 0 -2px 0 -1px;

						.box-shadow(~"2px 0 3px 0 rgba(0,0,0,0.15)");//to override .rtl's
					}
				}				
			}
		}
	 }
	}
	.enable_tab_positions();
	
	
	
	> li > a {
		//icon and badges
		> .badge {
			padding: 1px 5px;
			line-height: 15px;
			opacity: 0.75;
		}

		> .@{icon} { 
			opacity: 0.75; 
		}
	}

	> li.active > a {
		> .badge , > .@{icon} {
			opacity: 1;
		}
	}
	
	li .@{icon} {
		 width:1.25em;
		 display:inline-block;
		 text-align:center;
	}


	
	> li.open .dropdown-toggle {
		//dropdown in tabs
		background-color: #4F99C6;
		border-color: #4F99C6;
		color: #FFF;
		
		> .@{icon} {
			color:#FFF !important;
		}
	}
}

.tabs-left , .tabs-right {
	.tab-content {
		overflow: auto;
	}
}

.nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover, .nav > li.dropdown.open.active > a:focus  {
	background-color: #4F99C6;
	border-color: #4F99C6;
	color: #FFFFFF; 
	> .@{icon} {
		color:#FFF !important;
	}
}


.enable_tab_options() when (@enable-tab-options = true) {


/* bigger tab buttons */
.nav-tabs > li:not(.active):not(.open) > a:not(:hover) > .@{icon}:first-child.disabled {
 color:#909090 !important;
} 

/* bigger tab buttons */
.nav-tabs.tab-size-bigger > li > a {
	padding-left:14px;
	padding-right:14px;
	
	> .@{icon}:first-child {
		display:block;
		margin-bottom:6px;
		width:auto;
	}	
}




//some tab customizations

//spaced tabs (top & bottom)
.nav-tabs.tab-space-1 > li > a {
	margin-right: 1px;
}
.nav-tabs.tab-space-2 > li > a {
	margin-right: 2px;
}
.nav-tabs.tab-space-3 > li > a {
	margin-right: 3px;
}
.nav-tabs.tab-space-4 > li > a {
	margin-right: 4px;
}


//colored tabs

@tab-color-blue:#7DB4D8;

.nav-tabs[class*="tab-color-"] > li > a {
 & , &:focus, &:hover {
	color: #FFF;
	border-color: transparent;
	margin-right: 3px;
 }

 > .badge {
	.border-radius(2px);
 }
}

.nav-tabs[class*="tab-color-"] > li:not(.active) > a {
	&:hover {
		opacity:0.85;
		border-color:rgba(0,0,0,0.15);
		border-bottom-color:transparent;
	}
	> .@{icon}:first-child{
		color:#FFF !important;
	}
	> .badge{
		color:rgba(0,0,0,0.4) !important;
		background-color:#FFF !important;
		.border-radius(2px);
	}
}

.nav-tabs.tab-color-blue > li > a {
	& , &:focus {
		background-color:@tab-color-blue;
	}
}

.nav-tabs[class*="tab-color-"] > li.active > a {
	& , &:focus, &:hover {
		background-color:#FFF;
		color:darken(desaturate(@tab-color-blue, 20%), 20%);
		.box-shadow(none) !important;
	}
}

.nav-tabs.tab-color-blue > li.active > a {
	& , &:focus, &:hover {
		color:darken(desaturate(@tab-color-blue, 25%), 25%);
		border-color:@tab-color-blue @tab-color-blue transparent;
	}
	.tabs-below  & {
		border-color:transparent @tab-color-blue @tab-color-blue;
	}
}


.nav-tabs.tab-color-blue {
	border-bottom-color:#C5D0DC;
}


/* background for tab links */
.nav-tabs.background-blue {
	padding-top:6px;
	background-color:#EFF3F8;
	border:1px solid #C5D0DC;
}

.tabs-below .nav-tabs.background-blue {
	padding-top:0;
	padding-bottom:6px;
}
.tabs-below .nav-tabs.tab-color-blue {
	border-top:none;
	border-bottom-color:#C5D0DC;
}

}
.enable_tab_options();


}
.enable_tabs();





//accordion
.enable_accordion() when(@enable-accordion = true) {
.accordion-style1.panel-group {
 .panel {
	border-radius: 0;
	border-color: @accordion-border;
	background-color: #FFF;
	box-shadow: none;
 
	&:last-child {
		border-bottom-width: 1px;
	}

	.collapse {
		background-color: #FFF;
	}
	
	+ .panel {
		margin-top:2px;
	}
 }
 .panel-heading + .panel-collapse .panel-body {
	border-top-color: @accordion-border !important;
 }
 
 .panel-heading {
	padding:0;
	
 }

 .panel-heading .accordion-toggle {
	color:@tab-hover-color;
	background-color:@accordion-active-bg;
	position:relative;
	font-weight:bold;
	
	font-size: @font-size-accordion-toggle;
	line-height: 1;
	
	padding: 10px;
	display:block;
 
	&.collapsed {
		color:@accordion-header-text;
		font-weight:normal;
		background-color:#F9F9F9;
	}

	&:hover {
		color:@accordion-header-text-hover;
		background-color:@accordion-header-hover-bg;
		text-decoration:none;
	}

	&:focus,&:active {
		outline:none;
		text-decoration:none;
	}
 
 
	> .@{icon}:first-child {
		width:16px;
	}
	&:hover > .@{icon}:first-child{
		text-decoration:none;
	}
 }


.panel-body , .collapse.in  > .panel-body{
	border-top:1px solid @accordion-border;
 }

 &.no-padding {
	padding:0;
 }
}






//style2, used in faq, etc...
.enable_accordion_style_2() when (@enable-accordion-style-2 = true) {
.accordion-style2.panel-group {
 .panel {
	border-width:0;
	&:last-child {
		border-bottom-width: 0;
	}
	
	+ .panel {
		margin-top:4px;
	}
	
	.panel-body {
		border-top:none;
	}
 }
 
 .panel-heading .accordion-toggle {
	background-color:#EDF3F7;

	border:2px solid #6EAED1;
	border-width:0 0 0 2px;
	
	&:hover {
		text-decoration:none;
	}
	
	&.collapsed {
		background-color:#F3F3F3;
		color:#606060;
		border-width:0 0 0 1px;
		border-color:#D9D9D9;
		
		&:hover {
			background-color:#F6F6F6;
			color:#438EB9;
			text-decoration:none;
		}
	}
 }
 

.panel-body , .collapse.in  > .panel-body{
	border-top:none;
 }
 
}



//nested questions 
.accordion-style2.panel-group .accordion-style2.panel-group {
 .panel  {
	border-bottom:1px dotted #D9D9D9;
	&:last-child  {
		border-bottom:none;
	}
	
	.panel-heading , .panel-heading .accordion-toggle {
		background-color: transparent;
		border-width: 0;
		font-size: @font-size-accordion-toggle;
		
		padding-top: 6px;
		padding-bottom: 8px;
	}
	.panel-heading {
		padding-top:0; padding-bottom:0;
	}
 }
}
}
.enable_accordion_style_2();

}
.enable_accordion();