﻿/**
 * table.less
 * 表格的默认样式
 */

// 导入必要的文件
@import "../../common/import.less";

/**
 * 表格样式
 */
// 表格默认样式
.table {
	width: 100%;
	border-radius: @BorderRadius;
	border: 1px solid @ColorWhiteBorder;
	border-collapse: separate;
	border-spacing: 0;
	background: @ColorWhite;
	overflow: hidden;
	
	> caption {
		padding: .5em 0;
		font-size: larger;
		font-weight: 800;
	}
	
	// 所有单元格的默认样式
	> * > * > * {
		padding: .5em;
		line-height: 1.4;
		border-bottom: 1px solid @ColorWhiteBackLight;
		.transition(background .2s);
		&:not(:last-child) {
			border-right: 1px solid @ColorWhiteBackLight;
		}
	}

	// 表格头及其内部元素样式
	> thead {
		background: @ColorWhiteDeeper;

		> * > * {
			border-bottom-color: @ColorWhiteBorder;
			&:not(:last-child) {
				border-right-color: @ColorWhiteBorder;
			}
		}
	}

	// 去除最后一行单元格的下边框
	> :last-child > :last-child > * {
		border-bottom: 0;
	}
	// 表格小号样式
	&.sm {
		font-size: @BaseFontSize - @CtrlSizeGradient;
	}
	// 表格大号样式
	&.lg {
		font-size: @BaseFontSize + @CtrlSizeGradient;
	}
	// 表格单元格信息样式
	> * > tr.info > *, > * > tr > .info {
		color: @ColorBlue;
		background: @ColorBlueBackLight;	
	}
	// 表格单元格成功样式
	> * > tr.success > *, > * > tr > .success {
		color: @ColorGreen;
		background: @ColorGreenBackLight;	
	}
	// 表格单元格警告样式
	> * > tr.warning > *, > * > tr > .warning {
		color: @ColorOrange;
		background: @ColorOrangeBackLight;	
	}
	// 表格单元格危险样式
	> * > tr.danger > *, > * > tr > .danger {
		color: @ColorRed;
		background: @ColorRedBackLight;	
	}
	// 表格内公用对齐样式
	> *, > * > *, > * > * > * {
		&.left {
			text-align: left;
		}

		&.center {
			text-align: center;
		}

		&.right {
			text-align: right;
		}
	}
}

// 表格各行换色
.table-striped {
	> tbody > tr:nth-child(even) > * {
		background: lighten(@ColorWhiteBackLight, 3%);
	}
}
// 表格行 hover 效果
.table-hover {
	> :not(thead) {
		> :not(.nohover):hover > * {
			background: lighten(@ColorWhiteBackLight, 1.5%);
		}

		> .info:not(.nohover):hover > *, > :not(.nohover):hover > .info {
			background: darken(@ColorBlueBackLight, 3%);
		}

		> .warning:not(.nohover):hover > *, > :not(.nohover):hover > .warning {
			background: darken(@ColorOrangeBackLight, 3%);
		}

		> .success:not(.nohover):hover > *, > :not(.nohover):hover > .success {
			background: darken(@ColorGreenBackLight, 3%);
		}

		> .danger:not(.nohover):hover > *, > :not(.nohover):hover > .danger {
			background: darken(@ColorRedBackLight, 3%);
		}
	}
		
}

// 表格简单样式
.table.table-simple {
	> * > * > * {
		border-right: 0;
	}
}