benivo-ui-library/fantasyButton.less

Benivo UI library

.fantasy-btn {
    box-sizing: border-box;

    &.btn {
        padding: 0;
        border: 0 !important;
        border-color: unset !important;
    }

    display: flex;
    color: var(--white);
    position: relative;
    transition: all 0.5s ease-in-out;
    min-width: 180px;

    &.in-progress {
        pointer-events: none;
    }

    &.disabled {
        background-color: var(--bg-50) !important;
        opacity: unset;
    }

    &.loading {
        background-color: var(--yellow-400) !important;
        justify-content: inherit;

        .text-side {
            .text-list {
                transform: rotateX(90deg);
            }
        }
    }

    &.completed {
        background-color: var(--success-main) !important;

        .text-side {
            .text-list {
                transform: rotateX(180deg);
            }
        }
    }

    &.failed {
        background-color: var(--error-main) !important;

        .text-side {
            .text-list {
                transform: rotateX(180deg);
            }
        }
    }

    .icon-side {
        background: rgba(0, 0, 0, 0.2);
        height: 100%;
        padding: .938rem 12px;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        position: relative;
        .border-radius(@btn-brd-radius 0 0 @btn-brd-radius);
        box-sizing: border-box;

        @media @lg {
            padding-top: .8rem;
            padding-bottom: .8rem;
        }

        .btn-icon,
        .icon-close-icon {
            &::before {
                color: var(--white);
            }
        }
    }

    .text-side {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: .938rem .75rem;

        @media @lg {
            padding: .8rem .75rem;
        }

        .text-list {
            padding: 0;
            margin: 0;
            list-style: none;
            height: 14px;
            width: 100%;
            display: inline-block;
            vertical-align: top;
            text-align: center;
            position: relative;
            transform-style: preserve-3d;
            transition: transform .3s ease;

            .state-text {
                backface-visibility: hidden;
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
                backface-visibility: hidden;
                transform-origin: 50% 50%;
                transform-style: preserve-3d;
                .transform(rotateX(0deg) translateZ(10px));

                &:nth-child(2) {
                    .transform(rotateX(-90deg) translateZ(10px));
                }

                &:nth-child(3) {
                    .transform(rotateX(-180deg) translateZ(10px));
                }
            }
        }
    }

    &:hover {
        background-color: var(--primary) !important;
        background-image: none !important;
        border-color: var(--primary) !important;
        color: var(--white) !important;
    }
}