added animation
This commit is contained in:
parent
4a5858f724
commit
d12e9968ea
8
public/akaunting-js/generalAction.js
vendored
8
public/akaunting-js/generalAction.js
vendored
@ -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
10
public/css/app.css
vendored
@ -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));
|
||||||
|
@ -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">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user