web-apps/apps/common/main/resources/less/combobox.less

.combobox {
    display: block;

    &.input-group-sm .btn { .input-sm(); }
    &.input-group-lg .btn { .input-lg(); }
    &.input-group-nr > .form-control,
    &.input-group-nr > .btn {
        height: @input-height-base;
        padding:  @padding-base-vertical @padding-base-horizontal;
        font-size:  @font-size-base;
        line-height: @line-height-base;
    }

    &.input-group-nr > .form-control {
        padding-right: 7px + 2 * @padding-base-horizontal;
    }

    &.input-group-nr > .btn {
        &.dropdown-toggle {
            .caret {
                width: 7px;
                height: 7px;
                border: 0;
                background-position: @arrow-small-offset-x @arrow-small-offset-y;
            }

            &:active,
            &.active {
                .caret {
                    background-position: @arrow-small-offset-x @arrow-small-offset-y;
                }
            }
        }
    }

    .form-control {
        .border-right-radius(0);
        border-right: 0;
        position: static;
        z-index: auto;
        float: none;
    }

    .btn,
    .btn:hover,
    .btn:focus {
        .border-left-radius(0);
        border-left: 0;
        border-color: @input-border;
        background-color: transparent;
        margin-left: -1px;
        position: absolute;
        top: 0;
        right: 0;
    }

    .btn-default:not(.disabled),
    &.open .dropdown-toggle.btn-default {
        background-color: @input-bg;
        border-color: @input-border;
    }

    li {
        a {
            white-space: pre;
        }

        &.selected {
            background-color: @primary;

            a {
                color: @dropdown-link-active-color;

                &:hover,
                &.hover,
                &:focus,
                &.focus {
                    background-color: @primary;
                }
            }
        }
    }

    // Font combobox
    // ------------------------
    li {
        &.selected {
            img {
                -webkit-filter: invert(100%) brightness(4);
                filter: invert(100%) brightness(4);
            }
            canvas {
                -webkit-filter: invert(100%) brightness(4);
                filter: invert(100%) brightness(4);
            }
        }

        &.divider:first-child {
            display: none;
        }
    }
}