@import  "coco-variables.scss";


.text-list{
	// 除文字列表外的a链接
	a{ color: #1890FF;}
	.tl--item{ position: relative; }

	// 下边线
	&.line>li{ border-bottom: 1px solid rgba(50,60,80,0.15); }

	// 默认
	.tl--item>.num{
		position:absolute;
		&>span{ position:absolute; background-color:rgba(50,60,80,0.3); color:#FFF; text-align:center; border-radius:100px;}
	}
	.tl--item.red>.num>span{ background-color:$--text-red; color:#FFF }
	.tl--item.red>.title>a{ color:$--text-red}
	.tl--item.orange>.num>span{ background-color:$--text-orange; color:#FFF }
	.tl--item.orange>.title>a{ color:$--text-orange}
	.tl--item.green>.num>span{ background-color:$--text-green; color:#FFF }
	.tl--item.green>.title>a{ color:$--text-green}
	.tl--item.blue>.num>span{ background-color:$--text-blue; color:#FFF }
	.tl--item.blue>.title>a{ color:$--text-blue}
	
	
	// el-tag
	.el-tag{
		position: relative;
		top: -2px;
	}
	
	// 加粗标题
	&.bold .title>a{ font-weight: bold;}
	
	
		
	// 点
	&.outside,&.inside{
		color: rgba(50,60,80,0.2); list-style: outside; list-style-position: outside; padding-left: 18px;
		li{ list-style: outside; }
	}
	
	// .dot--o,.outside,.dot--i,.inside{ color: rgba(50,60,80,0.2); list-style: outside; list-style-position: outside; padding-left: 18px}
	&.inside.line li{
		position: relative;
		&::before{
		content: ""; display: block; width: 20px; height: 1px; position: absolute;left: -20px; background-color: rgba(50, 60, 80, 0.15); bottom: -1px;}
	}
}

// 左侧图片
li.img .tl--item .img,li.rect .tl--item .img,li.cir .tl--item .img{
	position: absolute; left: 0; border: 0; background-color: $--sys-primary;}
li.img .tl--item .img{ border-radius: 4px;}
li.cir .tl--item .img{ border-radius: 100px;}




// 文字块
.tl--item{
	.title>a{ color: $--text-color-regular; vertical-align:bottom;
		&:hover{ text-decoration: underline; color:$--text-link-hover;}
	}
	// 默认省略号
	.title>a,.title>span{
		white-space: nowrap; display: inline-block; overflow: hidden; text-overflow: ellipsis; max-width: 100%;}
	.detail>*{ color: $--text-color-second}
	.detail{ color: $--text-color-second; line-height: 1.5; padding-top: 5px;
		&::after{ content: ""; display: block; clear: both;}
	}
	.note>*{ color: $--text-color-second }
	.note>span{ margin-right: 10px;}
	.detail>.r,.note>.r{ margin-left: 10px; margin-right: 0; float: right;}
}

// 左、右侧功能
.title{ position: relative;
	.r{ position: absolute; right: 0; top:0; color:$--text-color-second;}
	&.r10{ padding-right: 10px;}
	&.r20{ padding-right: 20px;}
	&.r30{ padding-right: 30px;}
	&.r40{ padding-right: 40px;}
	&.r50{ padding-right: 50px;}
	&.r60{ padding-right: 60px;}
	&.r70{ padding-right: 70px;}
	&.r80{ padding-right: 80px;}
	&.r90{ padding-right: 90px;}
	&.r100{ padding-right: 100px;}
	.l{ position: absolute; left: 0; top:0; color:$--text-color-second;}
	&.l10{ padding-left: 10px;}
	&.l20{ padding-left: 20px;}
	&.l30{ padding-left: 30px;}
	&.l40{ padding-left: 40px;}
	&.l50{ padding-left: 50px;}
	&.l60{ padding-left: 60px;}
	&.l70{ padding-left: 70px;}
	&.l80{ padding-left: 80px;}
	&.l90{ padding-left: 90px;}
	&.l100{ padding-left: 100px;}
}

// .dot--o,.outside{ list-style: outside; list-style-position: outside; padding-left: 18px;}
// .dot--i,.inside{ list-style: inside; list-style-position: inside}



// 省略号
// .ellipsis .title>a{ white-space: nowrap; display: inline-block; overflow: hidden; text-overflow: ellipsis; max-width: 100%;}

// 字体不加粗
.text-list.fontNormal .title>a{ font-weight: normal}

// title右侧小图标
.title.new>a{ padding-right: 24px;background: url(data:image/gif;base64,R0lGODlhFgAOAPcDAP//AP////9ZAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCgADACwAAAAAFgAOAAAITQAHCBhIsKBBgwIPKlzIsOHBAAQhBpgoMeJDiAIqWtRYsKJEihlDYuw4cGLIjSdJlswIUqTDlzBfJoxZcIDNmTdz6tw5cKdPnj+D3gwIACH5BAkKAAMALAAAAAAWAA4AAAhXAAcIGEiwoEGDAg8qXEgQQEOGCwE4FOAwgMUAAjAO1FjQoceMBTGKPDhRYsaLIEcanEgRJMGRHBle1KgSos2bOBPiRDigJ8GeQIMKDTpwqNGhAo4qBRoQACH5BAkKAAMALAAAAAAWAA4AAAhXAAcIGEiwoEGDAg8qXMgQgEMADAlCHAhx4sAABDEadEhRwEOIGEMerOixZEYBIjdSrPgQpUuNBS1aLJgyos2bOBPiRDigJ8GeQIMKDTpwqNGhAo4qBRoQACH5BAkKAAMALAAAAAAWAA4AAAhNAAcIGEiwoEGDAg8qXMjQIACCDx1CFACg4sOLFA9WHIhxYseCGC9azPhxIsWSJBVGJDmyocuXMA8mjFlwgM2ZN3Pq3Dlwp0+eP4PeDAgAIfkECQoAAwAsAAAAABYADgAACE0ABwgYSLCgQYMCDypcyLDhQQAEIQKYKDHiQ4gCKlrUWLCiRIoZQ2LsOHBiyI0nSZbMCFKkw5cwXyaMWXCAzZk3c+rcOXCnT54/g94MCAA7) right center no-repeat; box-sizing: border-box; }



// size
// xl
.xl{
	&.text-list{
		line-height: 28px;
		.tl--item{
			.title>a{ font-size: 20px;}
			.detail,.detail>*,.note>*,.title .r,.title .r>a,.title .l,.title .l>a{ font-size:16px}
			// .title+div{ margin-top: 4px;}
		
			&.num{ padding-left:30px; }
			&>.num{ left:0; height: 28px;
				&>span{ width:20px; height:20px; line-height:20px;
					top:50%; left:0; margin-top:-10px; font-size:18px;
				}
			}
		}
		li.img,li.rect{ min-height: 138px;
			.tl--item{ padding-left: 173px;}
			.tl--item .img{ width: 158px; height:98px;}
		}
		li.cir{ min-height: 138px;
			.title,.title>.l,.title>.r{ padding-top: 20px;}
			.num .num{ margin-top: 20px;}
			.tl--item{ padding-left: 113px;}
			.tl--item .img{ width: 98px; height:98px;}
		}
		li{ padding-top: 20px; padding-bottom: 20px; }
	}
}

// md
.md{
	&.text-list{
		line-height:22px;
		.tl--item{
			.title>a{ font-size: 16px;}
			.detail,.detail>*,.note>*,.title .r,.title .r>a,.title .l,.title .l>a{ font-size:14px}
			// .title+div{ margin-top: 4px;}
		
			&.num{ padding-left:26px;}
			&>.num{ left:0; height: 22px;
				&>span{ width:18px; height:18px; line-height:18px;
					top:50%; left:0; margin-top:-9px; font-size:16px;
				}
			}
		}
		li.img,li.rect{ min-height: 88px;
			.tl--item{ padding-left: 123px;}
			.tl--item .img{ width: 108px; height:68px;}
		}
		li.cir{ min-height: 80px;
			.title,.title>.l,.title>.r{ padding-top: 6px;}
			.num .num{ margin-top: 6px;}
			.tl--item{ padding-left: 75px;}
			.tl--item .img{ width: 60px; height:60px;}
		}
		// .r{ margin-top: 3px;}
		li{ padding-top: 4px; padding-bottom: 4px;}
		&.line li{ padding-top: 10px; padding-bottom: 10px;}
	}
}


// sm
.sm{
	&.text-list{
		line-height:20px;
		.tl--item{
			.title>a{ font-size: 14px;}
			.detail,.detail>*,.note>*,.title .r,.title .r>a,.title .l,.title .l>a{ font-size:14px}
			// .title+div{ margin-top: 4px;}
		
			&.num{ padding-left:24px;}
			&>.num{ left:0; height: 20px;
				&>span{ width:16px; height:16px; line-height:16px;
					top:50%; left:0; margin-top:-8px; font-size:14px;
				}
			}
		}
		li.img,li.rect{ /*min-height: 68px;*/
			.tl--item{ padding-left: 123px;}
			.tl--item .img{ width: 108px; height:68px;}
		}
		li.cir{ min-height: 40px;
			// .title{ padding-top: 20px;}
			.tl--item{ padding-left: 52px;}
			.tl--item .img{ width: 40px; height:40px;}
		}
		// .r{ margin-top: 2px;}
		li{ padding-top: 4px; padding-bottom: 4px;}
		&.line li{ padding-top: 8px; padding-bottom: 8px;}
	}
}


// xs
.xs{
	&.text-list{
		line-height: 18px;
		.tl--item{
			.title>a{ font-size: 12px;}
			.detail,.detail>*,.note>*,.title .r,.title .r>a,.title .l,.title .l>a{ font-size:12px}
			// .title+div{ margin-top: 0px;}
		
			&.num{ padding-left:20px;}
			&>.num{ left:0; height: 18px;
				&>span{ width:14px; height:14px; line-height:14px;
					top:50%; left:0; margin-top:-7px; font-size:12px;
				}
			}
		}
		li.img,li.rect{ /*min-height: 56px;*/
			.tl--item{ padding-left: 105px;}
			.tl--item .img{ width: 90px; height:56px;}
		}
		li.cir{ min-height: 40px;
			// .title{ padding-top: 20px;}
			.tl--item{ padding-left: 50px;}
			.tl--item .img{ width: 40px; height:40px;}
		}
		// .r{ margin-top: 3px;}
		li{ padding-top: 2px; padding-bottom: 2px;}
		&.line li{ padding-top: 6px; padding-bottom: 6px;}
	}
}




// 文字块
.dark .text-list:not(.light){
	
	.tl--item{
		.title>a{ color: rgba(255,255,255,0.8);
			&:hover{ color: #FFF;}
		}
		.detail>*{ color: rgba(255,255,255,0.5)}
		.note>*{ color: rgba(255,255,255,0.5) }
		&>.num>span{ background-color:rgba(255,255,255,0.3); color: rgba(255,255,255,0.8);}
	}
	.title{
		.r{ color:rgba(255,255,255,0.5);}
	}
	
	&.dot--o,&.dot--i{ color: rgba(255,255,255,0.2);}
	
	&.line>li{ border-bottom: 1px solid rgba(255,255,255,0.15);}
}