metro4/source/components/tag-input/tag-input.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

@taginput-item-size: 26px;

.tag-input {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 0 2px;
    cursor: text;
    position: relative;
    height: auto;
    min-height: @inputHeight;

    .original-input {
        width: 1px;
        height: 1px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    .input-wrapper {
        width: auto;
        border: none!important;
        height: @taginput-item-size;
        line-height: @taginput-item-size;
        font-size: 14px;
        padding: 0 4px;
        &:focus {
            box-shadow: none!important;
        }
    }

    .input-clear-button {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        background-color: transparent;
        height: 34px;
        min-width: 34px;
        &:hover {
            background-color: @light;
            text-shadow: rgba(0,0,0,.25) 0.1em 0.1em 0.2em;
        }
    }

    &.padding-for-clear {
        padding-right: 48px;
    }
}

.tag-input {
    &.input-large {
        min-height: @input-lx;

        input {
            height: @input-lx - 2;
            font-size: 1.3rem;
            padding: 0 10px;
            line-height: @input-lx - 2;
            min-width: 5em;
        }

        .button {
            height: @input-lx - 2;
            min-width: @input-lx - 2;

            font-size: 1.3rem;

            [class*=mif-] {
                font-size: 1.3rem;
            }

            [class*=default-icon-] {
                width: 21px;
                height: 21px;
            }

            .input-clear-button {
                width: @input-lx - 2;
                padding: 0;
            }
        }
    }

    &.input-small {
        min-height: @input-sx;

        input {
            height: @input-sx - 2;
            font-size: .9rem;
            padding: 0 4px;
            line-height: @input-sx - 2;
            min-width: 5em;
        }

        .button {
            height: @input-sx - 2;
            min-width: @input-sx - 2;
            font-size: .9rem;

            [class*=mif-] {
                font-size: .9rem;
            }

            [class*=default-icon-] {
                width: 14px;
                height: 14px;
            }
        }

        .input-clear-button {
            width: @input-sx - 2;
            padding: 0;
        }
    }
}

.tag-input {
    &.static-mode {
        border: none!important;
        cursor: default;

        .button, input {
            display: none!important;
        }
    }
}

.tag-input {
    .autocomplete-list {
        margin: 0;
        padding: 0;
        list-style: none inside;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        overflow: hidden;
        overflow-y: auto;
        background-color: @white;
        height: auto;
        border: 1px solid @borderColor;
        z-index: 3;
        display: block;

        .item {
            display: block;
            position: relative;
            padding: 4px 8px;
            cursor: pointer;

            &:hover {
                background-color: @hoverBackground;
            }
        }

        .item + .item {
            border-top: 1px solid @borderColor;
        }
    }
}