mirror of
https://github.com/imdap/ruoyi-plus-vben5.git
synced 2026-04-23 00:38:34 +08:00
chore: checkpoint tailwind spacing updates
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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)),
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
{
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
)
|
||||
"
|
||||
>
|
||||
|
||||
@@ -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,
|
||||
)
|
||||
"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user