123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- 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 })]
- })
|