m_tab.less 1.39 KB
/***************************************************
* feature  :  tab选项卡切换;
* update   :  2015/02/03;
* use      :  ;
* extend   :  ;
* example  :  ;
* desc     :  ;
* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
****************************************************/
@import "var";


.m-tab{
	width: 100%;
	background-color: #FFF;
	font-size: 14px;
	color: #999;
	border: 1px solid #ddd;
	border-width: 1px 0;
	overflow: hidden;
	box-sizing: border-box;
	padding: 0 15px;
  	&.solid {
	  padding: 0px;
	  width: 60%;
	  margin: 0 auto;
	  height: 35px;
	  position: relative;
	  top: 5px;
	  border: 1px solid #2caa3f;
	  color: #2caa3f;
	  li {
		line-height: 35px;
		width: 50%;
		padding: 0px;
	  }
	  .on {
		background: #2caa3f;
		color: #fff;
	  }
	}
	a{
		color: #999;
	}
	li{
		float: left;
		min-width: 32px;
		padding-right: 18px;
		line-height: 40px;
		text-align: center;
		position: relative;
		&:last-child{
			padding-right: 0;
		}
	}
	.on{
		a{
			color: #2caa3f;
			display: block;
			position: relative;
			&:after{
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 1px;
				background-color: #2caa3f;
			}
		}
	}
	&.tab-col-2{
		li{
			width: 50% !important;
		}
	}
}