@per-diem-calculator/vanilla 1.0.0

package/src/css/_styles.css

@@ -0,0 +1,8 @@
+@import 'tailwindcss';
+@import './tw-shadow-props.css';
+@import './colors.css';
+@import './fonts.css';
+
+@import './rows/_index.css';
+@import './tom-select/defaults';
+@import './tom-select/overrides';

package/src/css/colors.css

@@ -0,0 +1,45 @@
+@theme {
+    --color-primary-900: hsl(245, 100%, 27%);
+    --color-primary-800: hsl(245, 86%, 40%);
+    --color-primary-700: hsl(245, 79%, 52%);
+    --color-primary-600: hsl(245, 92%, 60%);
+    --color-primary-500: hsl(243, 94%, 66%);
+    --color-primary-400: hsl(243, 94%, 70%);
+    --color-primary-300: hsl(240, 95%, 76%);
+    --color-primary-200: hsl(238, 94%, 81%);
+    --color-primary-100: hsl(238, 100%, 88%);
+    --color-primary-50: hsl(240, 100%, 95%);
+
+    --color-success-900: hsl(170, 97%, 15%);
+    --color-success-800: hsl(168, 80%, 23%);
+    --color-success-700: hsl(166, 72%, 28%);
+    --color-success-600: hsl(164, 71%, 34%);
+    --color-success-500: hsl(162, 63%, 41%);
+    --color-success-400: hsl(160, 51%, 49%);
+    --color-success-300: hsl(158, 58%, 62%);
+    --color-success-200: hsl(156, 73%, 74%);
+    --color-success-100: hsl(154, 75%, 87%);
+    --color-success-50: hsl(152, 68%, 96%);
+
+    --color-neutral-900: hsl(209, 61%, 16%);
+    --color-neutral-800: hsl(211, 39%, 23%);
+    --color-neutral-700: hsl(209, 34%, 30%);
+    --color-neutral-600: hsl(209, 28%, 39%);
+    --color-neutral-500: hsl(210, 22%, 49%);
+    --color-neutral-400: hsl(209, 23%, 60%);
+    --color-neutral-300: hsl(211, 27%, 70%);
+    --color-neutral-200: hsl(210, 31%, 80%);
+    --color-neutral-100: hsl(212, 33%, 89%);
+    --color-neutral-50: hsl(210, 36%, 96%);
+
+    --color-error-900: hsl(348, 94%, 20%);
+    --color-error-800: hsl(350, 94%, 28%);
+    --color-error-700: hsl(352, 90%, 35%);
+    --color-error-600: hsl(354, 85%, 44%);
+    --color-error-500: hsl(356, 75%, 53%);
+    --color-error-400: hsl(360, 83%, 62%);
+    --color-error-300: hsl(360, 91%, 69%);
+    --color-error-200: hsl(360, 100%, 80%);
+    --color-error-100: hsl(360, 100%, 87%);
+    --color-error-50: hsl(360, 100%, 95%);
+}

package/src/css/fonts.css

@@ -0,0 +1,9 @@
+@theme {
+    --font-sans:
+        'IBM Plex Mono', ui-sans-serif, system-ui, sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+        'Noto Color Emoji';
+    --font-mono:
+        'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+        'Liberation Mono', 'Courier New', monospace;
+}

package/src/css/rows/_heights.css

@@ -0,0 +1,6 @@
+@theme {
+    --row-expense-open: 400px;
+    --row-close: 96px;
+    --row-location-open: 477px;
+    --row-location-open-sm: 537px;
+}

package/src/css/rows/_index.css

@@ -0,0 +1,15 @@
+@import './_heights.css';
+@import './add.css';
+@import './animate-btns.css';
+@import './animate-row-close.css';
+@import './animate-row-open.css';
+@import './animate-row-other.css';
+@import './btn-add-row.css';
+@import './btn-delete.css';
+@import './btn-expenses-calculate.css';
+@import './btn-expenses-category.css';
+@import './delete.css';
+@import './details.css';
+@import './expense.css';
+@import './location.css';
+@import './summary.css';

