app/themes/light/grid.less

@import "variables.less";


.sorting-icon {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url("images/arrows-sprite.png") 0 0;
}

.sorting-asc {
   .sorting-icon;
}

.sorting-desc {
    .sorting-icon;
    background-position: -13px 0;
}

.dropdown-menu {
    list-style: none;
}

.grid-view {
    width: 98%;
    margin: 10pt;

    .column-config-button {
        background: url("images/icons-sprite.png") -1px -1px no-repeat;
        height: 10pt;
        padding: 0;
        width: 10pt;
        cursor: pointer;
        margin-left: 4pt;
    }

    .column-config {

        width: 2pt;

        .dropdown-menu {
            background: none repeat scroll 0 0 #000;
            padding: 2pt;
            position: absolute;
            text-align: left;
            width: 100pt;
            right: 20pt;
        }

        .dropdown-column-selector {
        }

    }

    tr.row-selected {
        background: @form-button-hover-color;
    }

    tr.ui-row-ltr td {
        border-right-width: 0pt;
        text-align: left;
    }

    tr.grid-row td {
        border-bottom: 1pt solid grey;
    }

    tr.grid-row:hover td {
        border-bottom: 1pt solid @form-button-hover-color;
    }

    th.grid-header {
        cursor: auto;
    }

    th.grid-header-sortable {
        cursor: pointer;
    }

    th.checkbox-header {
        width: 30pt;
    }

    tr.grid-row-header {
        background: @bg-color-light-gray;
        color: @form-button-hover-color;

        th {
            border: 1pt solid grey;
        }

    }

    .grid-cell {
        padding-left: 2pt;
    }

}

.checkbox-cell {
    text-align: center;
}

.toolbar-button.unselectable {
    cursor: pointer;
    float: right;
    border-right: 1pt solid gray;
    height: 100%;
    padding: 0 3pt;
}

.toolbar-button:hover {
    background: @form-button-hover-color;
    color: white;
}

.grid-toolbar {
    width: 98%;
    margin: 10pt;
    background: none repeat scroll 0 0 #4d4d4d;
    border: 1pt solid grey;
    color: #6981fe;
    height: 15pt;
}

.buttons-block {
    float: left;
    height: 100%;
}

.paging-icon-basic {
    background: url("images/paging-sprite.png") 0 0 no-repeat;
    height: 20px;
    width: 15px;
    float: right;
    cursor: pointer;
    border-right: 1pt solid grey;
}

.grid-paging {
    float: right;

    .page-info {
        color: white;
        border-right: 1pt solid grey;
        padding: 0 5pt;
    }

    div {
        float: right;
    }

    div.toolbar-previous-page {
        .paging-icon-basic;
        background-position: -77px 4px;
    } 

    div.toolbar-first-page {
       .paging-icon-basic;
        background-position: -25px 4px; 
        border-left: 1pt solid grey;
    }

    div.toolbar-last-page {
       .paging-icon-basic;
        background-position: -51px 4px;
        border-right: none;
    }

    div.toolbar-next-page {
       .paging-icon-basic;
        background-position: -103px 4px; 
    }

    div.toolbar-refresh-page  {
        .paging-icon-basic;
        background-position: -13px 5px;
    }


    .ui-state-disabled {
        float: right;
        height: 100%;

        div.toolbar-previous-page {
            .paging-icon-basic;
            background-position: -77px -13px;
        }

        div.toolbar-first-page {
           .paging-icon-basic;
            border-left: 1pt solid grey;
            background-position: -25px -13px; 
        }

        div.toolbar-last-page {
           .paging-icon-basic;
            border-right: none;
            background-position: -51px -13px; 
        }

        div.toolbar-next-page {
            .paging-icon-basic;
            background-position: -103px -13px; 
        }
    }
}