|
|
@@ -1,83 +0,0 @@
|
|
|
-// windi.config.js
|
|
|
-import { defineConfig } from 'windicss/helpers'
|
|
|
-import lineClamp from 'windicss/plugin/line-clamp'
|
|
|
-import colors from 'windicss/colors'
|
|
|
-import proSettings from './config/defaultSettings'
|
|
|
-
|
|
|
-export default defineConfig({
|
|
|
- darkMode: 'class',
|
|
|
- plugins: [lineClamp, createEnterPlugin()],
|
|
|
- theme: {
|
|
|
- extend: {
|
|
|
- colors: {
|
|
|
- ...colors,
|
|
|
- primary: proSettings.primaryColor
|
|
|
- },
|
|
|
- screens: {
|
|
|
- sm: '576px',
|
|
|
- md: '768px',
|
|
|
- lg: '992px',
|
|
|
- xl: '1200px',
|
|
|
- '2xl': '1600px'
|
|
|
- },
|
|
|
- boxShadow: {
|
|
|
- card: '0 0 13px 0 rgba(74, 53, 107, 0.08)',
|
|
|
- base: '0px 6px 16px rgba(0, 0, 0, 0.08);'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- shortcuts: {
|
|
|
- 'btn-outline':
|
|
|
- 'text-xs text-primary bg-white border border-primary rounded py-1 px-1 cursor-pointer hover:text-white hover:bg-primary'
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-/**
|
|
|
- * Used for animation when the element is displayed
|
|
|
- * @param maxOutput The larger the maxOutput output, the larger the generated css volume
|
|
|
- */
|
|
|
-function createEnterPlugin(maxOutput = 10) {
|
|
|
- const createCss = (index: number, d = 'x') => {
|
|
|
- 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 }) => {
|
|
|
- const addRawCss = {}
|
|
|
- for (let index = 1; index < maxOutput; index++) {
|
|
|
- Object.assign(addRawCss, {
|
|
|
- ...createCss(index, 'x'),
|
|
|
- ...createCss(index, 'y')
|
|
|
- })
|
|
|
- }
|
|
|
- addBase({
|
|
|
- ...addRawCss,
|
|
|
- [`@keyframes enter-x-animation`]: {
|
|
|
- to: {
|
|
|
- opacity: '1',
|
|
|
- transform: 'translateX(0)'
|
|
|
- }
|
|
|
- },
|
|
|
- [`@keyframes enter-y-animation`]: {
|
|
|
- to: {
|
|
|
- opacity: '1',
|
|
|
- transform: 'translateY(0)'
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- return { handler }
|
|
|
-}
|
