bk-magic-vue
Version:
基于蓝鲸 Magicbox 和 Vue 的前端组件库
97 lines (80 loc) • 1.66 kB
CSS
.bk-card{
width:100%;
background:#fff;
border:1px solid #dcdee5;
border-radius:2px;
position:relative;
}
.bk-card-border-none{
border:none;
-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow:0px 1px 2px 0px rgba(0,0,0,0.2);
}
.bk-card:hover{
-webkit-box-shadow:0px 3px 6px 0px rgba(99, 83, 83, 0.2);
box-shadow:0px 3px 6px 0px rgba(99, 83, 83, 0.2);
cursor:pointer;
}
.bk-card-head{
width:100%;
height:50px;
line-height:50px;
padding:0 24px;
position:relative;
}
.bk-card-head .title{
display:inline-block;
max-width:90%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.bk-card-head.no-line-height{
line-height:unset;
}
.bk-card-head .bk-card-head-icon{
margin-right:4px;
color:#979ba5;
cursor:pointer;
position:absolute;
top:50%;
margin-top:-8px;
}
.bk-card .bk-card-head .card-edit{
display:inline-block;
overflow:hidden;
}
.bk-card .bk-card-head .card-edit i{
color:#c4c6cc;
margin-left:2px;
}
.bk-card .bk-card-head-left{
padding-left:30px;
}
.bk-card .bk-card-head-left .bk-card-head-icon{
left:8px;
}
.bk-card .bk-card-head-right{
padding-right:30px;
}
.bk-card .bk-card-head-right .bk-card-head-icon{
right:8px;
}
.bk-card .collapse{
border-bottom:1px solid #f0f2f5;
}
.bk-card .bk-card-input{
width:50%;
position:absolute;
top:50%;
margin-top:-16px;
}
.bk-card-body{
width:100%;
padding:16px 24px 24px;
}
.bk-card-foot{
width:100%;
height:50px;
border-top:1px solid #f0f2f5;
}