hy-checkbox/lib/Tab/tab.less

checkbox & radio ui components for react

@import "../../app/variables.less";

.@{ult-prefix}-tabs{width: 100%;margin:0 auto;color: @text-body; display: inline-block; position:relative; 
   &.@{ult-prefix}-tabs-shadow{box-shadow:0 2px 0 rgba(0,0,0,0.05); }
   .@{ult-prefix}-tabs-content{ overflow: hidden;
	.@{ult-prefix}-tabs-title{
		position: relative; height: 39px;
		justify-content: flex-start;
		color: #555;
		border-bottom:1px solid #e0e0e0;
		background-color: #fafafa;
		.@{ult-prefix}-tabs-h2{ float: left; line-height:34px; padding: 0 24px;}
		.@{ult-prefix}-tabs-btn{ line-height: normal; position: absolute; left: 0; top: 0;}
		.title{
			display: inline-block;
			border: none;
			padding:@base-space @base-space*2;
			cursor: pointer;
			background: none;
			color: @text-caption;
			line-height: @base-space*3;
			margin-bottom: -1px;
			font-size: 14px;
			&.active{
				border-right: 1px solid #e3e3e3;
				background: @white;
				margin-bottom: -1px;
				color: @text-body;
				&:not(:first-child){border-left: 1px solid #e3e3e3;}
			}
		}
		
    }
	&.inner{
	.@{ult-prefix}-tabs-title{ background: none;  height: 42px;
			.@{ult-prefix}-tabs-btn{
			.title{
				border: 1px solid #e3e3e3;border-right: none;
				background-color: #fafafa;
				&:last-child{border-right:1px solid #e3e3e3;}
				&.active{
					background: #fff; border-bottom:1px solid #1e88e5;
				}
			}
		}
		} 
	}
		&.inner2{
	.@{ult-prefix}-tabs-title{ background: none;  height: 42px;
		.@{ult-prefix}-tabs-btn{
			.title{
				border: none;
				&.active{
					color: #1e88e5;
					background: #fff; border-bottom:1px solid #1e88e5;
				}
			}
		}
	}
		}
		&.right{
		.@{ult-prefix}-tabs-title{
			.@{ult-prefix}-tabs-btn{ left: auto; right: 0;
			.title{
				&.active{
					border-left: 1px solid #e3e3e3;
				}
				&:last-child{border-right: 1px solid #fff;}
			}
		}
		}
		}
		&.vertical{
	.@{ult-prefix}-tabs-title{ float: left; min-width:40px; height: auto; margin:0 24px 0 0;
			.@{ult-prefix}-tabs-btn{  position: relative; width: auto !important;
			.title{
				padding: 8px 0;
				width: 100%;
				border: 1px solid #e3e3e3;
				border-bottom:0;	
				&.active{
					border-right: 1px solid #1e88e5;
					&:last-child{border-bottom: 1px solid #e3e3e3;}
				}
		    }
		    }
	}
	    }
	.btn-more {
			position: absolute;
			right: 0;
			top: -1px;
			width: 25px;
			height: 38px;
			background: #fafafa;
			text-align: center;
			border: none;
			font-weight: bolder;
			color: #999;
			cursor: pointer;
			padding: 12px 5px 4px;
			& + .btn-more {
				right: 20px;
			}
			&:hover {
				color: #f26b62;
			}
			&.tab-hidden {
				display: none;
			}
			&.tab-disable {
				color: #ccc;
				cursor: not-allowed;
			}
		}
	}
	.@{ult-prefix}-tabs-panel{ background: @white;padding: @base-space*2}
}