nice-ui/lib/2-inline-block/BasicButton/BasicButtonBack.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BasicButtonBack = void 0;
const React = require("react");
const Arrow_1 = require("../../icons/interactive/Arrow");
const BasicButton_1 = require("../BasicButton");
const nano_theme_1 = require("nano-theme");
const animationActive = (0, nano_theme_1.keyframes)({
    '0%': {
        transform: 'translate(0, 0)',
        filter: 'blur(0)',
    },
    '50%': {
        transform: 'translate(-100%, 0)',
        filter: 'blur(8px)',
    },
    '51%': {
        transform: 'translate(100%, 0)',
    },
    '100%': {
        transform: 'translate(0, 0)',
        filter: 'blur(0)',
    },
});
const animationClass = (0, nano_theme_1.rule)({
    d: 'inline-block',
    w: '100%',
    h: '100%',
    trs: 'all .12s ease-in 0s',
    '&:active': {
        an: `${animationActive} .24s forwards`,
    },
});
const BasicButtonBack = (props) => {
    return (React.createElement(BasicButton_1.default, { ...props },
        React.createElement("span", { className: animationClass },
            React.createElement(Arrow_1.default, { direction: 'l' }))));
};
exports.BasicButtonBack = BasicButtonBack;