bim-select/src/bim-select.less

A dropdown/select solution for Angular.js that handles millions of items without lag.

bim-select {
    display: block;
    .bim-select-input {
        opacity: 0 !important;
        border-top-left-radius: 4px !important; // Needs !important to override Bootstrap styles.
        border-bottom-left-radius: 4px !important; // Needs !important to override Bootstrap styles.
        z-index: 4 !important;
        &.is-displayed {
            opacity: 1 !important;
        }
    }
    .bim-select-dropdown {
        max-height: 300px;
        overflow: auto;

        .active {
            // color taken from @dropdown-link-active-*
            // See: https://git.io/vS8pF
            background: #337ab7;
            color: white;
        }
    }
    .bim-select-item {
        // Padding etc is tken from:
        // https://git.io/vS8hv
        display: block;
        padding: 3px 12px;
        line-height: 1.42857143;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bim-select-selected-item {
        width: auto !important;
        padding: 0;
        display: flex !important;
        align-items: center;
        overflow: hidden;
        position: absolute !important;
        top: 0;
        left: 0;
        right: 33px;
        z-index: 3 !important;
        &.is-clearable {
            right: 69px;
        }
    }

    .is-disabled {
        pointer-events: none;
        opacity: 0.6;
    }
}