datatable-fixed-columns.less 1.34 KB
Newer Older
Luis Gangas committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
/* ------------------------------------------------------------------------------
*
*  # Fixed columns
*
*  Extension that "freezes" in place the left most columns in a scrolling DataTable
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */


// Block out what is behind the fixed column's header and footer
.DTFC_Cloned {
    background-color: #fff;
    border-bottom: 0;

    // Add left/right border
    &.table {

        // In left column
        .DTFC_LeftWrapper & {
            border-right: 1px solid @table-border-color;
        }

        // In right column
        .DTFC_RightWrapper & {
            border-left: 1px solid @table-border-color;
        }
    }
}

// Remove dublicated header arrows and borders
.DTFC_LeftBodyWrapper,
.DTFC_RightBodyWrapper {
    .DTFC_Cloned {
        thead th {
            &:before,
            &:after {
                content: none;
            }
        }

        tbody > tr:first-child {
            > td,
            > th {
                border-top: 0;
            }
        }
    }
}

// Block out the gap above the scrollbar on the right
.DTFC_Blocker {
    background-color: white;
}

// Hide cloned columns on mobile
@media (max-width: @screen-xs-max) {
    .DTFC_LeftWrapper,
    .DTFC_RightWrapper {
        display: none;
    }
}