Show invoice buttons depending of payment status. Fixes #54

2025-11-14 11:55:41 +01:00
parent 9a84d36d68
commit 5cb0f97f8b
8 changed files with 356 additions and 241 deletions
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+import { X } from "lucide-vue-next"
+
+</script>
+
+<template>
+    <Button size="sm">
+        <X stroke-width="1.5" />
+    </Button>
+</template>
+
+<style scoped>
+/* Win: top right, ghost */
+button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 2rem;
+    width: 2rem;
+    border: none;
+    background-color: transparent;
+    color: var(--color-muted-foreground);
+    transition-property: background-color;
+    box-shadow: none;
+}
+
+button:hover {
+    background-color: var(--color-gray-200) !important;
+}
+
+button:active {
+    background-color: var(--color-neutral-300) !important;
+}
+
+.dark {
+    button:hover {
+        background-color: var(--color-neutral-900) !important;
+    }
+
+    button:active {
+        background-color: var(--color-neutral-950) !important;
+    }
+}
+
+/* Mac: top left, round bordered */
+.is-mac {
+    button {
+        top: -0.75rem;
+        left: -0.75rem;
+        width: 1.5rem;
+        height: unset;
+        aspect-ratio: 1/1 !important;
+        border-radius: 100%;
+        border: 1px solid var(--color-border);
+        background-color: var(--color-muted);
+        box-shadow: var(--shadow-md);
+
+        svg {
+            width: var(--text-sm);
+            stroke-width: 2px;
+        }
+    }
+
+}
+
+.dark .is-mac {
+    button {
+        background-color: var(--color-neutral-800);
+    }
+}
+
+/* Linux: inline, round borderless */
+.is-linux {
+    button {
+        position: unset;
+        background-color: var(--color-neutral-700);
+        border-radius: 100%;
+        height: 1.563rem;
+        width: 1.563rem;
+    }
+}
+</style>