From 323a74eef3e04f9afb4eeb7746b5539ab7a46ce9 Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Mon, 18 Sep 2023 16:34:41 +0200
Subject: [PATCH] improve dropdown transitions

---
 lib/components/base/DropdownButton.vue   | 6 ++++++
 lib/components/base/DropdownSelect.vue   | 7 +++++++
 lib/components/search/SearchDropdown.vue | 6 ++++++
 3 files changed, 19 insertions(+)

diff --git a/lib/components/base/DropdownButton.vue b/lib/components/base/DropdownButton.vue
index 0e3edf029..dac7cb436 100644
--- a/lib/components/base/DropdownButton.vue
+++ b/lib/components/base/DropdownButton.vue
@@ -201,6 +201,12 @@ onBeforeUnmount(() => {
 
     .btn {
       height: 2.25rem;
+
+      transition: 0.05s;
+
+      &:not(.render-down):not(.render-up) {
+        transition-delay: 0.2s;
+      }
     }
   }
 
diff --git a/lib/components/base/DropdownSelect.vue b/lib/components/base/DropdownSelect.vue
index 138a82b78..b41fe6d88 100644
--- a/lib/components/base/DropdownSelect.vue
+++ b/lib/components/base/DropdownSelect.vue
@@ -210,6 +210,12 @@ const isChildOfDropdown = (element) => {
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
 
+    transition: 0.05s;
+
+    &:not(.render-down):not(.render-up) {
+      transition-delay: 0.2s;
+    }
+
     &.disabled {
       cursor: not-allowed;
       filter: grayscale(50%);
@@ -232,6 +238,7 @@ const isChildOfDropdown = (element) => {
 
     .arrow {
       transition: transform 0.2s ease;
+
       &.rotate {
         transform: rotate(180deg);
       }
diff --git a/lib/components/search/SearchDropdown.vue b/lib/components/search/SearchDropdown.vue
index 0cd05f18e..051b69af6 100644
--- a/lib/components/search/SearchDropdown.vue
+++ b/lib/components/search/SearchDropdown.vue
@@ -316,6 +316,8 @@ const isChildOfDropdown = (element) => {
   box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent !important;
   width: 100%;
 
+  transition: 0.05s;
+
   &:focus {
     &.down {
       border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
@@ -325,5 +327,9 @@ const isChildOfDropdown = (element) => {
       border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
     }
   }
+
+  &:not(:focus) {
+    transition-delay: 0.2s;
+  }
 }
 </style>