mirror of
http://172.20.10.11:3000/gitadmin/INSIGHT-MVP.git
synced 2026-06-25 07:36:39 +02:00
ec9f3ea364
- Neue Drawer-Komponente (right-side slide-in, sticky footer, Portal) - ContactFormModal: Modal → Drawer, Tab 1 Allgemein / Tab 2 Details & Adresse - Checkbox "Adresse vom Unternehmen übernehmen" (blendet Adressfelder aus) - Typ-Feld entfernt (Kontakte immer PERSON) - ContactDetailPage: Subtitle "Position @ Unternehmen" im Header - Kontaktdaten-Card: 2 Sub-Spalten, kein Firma-Duplikat, Mobil tel:-Link, LinkedIn-Icon - Neue Card "Notizen & Tags" (Badges + Notizen-Text + Custom Fields) - Aktivitäten-Spalte auf minmax(380px, 40%) verbreitert Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
97 lines
1.9 KiB
CSS
97 lines
1.9 KiB
CSS
/* ============================================================
|
||
Drawer – Right-side slide-in panel
|
||
============================================================ */
|
||
|
||
.overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 1000;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
animation: fadeIn 0.2s ease-out;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
.panel {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
height: 100vh;
|
||
max-width: 100vw;
|
||
background: var(--color-bg-card, #fff);
|
||
box-shadow: -4px 0 32px rgba(0, 0, 0, 0.18);
|
||
display: flex;
|
||
flex-direction: column;
|
||
animation: slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from { transform: translateX(100%); }
|
||
to { transform: translateX(0); }
|
||
}
|
||
|
||
/* ---- Header ---- */
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 1.25rem 1.5rem;
|
||
border-bottom: 1px solid var(--color-border, #e5e7eb);
|
||
flex-shrink: 0;
|
||
background: var(--color-bg-card, #fff);
|
||
}
|
||
|
||
.title {
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
margin: 0;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.closeButton {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
font-size: 1.5rem;
|
||
line-height: 1;
|
||
color: var(--color-text-muted, #9ca3af);
|
||
background: none;
|
||
border: none;
|
||
border-radius: var(--radius-sm, 4px);
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.closeButton:hover {
|
||
background: var(--color-bg, #f3f4f6);
|
||
color: var(--color-text, #111827);
|
||
}
|
||
|
||
/* ---- Body (scrollable) ---- */
|
||
.body {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 1.5rem;
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
/* ---- Footer (sticky) ---- */
|
||
.footer {
|
||
padding: 1rem 1.5rem;
|
||
border-top: 1px solid var(--color-border, #e5e7eb);
|
||
flex-shrink: 0;
|
||
background: var(--color-bg-card, #fff);
|
||
}
|
||
|
||
/* ---- Responsive ---- */
|
||
@media (max-width: 600px) {
|
||
.panel {
|
||
width: 100% !important;
|
||
}
|
||
}
|