eqwad-combo-box.less

.user-select (@value) {
    -webkit-user-select: @value;
    -moz-user-select: @value;
    -ms-user-select: @value;
    user-select: @value;
}

.eq-combo-box {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #ccc;
    outline: 0;

    &:not(&_is-enabled) {
        .eq-combo-box__text {
            background-color: #f2f2f2;
            cursor: default;
            .user-select(none);
        }

        .eq-combo-box__open {
            cursor: default;
            opacity: 0.65;
        }
    }

    &_is-focused {
        border-color: #66afe9;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    }

    &__text {
        box-sizing: border-box;
        margin: 0;
        border: 0;
        outline: 0;
        height: 28px;
        padding: 4px 40px 4px 10px;
        line-height: 1.5;
        font: inherit;
        color: #555;
        text-overflow: ellipsis;
    }

    &__wrapper {
        position: relative;
        height: 28px;
    }

    &__open {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 30px;
        box-sizing: border-box;
        text-align: center;
        cursor: pointer;

        .fa {
            color: #333;
            margin-top: 7px;
        }
    }
}

.eq-combo-box-list {
    display: none;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #ccc;
    border-top: 0;
    padding: 5px 0;
    color: #555;
    position: absolute;
    z-index: 1000;
    background-color: #fff;
    box-sizing: border-box;
    overflow-x: hidden;
    max-height: 191px;

    &_is-opened {
        display: block;
    }

    &_is-opened:not(&_has-items) {
        display: none;
    }

    &_is-focused {
        border-color: #66afe9;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    }

    &__item {
        padding: 7px 10px;
        cursor: pointer;

        &:not(&_is-selected):hover {
            background-color: #f5f5f5;
        }

        &_is-selected {
            background-color: #e6e6e6;
        }

        &_is-highlighted:not(&_is-selected) {
            background-color: #f5f5f5;
        }
    }
}