From 072d6a7e73303f188c3b778bcbc36a985a993d7f Mon Sep 17 00:00:00 2001
From: Brian Rogers <captbrogers@gmail.com>
Date: Thu, 5 May 2022 12:27:07 -0600
Subject: [PATCH] adding animation CSS file

---
 src/resources/css/animations.css     | 12 ++++++++++++
 src/resources/css/app.css            |  2 ++
 src/resources/js/Components/Card.vue |  6 +-----
 3 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 src/resources/css/animations.css

diff --git a/src/resources/css/animations.css b/src/resources/css/animations.css
new file mode 100644
index 0000000..218fe0c
--- /dev/null
+++ b/src/resources/css/animations.css
@@ -0,0 +1,12 @@
+/** https://thinkdobecreate.com/articles/css-animating-newly-added-element/ **/
+
+.anim-show {
+    animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+}
+
+@keyframes show {
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
diff --git a/src/resources/css/app.css b/src/resources/css/app.css
index 80a809d..b0fcfb8 100644
--- a/src/resources/css/app.css
+++ b/src/resources/css/app.css
@@ -2,6 +2,7 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import 'animations.css';
 @import 'typography.css';
 
 @import 'components/buttons.css';
@@ -9,6 +10,7 @@
 @import 'components/tables.css';
 
 body {
+    min-height: 100vh;
     overflow: auto;
     scrollbar-gutter: stable both-edges;
 }
diff --git a/src/resources/js/Components/Card.vue b/src/resources/js/Components/Card.vue
index e04b9a1..0fbe074 100644
--- a/src/resources/js/Components/Card.vue
+++ b/src/resources/js/Components/Card.vue
@@ -1,9 +1,5 @@
 <script setup>
-import { ref } from 'vue'
-
-defineEmits([])
-
-const attrs = useAttrs()
+import { computed, useSlots } from 'vue'
 
 const props = defineProps({
   class: {