xl-infinite-tree/examples/default/index.styl

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

@import 'nib'

#default {
    .preview {
        font-family: Consolas;
        font-size: 14px;
        font-weight: bold;
        white-space: pre-wrap;
        background-color: #282c34;
        border: solid 1px #ccc;
        color: #9197a3;
        padding: 20px;
        min-height: 400px;
    }
    .progress-bar {
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }
    .dropped-result {
    }
    .tree {
        border: 1px solid #ccc;
        background-color: #fff;
    }

    .infinite-tree-item.infinite-tree-drop-hover {
        border: 1px dotted #ccc;
        background-color: #f5f6f7;
    }
    .infinite-tree-toggler {
        text-align: center;
        margin-right: 5px;
    }
    .infinite-tree-folder-icon {
        width: 19px;
    }
    .infinite-tree-folder-icon:first-child {
        margin-left: 20px;
    }
    .infinite-tree-folder-icon:before {
        margin-right: 5px;
    }

    .infinite-tree-node .count {
        position: absolute;
        right: 4px;
        padding: 0 8px;
        height: 18px;
        line-height: 18px;
        background-color: #D8DFEA;
        color: #3B5998;
        font-style: normal;
        font-weight: bold;
        text-align: center;
        border-radius: 2px;
    }
    .infinite-tree-scroll {
        overflow: auto;
        max-height: 400px;
    }

    .infinite-tree-overlay {
        position: absolute;
        background-color: rgba(255, 0, 0, 0.5);
        border: 1px solid red;
        font-size: 20px;
        font-weight: bold;
        width: 100%;
        text-align: center;
    }
    .infinite-tree-overlay.hover {
        background-color: rgba(255, 0, 0, 0.6);
    }
}