jquery-grid/css/tree.css

jQuery Grid by Gijgo.com is a plug-in for the jQuery Javascript library. It is a very fast and extandable datagrid, and will add advanced interaction controls to any HTML table. This plugin has build-in integration with Bootstrap and Material Design. Free

ul.gj-list li [data-role="spacer"] {
    display: table-cell;
}

ul.gj-list li [data-role="expander"] {
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    cursor: pointer;
}

[data-type="tree"] ul li [data-role="expander"].gj-tree-material-icons-expander {
    width: 24px;
}

[data-type="tree"] ul li [data-role="expander"].gj-tree-font-awesome-expander {
    width: 24px;
}

[data-type="tree"] ul li [data-role="expander"].gj-tree-glyphicons-expander {
    width: 24px;
}

[data-type="tree"] ul li [data-role="expander"].gj-tree-glyphicons-expander .glyphicon {
    top: 4px;
    height: 24px;
}

/* Bootstrap Theme */
.gj-tree-bootstrap-3 ul.gj-list-bootstrap li {
    border: 0px;
    border-radius: 0px;
    color: #333;
}

.gj-tree-bootstrap-3 ul.gj-list-bootstrap li.active {
    color: #fff;
}

.gj-tree-bootstrap-3 ul.gj-list-bootstrap li.disabled {
    color: #777;
    background-color: #eee;
}

.gj-tree-bootstrap-4 ul.gj-list-bootstrap li {
    border: 0px;
    border-radius: 0px;
    color: #212529;
}

.gj-tree-bootstrap-4 ul.gj-list-bootstrap li.active {
    color: #fff;
}

.gj-tree-bootstrap-4 ul.gj-list-bootstrap li.disabled {
    color: #868e96;
}

.gj-tree-bootstrap-4 ul.gj-list-bootstrap li ul.gj-list-bootstrap {
    width: 100%;
}

.gj-tree-bootstrap-border ul.gj-list-bootstrap li {
    border: 1px solid #ddd;
}

.gj-tree-bootstrap-border ul.gj-list-bootstrap li ul.gj-list-bootstrap li {
    border-left: 0px;
    border-right: 0px;
}

.gj-tree-bootstrap-border ul.gj-list-bootstrap li:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.gj-tree-bootstrap-border ul.gj-list-bootstrap li:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.gj-tree-bootstrap-border ul.gj-list-bootstrap li ul.gj-list-bootstrap li:first-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.gj-tree-bootstrap-border ul.gj-list-bootstrap li ul.gj-list-bootstrap li:last-child {
    border-bottom: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

ul.gj-list-bootstrap li [data-role="expander"].gj-tree-material-icons-expander {
    padding-top: 8px;
    padding-bottom: 4px;
}

ul.gj-list-bootstrap li [data-role="expander"].gj-tree-material-icons-expander .gj-icon {
    width: 24px;
    height: 24px;
}

/* Material Design Theme */
ul.gj-list-md li.disabled > [data-role="wrapper"] > [data-role="expander"] {
    color: #9E9E9E; /* Gray 500 */
}

.gj-tree-md-border ul.gj-list-md li {
    border: 1px solid #616161; /* Gray 700 */
    margin-bottom: -1px;
}

.gj-tree-md-border ul.gj-list-md li ul.gj-list-md li {
    border-left: 0px;
    border-right: 0px;
}

.gj-tree-md-border ul.gj-list-md li ul.gj-list-md li:last-child {
    border-bottom: 0px;
}
.gj-tree-drop-above {    
    border-top: 1px solid #000;
}

.gj-tree-drop-below {
    border-bottom: 1px solid #000;
}

.gj-tree-bootstrap-3 ul.gj-list-bootstrap li [data-role="wrapper"].drop-above {
    border-top: 2px solid #000;
}

.gj-tree-bootstrap-3 ul.gj-list-bootstrap li [data-role="wrapper"].drop-below {
    border-bottom: 2px solid #000;
}

.gj-tree-bootstrap-4 ul.gj-list-bootstrap li [data-role="wrapper"].drop-above {
    border-top: 2px solid #000;
}

.gj-tree-bootstrap-4 ul.gj-list-bootstrap li [data-role="wrapper"].drop-below {
    border-bottom: 2px solid #000;
}

.gj-tree-drag-el {
    padding: 0px;
    margin: 0px;
    z-index: 1203;
}

.gj-tree-drag-el li {
    padding: 0px;
    margin: 0px;
}

.gj-tree-drag-el [data-role="wrapper"] {
    cursor: move;
    display: table;
}

.gj-tree-drag-el [data-role="indicator"] {
    width: 14px;
    padding: 0px 3px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.gj-tree-bootstrap-drag-el li.list-group-item {
    border: 0px;
    background: unset;
}

.gj-tree-bootstrap-drag-el [data-role="indicator"] {
    width: 24px;
    height: 24px;
    padding: 0px;
}

.gj-tree-md-drag-el [data-role="indicator"] {
    width: 24px;
    height: 24px;
    padding: 0px;
}