@import "../default-skin.less";
@import "../../global/mixin.less";

// 表格
.c_table {
	position:relative; overflow:hidden; background:@bg; z-index:0;
	table {
		border-collapse:collapse; .x_bs; border-top:0 none; width:100%;
		tr td,
		tr th { height:1+2*@gap; line-height:1+0.5*@gap; border-left:1px solid @fg-light-8-5; border-right:1px solid @fg-light-8-5; padding:0.75*@gap @gap; border-bottom:1px solid @fg-light-8-5; color:@fg-light-1; font-weight:normal; white-space:nowrap; text-align:left; .x_bs;}
		th:first-child,
		td:first-child { border-left:0 none;}
		th:last-child,
		td:last-child { border-right:0 none;}
		tr th { background:@bg-dark-0-4;}
		tr td .e_ellipsis,
		tr th .e_ellipsis { vertical-align:top;} 
		tbody tr { height:1+2*@gap;}
		td.fn,
		th.fn { width:1+2*@gap; text-align:center;}
		td.fn { cursor:pointer; color:@primary;}
		tbody tr:last-child td {
			border-bottom:0 none;
		}
	}
}



// 树插件
.c_table {
	td.level {
		white-space:nowrap; padding:0 @gap 0 0.5*@gap+0.75em;
		&:before { content:""; width:1px; height:1+2*@gap; background:@bg-dark-2; display:inline-block; vertical-align:middle; margin-right:-0.25em;}
		.ico { display:inline-block; margin-right:0.25em;}
		.ico:before { content:""; display:inline-block; height:1px; width:1em; background:@bg-dark-2; vertical-align:middle; margin-right:-1.65em;}
		.ico:after { cursor:default; vertical-align:middle; width:1em; height:1em; line-height:1em; padding:0.25em; display:inline-block; color:@primary; border:1px solid @primary; font-family:"ico"; content:"\e003"; text-align:center; z-index:12; position:relative; border-radius:0.25em; background:@bg; font-size:75%;}
		.ico-unfold:after { font-family:"ico"; content:"\e069";}
		.checkbox { display:inline-block; vertical-align:top; padding-top:@gap; overflow:hidden;}
		.checkbox input { vertical-align:top;}
		.text { display:inline-block; vertical-align:middle;}
	}
	td.level-2 {
		padding-left:0.5*@gap+0.75+(1.5*0.75)+0.5;
		// padding-left:@gap+1.85;
	}
	td.level-3 {
		padding-left:0.5*@gap+0.75+(1.5*0.75)+0.5+(1.5*0.75)+0.5;
	}
	td.level-4 {
		padding-left:0.5*@gap+0.75+(1.5*0.75)+0.5+(1.5*0.75)+0.5+(1.5*0.75)+0.5;
	}
	td.level-leaf {
		.ico { content:"\e60d";}
	}
}



// 排序/过滤
.c_table {
	thead tr th.asc,
	thead tr th.desc { cursor:default; user-select:none;}
	thead tr th.filter:after,
	thead tr th.desc:after,
	thead tr th.asc:after { font-size:85.71%; display:inline-block; color:@fg; margin-left:0.5*@gap; font-family:"ico"; color:@fg-light-7;}
	thead tr th.asc:after { content:"\e007";}
	thead tr th.desc:after { content:"\e024";}
	thead tr th.filter:after { content:"\e081";}
}



// 自动换行
.c_table {
	tr td.wrap,
	tr th.wrap { white-space:normal; word-wrap:break-word; line-height:1+0.57*@gap;}
	tr th.wrap { line-height:auto;}
}



// 行色彩
.c_table-even {
	table tbody tr:nth-child(2n+1):not(.on) { background:@bg-dark-0-2;}
}
.c_table {
	tbody tr.deleted { opacity:0.5; background:@bg-dark-2;}
	tbody tr.deleted-noselect { background:@bg-dark-2 !important;}
	tbody tr.strong { background:@warning-light-7;}
	tbody tr.new td { color:@primary;}
	tbody tr.on { background:@primary-light-9;}
}



// 参数插件
.c_table {
	.c_param:not(.c_param-v) {
		padding:0;
		li { padding:0;}
	}
	.c_param-v {
		margin-left:0; background:none; width:100%;
		.label { text-align:center;}
		.value { text-align:center; font-size:100%;}
		ul { display:table; width:100%;
			li {
				float:none; display:table-cell;
			}
		}
	}
}



