/**
 * common.less
 * 控件的默认样式
 */

// 导入必要的文件
@import "../../common/import.less";

[ud2='tabs']:not([ud2-tabs-ready]),
[ud2='page']:not([ud2-page-ready]),
[ud2='datagrid']:not([ud2-datagrid-ready]),
[ud2='select']:not([ud2-select-ready]),
[ud2='date']:not([ud2-date-ready]),
[ud2='number']:not([ud2-number-ready]),
[ud2='range']:not([ud2-range-ready]),
[ud2='switch']:not([ud2-switch-ready]),
[ud2='dialog']:not([ud2-dialog-ready]),
[ud2='message']:not([ud2-message-ready]),
[ud2='file']:not([ud2-file-ready]) {
	display: none;
}

// 为控件设置基础样式
.ud2-select, .ud2-number, .ud2-range, .ud2-date {
	.ctrl-js();
}

// JS控件文本输入框样式
.ud2-ctrl-textbox {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	font-size: 1em;
}

// JS控件开关按钮容器
.ud2-ctrl-power {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 2em;
	height: 100%;
	overflow: hidden;

	// 设置开关按钮的开启样式
	.ico {
		position: absolute;
		top: 2px;
		right: .5em;
		overflow: hidden;
		line-height: @LineHeight;
		font-size: 1em;
		color: @CtrlIcoColor;
		cursor: pointer;
		.transition(right .2s, color ease-in .2s);

		// 设置开关按钮的关闭按钮
		&:last-of-type {
			right: -1em;
		}
		// 设置滑入状态
		&:hover {
			color: @CtrlIcoHoverColor;
		}
	}
	// 设置开关按钮的关闭样式
	&.ud2-ctrl-power-on {
		.ico:first-of-type {
			right: -1em;
		}
		.ico:last-of-type {
			right: @BaseSize / 2;
		}
	}
}

// 遮罩层
.ud2-backmask {
	position: fixed;
	z-index: @MaxZIndex;
	top: 0; left: 0; right: 0; bottom: 0;
	opacity: 0;
	background: fadeout(@ColorBlack, 80%);
	visibility: hidden;
	.transition(opacity .3s, visibility .3s);

	&.on {
		opacity: 1;
		visibility: visible;
	}
}

// JS控件状态样式
.ud2-ctrl-color(@Color, @Background, @Dark) {
	& {
		border-color: @Color;
	}

	&:hover, &.on {
		border-color: @Dark;
	}

	&.on {
		background: @Background;
	}

	.ud2-ctrl-arrow {
		border-top-color: darken(@Color, 20%);
	}

	&.on .ud2-ctrl-arrow {
		border-top-color: darken(@Color, 40%);
	}

	.ud2-ctrl-power .ico, .ud2-ctrl-ico {
		color: darken(@Color, 20%);

		&:hover {
			color: darken(@Color, 40%);
		}
	}
}

// 信息状态样式
.ud2-select.info, .group.info > .ud2-select,
.ud2-address.info, .group.info > .ud2-address,
.ud2-range.info, .group.info > .ud2-range,
.ud2-number.info, .group.info > .ud2-number,
.ud2-date.info, .group.info > .ud2-date {
	.ud2-ctrl-color(@ColorBlueBorder, @ColorBlueBackLight, @ColorBlueBackDark);
}
// 成功状态样式
.ud2-select.success, .group.success > .ud2-select,
.ud2-address.success, .group.success > .ud2-address,
.ud2-range.success, .group.success > .ud2-range,
.ud2-number.success, .group.success > .ud2-number,
.ud2-date.success, .group.success > .ud2-date {
	.ud2-ctrl-color(@ColorGreenBorder, @ColorGreenBackLight, @ColorGreenBackDark);
}
// 警告状态样式
.ud2-select.warning, .group.warning > .ud2-select,
.ud2-address.warning, .group.warning > .ud2-address,
.ud2-range.warning, .group.warning > .ud2-range,
.ud2-number.warning, .group.warning > .ud2-number,
.ud2-date.warning, .group.warning > .ud2-date {
	.ud2-ctrl-color(@ColorOrangeBorder, @ColorOrangeBackLight, @ColorOrangeBackDark);
}
// 危险状态样式
.ud2-select.danger, .group.danger > .ud2-select,
.ud2-address.danger, .group.danger > .ud2-address,
.ud2-range.danger, .group.danger > .ud2-range,
.ud2-number.danger, .group.danger > .ud2-number,
.ud2-date.danger, .group.danger > .ud2-date {
	.ud2-ctrl-color(@ColorRedBorder, @ColorRedBackLight, @ColorRedBackDark);
}