wip: use unocss
xingyu
3 years ago
parent
8e78975521
commit
4249465b7c
@ -0,0 +1 @@
|
|||||||
|
import 'virtual:uno.css'
|
||||||
@ -1,3 +0,0 @@
|
|||||||
import 'virtual:windi.css'
|
|
||||||
|
|
||||||
import 'virtual:windi-devtools'
|
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
import { defineConfig, toEscapedSelector as e, presetUno } from 'unocss'
|
||||||
|
import transformerVariantGroup from '@unocss/transformer-variant-group'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
// ...UnoCSS options
|
||||||
|
rules: [
|
||||||
|
[
|
||||||
|
/^custom-hover$/,
|
||||||
|
([], { rawSelector }) => {
|
||||||
|
const selector = e(rawSelector)
|
||||||
|
return `
|
||||||
|
${selector} {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
padding: 1px 10px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
align-items: center;
|
||||||
|
transition: background var(--transition-time-02);
|
||||||
|
}
|
||||||
|
/* you can have multiple rules */
|
||||||
|
${selector}:hover {
|
||||||
|
background-color: var(--top-header-hover-color);
|
||||||
|
}
|
||||||
|
.dark ${selector}:hover {
|
||||||
|
background-color: var(--el-bg-color-overlay);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
/^layout-border__left$/,
|
||||||
|
([], { rawSelector }) => {
|
||||||
|
const selector = e(rawSelector)
|
||||||
|
return `
|
||||||
|
${selector}:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--el-border-color);
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
/^layout-border__right$/,
|
||||||
|
([], { rawSelector }) => {
|
||||||
|
const selector = e(rawSelector)
|
||||||
|
return `
|
||||||
|
${selector}:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--el-border-color);
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
/^layout-border__top$/,
|
||||||
|
([], { rawSelector }) => {
|
||||||
|
const selector = e(rawSelector)
|
||||||
|
return `
|
||||||
|
${selector}:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: var(--el-border-color);
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
/^layout-border__bottom$/,
|
||||||
|
([], { rawSelector }) => {
|
||||||
|
const selector = e(rawSelector)
|
||||||
|
return `
|
||||||
|
${selector}:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: var(--el-border-color);
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
presets: [presetUno({ dark: 'class', attributify: false })],
|
||||||
|
transformers: [transformerVariantGroup()]
|
||||||
|
})
|
||||||
@ -1,61 +0,0 @@
|
|||||||
import { defineConfig } from 'vite-plugin-windicss'
|
|
||||||
import plugin from 'windicss/plugin'
|
|
||||||
|
|
||||||
function range(size, startAt = 1) {
|
|
||||||
return Array.from(Array(size).keys()).map((i) => i + startAt)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
extract: {
|
|
||||||
include: ['src/**/*.{vue,html,jsx,tsx}'],
|
|
||||||
exclude: ['node_modules', '.git']
|
|
||||||
},
|
|
||||||
darkMode: 'class',
|
|
||||||
attributify: false,
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
backgroundColor: {
|
|
||||||
// 暗黑背景色
|
|
||||||
'v-dark': 'var(--dark-bg-color)'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
plugin(({ addComponents }) => {
|
|
||||||
const obj = {}
|
|
||||||
range(50).map((i) => {
|
|
||||||
obj[`.border-top-${i}`] = {
|
|
||||||
borderTopWidth: `${i}px`
|
|
||||||
}
|
|
||||||
obj[`.border-left-${i}`] = {
|
|
||||||
borderLeftWidth: `${i}px`
|
|
||||||
}
|
|
||||||
obj[`.border-right-${i}`] = {
|
|
||||||
borderRightWidth: `${i}px`
|
|
||||||
}
|
|
||||||
obj[`.border-bottom-${i}`] = {
|
|
||||||
borderBottomWidth: `${i}px`
|
|
||||||
}
|
|
||||||
})
|
|
||||||
addComponents({
|
|
||||||
'.hover-trigger': {
|
|
||||||
display: 'flex',
|
|
||||||
height: '100%',
|
|
||||||
padding: '1px 10px 0',
|
|
||||||
cursor: 'pointer',
|
|
||||||
alignItems: 'center',
|
|
||||||
transition: 'background var(--transition-time-02)',
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: 'var(--top-header-hover-color)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'.dark .hover-trigger': {
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: 'var(--el-bg-color-overlay)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
...obj
|
|
||||||
})
|
|
||||||
})
|
|
||||||
]
|
|
||||||
})
|
|
||||||
Loading…
Reference in New Issue