add: collapsing and deletion animation

Added collapsable cards and animation for deletion and card footer

app/assets/styles/button.css

@@ -1,5 +1,9 @@
 .Button {
     --padding: .2rem;
+    --background: var(--color-main);
+    --color: var(--color-white);
+    --background-hover: var(--color-main-dark);
+
     display: flex;
     justify-content: center;
     align-items: center;
@@ -9,19 +13,26 @@
     outline: none;
     border: none;
     background: transparent;
+    color: var(--color);
 
     &.cta {
-        background: var(--color-main);
-        color: var(--color-white);
+        background: var(--background);
+        color: var(--color);
         padding: .5rem 1.5rem;
         border-radius: var(--radius-default);
         box-shadow: var(--box-shadow-z2);
 
         &:hover {
-            background: var(--color-main-dark);
+            background: var(--background-hover);
         }
     }
 
+    &.cta.white {
+        --background: var(--color-white);
+        --color: var(--color-main);
+        --background-hover: var(--color-grey);
+    }
+
     &.icon-button {
         display: flex;
         padding: var(--padding);

app/assets/styles/general.css

@@ -14,7 +14,9 @@
     --color-main-light: var(--color-blue-light);
     --color-main-dark: var(--color-blue-dark);
 
+    --box-shadow-upper: 0 -3px 6px rgba(0,0,0,0.16), 0 -3px 6px rgba(0,0,0,0.23);
     --box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+    --box-shadow-inset: inset 0 3px 6px rgba(0,0,0,0.16), inset 0 3px 6px rgba(0,0,0,0.23);
 }
 
 * {
@@ -52,6 +54,11 @@ body {
     flex-direction: column;
 }
 
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
 .text-white {
     color: var(--color-white);
 }

app/assets/styles/priceCard.css

@@ -1,34 +1,60 @@
 .PriceCard {
+    --height: auto;
     width: 100%;
+    display: grid;
+    transition: var(--transition-default);
+    grid-template-rows: auto 1fr auto;
+    height: var(--height);
+
+    &.deleting {
+        height: 0;
+    }
+
+    &.folded {
+        grid-template-rows: auto 0fr auto;
+    }
 
     & > header {
-        color: white;
+        color: var(--color-white);
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-size: 1.3em;
 
         & > .Button {
-            scale: 0;
             color: var(--color-white);
             border: 2px solid var(--color-white);
         }
+    }
+
+    & aside {
+        overflow: hidden;
+    }
+
+    & footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        & > .Button.delete {
+            scale: 0;
+        }
 
         & > .Button.deletable {
             scale: 1;
         }
     }
 
-    & > .padding {
+    & .padding {
         gap: 1rem;
         padding: var(--padding-default);
     }
 
-    & > .bg-blue {
+    & .bg-blue {
         background: var(--color-blue);
     }
 
-    & > .bg-white {
+    & .bg-white {
         background: var(--color-white);
     }
 
@@ -40,7 +66,7 @@
         justify-content: space-between;
 
         & > * {
-            flex-basis: 30%;
+            flex-basis: 25%;
             flex-grow: 1;
         }
 

app/assets/styles/toolbar.css

@@ -4,6 +4,7 @@
     background: var(--color-main);
     position: sticky;
     bottom: 0;
+    box-shadow: var(--box-shadow-upper);
 
     & > .Button {
         --padding: 1rem;