zent
Version:
一套前端设计语言和基于React的实现
109 lines (108 loc) • 2.2 kB
CSS
.zent-table {
box-sizing: border-box;
margin-bottom:20px;
width:100%;
}
/* border-spacing: 0;*/
.zent-table a {
color: #38f;
cursor: pointer
}
.zent-table a:hover {
color: #27f;
cursor: pointer;
text-decoration: none;
}
.zent-table .tr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-bottom:1px solid #DCDCDC
}
.zent-table .tr:last-child {
border-bottom: none;
}
.zent-table .thead .tr {
border-top: none;
border-bottom:1px solid #e5e5e5;
background: #f2f2f2;
}
.zent-table .tbody .tr {}
.zent-table .tbody .tr:hover {
background: #f8f8f8;
}
.zent-table .cell {
position: relative;
display: inline-block;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
padding:10px;
padding-left:0;
text-align: left;
font-size:12px;
}
.zent-table .cell .asc, .zent-table .cell .desc {
margin-left: 3px;
}
.zent-table .cell .desc {}
.zent-table .cell .desc:after {
position: absolute;
content: '\2193';
}
.zent-table .cell .asc {}
.zent-table .cell .asc:after {
position: absolute;
content: '\2191';
}
.zent-table .cell .select-check {
position: absolute;
left:10px;
top:50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-top:0
}
.zent-table .cell:first-child {
padding-left: 10px;
}
.zent-table .cell:last-child {
text-align: right;
}
.zent-table .cell.empty-data {
line-height: 20px;
height: 40px;
text-align: center;
}
.zent-table .cell.cell--selection {
padding-left: 34px;
}
.zent-table .cell.cell--money {
text-align: right;
}
.zent-table .card__thumb {
float: left;
margin-right:5px;
height:50px;
}
.zent-table .card__title {
display: block;
height: 32px;
line-height:1.4;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
color:#38f
}
.zent-table .card__title:hover {
text-decoration: none;
}
.zent-table .card__info {
font-size: 12px;
color:#f60;
}