feat: migrate to Tailwind CSS v4 (#7614)
* chore: update deps * feat: use jsonc/x language * chore: update eslint 10.0 * fix: no-useless-assignment * feat: add CLAUDE.md * chore: ignore * feat: claude * fix: lint * chore: suppot eslint v10 * fix: lint * fix: lint * fix: type check * fix: unit test * fix: Suggested fix * fix: unit test * chore: update stylelint v17 * chore: update all major deps * fix: echarts console warn * chore: update vitest v4 * feat: add skills ignores * chore: update deps * chore: update deps * fix: cspell * chore: update deps * chore: update tailwindcss v4 * chore: remove postcss config * fix: no use catalog * chore: tailwind v4 config * fix: tailwindcss v4 sort * feat: use eslint-plugin-better-tailwindcss * fix: Interference between enforce-consistent-line-wrapping, jsx-curly-brace-presence and Prettier * fix: Interference between enforce-consistent-line-wrapping, jsx-curly-brace-presence and Prettier * fix(lint): resolve prettier and better-tailwindcss formatting conflicts * fix(tailwind): update theme references and lint sources * style(format): normalize apps docs and playground vue files * style(format): normalize core ui-kit components * style(format): normalize effects ui and layout components
This commit is contained in:
@@ -851,6 +851,8 @@ defineExpose({ getCropImage });
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@reference "@vben-core/design/theme";
|
||||
|
||||
.cropper-action-wrapper {
|
||||
@apply box-border flex items-center justify-center;
|
||||
|
||||
@@ -880,34 +882,34 @@ defineExpose({ getCropImage });
|
||||
|
||||
/* 遮罩层 */
|
||||
.cropper-mask {
|
||||
@apply absolute left-0 top-0 bg-black/50;
|
||||
@apply absolute top-0 left-0 bg-black/50;
|
||||
}
|
||||
|
||||
.cropper-mask-view {
|
||||
@apply absolute left-0 top-0;
|
||||
@apply absolute top-0 left-0;
|
||||
}
|
||||
|
||||
/* 裁剪框 */
|
||||
.cropper-box {
|
||||
@apply absolute left-0 top-0 z-10;
|
||||
@apply absolute top-0 left-0 z-10;
|
||||
}
|
||||
|
||||
.cropper-view {
|
||||
@apply absolute bottom-0 left-0 right-0 top-0 select-none outline outline-1 outline-blue-500;
|
||||
@apply absolute top-0 right-0 bottom-0 left-0 outline outline-1 outline-blue-500 select-none;
|
||||
}
|
||||
|
||||
/* 裁剪框辅助线 */
|
||||
.cropper-dashed-h {
|
||||
@apply absolute left-0 top-1/3 block h-1/3 w-full border-b border-t border-dashed border-gray-200/50;
|
||||
@apply absolute top-1/3 left-0 block h-1/3 w-full border-t border-b border-dashed border-gray-200/50;
|
||||
}
|
||||
|
||||
.cropper-dashed-v {
|
||||
@apply absolute left-1/3 top-0 block h-full w-1/3 border-l border-r border-dashed border-gray-200/50;
|
||||
@apply absolute top-0 left-1/3 block h-full w-1/3 border-r border-l border-dashed border-gray-200/50;
|
||||
}
|
||||
|
||||
/* 裁剪框拖拽区域 */
|
||||
.cropper-move-area {
|
||||
@apply absolute left-0 top-0 block h-full w-full cursor-move bg-white/10;
|
||||
@apply absolute top-0 left-0 block h-full w-full cursor-move bg-white/10;
|
||||
}
|
||||
|
||||
/* 边框拖拽线 */
|
||||
@@ -919,15 +921,15 @@ defineExpose({ getCropImage });
|
||||
}
|
||||
|
||||
.cropper-line-e {
|
||||
@apply right-[-3px] top-0 h-full w-1;
|
||||
@apply top-0 right-[-3px] h-full w-1;
|
||||
}
|
||||
|
||||
.cropper-line-n {
|
||||
@apply left-0 top-[-3px] h-1 w-full;
|
||||
@apply top-[-3px] left-0 h-1 w-full;
|
||||
}
|
||||
|
||||
.cropper-line-w {
|
||||
@apply left-[-3px] top-0 h-full w-1;
|
||||
@apply top-0 left-[-3px] h-full w-1;
|
||||
}
|
||||
|
||||
.cropper-line-s {
|
||||
@@ -945,11 +947,11 @@ defineExpose({ getCropImage });
|
||||
|
||||
/* 边角拖拽点位置和光标 */
|
||||
.cropper-point-ne {
|
||||
@apply right-[-5px] top-[-5px] cursor-ne-resize;
|
||||
@apply top-[-5px] right-[-5px] cursor-ne-resize;
|
||||
}
|
||||
|
||||
.cropper-point-nw {
|
||||
@apply left-[-5px] top-[-5px] cursor-nw-resize;
|
||||
@apply top-[-5px] left-[-5px] cursor-nw-resize;
|
||||
}
|
||||
|
||||
.cropper-point-sw {
|
||||
@@ -957,20 +959,20 @@ defineExpose({ getCropImage });
|
||||
}
|
||||
|
||||
.cropper-point-se {
|
||||
@apply bottom-[-5px] right-[-5px] cursor-se-resize;
|
||||
@apply right-[-5px] bottom-[-5px] cursor-se-resize;
|
||||
}
|
||||
|
||||
/* 边中点拖拽点位置和光标 */
|
||||
.cropper-point-e {
|
||||
@apply right-[-5px] top-1/2 -mt-1 cursor-e-resize;
|
||||
@apply top-1/2 right-[-5px] -mt-1 cursor-e-resize;
|
||||
}
|
||||
|
||||
.cropper-point-n {
|
||||
@apply left-1/2 top-[-5px] -ml-1 cursor-n-resize;
|
||||
@apply top-[-5px] left-1/2 -ml-1 cursor-n-resize;
|
||||
}
|
||||
|
||||
.cropper-point-w {
|
||||
@apply left-[-5px] top-1/2 -mt-1 cursor-w-resize;
|
||||
@apply top-1/2 left-[-5px] -mt-1 cursor-w-resize;
|
||||
}
|
||||
|
||||
.cropper-point-s {
|
||||
|
||||
Reference in New Issue
Block a user