tntd/lib/tag/tag.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

@import '../style/mixins/index';
@import './color.less';
@tag-prefix-cls: ~'@{ant-prefix}-tag';
// 默认
@tag-height: 20px;
@tag-small-size: 0 8px;
@tag-middle-size: 1px 10px;
@tag-large-size: 3px 12px;

// img tag
@tag-img-small-size: 1px 5px 1px 3px;
@tag-img-middle-size: 2px 6px 2px 3px;
@tag-img-large-size: 3px 12px 3px 4px;

// 只有icon的尺寸
@tag-only-icon-small-size: 5px;
@tag-only-icon-middle-size: 6px;
@tag-only-icon-large-size: 7px;

.tnt-tag.@{tag-prefix-cls} {
    line-height: @tag-height;

    .@{iconfont-css-prefix}-close {
        .iconfont-size-under-12px(12px);
        font-size: @font-size-sm !important;
        vertical-align: middle;
        line-height: 1;
    }

    .anticon{
        font-size: @font-size-sm;
    }

    // 头像插件 可以为icon 图片
    .@{tag-prefix-cls}-addon-wrap{
        display: inline-block;
        vertical-align: middle;
        margin-top: -1px;
        .@{tag-prefix-cls}-addon{
            .iconfont-size-under-12px(12px);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tntd-ellipsis,.tnt-ellipsis{
            align-items: center;
            .@{tag-prefix-cls}-addon{
                >*{
                    border-radius: 100%;
                    overflow: hidden;
                    display: block;
                }
                +*{
                    margin-left: 4px;
                }
            }
        }
    }

    &-small{
        padding: @tag-small-size;
    }
    &-middle{
        padding: @tag-middle-size;
    }
    &-large{
        padding: @tag-large-size;
        font-size: 14px;
    }

    // 不带边框
    &.@{tag-prefix-cls}-no-border{
        border-color:transparent;
    }

    // 只有一个icon
    &.@{tag-prefix-cls}-only-child{
        line-height: @font-size-sm;
        &.@{tag-prefix-cls}-small{
            padding: @tag-only-icon-small-size;
        }
        &.@{tag-prefix-cls}-middle{
            padding: @tag-only-icon-middle-size;
        }
        &.@{tag-prefix-cls}-large{
            padding: @tag-only-icon-large-size;
        }
    }

    // 带图片
    &.@{tag-prefix-cls}-addon-img{
        &.@{tag-prefix-cls}-small{
            padding: @tag-img-small-size;
            .@{tag-prefix-cls}-addon{
                width: 16px;
                height: 16px;
            }
        }
        &.@{tag-prefix-cls}-middle{
            padding: @tag-img-middle-size;
            .@{tag-prefix-cls}-addon{
                width: 18px;
                height: 18px;
            }
        }
        &.@{tag-prefix-cls}-large{
            padding: @tag-img-large-size;
            .@{tag-prefix-cls}-addon{
                width: 20px;
                height: 20px;
            }
        }
    }

    &.@{tag-prefix-cls}-blue {
        color: @blue-6;
        background: @blue-1;
        border-color: @blue-3;
        >.@{iconfont-css-prefix}-close {
            color: @blue-5;
        }
        &.@{tag-prefix-cls}-no-border{
            border-color:transparent;
        }
    }
    &.@{tag-prefix-cls}-blue-inverse {
        color: @text-color-inverse;
        background: @blue-6;
        border-color: @blue-6;
        >.@{iconfont-css-prefix}-close {
            color: @text-color-inverse;
        }
        &.@{tag-prefix-cls}-no-border{
            border-color:transparent;
        }
    }

    // mixin to iterate over colors and create CSS class for each one
    .make-color-classes(@i: length(@preset-colors-custom)) when (@i > 0) {
        .make-color-classes(@i - 1);
        @color: extract(@preset-colors-custom, @i);
        @lightColor: '@{color}-1';
        @lightBorderColor: '@{color}-4';
        @darkColor: '@{color}-7';
        @closeColor:'@{color}-5';
        &.@{tag-prefix-cls}-@{color} {
            color: @@darkColor;
            background: @@lightColor;
            border-color: @@lightBorderColor;
            >.@{iconfont-css-prefix}-close {
                color: @@closeColor;
            }
            &.@{tag-prefix-cls}-no-border{
                border-color:transparent;
            }
        }
        &.@{tag-prefix-cls}-@{color}-inverse {
            color: @text-color-inverse;
            background: @@darkColor;
            border-color: @@darkColor;
            >.@{iconfont-css-prefix}-close {
                color: @text-color-inverse;
            }
            &.@{tag-prefix-cls}-no-border{
                border-color:transparent;
            }
        }
    }

    .make-color-classes();



    // 可选
    &.@{tag-prefix-cls}-checkable {
        background-color:  @tag-default-bg;
        border-color: transparent;
        padding: 2px 12px;
        cursor: pointer;
        &-border{
            border-color: @border-color-base;
            // 非disabled
            &:not(.@{tag-prefix-cls}-checkable-disabled):hover {
                border-color: @primary-3;
            }
        }

        &:not(.@{tag-prefix-cls}-checkable-disabled):hover {
            color: @primary-6;
            background-color: @primary-1;
            transition: all 0.3s @ease-in-out-circ;
        }

        &:active,
        &-checked {
            color: @primary-6;
            background-color: @primary-1;
            &.@{tag-prefix-cls}-checkable-border{
                border-color: @primary-3;
            }
        }

        &-checked {
            &.@{tag-prefix-cls}-checkable-disabled:hover {
                color:  @primary-6;
            }
        }

        &:not(&-checked){
            &.@{tag-prefix-cls}-checkable-disabled:hover {
                color: inherit;
            }
        }

        &-disabled{
            opacity: 0.5;
            cursor: not-allowed;
            &:hover{
                opacity: 0.5;
                color: inherit;
            }
        }
    }

}