doodle-mini/miniprogram/toy/button-v2/button.less

@button-default-height: 92rpx;
@button-border-radius: 32rpx;
@button-default-font-size: 30rpx;
@button-default-color: #fff;
@button-transition: 0.18s ease;
@button-shadow-primary: 0 8rpx 20rpx rgba(255, 215, 0, 0.22);
@button-shadow-green: 0 8rpx 20rpx rgba(156, 211, 67, 0.22);
@button-shadow-white: 0 6rpx 16rpx rgba(50, 46, 37, 0.08);
@button-shadow-pressed: 0 4rpx 10rpx rgba(50, 46, 37, 0.1);
@button-disabled-bg: #ece6da;
@button-disabled-color: #b8b2a6;

wx-button:not([size=mini]) {
    margin-left: auto;
    margin-right: auto;
    width: auto;
}

.toy-button {
    --button-bg: #f0e7d6;
    --button-color: @button-default-color;
    --button-border-color: transparent;
    --button-shadow: none;

    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180rpx;
    height: @button-default-height;
    line-height: 1;
    padding: 0 28rpx;
    border-radius: @button-border-radius;
    border: 2rpx solid var(--button-border-color);
    background: var(--button-bg);
    color: var(--button-color);
    box-shadow: var(--button-shadow);
    font-size: @button-default-font-size;
    font-weight: 700;
    letter-spacing: 0.5rpx;
    text-align: center;
    cursor: pointer;
    transition:
        transform @button-transition,
        box-shadow @button-transition,
        background-color @button-transition,
        border-color @button-transition,
        color @button-transition,
        opacity @button-transition;

    &::after {
        border: none;
    }

    &--default {
        --button-bg: #f0e7d6;
        --button-color: #322e25;
        --button-border-color: #e5dcc9;
        --button-shadow: @button-shadow-white;
    }

    &--large {
        width: 100%;
    }

    &--small {
        min-width: 136rpx;
        height: 72rpx;
        padding: 0 20rpx;
        border-radius: 20rpx;
        font-size: 26rpx;
    }

    &--mini {
        min-width: 96rpx;
        height: 56rpx;
        padding: 0 16rpx;
        border-radius: 18rpx;
        font-size: 24rpx;
    }

    &--primary {
        --button-bg: #ffd700;
        --button-color: #6c5a00;
        --button-shadow: @button-shadow-primary;
    }

    &--green,
    &--secondary {
        --button-bg: #9cd343;
        --button-color: #ffffff;
        --button-shadow: @button-shadow-green;
    }

    &--white {
        --button-bg: rgba(255, 255, 255, 0.96);
        --button-color: #322e25;
        --button-border-color: #ebe3d2;
        --button-shadow: @button-shadow-white;
    }

    &.plain.toy-button--white {
        --button-bg: transparent;
        --button-color: #ffffff;
        --button-border-color: rgba(255, 255, 255, 0.92);
        --button-shadow: none;
    }

    &.disabled {
        --button-bg: @button-disabled-bg !important;
        --button-color: @button-disabled-color !important;
        --button-border-color: transparent !important;
        --button-shadow: none !important;
        opacity: 1;
    }

    &.loading {
        opacity: 0.92;
    }

    &.active {
        transform: scale(0.95);
        box-shadow: @button-shadow-pressed;
    }

    &--flat {
        min-width: 0;
        padding: 0 24rpx;
        border-width: 0;
        border-radius: 32rpx;

        &.toy-button--green,
        &.toy-button--secondary {
            --button-bg: #9cd343;
            --button-color: #ffffff;
            --button-shadow: 0 4rpx 12rpx rgba(50, 46, 37, 0.08);
            font-weight: 700;
        }

        &.toy-button--primary {
            --button-bg: #ffd700;
            --button-color: #6c5a00;
            --button-shadow: 0 8rpx 18rpx rgba(108, 90, 0, 0.12);
            font-weight: 800;
        }

        &.toy-button--white {
            --button-bg: rgba(255, 255, 255, 0.96);
            --button-color: #322e25;
            --button-shadow: 0 4rpx 12rpx rgba(50, 46, 37, 0.08);
        }

        &.toy-button--white.plain {
            --button-bg: transparent;
            --button-color: #ffffff;
            --button-shadow: none;
            border-width: 2rpx;
        }

        &.active {
            transform: scale(0.95);
        }

        &.disabled {
            --button-bg: #e6e0d4 !important;
            --button-color: #b8b2a6 !important;
            --button-shadow: none !important;
        }
    }

    .loading-class,
    &__icon {
        margin-right: 12rpx;
        flex-shrink: 0;
    }

    &__spinner {
        box-sizing: border-box;
        border-radius: 50%;
        border-width: 4rpx;
        border-style: solid;
        animation: toy-button-spin 0.8s linear infinite;
    }
}

@keyframes toy-button-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}