magiccube-vue3/package/style/button.less

vue3-js版组件库

@import './root.css';
@import './theme';

.mc-button {
    padding: 5px 30px;
    min-width: 72px;
    height: 32px;
    font-size: var(--mc-normal-size);
    font-weight: normal;
    line-height: normal;
    color: #fff;
    white-space: nowrap;
    background: var(--mc-button-normal-bg);
    border: 1px solid var(--mc-button-normal-bg);
    border-radius: 16px;
    cursor: pointer;

    &:not(:last-child) {
        margin-right: 16px;
    }

    &:hover:not(:disabled) {
        color: #fff;
        background: var(--mc-button-hover-bg);
        border-color: var(--mc-button-hover-bg);
    }

    &:active {
        color: #fff;
        background: var(--mc-button-hover-bg);
    }

    &:focus {
        outline: none;
    }

    &:disabled {
        color: var(--mc-button-disabled-text);
        background: var(--mc-button-disabled-bg);
        border-color: var(--mc-button-disabled-bg);
        cursor: default;
    }

    // &.big {
    //     height: @btn-big-height;
    //     font-size: @font-big;
    // }

    &.small {
        padding: 2px 12px;
        height: 24px;
        font-size: var(--mc-small-size);
        line-height: 14px;
    }

    &.loading{
        color: #999;
    }

    &__inverse {
        color: var(--mc-button-inverse-normal-text);
        background: #fff;
        border: 1px solid var(--mc-button-inverse-normal-border);

        &:hover:not(:disabled) {
            color: var(--mc-button-inverse-hover-text);
            background: #fff;
            border: 1px solid var(--mc-button-inverse-hover-border);
        }

        &:active {
            color: var(--mc-button-inverse-active-text);
            background: #fff;
            border: 1px solid var(--mc-button-inverse-active-border);
        }

        &:disabled {
            color: var(--mc-button-disabled-text);
            background: var(--mc-button-disabled-bg);
            border-color: var(--mc-button-disabled-bg);
            cursor: default;
        }
    }

    &__delete {
        color: var(--mc-button-warning-normal-text);
        background: #fff;
        border: 1px solid var(--mc-button-warning-normal-border);

        &:hover:not(:disabled) {
            color: var(--mc-button-warning-hover-text);
            background: #fff;
            border: 1px solid var(--mc-button-warning-hover-border);
        }

        &:active {
            color: var(--mc-button-warning-active-text);
            background: #fff;
            border: 1px solid var(--mc-button-warning-active-border);
        }

        &:disabled {
            color: var(--mc-button-disabled-text);
            background: var(--mc-button-disabled-bg);
            border-color: var(--mc-button-disabled-bg);
            cursor: default;
        }
    }

    &__cancel {
        color: var(--mc-button-cancel-normal-text);
        background: #fff;
        border: 1px solid var(--mc-button-cancel-normal-border);

        &:hover:not(:disabled) {
            color: var(--mc-button-cancel-hover-text);
            background: #fff;
            border: 1px solid var(--mc-button-cancel-hover-border);
        }

        &:active {
            color: var(--mc-button-cancel-active-text);
            background: #fff;
            border: 1px solid var(--mc-button-cancel-active-border);
        }

        &:disabled {
            color: var(--mc-button-disabled-text);
            background: var(--mc-button-disabled-bg);
            border-color: var(--mc-button-disabled-bg);
            cursor: default;
        }
    }

    &__warning {
        color: var(--mc-button-warning-normal-text);
        background: #fff;
        border: 1px solid var(--mc-button-warning-normal-border);

        &:hover:not(:disabled) {
            color: var(--mc-button-warning-hover-text);
            background: #fff;
            border: 1px solid var(--mc-button-warning-hover-border);
        }

        &:active {
            color: var(--mc-button-warning-active-text);
            background: #fff;
            border: 1px solid var(--mc-button-warning-active-border);
        }

        &:disabled {
            color: var(--mc-button-disabled-text);
            background: var(--mc-button-disabled-bg);
            border-color: var(--mc-button-disabled-bg);
            cursor: default;
        }
    }

    & > svg{
        vertical-align: middle;
    }
}