yyzone/src/assets/styles/components/tag.less

yyzone vue components and utils

@prefixTagCls: ~'@{yy-css-prefix}tag';

.@{prefixTagCls} {
    display: inline-block;
    border: 1px solid @yy-tag-border;
    background-color: @yy-tag-bg;
    border-radius: @yy-btn-border-radius - 1px;
    color: @yy-text-primary-color;
    box-sizing: border-box;
    transition: color @yy-transition-time linear, background-color @yy-transition-time linear, border @yy-transition-time linear;
    font-size: @yy-font-size-small;
    height: @yy-input-height-small - 4;

    &+ {
        margin-right: 5px;
    }

    &-inner {
        display: flex;
        align-content: center;
        align-items: center;
        padding: 0 8px;
        height: 100%;
    }

    &-inner>.yy-icon {
        cursor: pointer;
        margin: 1px 0 0 6px;

        .@{prefixTagCls}-add & {
            transform: rotate(45deg);
        }
    }

    &-add {
        background-color: transparent;
        border-style: dashed;
        cursor: pointer;
    }
    
    &-active, &:not(&-disabled):hover {
        border-color: fade(@yy-primary-color, 10%);
        background-color: fade(@yy-primary-color, 10%);
        color: tint(@yy-primary-color, 20%);
    }

    &-large {
        font-size: @yy-font-size-base;
        height: @yy-input-height-small;
    }

    &-small {
        height: @yy-input-height-small - 8;
    }

    .@{prefixSelectCls}-dropdown {
        padding: 16px;
        max-height: none;
    }

    &-icon {
        display: inline-block;
        .square(24px);
        line-height: 24px;
        border: 1px solid @yy-text-primary-color;
        color: @yy-text-primary-color;
        border-radius: 3px;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        margin-left: 5px;
    }
    &-disabled {
        background-color: @yy-background-color-disabled;
        color: @yy-text-disabled-color;
        border-color: @yy-border-color-disabled;
        cursor: default;
    }
}