Ryan/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2026-07-24 08:53:04 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: fade in fade out + styling

Browse Source
This commit is contained in:
DecDuck
2025-07-27 20:25:21 +10:00
parent 50c1c21456
commit 26b12a6e8c
4 changed files with 128 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
base/components/NotificationModal.vue
+5 -32
View File
@@ -1,48 +1,23 @@
<template>
<TransitionRoot
as="template"
:show="true"
:style="{ 'z-index': props.zHeight }"
>
<Dialog class="relative z-50" @close="emit('event', 'close')">
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0"
enter-to="opacity-100"
leave="ease-in duration-200"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div class="relative z-50" @close="emit('event', 'close')">
<div
class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity"
class="fixed inset-0 bg-zinc-950/75"
/>
</TransitionChild>
<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
<div
class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
>
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div
class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
>
<div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:text-left">
<DialogTitle
as="h3"
<h3
class="text-base font-semibold text-zinc-100"
>{{ props.data.title }}
</DialogTitle>
</h3>
<div class="mt-2">
<p class="text-sm text-zinc-400">
{{ props.data.description }}
@@ -64,11 +39,9 @@
</LoadingButton>
</div>
</div>
</TransitionChild>
</div>
</div>
</Dialog>
</TransitionRoot>
</div>
</template>
<script setup lang="ts">