@import "../default-skin.less";
@import "../../global/mixin.less";

// 时间轴组件
.c_timeline {
	background:@bg; position:relative;
	&:before { content:""; position:absolute; top:1em/0.8571; bottom:1em/0.8571; left:1em/0.8571; width:2px; margin-left:-1px; z-index:1; background:@primary;}
	> ul {
		> li {
			min-height:2em; margin-top:@gap;
			&:first-child { margin-top:0;}
			&.link { cursor:pointer;}
			&:first-child { margin-top:0;}
			> .ico { border:2px @primary solid; width:2em; height:2em; box-sizing:border-box; background:@bg; border-radius:50%; text-align:center; line-height:2em; font-size:116.67%; color:@primary; float:left; margin-right:0.5*@gap; position:relative; z-index:2;}
			> .ico .text { font-size:66.67%; margin-top:-2px;}
			> .ico [class*="e_ico"] { vertical-align:top; margin-top:-2px;}
			> .main {
				overflow:hidden;
				.date { color:@primary; font-size:116.67%; padding-top:0.5em;}
				.date .time { margin-top:0.5*@gap; font-size:85.71%; color:@primary-light-5;}
				.date + .content { margin-top:0.25*@gap;}
				.content { line-height:1+0.5*@gap;}
			}
			&:after { content:""; display:block; height:0; overflow:hidden; clear:both;}
		}
		> li.on {
			> .ico {
				border-color:@warning-dark-2; background:@warning; color:@bg;
				.text { color:@bg;}
			}
			> .ico [class*="e_ico"] { color:@bg;}
		}
		> li.error {
			> .ico { border-color:@danger-dark-2; background:@danger;}
			> .ico [class*="e_ico"] { color:@bg;}
		}
		> li.level-2 {
			> .ico { border:0 none; background:none;}
			> .ico:after { width:1em; height:1em; content:""; display:block; background:@primary; border-radius:50%; top:0.5em; left:0.5em; position:relative; box-sizing:border-box; border:2px solid @bg;}
		}
		> li.on.level-2 {
			> .ico:after { background:@warning;}
		}
		> li.error.level-2 {
			> .ico:after { background:@danger;}
		}
	}
}



// 时间分侧
.c_timeline-sideTime {
	&:before { left:(6.2+@gap+1)/0.8571;}
	> ul {
		> li {
			min-height:(0.5+1)/0.8571+0.5*@gap+1;
			> .ico { margin-left:6.2+@gap;}
			> .main {
				.date { position:absolute; left:@gap; text-align:right;}
				.date+.content { margin-top:((2/0.8571)-(1+0.5*@gap))/2;}
			}
		}
		> li.level-2 {
			> .ico:after { top:0.5em; left:0.5em;}
		}
	}
}



// 月分侧
.c_timeline-sideMonth {
	&:before { left:4.4+2*@gap;}
	> ul {
		> li {
			> .ico { margin-left:3.2+@gap;}
			> .main {
				.date { position:absolute; left:0; text-align:right;}
			}
		}
		> li.level-2 {
			> .ico:after { top:0.7em; left:0.7em;}
		}
	}
}



// 插入列表
.c_timeline {
	> ul {
		> li {
			> .main {
				> .content {
					.c_list {
						 background:none; margin:-0.75*@gap -@gap;
						 > ul {
							 > li {
								 background:none;
							 }
						 }
					}
				}
			}
		}
	}
}



// 两侧显示
.c_timeline-twoSides {
	&:before { left:0; right:0; margin:auto;}
	>  ul {
		> li { 
			margin-left:50%;
			> .ico { margin-left:-1em;}
			// > .main { margin-left:2.8em;}
		}
		> li:nth-child(even) {
			margin-left:0; margin-right:50%;
			> .ico { margin-right:-1em; float:right; margin-left:0.5*@gap;}
			> .main { text-align:right;}
		}
	}
}



// 水平布局
.c_timeline-h {
	overflow:hidden;
	&:before { display:none;}
	> ul {
		> li {
			display:inline-block; margin-right:-0.3em; vertical-align:top; position:relative; z-index:1; margin-top:0; padding:0 2*@gap @gap 0;
			> .ico { float:none;}
			> .main {
				float:none; margin-left:0;
				.date + .content { margin-top:0.8*@gap;}
			}
			&:before { content:""; position:absolute; top:1em/0.8571; left:1em/0.8571; right:0; height:2px; background:@primary;}
		}
		> li.level-2 > .ico:after { left:0;}
		> li:last-child:before { display:none;}
	}
}
.c_timeline-sideTime.c_timeline-h {
	> ul {
		margin-top:-2*@gap;
		> li {
			margin-top:2*@gap; min-width:6em;
			> .ico { margin-left:0; margin-top:1+1.167+@gap;}
			> .main {
				.date { position:absolute; left:0; top:0; text-align:left;}
				.date + .content { margin-top:0.25*@gap;}
			}
			&:before { top:(1+1.167+@gap+1)/0.8571;}
		}
		> li.level-2 {
			> .ico:after { left:0;}
		}
	}
}