127 lines
2.3 KiB
CSS
127 lines
2.3 KiB
CSS
/*
|
||
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);
|
||
}
|