vue-cssgen/rules/effects.js

Инструмент для автоматизации работы со стилями в Vue 3-проектах

export default [
    {
        match: /^glass-effect$/,
        css: cls => {
            return `.${cls} { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }`;
        },
        group: 'effect',
        desc: 'glass effect',
        modifiable: true,
        examples: ['glass-effect'],
        values: null,
        prefix: 'glass-effect'
    },
    {
        match: /^glow-button$/,
        css: cls => {
            return `.${cls} { box-shadow: 0 0 10px rgba(0, 123, 255, 0.5), 0 0 20px rgba(0, 123, 255, 0.3); transition: all 0.3s ease; }`;
        },
        group: 'effect',
        desc: 'glow button effect',
        modifiable: true,
        examples: ['glow-button'],
        values: null,
        prefix: 'glow-button'
    },
    {
        match: /^overflow-(hidden|auto|scroll|visible)$/,
        css: cls => {
            const val = cls.match(/^overflow-(hidden|auto|scroll|visible)$/)[1];
            return `.${cls} { overflow: ${val}; }`;
        },
        group: 'effect',
        desc: 'overflow',
        modifiable: true,
        examples: ['overflow-hidden', 'overflow-auto'],
        values: null,
        prefix: 'overflow-'
    },
];