deer-ui/lib/table/style.less

React.js UI components for PC Web

@import '../styles/themes.less';

@prefixCls: deer-ui-table;

.@{prefixCls}{
    width:100%;
    font-size: 14px;
    overflow: auto;
    &-header{
        height: 55px;
        border-bottom: 1px solid @default-table-border-color;
        display: flex;
        font-weight: bold;
        &-td{
            width: 100%;
            padding: 16px;
            text-align: left;       
        }
        &-bordered{
            border-left: 1px solid @default-table-border-color;
            border-top: 1px solid @default-table-border-color;
            &:last-child{
                border-right: 1px solid @default-table-border-color;
            }
        }
        &.@{prefixCls}-header-hideHeader {
            display: none;
        }
        &.@{prefixCls}-header-noBottomLine {
            border-bottom: none;
        }
    }

    .@{prefixCls}-content{
        &-tr{
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all @default-transition;
            &:nth-child(odd){
                background: @default-table-odd-color;
            }
            &:nth-child(even){
                background: @default-table-even-color;
            } 
        }
        &-td{
            width: 100%;
            padding: 16px;
            text-align: left;  
        }   
        &-tr-hover:hover{
            background: @default-table-hover-color;
        }
        &-tr-bordered {
            border-left: 1px solid @default-table-border-color;
            border-right: 1px solid @default-table-border-color;
            .deer-ui-table-content-td-bordered{
                &:last-child{
                    border-right: none;
                }
            }
        }
        .@{prefixCls}-empty{
            display: flex;
            background: #fff;
            min-height: 300px;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            &-icon{
                align-items: center;
            }
            &-content{
                padding: 20px
            }
        }
    }
}