xl-infinite-tree/src/index.styl

A browser-ready tree library that can efficiently display a large amount of data using infinite scrolling.

@import 'nib';

.infinite-tree {
}
.infinite-tree-scroll {
    overflow: auto;
    max-height: 400px; /* Change the height to suit your needs. */
}
.infinite-tree-table {
    width: 100%;
}
.infinite-tree-content {
    // Outline removes default browser's borders for focused element.
    outline: 0;
    position: relative;

    .infinite-tree-selected.infinite-tree-item,
    .infinite-tree-selected.infinite-tree-item:hover {
        background: #deecfd;
        border: 1px solid #0066cc;
    }
    .infinite-tree-item {
        border: 1px solid transparent;
        cursor: default;
    }
    .infinite-tree-item:hover {
        background: #f2fdff;
    }
    .infinite-tree-item:disabled,
    .infinite-tree-item[disabled] {
        cursor: not-allowed;
        opacity: .5;
    }
    .infinite-tree-node {
        position: relative;
    }
    .infinite-tree-toggler {
        color: #666;
        user-select: none;
    }
    .infinite-tree-toggler:hover {
        color: #333;
        text-decoration: none;
    }
    .infinite-tree-title {
        cursor: pointer;
        user-select: none;
    }
}
// centering message that appears when no data provided
.infinite-tree-no-data {
    text-align: center;
}