heyui
Version:
A UI components Library.
100 lines (84 loc) • 2.19 kB
text/less
@timeline-prefix-cls: ~"@{prefix}timeline";
.genbordercolor(@name){
&.@{name}{
border-color:@@name;
}
}
.@{timeline-prefix-cls} {
list-style: none;
margin: 0;
padding: 0 10px;
&-item {
list-style: none;
position: relative;
display: flex;
&-pending &-tail {
display: none;
}
&-time {
width: 100px;
text-align: right;
padding: 0px 24px 30px 0px;
color: @gray-color;
font-size: 13px;
display: none;
text-align: right;
}
&-content {
padding: 0px 0px 30px 24px;
position: relative;
flex:1;
&:after{
content: '';
position: absolute;
top: 3px;
bottom: 0px;
left: -0.5px;
border-left: 1px dashed @gray1-color;
z-index: -1;
}
}
&-circle {
position: absolute;
width: 14px;
height: 14px;
border: 1px solid @blue-color;
border-radius: 14px;
left: -7px;
top: 3px;
background: #FFF;
.genbordercolor(green-color);
.genbordercolor(red-color);
.genbordercolor(yellow-color);
}
&.has-icon .@{timeline-prefix-cls}-item-circle{
font-size: 14px;
border: none;
}
&:last-child {
.@{timeline-prefix-cls}-item{
&-content,&-time {
padding-bottom: 10px;
&:after{
border-left:1px solid transparent;
}
}
}
}
}
&-time{
.@{timeline-prefix-cls}-item-time{
display: block;
}
}
&-pending &-item{
&:nth-last-of-type(2) {
.@{timeline-prefix-cls}-item-content{
padding-bottom: 40px;
&:after {
border-left: 1px dotted @gray2-color;
}
}
}
}
}