added animation

This commit is contained in:
Burak Civan 2022-11-10 11:17:34 +03:00
parent 4a5858f724
commit d12e9968ea
3 changed files with 10 additions and 10 deletions

View File

@ -52,12 +52,12 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
if (document.body.clientWidth <= 768) { if (document.body.clientWidth <= 768) {
table.querySelectorAll('[data-table-list]').forEach((actions) => { table.querySelectorAll('[data-table-list]').forEach((actions) => {
actions.querySelector('[data-mobile-actions]').addEventListener('click', function() { actions.querySelector('[data-mobile-actions]').addEventListener('click', function() {
this.closest('td').querySelector('[data-mobile-actions-modal]').classList.add('show', 'flex'); this.closest('td').querySelector('[data-mobile-actions-modal]').classList.add('show');
this.closest('td').querySelector('[data-mobile-actions-modal]').classList.remove('hidden'); this.closest('td').querySelector('[data-mobile-actions-modal]').classList.remove('opacity-0', 'invisible');
this.closest('td').querySelector('[data-mobile-actions-modal]').addEventListener('click', function() { this.closest('td').querySelector('[data-mobile-actions-modal]').addEventListener('click', function() {
this.classList.add('hidden'); this.classList.add('opacity-0', 'invisible');
this.classList.remove('show', 'flex'); this.classList.remove('show');
}); });
}); });
}); });

10
public/css/app.css vendored
View File

@ -54493,16 +54493,16 @@ body{
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
} }
.hover\:bg-gray-100:hover{
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.hover\:bg-lilac-100:hover{ .hover\:bg-lilac-100:hover{
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(245 247 250 / var(--tw-bg-opacity)); background-color: rgb(245 247 250 / var(--tw-bg-opacity));
} }
.hover\:bg-gray-100:hover{
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.hover\:bg-gray-200:hover{ .hover\:bg-gray-200:hover{
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity)); background-color: rgb(229 231 235 / var(--tw-bg-opacity));

View File

@ -14,7 +14,7 @@
<div <div
data-mobile-actions-modal data-mobile-actions-modal
class="modal w-full h-full fixed top-0 left-0 right-0 justify-center items-center flex-wrap overflow-y-auto overflow-hidden z-50 hidden modal-background" class="modal w-full h-full fixed flex top-0 left-0 right-0 justify-center items-center flex-wrap overflow-y-auto overflow-hidden z-50 opacity-0 invisible modal-background transition-opacity"
> >
<div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0 max-w-md"> <div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0 max-w-md">
<div class="p-2 bg-body rounded-lg"> <div class="p-2 bg-body rounded-lg">