uno.config.ts 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import { defineConfig, toEscapedSelector as e, presetUno } from 'unocss'
  2. // import transformerVariantGroup from '@unocss/transformer-variant-group'
  3. export default defineConfig({
  4. // ...UnoCSS options
  5. rules: [
  6. [
  7. /^custom-hover$/,
  8. ([], { rawSelector }) => {
  9. const selector = e(rawSelector)
  10. return `
  11. ${selector} {
  12. display: flex;
  13. height: 100%;
  14. padding: 0 10px;
  15. cursor: pointer;
  16. align-items: center;
  17. transition: background var(--transition-time-02);
  18. }
  19. /* you can have multiple rules */
  20. ${selector}:hover {
  21. background-color: var(--top-header-hover-color);
  22. }
  23. .dark ${selector}:hover {
  24. background-color: var(--el-bg-color-overlay);
  25. }
  26. `
  27. }
  28. ],
  29. [
  30. /^layout-border__left$/,
  31. ([], { rawSelector }) => {
  32. const selector = e(rawSelector)
  33. return `
  34. ${selector}:before {
  35. content: "";
  36. position: absolute;
  37. top: 0;
  38. left: 0;
  39. height: 100%;
  40. background-color: var(--el-border-color);
  41. z-index: 3;
  42. }
  43. `
  44. }
  45. ],
  46. [
  47. /^layout-border__right$/,
  48. ([], { rawSelector }) => {
  49. const selector = e(rawSelector)
  50. return `
  51. ${selector}:after {
  52. content: "";
  53. position: absolute;
  54. top: 0;
  55. right: 0;
  56. width: 1px;
  57. height: 100%;
  58. background-color: var(--el-border-color);
  59. z-index: 3;
  60. }
  61. `
  62. }
  63. ],
  64. [
  65. /^layout-border__top$/,
  66. ([], { rawSelector }) => {
  67. const selector = e(rawSelector)
  68. return `
  69. ${selector}:before {
  70. content: "";
  71. position: absolute;
  72. top: 0;
  73. left: 0;
  74. width: 100%;
  75. height: 1px;
  76. background-color: var(--el-border-color);
  77. z-index: 3;
  78. }
  79. `
  80. }
  81. ],
  82. [
  83. /^layout-border__bottom$/,
  84. ([], { rawSelector }) => {
  85. const selector = e(rawSelector)
  86. return `
  87. ${selector}:after {
  88. content: "";
  89. position: absolute;
  90. bottom: 0;
  91. left: 0;
  92. width: 100%;
  93. height: 1px;
  94. background-color: var(--el-border-color);
  95. z-index: 3;
  96. }
  97. `
  98. }
  99. ]
  100. ],
  101. presets: [presetUno({ dark: 'class', attributify: false })],
  102. // transformers: [transformerVariantGroup()],
  103. shortcuts: {
  104. 'wh-full': 'w-full h-full'
  105. }
  106. })