nice-ui/lib/3-list-item/ListItem/highlightClass.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.highlightClass = void 0;
const nano_theme_1 = require("nano-theme");
/**
 * Attach this class to new resources to highlight the for 1 sec for users.
 */
const color1 = 'rgba(81, 203, 238, 1)';
const color2 = nano_theme_1.theme.green(1);
const color3 = nano_theme_1.theme.color.sem.warning[0];
const highlightAnimation = (0, nano_theme_1.keyframes)({
    from: {
        boxShadow: `0 0 1px ${color1}`,
    },
    '25%': {
        boxShadow: `0 0 16px ${color1}`,
    },
    '50%': {
        boxShadow: `0 0 50px ${color2}`,
    },
    '60%': {
        boxShadow: `0 0 20px ${color2}`,
    },
    to: {
        boxShadow: `0 0 0px ${color3}`,
    },
});
exports.highlightClass = (0, nano_theme_1.rule)({
    animation: `${highlightAnimation} 1.5s`,
});