package/src/css/rows/add.css

@@ -0,0 +1,18 @@
+@theme {
+    @keyframes row-add {
+        0% {
+            height: 0;
+        }
+        100% {
+            height: var(--row-location-open);
+        }
+    }
+    @keyframes row-add-sm {
+        0% {
+            height: 0;
+        }
+        100% {
+            height: var(--row-location-open-sm);
+        }
+    }
+}

package/src/css/rows/animate-btns.css

@@ -0,0 +1,18 @@
+@theme {
+    --animate-rows-closed-addRowBtn: rows-closed-addRowBtn 0.45s ease-out
+        forwards;
+
+    --animate-rows-closed-expenseCategoryBtn: rows-closed-expenseCategoryBtn
+        0.45s forwards;
+
+    --animate-rows-closed-expensesCalculateBtn: rows-closed-expensesCalculateBtn
+        0.45s forwards;
+
+    --animate-rows-open-addRowBtn: rows-open-addRowBtn 0.45s forwards;
+
+    --animate-rows-open-expenseCategoryBtn: rows-open-expenseCategoryBtn 0.35s
+        0.45s forwards;
+
+    --animate-rows-open-expensesCalculateBtn: rows-open-expensesCalculateBtn
+        0.35s 0.45s forwards;
+}

package/src/css/rows/animate-row-close.css

@@ -0,0 +1,18 @@
+@theme {
+    /* First stage */
+    /* Details */
+    --animate-row-close-details: row-close-details 0.35s ease-in forwards;
+
+    /* Second Stage */
+    /* Row */
+    --animate-row-location-close: row-location-close 0.35s 0.35s ease-in
+        forwards;
+    --animate-row-location-close-sm: row-location-close-sm 0.35s 0.35s ease-in
+        forwards;
+    --animate-row-expense-close: row-expense-close 0.35s 0.35s ease-in forwards;
+
+    /* Summary, delete btn */
+    --animate-row-close-summary: row-close-summary 0.35s 0.35s ease-out forwards;
+    --animate-row-close-deletebtn: row-close-deletebtn 0.35s 0.35s ease-out
+        forwards;
+}

package/src/css/rows/animate-row-open.css

@@ -0,0 +1,14 @@
+@theme {
+    /* First stage */
+    /* Row */
+    --animate-row-location-open: row-location-open 0.35s 0.45s ease-in forwards;
+    --animate-row-location-open-sm: row-location-open-sm 0.35s 0.45s ease-in
+        forwards;
+    --animate-row-expense-open: row-expense-open 0.35s 0.45s ease-in forwards;
+
+    /* Details, summary, delete */
+    --animate-row-open-details: row-open-details 0.35s 0.45s ease-in forwards;
+    --animate-row-open-summary: row-open-summary 0.35s 0.45s ease-in forwards;
+    --animate-row-open-deletebtn: row-open-deletebtn 0.35s 0.45s ease-in
+        forwards;
+}

package/src/css/rows/animate-row-other.css

@@ -0,0 +1,5 @@
+@theme {
+    --animate-row-delete: row-delete 0.35s 0.45s ease-out forwards;
+    --animate-row-add: row-add 0.35s 0.45s ease-in forwards;
+    --animate-row-add-sm: row-add-sm 0.35s 0.45s ease-in forwards;
+}

package/src/css/rows/btn-add-row.css

@@ -0,0 +1,41 @@
+@theme {
+    @keyframes rows-open-addRowBtn {
+        0% {
+            transform: translateY(0%);
+            opacity: 100;
+            z-index: 50;
+        }
+        33% {
+            transform: translateY(75%);
+            opacity: 100;
+            z-index: 0;
+        }
+        70% {
+            opacity: 0;
+        }
+        100% {
+            transform: translateY(-100%);
+            z-index: 0;
+            opacity: 0;
+        }
+    }
+    @keyframes rows-closed-addRowBtn {
+        0% {
+            transform: translateY(-100%);
+            z-index: 0;
+            opacity: 0;
+        }
+        30% {
+            opacity: 100;
+        }
+        66% {
+            transform: translateY(75%);
+            z-index: 0;
+        }
+        100% {
+            transform: translateY(0%);
+            z-index: 50;
+            opacity: 100;
+        }
+    }
+}

