styles/xf.tabs.less

/*  Tabs
========================================== */

.xf-tabs {
	display: block;
	position: relative;
	margin: 5px 0 3px;  /* 5&3 to we compensate for the shift when buttons have borders and are moved 1px up and left */
	padding: 0 0 0 1px;
   .box-sizing-border-box;
	list-style: none;

	margin-top: 5px; /*  */
	margin-bottom: 3px;
	.clearfix();

}
.xf-tabs-button {
	display: block;
	position: relative;
   .box-sizing-border-box;
	height: 44px;
	padding: 10px;
	//margin: -1px 0 0 -1px; /* needed to hide adjacent borders */
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	color: @button-text-color;
	text-shadow: @tabs-text-shadow;
    .bg-gradient(@tabs-active-bg-color-start, @tabs-active-bg-color-start, @tabs-active-bg-color-end);

    //border-left: 1px solid white;
    //border-right: 1px solid white;
    border-bottom: 5px solid @tabs-border-color;

	&:hover {
    -webkit-background-size: 100% 150%;
   		    background-size: 100% 150%;
   }
}
	.xf-grid-unit:first-child > .xf-tabs-button {
		border-left: none;
	}
	.xf-grid-unit-1of2 ~ .xf-grid-unit:last-child > .xf-tabs-button,
	.xf-grid-unit-1of3 ~ .xf-grid-unit:last-child > .xf-tabs-button,
	.xf-grid-unit-1of4 ~ .xf-grid-unit:last-child > .xf-tabs-button	{
		border-right: none;
		margin-right: 0px;
	}

.xf-tabs-button-text {
	display: block;
	height: 24px;
	line-height: 24px;
	vertical-align: middle;
   .overflow-ellipsis;
    color: @tabs-text-color;
}

.xf-tabs-button-active {
	z-index: 1;
	.bg-gradient(@tabs-active-bg-color-start, @tabs-active-bg-color-start, @tabs-active-bg-color-end);
	color: @tabs-active-text-color;
	text-shadow: @tabs-text-shadow;
    font-weight: bold;
    border-bottom: 5px solid @tabs-active-border-color;

	&:hover {
	-webkit-background-size: auto;
			background-size: auto;
			cursor: default;
      border-bottom: 5px solid @tabs-active-border-color;
	}
}
.xf-tabs-button-active .xf-tabs-button-text {
}