acud/lib/button/style/mixin.less

acg react 组件库

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

.text-limited(@fontSize, @height) {
    min-width: 72px;
}

.has-icon(@height, @borderWidth) {
    padding-left: (@height / 2 - @borderWidth) - 4;
}

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

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

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

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

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

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

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

.btn() {
    // display: inline-block;
    // 现在设计不能满足相应Button高度 icon大小 字号大小适配在一起后视觉效果居中
    // 强制居中会有问题
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-weight: @btn-font-weight;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    border-style: @btn-border-style;
    border-width: @btn-border-width;
    // button 自带outline
    outline: 0;
    cursor: pointer;

    .btn-size-config(md);

    &-lg {
        .btn-size-config(lg);
    }

    &-sm {
        .btn-size-config(sm);
    }

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

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

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

    &[disabled] {
        cursor: not-allowed;

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

.btn-group() {
    .btn-group-base();
}

.btn-group-base() {
    display: inline-flex;
}

// button config
.auto-button-config(@type, @property) {
    .property-setting(@type, 'default', @property);

    &:hover {
        .property-setting(@type, 'hover', @property);
    }

    &:active {
        .property-setting(@type, 'click', @property);
    }

    &[disabled] {
        &,
        &:hover,
        &:active {
            .property-setting(@type, 'disabled', @property);
        }
    }
}

.basic-button-tp-config(@type) {
    .auto-button-config(@type, color);
}

.basic-button-p-config(@type) {
    .auto-button-config(@type, background-color);
    .auto-button-config(@type, border-color);
    .auto-button-config(@type, box-shadow);
}

.basic-button-config(@tptype; @ptype) {
    .basic-button-tp-config(@tptype);
    .basic-button-p-config(@ptype);
}