﻿/**
 * ud2-dialog.less
 * 对话框控件的默认样式
 */

// 导入必要的文件
@import "../../../common/import.less";

// 对话框控件主容器
.ud2-dialog {
	position: fixed;
	z-index: @MaxZIndex + 1;
	background: @ColorWhite;
	outline: 1px solid fadeout(@ColorBlack, 92%);
	box-shadow: @CtrlShadow;
	opacity: 0;
	visibility: hidden;
	.transform(scale(.95));
	.transition(transform .3s, opacity .3s, visibility .3s);

	&.on {
		opacity: 1;
		visibility: visible;
		.transform(scale(1));
	}
}
.ud2-dialog-top-left {
	top: @LayoutPadding;
	left: @LayoutPadding;
}
.ud2-dialog-top-right {
	top: @LayoutPadding;
	right: @LayoutPadding;
}
.ud2-dialog-bottom-left {
	bottom: @LayoutPadding;
	left: @LayoutPadding;
}
.ud2-dialog-bottom-right {
	bottom: @LayoutPadding;
	right: @LayoutPadding;
}
.ud2-dialog-full-screen {
	top: @LayoutPadding;
	left: @LayoutPadding;
	bottom: @LayoutPadding;
	right: @LayoutPadding;
}
.ud2-dialog-center {
	top: 50%;
	left: 50%;
	.transform(translate(-50%, -50%) translateZ(0) scale(.8));
	&.on {
		.transform(translate(-50%, -50%) translateZ(0) scale(1));
	}
}

// 设置内部容器为绝对定位
.ud2-dialog-header, .ud2-dialog-body, .ud2-dialog-close {
	position: absolute;
}
// 对话框控件头部容器样式
.ud2-dialog-header {
	width: 100%;
	height: 3em;
	padding: 0 1em;
	font-weight: 800;
	line-height: 3em;
	background: @ColorWhiteDeeper;
}
// 对话框关闭按钮
.ud2-dialog-close {
	z-index: 2;
	display: block;
	font-size: 1.142857em;
	line-height: 1;
	top: .9em;
	right: .8em;
	cursor: pointer;
	.transition(color .2s);

	&:hover {
		color: @ColorRed;
	}
}
// 对话框控件身体容器样式
.ud2-dialog-body {
	top: 3em; left: 0; right: 0; bottom: 0;

	iframe {
		width: 100%; height: 100%;
		border: 0;
	}
}
// 对话框控件尾部容器样式
.ud2-dialog-footer {
	position: absolute;
	left: 0; bottom: 0; right: 0;
	height: 3em;
	line-height: 3em;
	background: @ColorWhiteDeeper;
	text-align: center;

	.btn:not(:only-child):not(:first-child) {
		margin-left: .5em;
	}
}

// 弹出对话框默认样式
.ud2-dialog-built {
	table {
		width: 100%; height: 100%;
	}

	td:not(:only-child):first-child {
		width: 30%;
		text-align: center;
		font-size: @BaseSize * 5;
	}

	td:not(:only-child):last-child {
		padding-right: 1em;
	}

	td:only-child {
		padding: 0 1em;
		text-align: center;
	}

	td:only-child, td:not(:only-child):last-child {
		line-height: 1.5;
	}

	input {
		margin-top: .4em;
	}
}