diff --git a/src/components/ui/Dialog/DialogContent.vue b/src/components/ui/Dialog/DialogContent.vue index 6fb5679..8eb83d0 100644 --- a/src/components/ui/Dialog/DialogContent.vue +++ b/src/components/ui/Dialog/DialogContent.vue @@ -21,7 +21,7 @@ const { class: extraClasses } = toRefs(props) (), { :align="align" :class=" cn( - 'z-50 w-64 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-lg shadow-black/5 outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', + 'relative z-50 w-64 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-lg shadow-black/5 outline-hidden before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_rgba(0,0,0,0.04)] dark:before:shadow-[0_-1px_rgba(255,255,255,0.06)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class ) " diff --git a/src/components/ui/Popover/PopoverContent.vue b/src/components/ui/Popover/PopoverContent.vue index 9ee25ff..ea5871f 100644 --- a/src/components/ui/Popover/PopoverContent.vue +++ b/src/components/ui/Popover/PopoverContent.vue @@ -22,7 +22,7 @@ const props = withDefaults( :sideOffset="sideOffset" :class=" cn( - 'z-50 min-w-[8rem] rounded-lg border border-input bg-popover p-4 text-popover-foreground shadow-lg shadow-black/5 outline-hidden', + 'relative z-50 min-w-[8rem] rounded-lg border border-input bg-popover p-4 text-popover-foreground shadow-lg shadow-black/5 outline-hidden before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_rgba(0,0,0,0.04)] dark:before:shadow-[0_-1px_rgba(255,255,255,0.06)]', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', diff --git a/src/components/ui/Select/SelectContent.vue b/src/components/ui/Select/SelectContent.vue index 0660b39..89258eb 100644 --- a/src/components/ui/Select/SelectContent.vue +++ b/src/components/ui/Select/SelectContent.vue @@ -21,7 +21,7 @@ const props = withDefaults( align="start" :class=" cn( - 'relative z-50 max-h-[min(24rem,var(--reka-select-content-available-height))] min-w-[8rem] overflow-hidden rounded-lg border border-input bg-popover text-popover-foreground shadow-lg shadow-black/5 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 [&_[role=group]]:py-1', + 'relative z-50 max-h-[min(24rem,var(--reka-select-content-available-height))] min-w-[8rem] overflow-hidden rounded-lg border border-input bg-popover text-popover-foreground shadow-lg shadow-black/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_rgba(0,0,0,0.04)] dark:before:shadow-[0_-1px_rgba(255,255,255,0.06)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 [&_[role=group]]:py-1', position === 'popper' && 'w-full min-w-[var(--reka-select-trigger-width)] data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', props.class diff --git a/src/components/ui/Tooltip/Tooltip.vue b/src/components/ui/Tooltip/Tooltip.vue index a2078ee..40b0af2 100644 --- a/src/components/ui/Tooltip/Tooltip.vue +++ b/src/components/ui/Tooltip/Tooltip.vue @@ -16,7 +16,7 @@ const props = defineProps<{ const sideOffset = computed(() => props.sideOffset ?? 4) const computedClass = computed(() => { return cn( - 'relative z-50 max-w-[280px] rounded-lg border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', + 'relative z-50 max-w-[280px] rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md shadow-black/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_rgba(0,0,0,0.04)] dark:before:shadow-[0_-1px_rgba(255,255,255,0.06)] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class ) })