sindhu/xport-tailwind-alpine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

step 18 : animate modal show and hover button cancel, save

Browse Source
This commit is contained in:
sindhu
2025-03-13 10:35:04 +07:00
parent c02d7544f3
commit 3cae1230c4
1 changed files with 237 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
v1/settings.html
View File

@@ -157,8 +157,7 @@
</div> </div>
<!-- modal add desktop --> <!-- modal add desktop -->
<div x-show="showDialogAdd"> <div x-show="showDialogAdd" x-transition.duration.200ms class="fixed z-10 inset-0">
<div class="fixed z-10 inset-0">
<div class="flex items-center justify-center min-h-screen bg-[#0F0F0F4D] transition-all"> <div class="flex items-center justify-center min-h-screen bg-[#0F0F0F4D] transition-all">
<!-- box --> <!-- box -->
<div class="flex flex-col bg-white rounded-lg w-2/3"> <div class="flex flex-col bg-white rounded-lg w-2/3">
@@ -385,15 +384,24 @@
</div> </div>
</template> </template>
<!-- namaJenis TCP Client --> <!-- namaJenis TCP Client -->
<!-- -->
</div> </div>
</div> </div>
<!-- footer --> <!-- footer -->
<div class="h-10 px-4 py-2"> <div class="h-10 px-4 py-2 mb-5">
<div class="flex items-end justify-end"> <div class="flex items-end justify-end">
<button <button
class="mr-3 text-[#FF5252] font-bold text-sm uppercase" @click="closeDialog()">Cancel</button> @click="closeDialog()"
<button class="text-[#1976D2] font-bold text-sm uppercase">Save</button> class="mr-3 text-[#FF5252] hover:text-white font-bold text-sm uppercase transition duration-200
</div> hover:bg-[#FF5252] px-4 py-2 rounded-md">
Cancel
</button>
<button
class="text-[#1976D2] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200
hover:bg-[#1976D2] hover:text-white">
Save
</button>
</div> </div>
</div> </div>
</div> </div>