windi.config.ts 2.0 KB

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