ui

2025-12-20 15:53:19 +01:00
parent 769462c439
commit e9807a60d5
11 changed files with 1023 additions and 0 deletions
--- a/design/components_tables_alerts.css
+++ b/design/components_tables_alerts.css
@ -0,0 +1,126 @@
+/*
+ wlkns-dev-standards
+ UI Components – Tables, Lists, Alerts & Toasts
+ Version: v1.0
+
+ Zweck:
+ Erweiterung der Component-Bibliothek für typische Admin-UIs.
+ Fokus: Tabellen, Listen, Alerts, Toasts.
+*/
+
+/* =========================
+   Tables
+   ========================= */
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+}
+
+thead {
+  background: var(--color-bg);
+}
+
+thead th {
+  text-align: left;
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text-muted);
+  font-weight: 500;
+}
+
+tbody td {
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--color-border);
+}
+
+tbody tr:hover {
+  background: var(--color-bg);
+}
+
+/* =========================
+   Lists
+   ========================= */
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.list-item {
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+}
+
+.list-item-title {
+  font-weight: 500;
+}
+
+.list-item-meta {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+
+/* =========================
+   Alerts
+   ========================= */
+
+.alert {
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+  border: 1px solid transparent;
+}
+
+.alert.success {
+  background: rgba(22, 163, 74, 0.1);
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+
+.alert.warning {
+  background: rgba(217, 119, 6, 0.1);
+  border-color: var(--color-warning);
+  color: var(--color-warning);
+}
+
+.alert.error {
+  background: rgba(220, 38, 38, 0.1);
+  border-color: var(--color-error);
+  color: var(--color-error);
+}
+
+/* =========================
+   Toasts
+   ========================= */
+
+.toast {
+  position: fixed;
+  bottom: var(--space-5);
+  right: var(--space-5);
+  min-width: 260px;
+
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+}
+
+.toast.success {
+  border-left: 4px solid var(--color-success);
+}
+
+.toast.warning {
+  border-left: 4px solid var(--color-warning);
+}
+
+.toast.error {
+  border-left: 4px solid var(--color-error);
+}