uno.config.ts 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. import { defineConfig, toEscapedSelector as e, presetUno } from 'unocss'
  2. export default defineConfig({
  3. // ...UnoCSS options
  4. rules: [
  5. [
  6. 'v-dark',
  7. {
  8. 'background-color': 'var(--dark-bg-color)'
  9. }
  10. ],
  11. [/^border-top-(\d+)$/, (match) => ({ 'border-top-width': `${match[1]}px` })],
  12. [/^border-left-(\d+)$/, (match) => ({ 'border-left-width': `${match[1]}px` })],
  13. [/^border-right-(\d+)$/, (match) => ({ 'border-right-width': `${match[1]}px` })],
  14. [/^border-bottom-(\d+)$/, (match) => ({ 'border-bottom-width': `${match[1]}px` })],
  15. [
  16. /^hover-trigger(.+)$/,
  17. ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
  18. console.log(variantHandlers)
  19. // if you want, you can disable the variants for this rule
  20. if (variantHandlers.length) return
  21. const selector = e(rawSelector)
  22. // return a string instead of an object
  23. return `
  24. ${selector} {
  25. display: flex;
  26. height: 100%;
  27. padding: 1px 10px 0;
  28. cursor: pointer;
  29. align-items: center;
  30. transition: background var(--transition-time-02);
  31. }
  32. /* you can have multiple rules */
  33. ${selector}:hover {
  34. background-color: var(--top-header-hover-color);
  35. }
  36. .dark ${selector} {
  37. background-color: var(--el-bg-color-overlay);
  38. }
  39. `
  40. }
  41. ]
  42. ],
  43. presets: [presetUno({ dark: 'class', attributify: false })]
  44. })