chore: checkpoint tailwind spacing updates

This commit is contained in:
xingyu4j
2026-03-14 18:11:08 +08:00
parent 90dc8cf997
commit fa190e0975
24 changed files with 42 additions and 42 deletions

View File

@@ -360,7 +360,7 @@
/* Only adjust scrollbar for non-macOS */
html:not([data-platform='macOs']) {
::-webkit-scrollbar {
@apply h-[10px] w-[10px];
@apply h-2.5 w-2.5;
}
::-webkit-scrollbar-thumb {

View File

@@ -6,12 +6,12 @@
}
#nprogress .bar {
@apply bg-primary fixed top-0 left-0 z-1031 h-[2px] w-full;
@apply bg-primary fixed top-0 left-0 z-1031 h-0.5 w-full;
}
/* Fancy blur effect */
#nprogress .peg {
@apply absolute right-0 block h-full w-[100px];
@apply absolute right-0 block h-full w-25;
box-shadow:
0 0 10px hsl(var(--primary)),

View File

@@ -21,11 +21,11 @@ const props = defineProps<Props>();
<template>
<FormLabel :class="cn('flex items-center', props.class)">
<span v-if="required" class="mr-[2px] text-destructive">*</span>
<span v-if="required" class="mr-0.5 text-destructive">*</span>
<slot></slot>
<VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">
<VbenRenderContent :content="help" />
</VbenHelpTooltip>
<span v-if="colon && label" class="ml-[2px]">:</span>
<span v-if="colon && label" class="ml-0.5">:</span>
</FormLabel>
</template>

View File

