@alifd/next/es/button/scss/mixin.scss

A configurable component library for web built on React.

@mixin next-button-size(
    $padding,
    $height,
    $font-size,
    $border-width,
    $corner,
    $icon-margin,
    $icon-size,
    $icon-split-size
) {
    border-radius: $corner;

    @include button-size($padding, $height, $font-size, $border-width);

    & > #{$btn-prefix}-icon#{$btn-icon-prefix}-first {
        @if (get-compiling-value($icon-size) >= 12) {
            transform: scale(1);
        }
        @include icon-size($icon-size, 0, $icon-margin);
    }
    & > #{$btn-prefix}-icon#{$btn-icon-prefix}-last {
        @if (get-compiling-value($icon-size) >= 12) {
            transform: scale(1);
        }
        @include icon-size($icon-size, $icon-margin, 0);
    }
    & > #{$btn-prefix}-icon#{$btn-icon-prefix}-alone {
        @if (get-compiling-value($icon-size) >= 12) {
            transform: scale(1);
        }
        @include icon-size($icon-size);
    }


    &#{$btn-prefix}-loading {
        &:before {
            width: $icon-size;
            height: $icon-size;
            font-size: $icon-size;
            line-height: $icon-size;
            left: $padding;
            top: 50%;
            text-align: center;
            margin-right: $icon-margin;
        }
        > #{$btn-icon-prefix} {
            display: none;
        }
    }

    & > #{$btn-prefix}-custom-loading-icon {
        opacity: 0;
        width: 0;

        &.show {
            width: $icon-size;
            margin-right: $icon-margin;
            opacity: 1;
            transition: all $motion-duration-immediately $motion-linear;
        }
    }
}

@keyframes loadingCircle {
    0% {
        transform-origin: 50% 50%;
        transform: rotate(0deg);
    }
    100% {
        transform-origin: 50% 50%;
        transform: rotate(360deg);
    }
}