uno.config.ts 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  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: 1px 10px 0;
  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. width: 1px;
  40. height: 100%;
  41. background-color: var(--el-border-color);
  42. z-index: 3;
  43. }
  44. `
  45. }
  46. ],
  47. [
  48. /^layout-border__right$/,
  49. ([], { rawSelector }) => {
  50. const selector = e(rawSelector)
  51. return `
  52. ${selector}:after {
  53. content: "";
  54. position: absolute;
  55. top: 0;
  56. right: 0;
  57. width: 1px;
  58. height: 100%;
  59. background-color: var(--el-border-color);
  60. z-index: 3;
  61. }
  62. `
  63. }
  64. ],
  65. [
  66. /^layout-border__top$/,
  67. ([], { rawSelector }) => {
  68. const selector = e(rawSelector)
  69. return `
  70. ${selector}:before {
  71. content: "";
  72. position: absolute;
  73. top: 0;
  74. left: 0;
  75. width: 100%;
  76. height: 1px;
  77. background-color: var(--el-border-color);
  78. z-index: 3;
  79. }
  80. `
  81. }
  82. ],
  83. [
  84. /^layout-border__bottom$/,
  85. ([], { rawSelector }) => {
  86. const selector = e(rawSelector)
  87. return `
  88. ${selector}:after {
  89. content: "";
  90. position: absolute;
  91. bottom: 0;
  92. left: 0;
  93. width: 100%;
  94. height: 1px;
  95. background-color: var(--el-border-color);
  96. z-index: 3;
  97. }
  98. `
  99. }
  100. ]
  101. ],
  102. presets: [presetUno({ dark: 'class', attributify: false })],
  103. // transformers: [transformerVariantGroup()],
  104. shortcuts: {
  105. 'wh-full': 'w-full h-full'
  106. }
  107. })