77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import { defineConfig, presetAttributify, presetMini, presetUno } from 'unocss'
|
|
// import presetWind from '@unocss/preset-wind'
|
|
import { primaryColor } from './build/config/themeConfig'
|
|
|
|
export default defineConfig({
|
|
presets: [presetMini({ dark: 'class' }), presetAttributify(), presetUno()],
|
|
// presets: [presetMini(), presetAttributify(), presetUno({ dark: 'class' }), presetWind()],
|
|
// transformers: [createEnterPlugin()],
|
|
theme: {
|
|
extend: {
|
|
zIndex: {
|
|
'-1': '-1'
|
|
},
|
|
colors: {
|
|
primary: primaryColor
|
|
}
|
|
},
|
|
breakpoints: {
|
|
sm: '576px',
|
|
md: '768px',
|
|
lg: '992px',
|
|
xl: '1200px',
|
|
'2xl': '1600px'
|
|
}
|
|
}
|
|
})
|
|
|
|
/**
|
|
* Used for animation when the element is displayed.
|
|
* @param maxOutput The larger the maxOutput output, the larger the generated css volume.
|
|
*/
|
|
// function createEnterPlugin(maxOutput = 6) {
|
|
// 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 }
|
|
// }
|