metro4/less/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;
        }
    }

    .tag {
        display: inline-flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
        margin: 2px;
        padding: 0 0 0 4px;
        height: @taginput-item-size;
        line-height: @taginput-item-size;
        background-color: @light;
        cursor: default;

        .title {
            display: block;
            position: relative;
            max-width: 120px;
            font-size: 14px;
            .text-ellipsis();
            margin-right: 4px;
        }

        .remover {
            display: block;
            position: relative;
            width: @taginput-item-size;
            height: 100%;
            line-height: @taginput-item-size - 2;
            text-align: center;
            cursor: pointer;
            background-color: @lightGray;
        }
    }
}

.tag-input {
    &.input-large {
        min-height: 50px;

        .tag {
            margin: 2px 2px;
            padding: 0 0 0 8px;
            height: 36px;
            line-height: 36px;
            .title {
                font-size: 1.3rem;
                line-height: 36px;
            }
            .remover {
                width: 35px;
                height: 35px;
                line-height: 35px;
            }
        }

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

    }
}