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