bk-magic-vue
Version:
基于蓝鲸 Magicbox 和 Vue 的前端组件库
237 lines (195 loc) • 6.94 kB
CSS
.bk-timeline{
list-style:none;
margin:16px 0 0 0;
padding:0;
text-align:left;
line-height:normal;
font-weight:400;
font-style:normal;
}
.bk-timeline .bk-timeline-dot{
position:relative;
border-left:1px solid #d8d8d8;
padding-left:16px;
padding-bottom:24px;
font-size:0;
margin-top:calc(11px + 2px)
}
.bk-timeline .bk-timeline-dot::before{
content:'';
display:inline-block;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:11px;
height:11px;
background:#fff;
border:2px solid #d8d8d8;
border-radius:50%;
position:absolute;
top:calc((11px + 1px) * -1);
left:-6px;
}
.bk-timeline .bk-timeline-dot:last-child{
border-left:1px solid transparent;
padding-bottom:0;
}
.bk-timeline .bk-timeline-dot .bk-timeline-title{
font-size:14px;
color:#63656e;
padding-bottom:10px;
display:inline-block;
margin-top:-3px
}
.bk-timeline .bk-timeline-dot .bk-timeline-title.has-event{
cursor:pointer;
}
.bk-timeline .bk-timeline-dot .bk-timeline-content{
max-width:300px;
word-break:break-all;
font-size:14px;
color:#666;
}
.bk-timeline .bk-timeline-dot .bk-timeline-icon{
display:inline-block;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:15px;
height:15px;
background:#fff;
border:2px solid #d8d8d8;
border-radius:50%;
position:absolute;
top:calc((15px + 1px) * -1);
left:-8px;
}
.bk-timeline .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner{
display:inline-block;
-webkit-transform:scale(0.6) translate(-1px, -0.45px);
transform:scale(0.6) translate(-1px, -0.45px);
}
.bk-timeline .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner >:first-child{
font-size:12px ;
}
.bk-timeline .bk-timeline-dot .bk-timeline-section{
position:relative;
top:calc((11px + 2px) * -1);
}
.bk-timeline .bk-timeline-dot.bk-timeline-item-large{
margin-top:calc(15px + 2px)
}
.bk-timeline .bk-timeline-dot.bk-timeline-item-large::before{
width:15px;
height:15px;
top:calc((15px + 1px) * -1);
left:-8px;
}
.bk-timeline .bk-timeline-dot.bk-timeline-item-large > .bk-timeline-section{
top:calc((15px + 1px) * -1);
}
.bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon{
margin-top:calc(15px + 2px)
}
.bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon::before{
display:none;
}
.bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon > .bk-timeline-section{
top:calc((15px + 1px) * -1);
}
.bk-timeline .bk-timeline-dot:first-child{
margin-top:0;
}
.bk-timeline .bk-timeline-item-blue::before,
.bk-timeline .bk-timeline-item-blue .bk-timeline-icon{
color:#3a84ff;
border-color:#3a84ff;
}
.bk-timeline .bk-timeline-item-blue.bk-timeline-item-filled::before,
.bk-timeline .bk-timeline-item-blue.bk-timeline-item-filled .bk-timeline-icon{
background:#3a84ff;
}
.bk-timeline .bk-timeline-item-red::before,
.bk-timeline .bk-timeline-item-red .bk-timeline-icon{
color:#ea3636;
border-color:#ea3636;
}
.bk-timeline .bk-timeline-item-red.bk-timeline-item-filled::before,
.bk-timeline .bk-timeline-item-red.bk-timeline-item-filled .bk-timeline-icon{
background:#ea3636;
}
.bk-timeline .bk-timeline-item-green::before,
.bk-timeline .bk-timeline-item-green .bk-timeline-icon{
color:#40c024;
border-color:#40c024;
}
.bk-timeline .bk-timeline-item-green.bk-timeline-item-filled::before,
.bk-timeline .bk-timeline-item-green.bk-timeline-item-filled .bk-timeline-icon{
background:#40c024;
}
.bk-timeline .bk-timeline-item-yellow::before,
.bk-timeline .bk-timeline-item-yellow .bk-timeline-icon{
color:#ff9c01;
border-color:#ff9c01;
}
.bk-timeline .bk-timeline-item-yellow.bk-timeline-item-filled::before,
.bk-timeline .bk-timeline-item-yellow.bk-timeline-item-filled .bk-timeline-icon{
background:#ff9c01;
}
.bk-timeline .bk-timeline-item-gray::before,
.bk-timeline .bk-timeline-item-gray .bk-timeline-icon{
color:#d8d8d8;
border-color:#d8d8d8;
}
.bk-timeline .bk-timeline-item-gray.bk-timeline-item-filled::before,
.bk-timeline .bk-timeline-item-gray.bk-timeline-item-filled .bk-timeline-icon{
background:#d8d8d8;
}
.bk-timeline .bk-timeline-item-default{
border-left:1px solid #999;
}
.bk-timeline .bk-timeline-item-default::before,
.bk-timeline .bk-timeline-item-default .bk-timeline-icon{
color:#999;
border:2px solid #999;
}
.bk-timeline .bk-timeline-item-primary{
border-left:1px solid #3a84ff;
}
.bk-timeline .bk-timeline-item-primary::before,
.bk-timeline .bk-timeline-item-primary .bk-timeline-icon{
color:#3a84ff;
border:2px solid #3a84ff;
}
.bk-timeline .bk-timeline-item-warning{
border-left:1px solid #ffb400;
}
.bk-timeline .bk-timeline-item-warning::before,
.bk-timeline .bk-timeline-item-warning .bk-timeline-icon{
color:#ffb400;
border:2px solid #ffb400;
}
.bk-timeline .bk-timeline-item-success{
border-left:1px solid #30d878;
}
.bk-timeline .bk-timeline-item-success::before,
.bk-timeline .bk-timeline-item-success .bk-timeline-icon{
color:#30d878;
border:2px solid #30d878;
}
.bk-timeline .bk-timeline-item-danger{
border-left:1px solid #ff5656;
}
.bk-timeline .bk-timeline-item-danger::before,
.bk-timeline .bk-timeline-item-danger .bk-timeline-icon{
color:#ff5656;
border:2px solid #ff5656;
}
.bk-timeline .bk-timeline{
margin-top:24px;
}
.bk-timeline .bk-timeline .bk-timeline-dot{
border-left-style:dashed;
padding-bottom:12px
}
.bk-timeline .bk-timeline .bk-timeline-dot:last-child{
padding-bottom:0;
}