acud/lib/button/style/index.less

acg react 组件库

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';

@btn-prefix-cls: ~'@{acud-prefix}-btn';

// basic logic - line hight, font size
// content layer - 只处理文字 Icon， 没有开关config，对应四种交互状态配置
// background layer - 背景层 填色、描边、阴影，可以通过开关config配置， 对应四种交互状态

.@{btn-prefix-cls} {
    .btn();

    &-primary {
        .basic-button-config(@btn-primary-tp, @btn-primary-p);
    }

    &-default {
        .basic-button-config(@btn-default-tp, @btn-default-p);
    }

    &-highlight {
        .basic-button-config(@btn-highlight-tp, @btn-highlight-p);
    }

    &-enhance {
        .basic-button-config(@btn-enhance-tp, @btn-enhance-p);
    }

    &-text {
        .basic-button-config(@btn-text-tp, @btn-text-p);
    }

    &-actiontext {
        .basic-button-config(@btn-actiontext-tp, @btn-actiontext-p);
    }

    &-loading {
        pointer-events: none;
        cursor: default;
        // background-color: @B5;
    }

    > span {
        display: inline-block;
    }

    // Children和Icon的间距 ICON在左/右.
    > .@{iconfont-css-prefix} + span,
    > span + .@{iconfont-css-prefix} {
        margin-left: @btn-icon-space;
    }

    // group
    &-group {

        .btn-group();

        // 按钮组连接部分不需要圆角
        & > .@{btn-prefix-cls} {
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
        }

        & > .@{acud-prefix}-dropdown-trigger {
            .@{btn-prefix-cls} {
                border-top-left-radius: 0px;
                border-bottom-left-radius: 0px;
            }
        }

        // 只给箭头ICON添加动效
        .@{iconfont-css-prefix}-outlined-down {
            transition: transform .48s;
        }

        &-expand {
            .@{iconfont-css-prefix}-outlined-down {
                transform: rotate(-180deg);
                transform-origin: center;
            }
        }

        // 处理中间的border
        .@{btn-prefix-cls} {
            margin-left: -1px;
        }

        .@{btn-prefix-cls}:hover {
            z-index: 2;
        }
        // 处理中间的border颜色
        &-border-left{
            border-left-color: @B5;
        }
        // 处理中间的border颜色
        &-border-left[disabled]{
            border-left-color: @G11;
        }
    }
}