ractive-ez-combobox/themes/theme.less

Ractive Ez UI Combobox

.ez-selectbox {

    input,
    .ez-selectbox-value,
    .ez-selectbox-placeholder {
        padding: @vSpacingTiny @vSpacingSmall;
        border: 0;
        font-family: inherit;
        font-size: inherit;
        background: inherit;
        color: inherit;

        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: break-word;
        overflow: hidden;
    }

    & > .ez-selectbox-editor {
        border: 1px solid @vColorLight;

        & > .ez-selectbox-placeholder {
            color: darken(@vColorLight, @vModSmall);
        }
    }

    & > .ez-selectbox-button {
        border: 1px solid @vColorLight;
        border-left: 0;
        background: inherit;
        color: inherit;
    }

    & > .ez-selectbox-options {
        max-height: 15em;
        overflow-x: hidden;
        overflow-y: auto;
        background: @vColorFront;
        border: 1px solid @vColorLight;

        & > .ez-selectbox-value {
            cursor: pointer;
    
            &:hover {
                background: @vColorLight;
            }
    
            &.ez-selected {
                background: @vColorMain;
                color: @vColorFront;
            }
        }
    }

    &:not(.ez-disabled) {
        & > .ez-selectbox-editor {
            background: @vColorFront;
        }

        & > .ez-selectbox-button {
            background: @vColorMain;
            color: @vColorFront;
            cursor: pointer;
    
            &:hover {
                background: lighten(@vColorMain, @vModSmall);
            }
        }
    }

    &.ez-disabled {
        background: lighten(@vColorLight, @vModTiny);
        color: darken(@vColorLight, @vModSmall);
    }
}

.ez-multibox {
    & > .ez-selectbox-editor {
        padding: @vSpacingTiny / 2;

        & > .ez-selectbox-value {
            margin: @vSpacingTiny / 2;

            & > .ez-selectbox-value-button {
                border: inherit;
                background: inherit;
                color: inherit;
            }
        }
    }

    &:not(.ez-disabled) {
        & > .ez-selectbox-editor {
            & > .ez-selectbox-value {
                background: @vColorMain;
                color: @vColorFront;

                & > .ez-selectbox-value-button {
                    cursor: pointer;
                }
            }
        }
    }
    
    &.ez-disabled {
        & > .ez-selectbox-editor {
            & > .ez-selectbox-value {
                background: darken(@vColorLight, @vModSmall);
                color: darken(@vColorLight, @vModLarge);
            }
        }
    }
}