// 表单插件
.c_table {
	table {
		tr td {
			> input[type="date"],
			> input[type="datetime"],
			> input[type="datetime-local"],
			> input[type="email"],
			> input[type="month"],
			> input[type="week"],
			> input[type="number"],
			> input[type="tel"],
			> input[type="time"],
			> input[type="url"],
			> input[type="text"],
			> input[type="password"] { width:100%; margin:-0.75*@gap -1*@gap; box-sizing:content-box; height:1+@gap; border:0 none; background:none;}
			> .e_select,
			> .e_group {
				display:block; margin:-0.75*@gap -1*@gap; width:auto; background:none; border:0 none;
				input[type="date"],
				input[type="datetime"],
				input[type="datetime-local"],
				input[type="email"],
				input[type="month"],
				input[type="week"],
				input[type="number"],
				input[type="tel"],
				input[type="time"],
				input[type="url"],
				input[type="text"],
				input[type="password"] { border:0 none; margin:0;}
				button { margin-top:0;}
			}
			> .e_group { min-width:16em;}
			> .e_segment {
				display:flex; margin:-0.75*@gap -1*@gap; background:none; border-left:0 none;
				> span { display:block; float:none; flex:1; background:none; text-align:center; white-space:nowrap;}
				> span:before { border-top:0 none; border-bottom:0 none;}
				> span:last-child:before { border-right:0 none;}
				> input:first-child + span,
				> span:first-child { border-left:1px solid transparent;}
				> span.e_segmentOn:before { border:1px @primary solid; z-index:5;}
			}
		}
	}
}



// 复选框特殊处理
.c_table-checkbox {
	> table tr td:first-child,
	> table tr th:first-child,
	.left table tr td:first-child,
	.left table tr th:first-child,
	.body table tr td:first-child,
	.body table tr th:first-child { width:1+2*@gap; text-align:center;}
	table tbody tr td:first-child label,
	table thead tr th:first-child label { display:block; width:1+2*@gap; height:1+2*@gap; margin:-0.75*@gap -@gap; line-height:1+2*@gap; text-align:center;}
	table tbody tr td:first-child label input[type="radio"],
	table thead tr th:first-child label input[type="radio"],
	table tbody tr td:first-child label input[type="checkbox"],
	table thead tr th:first-child label input[type="checkbox"] { vertical-align:top; margin-top:@gap;}
}



// 固定部分插件
.c_table {
	.body {
		position:relative; overflow:auto; height:100%; z-index:0;
	}
	.top {
		position:absolute; top:0; left:0; width:10000em; z-index:1; overflow:hidden;
		table { width:auto; position:relative;}
	}
	.leftTop,
	.left {
		position:absolute; top:0; left:0; overflow:hidden;
		td.fn { width:auto;}
		tr { background:@bg;}
		&-checkbox table tbody tr td:first-child,
		&-checkbox table thead tr th:first-child { width:auto;}
	}
	.left { box-shadow:0.1em 0 0.1em rgba(0,0,0,0.1);}
	.rightTop,
	.right {
		position:absolute; top:0; right:0; overflow:hidden;
		// table { table-layout:fixed;}
		td.fn { width:auto;}
		tr { background:@bg;}
		&-checkbox table tbody tr td:first-child,
		&-checkbox table thead tr th:first-child { width:auto;}
	}
	.left,
	.right {
		height:100%;
		table { position:relative;}
	}
	.right table { table-layout:fixed;}
	.right { box-shadow:-0.14em 0 0.14em rgba(0,0,0,0.1);}
	.leftTop,
	.rightTop { z-index:2;}
	.left,
	.right { z-index:1;}
	.leftTop,
	.left,
	.rightTop,
	.right {
		td,
		th { .x_bs;}
	}
}



// 卡片插件
.c_table {
	.c_card {
		.op {
			.left,
			.right,
			.center { box-shadow:none;}
		}
	}
}



// 遮罩插件
.c_table {
	.cover { position:absolute; top:0; right:0; bottom:0; width:5em; z-index:3; pointer-events:none;}
	.cover:before { content:""; display:block; position:absolute; left:0; right:0; bottom:0; top:1+2*@gap; background:linear-gradient(to right, @bg-op-0, @bg-dark-0-2 80%);}
	.cover:after { content:""; display:block; height:1+2*@gap; background:linear-gradient(to right, @bg-op-0, @bg-dark-0-2 80%);}
}
.s_pc .c_table {
	.cover { display:none;}
}



