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

// 进度条元素
.e_progress {
	overflow:hidden; display:inline-flex; width:25em; font-size:75%; vertical-align:top;
	.e_progressBar { background:@bg-dark-1; color:@bg; overflow:hidden; height:1em/0.75; flex:1; display:block;}
	.e_progressBar > .e_progressProgress { float:left; background:@primary; height:1em/0.75; line-height:1/0.75em; display:block; text-align:center; color:@bg; padding:0 0.25/0.75em; .x_bs;}
	.e_progressBar > .e_progressOverage { overflow:hidden; display:block; text-align:center;}
	.e_progressValue { color:@fg-light-4; font-size:1em/0.75; line-height:1; margin-left:0.5em;}
}



// 大小
.e_progress-s {
	font-size:85.71%*0.75;
}
.e_progress-xs {
	font-size:75%*0.75;
}



// 色彩
.e_progress-green {
	.e_progressBar > .e_progressProgress { background:@success;}
}
.e_progress-red {
	.e_progressBar > .e_progressProgress { background:@danger;}
}
.e_progress-orange {
	.e_progressBar > .e_progressProgress { background:@warning;}
}



// 固定 value 尺寸
.e_progress-value-s {
	.e_progressValue { width:2em; overflow:hidden; text-align:right; display:block;}
}
.e_progress-value-m {
	.e_progressValue { width:4em; overflow:hidden; text-align:right; display:block;}
}
.e_progress-value-l {
	.e_progressValue { width:8em; overflow:hidden; text-align:right; display:block;}
}
.e_progress-value-none {
	.e_progressValue { display:none;}
}



// 圆角
.e_progress-r {
	.e_progressBar { border-radius:2em;}
}



// 渐变
.e_progress-gd {
	.e_progressBar > .e_progressProgress { background:linear-gradient(to right, @primary, @success);}
}
.e_progress-gd-green {
	.e_progressBar > .e_progressProgress { background:linear-gradient(to right, saturate(@success-light-3, 30%), @success);}
}
.e_progress-gd-red {
	.e_progressBar > .e_progressProgress { background:linear-gradient(to right, saturate(@danger-light-3, 30%), @danger);}
}
.e_progress-gd-blue {
	.e_progressBar > .e_progressProgress { background:linear-gradient(to right, saturate(@primary-light-3, 30%), @primary);}
}
.e_progress-gd-orange {
	.e_progressBar > .e_progressProgress { background:linear-gradient(to right, saturate(@warning-light-3, 30%), @warning);}
}
.e_progress-gd-redBlue {
	.e_progressBar > .e_progressProgress { background:linear-gradient(to right, @danger, @primary);}
}
.e_progress-gd-greenBlue {
	.e_progressBar > .e_progressProgress { background:linear-gradient(to right, @success, @primary);}
}
.e_progress-gd-blueRed {
	.e_progressBar > .e_progressProgress { background:linear-gradient(to right, @primary, @danger);}
}
.e_progress-gd-orangeRed {
	.e_progressBar > .e_progressProgress { background:linear-gradient(to right, @warning, @danger);}
}
.e_progress-gd-redOrange {
	.e_progressBar > .e_progressProgress { background:linear-gradient(to right, @danger, @warning);}
}



// 载入
.e_progress-loading {
	position:fixed; top:0; left:0; z-index:99999; width:100%; transition:opacity 0.3s ease-out;
	.e_progressBar { background:none; height:0.25em;}
}