46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
|
import { defineConfig, toEscapedSelector as e, presetUno } from 'unocss'
|
||
|
|
|
||
|
|
export default defineConfig({
|
||
|
|
// ...UnoCSS options
|
||
|
|
rules: [
|
||
|
|
[
|
||
|
|
'v-dark',
|
||
|
|
{
|
||
|
|
'background-color': 'var(--dark-bg-color)'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
[/^border-top-(\d+)$/, (match) => ({ 'border-top-width': `${match[1]}px` })],
|
||
|
|
[/^border-left-(\d+)$/, (match) => ({ 'border-left-width': `${match[1]}px` })],
|
||
|
|
[/^border-right-(\d+)$/, (match) => ({ 'border-right-width': `${match[1]}px` })],
|
||
|
|
[/^border-bottom-(\d+)$/, (match) => ({ 'border-bottom-width': `${match[1]}px` })],
|
||
|
|
[
|
||
|
|
/^hover-trigger(.+)$/,
|
||
|
|
([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
|
||
|
|
console.log(variantHandlers)
|
||
|
|
// if you want, you can disable the variants for this rule
|
||
|
|
if (variantHandlers.length) return
|
||
|
|
const selector = e(rawSelector)
|
||
|
|
// return a string instead of an object
|
||
|
|
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} {
|
||
|
|
background-color: var(--el-bg-color-overlay);
|
||
|
|
}
|
||
|
|
`
|
||
|
|
}
|
||
|
|
]
|
||
|
|
],
|
||
|
|
presets: [presetUno({ dark: 'class', attributify: false })]
|
||
|
|
})
|