acud/lib/tag/style/mixin.less

acg react 组件库

// 没有Icon时，左右边距等于按钮高度1/2
// 宽度：1-8个字符长度 汉字算两个 其他算一个 最小宽度为72px
// 2 单独一个Icon，没有最小宽度
.tag-size(@height, @fontSize, @broderRadius, @borderWidth) {
    height: @height;
    line-height: @height - @borderWidth * 2;
    border-radius: @broderRadius;
    font-size: @fontSize;
}

.text-hidden(@fontSize, @height) {
    span.text-hidden {
        max-width: 132px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.has-icon(@fontLabel) {
    .acudicon {
        height: @fontLabel + 2;
        svg {
            width: @fontLabel + 2;
        }
    }
    img {
        height: @fontLabel + 2;
        width: @fontLabel + 2;
    }
    .acudicon + span,
    img + span {
        margin-left: 4px;
    }
}

.only-icon(@height, @borderWidth) {
    padding-right: ((@height - 16) / 2) - @borderWidth;
    padding-left: ((@height - 16) / 2) - @borderWidth;
}

.tag-size-config(@type, @border-width) {
    @fontLabel: ~'tag-font-size-@{type}';
    @heightLabel: ~'tag-height-@{type}';
    @borderRdsLabel: ~'tag-border-radius-@{type}';

    &-text-hidden {
        .text-hidden(@@fontLabel, @@heightLabel);
    }

    &-has-icon {
        .has-icon(@@fontLabel);
    }

    &-only-icon {
        .only-icon(@@heightLabel, @border-width);
    }

    // 现在设计不能满足相应Button高度 icon大小 字号大小适配在一起后视觉效果居中，强制居中
    // 强制修改ICON的span
    &-has-icon > .@{iconfont-css-prefix} {
        height: 4 * @P;
        font-size: 4 * @P;
    }

    .tag-size(@@heightLabel; @@fontLabel; @@borderRdsLabel; @border-width);
}

.tag() {
    &-md {
        .tag-size-config(md, @tag-border-width-base);
        &-outline {
            .tag-size-config(md, @tag-border-width); 
        }
    }

    &-lg {
        .tag-size-config(lg, @tag-border-width-base);
        &-outline {
            .tag-size-config(lg, @tag-border-width); 
        }
    }

    &-sm {
        .tag-size-config(sm, @tag-border-width-base);
        &-outline {
            .tag-size-config(sm, @tag-border-width); 
        }
    }

    &,
    &:active,
    &:focus {
        outline: 0;
    }

    &:not([disabled]):hover {
        text-decoration: none;
    }

    &:not([disabled]):active {
        outline: 0;
        box-shadow: none;
    }

    &[disabled] {
        cursor: not-allowed;
        background-color: @G8;

        > * {
            pointer-events: none;
        }
    }
}