table.less 7.59 KB

/*表格*/
.xn-table-wrap {
    margin: 0;
    padding: 0;
    font-size: @xn-font-size;

    .table {
        border: none;
        margin-bottom: 0;

        thead {
            tr {
                border-top: solid 1px transparent;
                border-bottom: solid 1px transparent;
                th {
                    border: none;
                    font-size: @xn-font-size;
                    color: @xn-font-primary;
                    font-weight: normal;
                }
            }
        }
        tbody {
            tr {
                /*height: 70px;*/
                border-bottom: solid 1px @xn-line-color;

                .selectCl {
                    background: #F8F8FF;
                    color: @xn-font-primary;
                    font-weight: bold;

                    &:nth-last-child(2) {font-weight: normal;}

                    &:last-child {font-weight: normal;}

                    pre {
                        color: @xn-font-primary;
                    }
                }

                td {
                    border: none;
                    background: #fff;
                    padding:8px;
                    color: @xn-font-minor;
                    font-size: @xn-font-size;
                    pre {color: @xn-font-minor;}

                    .icon-closed {
                        padding-top: 15px;
                        width: 85px;
                        font-size: 45px;
                        line-height: 40px;
                        display: inline-block;
                    }
                }
            }
        }
    }

    .pagination {
        float: none;
        margin: 20px 0;
    }
}
.xn-table-wrap input[type="radio"],.xn-table-wrap input[type="checkbox"]{
    float: none;
    margin-right: 5px;
    margin-top: 7px;
}
.xn-table-wrap .table thead th{

    font-size:@xn-font-size-lg;
    height: 30px;
    vertical-align:middle;
    line-height: 30px;
    padding: 0 8px;
    background: @xn-minor-table-bg;
}
.xn-table-wrap .table tbody  td{
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom: @xn-border;
}

.xn-table-wrap .table-bordered > thead > tr > th{
    border-bottom: @xn-border;
}
.xn-table-wrap .table-bordered > thead > tr > th,
.xn-table-wrap .table-bordered > tfoot > tr > th,
.xn-table-wrap .table-bordered > thead > tr > td,
.xn-table-wrap .table-bordered > tbody > tr > td,
.xn-table-wrap .table-bordered > tfoot > tr > td {border-color:@xn-line-color; }

.xn-table-wrap .table-striped > tbody > tr >td ,.xn-table-wrap .table-striped > tbody > tr >th{
    background: @xn-font-white;
}
.xn-table-wrap .table-striped >tbody>tr>td{
    vertical-align:middle;
    /*    word-break: break-all;*/
    color: @xn-font-minor;
    min-height: 40px;
}
.xn-table-wrap .table-striped >tbody>tr>td>i{
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
}


.xn-table-wrap .table tbody .center{
    text-align: center;
}
.xn-table-wrap .table tbody .top{
    vertical-align:top;
}
.xn-table-wrap .table tbody .state-true{
    color: #5f8459;
    font-weight: bold;
}
.xn-table-wrap .table tbody .state-false{
    color:@xn-font-red;
    font-weight: bold;
}
.xn-table-wrap .table tbody .view{
    position: relative;
    width: 92px;
}
.xn-table-wrap .table tbody .view .view-a{
    padding-left: 10px;
    text-align: left;
    width: 90px;
    height: 30px;
    line-height: 30px;
    border: 1px solid transparent;
    display: inline-block;
    cursor: pointer;
    .border-radius(4px 4px 0 0);
}
.xn-table-wrap .table tbody .view .view-a-center{
    text-align: center;
    padding-left: 0;
}
.xn-table-wrap .table tbody .view .view-a:hover{
    text-decoration: none;
    border-top: 1px solid #bbbbbb;
    border-left: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
    background: @xn-minor-orange;
    color: @xn-font-white;
}
.xn-table-wrap .table tbody .view .view-a i{
    width: 15px;
    height: 15px;
    display: inline-block;
    position: absolute;
    line-height: 30px;
    right: 5px;
}
.xn-table-wrap .table tbody .view .view-ul{
    position: absolute;
    top: 30px;
    left:1px;
    width: 90px;
    background: @xn-font-white;
    z-index: 99;
    display: none;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    .border-radius(0 0  4px 4px);
}

.xn-table-wrap .table tbody .view li{
    width: 100%;
    overflow: hidden;
    border-top: 1px solid #bbbbbb;
    height: 30px;
}
.xn-table-wrap .table tbody .view li a{
    text-align: center;
    line-height: 30px;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}
.xn-table-wrap .table tbody .view li a:hover{
    text-decoration: none;
    background: @xn-minor-orange;
    color: @xn-font-white;
}

.xn-table-wrap .table tbody .showMessage .view-a{
    border-top: 1px solid #bbbbbb;
    border-left: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
    background: @xn-font-white;
}
.xn-table-wrap .table tbody .showMessage .view-a i{
    display: none;
}
.xn-table-wrap .table tbody .showMessage .view-ul {
    display: inline-block;
    border-bottom: 1px solid #bbbbbb;
    border-left: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
}
.xn-table-wrap .table tfoot{
    text-align: center;
    font-size: @xn-font-size;
    color: @xn-font-minor;
}

/*表格排序*/
.xn-table-wrap .order{
    margin-top: 5px;
    width: 20px;
    display: inline-block;
    float: right;
    overflow: hidden;
    margin-left: 5px;
}
.xn-table-wrap .order i.icon-upward,.xn-table-wrap .order i.icon-downward{
    text-align: center;
    float: right;
    line-height: 10px;
    font-size: @xn-font-size-sm;
    height: 10px;
    width: 100%;
    color: #dcdcdc;
    cursor: pointer;
}
.xn-table-wrap .order i.order-cur{
    color: #666;
}
table [class*="xn-col-md-"],table [class*="xn-col-sm-"] {
    float:none;
}




/*表格树结构*/

/*树结构处理*/
.xn-table-tree{
    .tree-operating{
        float: right !important;
        height: 20px;
        .icon{
            margin-left: 10px;
            height: 20px;
            width: 20px;
            line-height: 20px;
            cursor: pointer;
        }
        .xn-icon{
            margin-left: 10px;
            height: 20px;
            width: 20px;
            line-height: 20px;
            cursor: pointer;
        }
    }
    .tree{
        margin: -8px;
        min-height: 36px;
        overflow: hidden;
        padding: 8px 0;
        border-left: 2px solid transparent;
        .icon{
            height: 20px;
            width: 20px;
            line-height: 20px;
            cursor: pointer;
        }
        .xn-icon{
            height: 20px;
            width: 20px;
            line-height: 20px;
            cursor: pointer;
        }
        .tree-collapsed{
            float: left;
            height: 20px;
            width: 20px;
            margin: 0 10px;
            color: #999;
        }

        .tree-content{
            overflow: hidden;
            margin-right: 10px;
        }
    }
    .tree-even{
        border-left: 2px solid @xn-minor-blue;
    }
    .tree-odd{
        border-left: 2px solid @xn-minor-orange;
    }
    .tree-0{
        padding-left: 0;
    }
    .tree-1{
        padding-left: 20px;
    }
    .tree-2{
        padding-left: 40px;
    }
    .tree-3{
        padding-left: 60px;
    }
    .tree-4{
        padding-left: 80px;
    }
    .tree-5{
        padding-left: 100px;
    }
    .tree-6{
        padding-left: 120px;
    }
    .tree-7{
        padding-left: 140px;
    }
    .tree-8{
        padding-left: 160px;
    }
    .tree-9{
        padding-left: 180px;
    }
}