@import "../mixins/index"; @timeline-prefix-cls: ~"@{css-prefix}timeline"; @timeline-color: @border-color-split; .@{timeline-prefix-cls} { &-item { position: relative; padding-bottom: 12px; &-tail { position: absolute; left: 5px; top: 0; height: 100%; border-left: 2px solid @timeline-color; } &-pending &-tail { display: none; } &-head { position: absolute; width: 12px; height: 12px; background-color: #fff; border-radius: 100px; &-blue { border: 2px solid @primary-color; } &-red { border: 2px solid @error-color; } &-green { border: 2px solid @success-color; } } &-content { padding: 0 0 10px 24px; font-size: 12px; position: relative; top: -3px; } &-last { .@{timeline-prefix-cls}-item-tail { border-left: 2px dotted @timeline-color; display: none; } .@{timeline-prefix-cls}-item-content { min-height: 48px; } } } &&-pending &-item-last &-item-tail { display: block; } }