package/src/css/rows/btn-delete.css

@@ -0,0 +1,22 @@
+@theme {
+    @keyframes row-open-deletebtn {
+        0% {
+            transform: translateX(0%);
+            opacity: 100;
+        }
+        100% {
+            transform: translateX(200%);
+            opacity: 0;
+        }
+    }
+    @keyframes row-close-deletebtn {
+        0% {
+            transform: translateX(200%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(0%);
+            opacity: 100;
+        }
+    }
+}

package/src/css/rows/btn-expenses-calculate.css

@@ -0,0 +1,22 @@
+@theme {
+    @keyframes rows-open-expensesCalculateBtn {
+        0% {
+            transform: translateY(0%);
+            opacity: 100;
+        }
+        100% {
+            transform: translateY(200%);
+            opacity: 0;
+        }
+    }
+    @keyframes rows-closed-expensesCalculateBtn {
+        0% {
+            transform: translateY(200%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateY(0%);
+            opacity: 100;
+        }
+    }
+}

package/src/css/rows/btn-expenses-category.css

@@ -0,0 +1,22 @@
+@theme {
+    @keyframes rows-open-expenseCategoryBtn {
+        0% {
+            transform: translateY(0%);
+            opacity: 100;
+        }
+        100% {
+            transform: translateY(400%);
+            opacity: 0;
+        }
+    }
+    @keyframes rows-closed-expenseCategoryBtn {
+        0% {
+            transform: translateY(400%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateY(0%);
+            opacity: 100;
+        }
+    }
+}

package/src/css/rows/delete.css

@@ -0,0 +1,10 @@
+@theme {
+    @keyframes row-delete {
+        0% {
+            height: var(--row-close);
+        }
+        100% {
+            height: 0;
+        }
+    }
+}

package/src/css/rows/details.css

@@ -0,0 +1,22 @@
+@theme {
+    @keyframes row-open-details {
+        0% {
+            transform: translateX(0);
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(100%);
+            opacity: 100;
+        }
+    }
+    @keyframes row-close-details {
+        0% {
+            transform: translateX(100%);
+            opacity: 100;
+        }
+        100% {
+            transform: translateX(0);
+            opacity: 0;
+        }
+    }
+}

package/src/css/rows/expense.css

@@ -0,0 +1,18 @@
+@theme {
+    @keyframes row-expense-open {
+        0% {
+            height: var(--row-close);
+        }
+        100% {
+            height: var(--row-expense-open);
+        }
+    }
+    @keyframes row-expense-close {
+        0% {
+            height: var(--row-expense-open);
+        }
+        100% {
+            height: var(--row-close);
+        }
+    }
+}

package/src/css/rows/location.css

@@ -0,0 +1,34 @@
+@theme {
+    @keyframes row-location-open {
+        0% {
+            height: var(--row-close);
+        }
+        100% {
+            height: var(--row-location-open);
+        }
+    }
+    @keyframes row-location-open-sm {
+        0% {
+            height: var(--row-close);
+        }
+        100% {
+            height: var(--row-location-open-sm);
+        }
+    }
+}
+@keyframes row-location-close {
+    0% {
+        height: var(--row-location-open);
+    }
+    100% {
+        height: var(--row-close);
+    }
+}
+@keyframes row-location-close-sm {
+    0% {
+        height: var(--row-location-open-sm);
+    }
+    100% {
+        height: var(--row-close);
+    }
+}

package/src/css/rows/summary.css

@@ -0,0 +1,22 @@
+@theme {
+    @keyframes row-open-summary {
+        0% {
+            transform: translateY(0%);
+            opacity: 100;
+        }
+        100% {
+            transform: translateY(-200%);
+            opacity: 0;
+        }
+    }
+    @keyframes row-close-summary {
+        0% {
+            transform: translateY(-200%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateY(0%);
+            opacity: 100;
+        }
+    }
+}