/**
 * base.less
 * 标签的默认样式
 */

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

/**
 * 标准样式
 */
// 字体样式
.font() {
	font: @BaseFontSize @Font;
	line-height: @LineHeight;
}
// 默认盒模型渲染方式
*, ::before, ::after {
	.boxSizing(border-box);
}
// 避免因内容加高而导致的滚动条出现却不触发resize，进而引起控件父层(外层)的宽度变小而导致排版异常
// 目前会引起的问题的控件 ud2-datagrid
// 此问题也可采用控件定时自检(例如:50ms检测父层宽度，超出则init)的方式来控制
html {
	overflow-y: scroll;
}
// 为特定标签定义默认的字体类型、大小和行距
html, button, input, textarea {
	.font();
}
// 为body和a标签设置默认颜色
body, a {
	color: @ColorText;
}
// 为文本类标签定义默认的正文的外边据、行高
h1, h2, h3, h4, h5, h6, p, hr {
	margin: .25em 0;
	line-height: @LineHeight;
}
// 为h1标签设置字体大小
h1 {
	font-size: @H1FontSize;
}
// 为h2标签设置字体大小
h2 {
	font-size: @H2FontSize;
}
// 为h3标签设置字体大小
h3 {
	font-size: @H3FontSize;
}
// 为h4标签设置字体大小
h4 {
	font-size: @H4FontSize;
}
// 为h5标签设置字体大小
h5 {
	font-size: @H5FontSize;
}
// 为h6标签设置字体大小
h6 {
	font-size: @H6FontSize;
}
// h1-h6标签内部的small标签的样式
h1, h2, h3, h4, h5, h6 {
	> small {
		opacity: @OpacityNoImport;
	}
}

// 缩写样式
abbr, .abbr {
	border-bottom: 1px dotted @ColorDarkBorder;
	cursor: help;

	&:hover {
		opacity: @OpacityHover;
	}
}
// 块引用样式
// 内部cite(引用标签)有独立样式
blockquote, .blockquote {
	padding: .25em;
	padding-left: .5em;
	border-left: @BaseSize / 3 solid @ColorWhiteBorder;

	// blockquote标签内部的cite标签设置样式
	cite, .cite {
		display: block;
		text-align: right;
		// 为cite标签加破折号(其unicode为%u2014)
		&:before {
			content: '\2014\2014\20';
		}
	}
	// blockquote的内部再次出现blockquote标签时，对其设置上外边距
	> blockquote {
		margin-top: .5em;
	}
	// 对第一个blockquote不设置其上边距
	> blockquote:first-child {
		margin-top: 0;
	}
}
// 文献引用样式
cite, .cite {
	font-style: italic;
	font-size: smaller;
	opacity: @OpacityNoImport;
}
// 定义列表样式
dl {
	// 设置 dl 标签内部的dt标签默认样式
	dt {
		font-weight: 800;
	}
	// 如果 dt 标签不是 dl 标签中第一个同类子元素，则为其设置上外边距提高距离
	dt:not(:first-of-type) {
		margin-top: .5em;
	}
}
// 插入、删除公用样式
.ins, .del {
	display:inline;
}
// 插入样式
.ins {
	text-decoration: underline;
}
// 删除样式
.del {
	text-decoration: line-through;
}
// 代码相关标签公用样式
kbd, pre, var, code, samp, .kbd, .pre, .samp {
	font-family: @FontCode;
}
// 计算机相关标签公用样式
kbd, .kbd, var, .var, samp, .samp {
	display: inline-block;
}
// 键盘文本样式
kbd, .kbd {
	margin: 0 .25em;
	padding: .05em .5em;
	background: @ColorDark;
	color: @ColorWhite;
	border-radius: @BorderRadius;
}
// 预格式化样式
pre, .pre {
	display: block;
	padding: .5em;
	background: @ColorWhiteBackLight;
	border-radius: @BorderRadius;
	white-space: pre;
	-o-tab-size: 3;
	tab-size: 3;
}
// 计算机变量样式
var, .var {
	color: @ColorGreen;
	font-weight: 800;
}
// 计算机输出样式
samp, .samp {
	padding: 0 .25em;
	color: @ColorGreen;
	background: @ColorGreenBackLight;
}
// 重要标记样式
mark, .mark {
	display: inline;
	margin: 0 .25em;
	padding: 0 .25em;
	background: @ColorYellow;
}