// 无数据提示
.c_table-nodata {
	height:(1+2*@gap)*6;
	> .c_msg {
		top:1+2*@gap+0.1;
		.wrapper { padding:0;}
	}
}
.c_table-head-2.c_table-nodata {
	height:(1+2*@gap)*7+0.1;
	> .c_msg { top:(1+2*@gap)*2+0.1;}
}
.c_table-head-3.c_table-nodata {
	height:(1+2*@gap)*8+0.1;
	> .c_msg { top:(1+2*@gap)*3+0.1;}
}

.c_table-head-4.c_table-nodata {
	height:(1+2*@gap)*9+0.1;
	> .c_msg { top:(1+2*@gap)*4+0.1;}
}

.c_table-head-5.c_table-nodata {
	height:(1+2*@gap)*10+0.1;
	> .c_msg { top:(1+2*@gap)*5+0.1;}
}

.c_table-head-6.c_table-nodata {
	height:(1+2*@gap)*11+0.1;
	> .c_msg { top:(1+2*@gap)*6+0.1;}
}




// 无横向分割线
.c_table-noline {
	th, td, table { border:0 none !important;}
}



// 无背景
.c_table-nobg {
	background-color:transparent;
	table {
		thead tr th {  background-color:transparent;}
	}
}



// 表头文字批量居中
.c_table-th-center {
	table {
		tr th { text-align:center;}
	}
}



// 边框
.c_table-border {
	border:1px solid @fg-light-8-5;
	> .body table {
		// 防止出现垂直滚动条
		margin-bottom:0;
	}
}



// 高度
.c_table[style*="height"],
.c_table[class*="c_table-full"],
.c_table[class*="c_table-min"],
.c_table[class*="c_table-row"] {
	> .body table tbody tr:last-child td { border-bottom:1px solid @fg-light-8-5;}
	> table tbody tr:last-child td { border-bottom:1px solid @fg-light-8-5;}
}
.c_table-row-3 { height:4+2*4*@gap;}
.c_table-row-5 { height:6+2*6*@gap;}
.c_table-row-8 { height:9+2*9*@gap;}
.c_table-row-10 { height:11+2*11*@gap;}
.c_table-row-15 { height:16+2*16*@gap;}
.c_table-row-20 { height:21+2*21*@gap;}
.c_table-min-3 { min-height:4+2*4*@gap;}
.c_table-min-5 > .body table tbody tr + tr ~ tr:last-child td { border-bottom:0 none !important;}
.c_table-min-5 { min-height:6+2*6*@gap;}
.c_table-min-5 > .body table tbody tr + tr + tr + tr ~ tr:last-child td { border-bottom:0 none !important;}
.c_table-min-8 { min-height:9+2*9*@gap;}
.c_table-min-5 > .body table tbody tr + tr + tr + tr + tr + tr + tr ~ tr:last-child td { border-bottom:0 none !important;}
.c_table-min-10 { min-height:11+2*11*@gap;}
.c_table-min-10 > .body table tbody tr + tr + tr + tr + tr + tr + tr + tr + tr ~ tr:last-child td { border-bottom:0 none !important;}
.c_table-min-15 { min-height:16+2*16*@gap;}
.c_table-min-15 > .body table tbody tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr ~ tr:last-child td { border-bottom:0 none !important;}
.c_table-min-20 { min-height:21+2*21*@gap;}
.c_table-min-20 > .body table tbody tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr ~ tr:last-child td { border-bottom:0 none !important;}
.c_table-lite.c_table-full.c_table-nodata,
.c_table-full { height:100%; .x_bs;}



// 固定宽度// 固定宽度
.c_table-fixedWidth,
.c_table-fixed {
	table { table-layout:fixed;}
	td { .x_to;}
}



//渐变
.c_table-gd {
	background:linear-gradient(to right, @primary, @success); color:@bg;
	.top table { background:linear-gradient(to right, @primary, @success); color:@bg;}
	.body { background:@bg;}
	table {
		thead tr th { background-color:transparent; color:@bg;}
		tbody tr td { background:@bg;}
	}
}