From 562dee95b0aa89753e2481807c017519f5f7cf19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Merve=20=C3=96z=C3=A7if=C3=A7i?= <merveozcifci7@gmail.com>
Date: Fri, 24 Jul 2020 11:51:52 +0300
Subject: [PATCH 1/3] Fixed #409

---
 src/components/blockui/BlockUI.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/blockui/BlockUI.vue b/src/components/blockui/BlockUI.vue
index cf2d1c6bc..7e99cc225 100755
--- a/src/components/blockui/BlockUI.vue
+++ b/src/components/blockui/BlockUI.vue
@@ -111,7 +111,7 @@ export default {
     position: fixed;
 }
 
-.p-blockui-leave.p-component-overlay {
+.p-blockui.p-blockui-leave.p-component-overlay {
     background-color: transparent;
 }
 </style>

From 458a9faffc39b3a50ed3d80aeb552fa5c86adef2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Merve=20=C3=96z=C3=A7if=C3=A7i?= <merveozcifci7@gmail.com>
Date: Fri, 24 Jul 2020 11:52:12 +0300
Subject: [PATCH 2/3] Fixed #408

---
 src/components/calendar/Calendar.vue | 58 ++++++++++++++++++----------
 1 file changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 5d7daa815..7c8375771 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -1258,7 +1258,7 @@ export default {
             if (!this.mask) {
                 this.mask = document.createElement('div');
                 this.mask.style.zIndex = String(parseInt(this.$refs.overlay.style.zIndex, 10) - 1);
-                DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker');
+                DomHandler.addMultipleClasses(this.mask, 'p-datepicker-mask p-datepicker-mask-scrollblocker');
 
                 this.maskClickListener = () => {
                     this.disableModality();
@@ -1267,30 +1267,37 @@ export default {
 
                 document.body.appendChild(this.mask);
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
+
+                setTimeout(() => {
+                    DomHandler.addClass(this.mask, 'p-component-overlay');
+                }, 1);
             }
         },
         disableModality() {
             if (this.mask) {
-                this.mask.removeEventListener('click', this.maskClickListener);
-                this.maskClickListener = null;
-                document.body.removeChild(this.mask);
-                this.mask = null;
-
-                let bodyChildren = document.body.children;
-                let hasBlockerMasks;
-                for (let i = 0; i < bodyChildren.length; i++) {
-                    let bodyChild = bodyChildren[i];
-                    if(DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
-                        hasBlockerMasks = true;
-                        break;
-                    }
-                }
-
-                if (!hasBlockerMasks) {
-                    DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                }
-
                 this.overlayVisible = false;
+
+                DomHandler.addClass(this.mask, 'p-datepicker-mask-leave');
+                this.mask.addEventListener('transitionend', () => {
+                    this.mask.removeEventListener('click', this.maskClickListener);
+                    this.maskClickListener = null;
+                    document.body.removeChild(this.mask);
+                    this.mask = null;
+
+                    let bodyChildren = document.body.children;
+                    let hasBlockerMasks;
+                    for (let i = 0; i < bodyChildren.length; i++) {
+                        let bodyChild = bodyChildren[i];
+                        if(DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
+                            hasBlockerMasks = true;
+                            break;
+                        }
+                    }
+
+                    if (!hasBlockerMasks) {
+                        DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                    }
+                });
             }
         },
         updateCurrentMetaData() {
@@ -2291,4 +2298,13 @@ export default {
     min-width: 80vw;
     transform: translate(-50%, -50%);
 }
-</style>
\ No newline at end of file
+
+.p-datepicker-mask {
+    background-color: transparent;
+    transition-property: background-color;
+}
+
+.p-datepicker-mask.p-datepicker-mask-leave.p-component-overlay {
+    background-color: transparent;
+}
+</style>

From 81c96024136c33247339e172ab8b49d5dbe7d667 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Merve=20=C3=96z=C3=A7if=C3=A7i?= <merveozcifci7@gmail.com>
Date: Fri, 24 Jul 2020 11:52:36 +0300
Subject: [PATCH 3/3] Fixed #329

---
 src/components/sidebar/Sidebar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index 29696e58e..e927a43ab 100755
--- a/src/components/sidebar/Sidebar.vue
+++ b/src/components/sidebar/Sidebar.vue
@@ -166,7 +166,7 @@ export default {
     transition-property: background-color;
 }
 
-.p-sidebar-mask-leave.p-component-overlay {
+.p-sidebar-mask.p-sidebar-mask-leave.p-component-overlay {
     background-color: transparent;
 }
 
@@ -275,4 +275,4 @@ export default {
         width: 20rem;
     }
 }
-</style>
\ No newline at end of file
+</style>