// 水平线样式
.hr {
	display: block;
	padding: 0;
	border: 0;
	height: 0;
	border-top: 1px solid @ColorWhiteBorder;
}
// 点状水平线
.hr-dotted {
	border-top-style: dotted;
}
// 虚线状水平线
.hr-dashed {
	border-top-style: dashed;
}
// 红色水平线
.hr.c-red {
	border-top-color: @ColorRed;
}
// 橙色水平线
.hr.c-orange {
	border-top-color: @ColorOrange;
}
// 黄色水平线
.hr.c-yellow {
	border-top-color: @ColorYellow;
}
// 绿色水平线
.hr.c-green {
	border-top-color: @ColorGreen;
}
// 天蓝色水平线
.hr.c-teal {
	border-top-color: @ColorTeal;
}
// 蓝色水平线
.hr.c-blue {
	border-top-color: @ColorBlue;
}
// 紫蓝色水平线
.hr.c-violet {
	border-top-color: @ColorViolet;
}
// 紫色水平线
.hr.c-purple {
	border-top-color: @ColorPurple;
}
// 粉色水平线
.hr.c-pink {
	border-top-color: @ColorPink;
}
// 棕色水平线
.hr.c-brown {
	border-top-color: @ColorBrown;
}
// 白色水平线
.hr.c-white {
	border-top-color: @ColorWhite;
}
// 深色水平线
.hr.c-dark {
	border-top-color: @ColorDark;
}
// 灰色水平线
.hr.c-grey {
	border-top-color: @ColorGrey;
}
// 2倍高水平线
.hr-x2 {
	border-top-width: 2px;
}
// 3倍高水平线
.hr-x3 {
	border-top-width: 3px;
}


/**
 * 功能样式
 */
// 为所有标签设置文本的左对齐
// 此样式不适用于 inline 元素
.align-left {
	text-align: left;
}
// 为所有标签设置文本的居中对齐
// 此样式不适用于 inline 元素
.align-center {
	text-align: center;
}
// 为所有标签设置文本的右对齐
// 此样式不适用于 inline 元素
.align-right {
	text-align: right;
}
// 为所有标签设置文本强制不换行
.nowrap {
	white-space: nowrap;
	-ms-word-break: normal;
	word-break: normal;
}
// 为所有标签设置文本强制换行，当文本达到容易的右边缘且长单词等并未完全显示在一行则换行到下行显示
.allwrap {
	white-space: normal;
	-ms-word-break: break-all;
	word-break: break-all;
}
// 信息(蓝色)前景色
.fc-info, .fc-blue {
	color: @ColorBlue;
}
// 成功(绿色)前景色
.fc-success, .fc-green {
	color: @ColorGreen;
}
// 警告(橙色)前景色
.fc-warning, .fc-orange {
	color: @ColorOrange;
}
// 危险(红色)前景色
.fc-danger, .fc-red {
	color: @ColorRed;
}
// 黄前景色
.fc-yellow {
	color: @ColorYellow;
}
// 天蓝前景色
.fc-teal {
	color: @ColorTeal;
}
// 紫蓝前景色
.fc-violet {
	color: @ColorViolet;
}
// 紫前景色
.fc-purple {
	color: @ColorPurple;
}
// 粉前景色
.fc-pink {
	color: @ColorPink;
}
// 棕前景色
.fc-brown {
	color: @ColorBrown;
}
// 白前景色
.fc-white {
	color: @ColorWhite;
}
// 深前景色
.fc-dark {
	color: @ColorDark;
}
// 灰前景色
.fc-grey {
	color: @ColorGrey;
}


/**
 * 其他
 */
// placeholder 默认颜色
input::-webkit-input-placeholder {
	color: @ColorNotes;
}
input:-moz-placeholder {
	color: @ColorNotes;
}
input::-moz-placeholder {
	color: @ColorNotes;
}
input:-ms-input-placeholder {
	color: @ColorNotes;
}


/**
 * 屏幕检测
 */
// 手机屏幕
// 代号p:phone screen
html::before {
	display: none;
	content: 'p';
}
// 小尺寸屏幕
// 代号s:small screen
@media (min-width: @SmallScreenMinWidth) {
	html::before {
		content: 's';
	}
}
// 中尺寸屏幕
// 代号m:middle screen
@media (min-width: @MiddleScreenMinWidth) {
	html::before {
		content: 'm';
	}
}
// 大尺寸屏幕
// 代号l:large screen
@media (min-width: @LargeScreenMinWidth) {
	html::before {
		content: 'l';
	}
}