Add drawer open/close animation

client/src/styles/partials/generic/drawers.scss

@@ -1,5 +1,9 @@
 .bd-drawer {
+    border-bottom: 1px solid rgba(114, 118, 126, 0.3);
+    margin-bottom: 15px;
+
     .bd-form-header {
+        margin-top: 0;
         cursor: pointer;
 
         &:hover {
@@ -21,13 +25,25 @@
         }
     }
 
-    .bd-drawer-contents {
-        display: none;
+    .bd-drawer-contents-wrap {
+        overflow: hidden;
     }
 
-    &:not(.bd-drawer-open) {
-        padding-bottom: 5px;
-        border-bottom: 1px solid rgba(114, 118, 126, 0.3);
+    .bd-drawer-contents {
+        transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
+        transform: scaleY(0) translateY(0%);
+        margin-top: -50%;
+        opacity: 0;
+
+        > .bd-form-item:last-child > .bd-form-divider:last-child {
+            display: none;
+        }
+
+        &::after {
+            content: "";
+            display: block;
+            margin-top: 15px;
+        }
     }
 
     &.bd-drawer-open {
@@ -47,7 +63,9 @@
         }
 
         .bd-drawer-contents {
-            display: block;
+            transform: scaleY(1) translateY(0%);
+            margin-top: 0%;
+            opacity: 1;
         }
     }
 }

client/src/ui/components/common/Drawer.vue

@@ -17,8 +17,10 @@
                 <span class="bd-chevron-2"><MiChevronDown /></span>
             </span>
         </div>
-        <div class="bd-drawer-contents">
-            <slot />
+        <div class="bd-drawer-contents-wrap">
+            <div class="bd-drawer-contents">
+                <slot />
+            </div>
         </div>
     </div>
 </template>