Grido LESS

grido.less

.grido table, .grido .filter {
    background: #fff;
    border-radius: 4px;
    border-spacing: 0;
    border: 1px solid #CACACA;
    text-align: left;
    width: 100%;
}
.grido table, .grido .filter.outer {
    box-shadow: 1px 1px 12px -1px rgba(0,0,0,.2);
}
.grido thead th,.grido tfoot td,.grido .filter.outer {
    background: #E9E9E9;
    background:-moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
    background:-webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
    background:-o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
    background:-ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
    background:linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
}
.grido {
    thead {
        font-size: 1.15em;
        .filter {
            th {
                background: #f2f2f2;
                background: -moz-linear-gradient(top, #f2f2f2 0%, #e9e9e9 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#e9e9e9));
                background: -webkit-linear-gradient(top, #f2f2f2 0%,#e9e9e9 100%);
                background: -o-linear-gradient(top, #f2f2f2 0%,#e9e9e9 100%);
                background: -ms-linear-gradient(top, #f2f2f2 0%,#e9e9e9 100%);
                background: linear-gradient(to bottom, #f2f2f2 0%,#e9e9e9 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#e9e9e9',GradientType=0 );
            }
        }
        th {
            border-bottom: 1px solid #CACACA!important;
            padding: 3px 6px!important;
        }
    }
    tr.head {
        th:first-child {
            border-radius: 4px 0 0 0;
        }
        th:last-child {
            border-radius: 4px 4px 0 0;
        }
    }
    th.column {
        width: 7%;
        span {
            width: 0;
            height: 0;
            vertical-align: top;
            content: "";
            float: right;
            margin-top: 8px;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
        }
    }
    tfoot {
        font-size: 1.1emtext-align: center;
        line-height: 23px!important;
        tr {
            height: 35px;
            td {
                line-height: 22px;
            }
        }
        td {
            border-bottom:0;
        }
        td:first-child {
            border-radius: 0 0 0 4px;
        }
        td:last-child {
            border-radius: 0 0 4px 4px;
        }
        .operations {
            float: left;
            text-align: left;
        }
        .count {
            float:right;
            text-align: left;
        }
        .form-control {
            display: inline;
        }
    }
    .no-results {
        text-align: center;
    }
    tr.filter {
        height: 20px;
        th {
            padding: 2px 6px 2px 6px;
            border-radius: 0;
            height: 35px;
        }
    }
    .filter.outer {
        display: inline-block;
        width: 100%;
        margin-bottom: 20px;
        min-height: 5em;
        .items {
            width: 85%;
            float: left;
            & > span {
                float: left;
                display: block;
                width: 12em;
                height: 5em;
                padding: 7px;
            }
        }
        label {
            margin-bottom: 2px;
            font-size: 12px;
        }
        .buttons {
            float: right;
            margin: 1.4em 1em 0;
        }
    }
    th.column.asc {
        span {
            border-bottom: 4px solid #555;
        }
    }
    th.column.desc {
        span {
            border-top: 4px solid #555;
        }
    }
    th.actions {
        width: 15%;
        text-align: center;
    }
    td.actions {
        a {
            margin-right: 3px;
        }
    }
    th.checker {
        width: 1%;
        text-align: center;
    }
    td.checker {
        text-align: center;
    }
    .center {
        text-align: center;
    }
    .left {
        text-align: left;
    }
    .right {
        text-align: right;
    }
    table {
        border-collapse: inherit;
        thead {
            th {
                vertical-align: middle;
            }
        }
        tfoot {
            td {
                text-align: inherit;
            }
        }
    }
    input.text {
        text-indent: 3px;
    }
    .buttons {
        input {
            width: auto;
            height: auto;
            margin-right: 4px;
        }
    }
    .form-control {
        height: auto;
        width: auto;
    }
    tbody {
        .form-control {
            width: 100%;
            height: 23px;
            padding: 0 0 0 3px;
        }
    }
    tr.active {
        td {
            background-color: #d9edf7!important;
        }
    }
}
.grido th,.grido td {
    border:1px solid #CACACA;
    border-width: 0 1px 1px 0;
    height: 30px;
}
.grido .filter.outer select,.grido .filter.outer input.text,.grido .filter.inner select,.grido .filter.inner input.text {
    width: 100%;
}
.grido th.buttons,.grido td.actions {
    text-align: center;
}
.grido th:last-child,.grido td:last-child {
    border-right: 0;
}
.grido table th, .table td {
    vertical-align: middle;
}
.grido table td, .grido table th {
    border-top: 0!important;
}
.grido tbody tr td, .grido tfoot tr td {
    vertical-align: middle;
    height: 20px;
    padding: 5px;
}
.grido input.text, .grido select {
    margin-bottom: 0;
    padding: 0;
    height: 23px;
    width: auto;
}
.btn-mini {
    [class*=" {
        icon-"] {
            margin-top: 1px;
        }
    }
}
.btn-sm .fa,.btn-xs .fa,small .fa,.btn-group-sm .fa,.btn-group-xs .fa,.input-group-sm .fa,.input-group-xs .fa {
    font-size: 14px;
    top: 1px;
    position: relative;
    /**;
}