﻿/**
 * ud2-datagrid.less
 * 数据网格控件的默认样式
 */

// 导入必要的文件
@import "../../../common/import.less";

// 数据网格边框颜色
@DatagridBorderColor: @ColorWhiteBorder;
// 数据网格首尾单元格背景色
@DatagridHomeEndTHBackColor: @ColorWhiteDeeper;
// 数据网格首尾单元格背景色
@DatagridHomeEndTHBackDisabledColor: lighten(@ColorWhiteDeepest, 1.5%);
// 数据网格两侧单元格背景色
@DatagridLeftRightTDBackColor: lighten(@ColorWhiteDeeper, 3%);
// 单元格高度
@DatagridCellHeight: @CtrlHeight;
// 单元格行高
@DatagridCellLineHeight: @CtrlHeight;
// 单元格内边距
@DatagridCellPadding: 0 @CtrlPaddingLR;
// 数据网格默认高度
@DatagridDefaultHeight: 400px;

// 数据网格控件主容器
.ud2-datagrid {
	position: relative;
	z-index: 1;
	display: block;
	height: @DatagridDefaultHeight;
	background: @ColorWhite;
	border: 1px solid @DatagridBorderColor;
	border-radius: @BorderRadius;
	overflow: hidden;
	.boxSizing(content-box);

	&.ud2-datagrid-full {
		height: 100%;
	}
}

.ud2-datagrid-row {
	display: table;
}

// 单元格样式
.ud2-datagrid-cell {
	display: table-cell;
	top: 0;
	left: 0;
	line-height: inherit;
	padding: @DatagridCellPadding;
	background: @ColorWhite;
	border: 1px solid @DatagridBorderColor;
	border-top-color: transparent;
	border-left-color: transparent;
	.textOverflow();


	&.checkbox::before {
		content: '';
		position: absolute;
		z-index: 2;
		top: 0; 
		left: 0; 
		right: 0; 
		bottom: 0;
		cursor: pointer;
	}
}
// 网格头部、底部单元格样式
.ud2-datagrid-header .ud2-datagrid-cell,
.ud2-datagrid-footer .ud2-datagrid-cell {
	background: @DatagridHomeEndTHBackColor;

	&.disabled {
		input {
			opacity: .4;
		}

		&.checkbox::before {
			cursor: default;
		}
	}
}

// 网格主容器、滚动主容器定位方式
.ud2-datagrid, .ud2-datagrid-grid, .ud2-datagrid-row {
	position: relative;
}
// 网格其他容器定位方式
.ud2-datagrid-left, .ud2-datagrid-right, .ud2-datagrid-center, 
.ud2-datagrid-header, .ud2-datagrid-content, .ud2-datagrid-footer, 
.ud2-datagrid-cell, .ud2-datagrid-empty {
	position: absolute;
}

// 利用绝对定位自适应高度
.ud2-datagrid-left, .ud2-datagrid-right, .ud2-datagrid-center, .ud2-datagrid-content, .ud2-datagrid-empty {
	top: 0;
	bottom: 0;
}
// 利用绝对定位自适应宽度
.ud2-datagrid-header, .ud2-datagrid-footer, .ud2-datagrid-content, .ud2-datagrid-center, .ud2-datagrid-empty {
	left: 0;
	right: 0;
}
// 空网格
.ud2-datagrid-empty {
	display: none;
	z-index: 10;
	background: @ColorWhite;

	&.on {
		display: block;
	}

	> div {
		position: absolute;
		top: 50%;
		left: 50%;
		.transform(translate(-50%, -50%));
	}
}
// 网格左、右容器样式
.ud2-datagrid-left, .ud2-datagrid-right {
	z-index: 2;
	width: 0; 
	.ud2-datagrid-content .ud2-datagrid-cell {
		background: @DatagridLeftRightTDBackColor;
	}
}
// 网格左侧容器样式
.ud2-datagrid-left {
	left: -1px;
}
// 网格右侧容器样式
.ud2-datagrid-right {
	right: -1px;
	
	.ud2-datagrid-cell:first-child {
		border-left-color: @DatagridBorderColor;
	}
}
// 网格中部容器样式
.ud2-datagrid-center {
	z-index: 1;
}
// 网格头部容器样式
.ud2-datagrid-header {
	top: 0;
	border-bottom: 1px solid @DatagridBorderColor;
}
// 网格底部容器样式
.ud2-datagrid-footer {
	bottom: -1px;
	border-top: 1px solid @DatagridBorderColor;
}
// 滚动条位置修正
.ud2-datagrid-content .ud2-scroll-bar:nth-child(2) {
	right: 2px !important;
}