Blame view

windi.config.ts 1.83 KB
Vben authored
1
2
3
4
import { defineConfig } from 'vite-plugin-windicss';
import { primaryColor } from './build/config/themeConfig';

export default defineConfig({
5
  darkMode: 'class',
6
  plugins: [createEnterPlugin()],
vben authored
7
8
  theme: {
    extend: {
9
10
      zIndex: {
        '-1': '-1',
11
      },
12
      colors: {
Vben authored
13
        primary: primaryColor,
14
15
16
17
18
19
20
      },
      screens: {
        sm: '576px',
        md: '768px',
        lg: '992px',
        xl: '1200px',
        '2xl': '1600px',
21
      },
22
    },
vben authored
23
  },
Vben authored
24
25
});
vben authored
26
/**
27
28
 * Used for animation when the element is displayed.
 * @param maxOutput The larger the maxOutput output, the larger the generated css volume.
vben authored
29
 */
vben authored
30
function createEnterPlugin(maxOutput = 6) {
Vben authored
31
  const createCss = (index: number, d = 'x') => {
vben authored
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
    const upd = d.toUpperCase();
    return {
      [`*> .enter-${d}:nth-child(${index})`]: {
        transform: `translate${upd}(50px)`,
      },
      [`*> .-enter-${d}:nth-child(${index})`]: {
        transform: `translate${upd}(-50px)`,
      },
      [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
        'z-index': `${10 - index}`,
        opacity: '0',
        animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
        'animation-fill-mode': 'forwards',
        'animation-delay': `${(index * 1) / 10}s`,
      },
    };
  };
  const handler = ({ addBase }) => {
50
    const addRawCss = {};
vben authored
51
    for (let index = 1; index < maxOutput; index++) {
52
      Object.assign(addRawCss, {
vben authored
53
54
55
56
57
        ...createCss(index, 'x'),
        ...createCss(index, 'y'),
      });
    }
    addBase({
58
      ...addRawCss,
vben authored
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
      [`@keyframes enter-x-animation`]: {
        to: {
          opacity: '1',
          transform: 'translateX(0)',
        },
      },
      [`@keyframes enter-y-animation`]: {
        to: {
          opacity: '1',
          transform: 'translateY(0)',
        },
      },
    });
  };
  return { handler };
}