@@ -374,7 +374,7 @@ onUnmounted(() => {
<div
v-if="draggable"
ref="dragBarRef"
class="absolute inset-y-0 -right-px z-1000 w-[2px] cursor-col-resize hover:bg-primary"
class="absolute inset-y-0 -right-px z-1000 w-0.5 cursor-col-resize hover:bg-primary"
@mousedown="handleDragSidebar"
></div>
</aside>

View File

@@ -10,7 +10,7 @@ function toggleFixed() {
<template>
<div
class="absolute right-3 bottom-2 z-10 flex-center cursor-pointer rounded-sm bg-accent p-[5px] text-foreground/60 transition-all duration-300 hover:bg-accent-hover hover:text-foreground"
class="absolute right-3 bottom-2 z-10 flex-center cursor-pointer rounded-sm bg-accent p-1.25 text-foreground/60 transition-all duration-300 hover:bg-accent-hover hover:text-foreground"
@click="toggleFixed"
>
<PinOff v-if="!expandOnHover" class="size-3.5" />

View File

@@ -147,7 +147,7 @@ async function handleOpenChange(val: boolean) {
:class="
cn(
containerClass,
'inset-x-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-[520px] sm:max-w-[80%] sm:rounded-(--radius)',
'inset-x-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-130 sm:max-w-[80%] sm:rounded-(--radius)',
{
'border border-border': bordered,
'shadow-3xl': !bordered,
@@ -174,7 +174,7 @@ async function handleOpenChange(val: boolean) {
</div>
</AlertDialogTitle>
<AlertDialogDescription>
<div class="m-4 min-h-[30px]">
<div class="m-4 min-h-7.5">
<VbenRenderContent :content="content" render-br />
</div>
<VbenLoading v-if="loading && contentMasking" :spinning="loading" />

View File

@@ -185,7 +185,7 @@ const getForceMount = computed(() => {
<SheetContent
:append-to="getAppendTo"
:class="
cn('flex w-[520px] flex-col', drawerClass, {
cn('flex w-130 flex-col', drawerClass, {
'w-full!': isMobile || placement === 'bottom' || placement === 'top',
'max-h-screen': placement === 'bottom' || placement === 'top',
hidden: isClosed,
@@ -224,7 +224,7 @@ const getForceMount = computed(() => {
v-if="closable && closeIconPlacement === 'left'"
as-child
:disabled="submitting"
class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary"
class="ml-0.5 cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary"
>
<slot name="close-icon">
<VbenIconButton>
@@ -265,7 +265,7 @@ const getForceMount = computed(() => {
v-if="closable && closeIconPlacement === 'right'"
as-child
:disabled="submitting"
class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary"
class="ml-0.5 cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary"
>
<slot name="close-icon">
<VbenIconButton>

View File

@@ -240,7 +240,7 @@ function handleClosed() {
:append-to="getAppendTo"
:class="
cn(
'inset-x-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0',
'inset-x-0 top-[10vh] mx-auto flex max-h-[80%] w-130 flex-col p-0',
shouldFullscreen ? 'sm:rounded-none' : 'sm:rounded-(--radius)',
modalClass,
{

View File

@@ -37,7 +37,7 @@ const tabsIndicatorStyle = computed(() => {
});
function activeClass(tab: string): string[] {
return tab === activeTab.value ? ['!font-bold', 'text-primary'] : [];
return tab === activeTab.value ? ['font-bold!', 'text-primary'] : [];
}
</script>
@@ -45,7 +45,7 @@ function activeClass(tab: string): string[] {
<Tabs v-model="activeTab" :default-value="getDefaultValue">
<TabsList
:style="tabsStyle"
class="bg-accent !outline-heavy relative grid w-full !outline !outline-2"
class="bg-accent outline-heavy! relative grid w-full outline! outline-2!"
>
<TabsIndicator :style="tabsIndicatorStyle" />
<template v-for="tab in tabs" :key="tab.value">

View File

@@ -16,7 +16,7 @@ const style = computed(() => {
});
</script>
<template>
<div :style="style" class="vben-spine-text !bg-clip-text text-transparent">
<div :style="style" class="vben-spine-text bg-clip-text! text-transparent">
<slot></slot>
</div>
</template>

View File

@@ -33,8 +33,8 @@ const delegatedProps = computed(() => {
cn(
'bg-background text-muted-foreground absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-xs',
props.orientation === 'vertical'
? 'w-[1px] px-1 py-2'
: 'h-[1px] px-2 py-1',
? 'w-0.25 px-1 py-2'
: 'h-0.25 px-2 py-1',
)
"
>

View File

@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
v-model="modelValue"
:class="
cn(
'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-15 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
props.class,
)
"

View File

@@ -116,17 +116,17 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
class="tabs-chrome__background absolute z-[-1] size-full px-[calc(var(--gap)-1px)] py-0 transition-opacity duration-150"
>
<div
class="tabs-chrome__background-content h-full rounded-tl-(--gap) rounded-tr-(--gap) duration-150 group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-accent"
class="tabs-chrome__background-content h-full rounded-tl-(--gap) rounded-tr-(--gap) duration-150 group-[.is-active]:bg-primary/15 group-[.is-active]:dark:bg-accent"
></div>
<svg
class="tabs-chrome__background-before absolute bottom-0 -left-px fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent"
class="tabs-chrome__background-before absolute bottom-0 -left-px fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 group-[.is-active]:dark:fill-accent"
height="7"
width="7"
>
<path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
</svg>
<svg
class="tabs-chrome__background-after absolute -right-px bottom-0 fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent"
class="tabs-chrome__background-after absolute -right-px bottom-0 fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 group-[.is-active]:dark:fill-accent"
height="7"
width="7"
>
@@ -141,7 +141,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<!-- close-icon -->
<X
v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
class="mt-[2px] size-3 cursor-pointer rounded-full stroke-accent-foreground/80 text-accent-foreground/80 transition-all group-[.is-active]:text-accent-foreground hover:bg-accent hover:stroke-accent-foreground"
class="mt-0.5 size-3 cursor-pointer rounded-full stroke-accent-foreground/80 text-accent-foreground/80 transition-all group-[.is-active]:text-accent-foreground hover:bg-accent hover:stroke-accent-foreground"
@click.stop="() => emit('close', tab.key)"
/>
<Pin
@@ -153,7 +153,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<!-- tab-item-main -->
<div
class="tabs-chrome__item-main z-2 mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 pl-2 text-accent-foreground duration-150 group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
class="tabs-chrome__item-main z-2 mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 pl-2 text-accent-foreground duration-150 group-[.is-active]:text-primary group-[.is-active]:dark:text-accent-foreground"
>
<VbenIcon
v-if="showIcon"
@@ -191,12 +191,12 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
.tabs-chrome__item:not(.dragging):hover:not(.is-active)
.tabs-chrome__background {
@apply pb-[2px];
@apply pb-0.5;
}
.tabs-chrome__item:not(.dragging):hover:not(.is-active)
.tabs-chrome__background-content {
@apply bg-accent mx-[2px] rounded-md;
@apply bg-accent mx-0.5 rounded-md;
}
.tabs-chrome__item:not(.dragging).is-active {
@@ -206,6 +206,6 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
.tabs-chrome__item:not(.dragging).is-active
+ .tabs-chrome__item
.tabs-chrome__divider {
@apply !opacity-0;
@apply opacity-0!;
}
</style>

View File

@@ -115,19 +115,19 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<!-- close-icon -->
<X
v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
class="size-3 cursor-pointer rounded-full stroke-accent-foreground/80 transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground"
class="size-3 cursor-pointer rounded-full stroke-accent-foreground/80 transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:dark:text-accent-foreground"
@click.stop="() => emit('close', tab.key)"
/>
<Pin
v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
class="mt-px size-3.5 cursor-pointer rounded-full transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground"
class="mt-px size-3.5 cursor-pointer rounded-full transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:dark:text-accent-foreground"
@click.stop="() => emit('unpin', tab)"
/>
</div>
<!-- tab-item-main -->
<div
class="mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 text-accent-foreground transition-all duration-300 group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
class="mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 text-accent-foreground transition-all duration-300 group-[.is-active]:text-primary group-[.is-active]:dark:text-accent-foreground"
>
<VbenIcon
v-if="showIcon"