react-zeanium-ui-ui/less/base/table.less

Zeanium UI Framework for React.js

/*
 * Table
 */
@table-base-color: rgb(230, 230, 230);
@table-thead-font-color: #6a6a6a;
@table-thead-bg-color: #FFFFFF;
@table-tbody-bg-color: #FFFFFF;
@table-filter-bg-color: #FFFFFF;
@table-editable-bg-color: #FFFFFF;

.c-table {
    width: 100%;
    /*border: 1px solid @table-base-color;*/
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    .row{
        line-height: 3rem;
        border-bottom: 1px solid rgb(230, 230, 230);
        border-bottom: 1px solid #e6e6e6;
        border-left: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;

        &.editable {
            color: #374047;
            &>td, &>th{
                border: none;
                padding: 0px;
                margin: 0px;
                background-color: #FFF;
                border-bottom: 1px solid #e6e6e6;
                border-left: 1px solid #e6e6e6;
                overflow: visible;
                line-height: 0px;
                &:first-child{
                    border-left: 0px;
                }
                &>*, .input, input, textarea{
                    display: block !important;
                    width: 100% !important;
                    border: none !important;
                    margin: 0px !important;
                    /*height: 100% !important;*/
                    line-height: 30px;
                }
                .input, input, textarea{
                    padding: 0px 4px;
                    border: none !important;
                }
            }
        }
        &.thead{

        }
        &.filter{

        }
        &>th, &>td{
            border: none;
            text-align: left;
            padding: 4px 6px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
            &.text-align-right{
                text-align: right !important;
            }
            &.text-align-center{
                text-align: center !important;
            }
            &.text-align-left{
                text-align: left !important;
            }
            position: relative;
        }
    }
    &>thead{
        display: table-header-group;
        vertical-align: middle;
        color: @table-thead-font-color;
        font-size: 1.7rem;
        &>.row{
            &>th{
                border-left: 1px solid rgb(230, 230, 230);
                border-top: 1px solid rgb(230, 230, 230);
                &:first-child{
                    border-left: 0px;
                }
                .sort{
                    position: absolute;
                    top: 0px;
                    right: 0px;
                    margin: 10px 5px;
                    cursor: pointer;
                }
            }
        }
        &>*{
            font-weight: bolder;
        }
    }

    &>tbody{
        /*background-color: @table-tbody-bg-color;*/
        background-color: #f5f5f5;
        &>.row{
            font-size: 1.5rem;
            &:nth-child(even){
                /*background-color: #F0F0F0;*/
            }
            &.selected>*{
                /*color: #FFF;*/
                text-decoration: none;
                border-color: #FFF;
                background-color: #CCD8DF;
            }
            &>td{

            }
            &:hover{
                cursor: pointer;
                background: #f4f1f1;
                /*text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);*/
            }
        }
    }
}

.default {

}