abcf8ee75e
Introduces reusable view components for bookings and notifications Implements dynamic rendering of booking items and lists Adds corresponding CSS styles for new dashboard components Enhances dashboard user interface with interactive elements
314 lines
9 KiB
CSS
314 lines
9 KiB
CSS
/**
|
|
* SWP Design System - Unified Design Tokens
|
|
*
|
|
* Konsolideret fra Calendar POC og PlanTempus Application
|
|
* Brug disse tokens konsistent på tværs af alle projekter.
|
|
*/
|
|
|
|
/* ===========================================
|
|
COLOR PALETTE - Light Mode (Default)
|
|
=========================================== */
|
|
:root {
|
|
/* -------- Surfaces & Backgrounds -------- */
|
|
--color-surface: #fff;
|
|
--color-background: #f5f5f5;
|
|
--color-background-hover: #f0f0f0;
|
|
--color-background-alt: #fafafa;
|
|
|
|
/* -------- Borders -------- */
|
|
--color-border: #e0e0e0;
|
|
--color-border-light: #f0f0f0;
|
|
|
|
/* -------- Text -------- */
|
|
--color-text: #333;
|
|
--color-text-secondary: #666;
|
|
--color-text-muted: #999;
|
|
|
|
/* -------- Primary Brand -------- */
|
|
--color-primary: #1976d2;
|
|
--color-teal: #00897b;
|
|
--color-teal-light: color-mix(in srgb, var(--color-teal) 10%, transparent);
|
|
|
|
/* -------- Semantic / Status -------- */
|
|
--color-blue: #1976d2;
|
|
--color-green: #43a047;
|
|
--color-amber: #f59e0b;
|
|
--color-red: #e53935;
|
|
--color-purple: #8b5cf6;
|
|
|
|
/* -------- Team/Resource -------- */
|
|
--color-team-bg: #e3f2fd;
|
|
--color-team-text: #1565c0;
|
|
|
|
/* -------- Grid Lines -------- */
|
|
--color-hour-line: rgba(0, 0, 0, 0.2);
|
|
--color-grid-line-light: rgba(0, 0, 0, 0.05);
|
|
--color-unavailable: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
/* ===========================================
|
|
COLOR PALETTE - Dark Mode (System)
|
|
=========================================== */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not(.light-mode) {
|
|
--color-surface: #1e1e1e;
|
|
--color-background: #121212;
|
|
--color-background-hover: #2a2a2a;
|
|
--color-background-alt: #1a1a1a;
|
|
|
|
--color-border: #333;
|
|
--color-border-light: #2a2a2a;
|
|
|
|
--color-text: #e0e0e0;
|
|
--color-text-secondary: #999;
|
|
--color-text-muted: #666;
|
|
|
|
--color-teal: #26a69a;
|
|
--color-blue: #42a5f5;
|
|
--color-green: #66bb6a;
|
|
--color-amber: #ffb74d;
|
|
--color-red: #ef5350;
|
|
--color-purple: #a78bfa;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
COLOR PALETTE - Dark Mode (Manual Toggle)
|
|
=========================================== */
|
|
:root.dark-mode {
|
|
--color-surface: #1e1e1e;
|
|
--color-background: #121212;
|
|
--color-background-hover: #2a2a2a;
|
|
--color-background-alt: #1a1a1a;
|
|
|
|
--color-border: #333;
|
|
--color-border-light: #2a2a2a;
|
|
|
|
--color-text: #e0e0e0;
|
|
--color-text-secondary: #999;
|
|
--color-text-muted: #666;
|
|
|
|
--color-teal: #26a69a;
|
|
--color-blue: #42a5f5;
|
|
--color-green: #66bb6a;
|
|
--color-amber: #ffb74d;
|
|
--color-red: #ef5350;
|
|
--color-purple: #a78bfa;
|
|
}
|
|
|
|
/* ===========================================
|
|
EVENT COLOR PALETTE (18 Colors)
|
|
=========================================== */
|
|
:root {
|
|
--b-color-red: #e53935;
|
|
--b-color-pink: #d81b60;
|
|
--b-color-magenta: #c200c2;
|
|
--b-color-purple: #8e24aa;
|
|
--b-color-violet: #5e35b1;
|
|
--b-color-deep-purple: #4527a0;
|
|
--b-color-indigo: #3949ab;
|
|
--b-color-blue: #1e88e5;
|
|
--b-color-light-blue: #03a9f4;
|
|
--b-color-cyan: #3bc9db;
|
|
--b-color-teal: #00897b;
|
|
--b-color-green: #43a047;
|
|
--b-color-light-green: #8bc34a;
|
|
--b-color-lime: #c0ca33;
|
|
--b-color-yellow: #fdd835;
|
|
--b-color-amber: #ffb300;
|
|
--b-color-orange: #fb8c00;
|
|
--b-color-deep-orange: #f4511e;
|
|
|
|
/* For color-mix calculations */
|
|
--b-mix: #fff;
|
|
}
|
|
|
|
/* ===========================================
|
|
TYPOGRAPHY
|
|
=========================================== */
|
|
:root {
|
|
/* -------- Font Families -------- */
|
|
--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
|
|
/* -------- Font Sizes -------- */
|
|
--font-size-xs: 11px;
|
|
--font-size-sm: 12px;
|
|
--font-size-md: 13px;
|
|
--font-size-base: 14px;
|
|
--font-size-lg: 16px;
|
|
--font-size-xl: 18px;
|
|
--font-size-2xl: 20px;
|
|
--font-size-3xl: 22px;
|
|
|
|
/* -------- Font Weights -------- */
|
|
--font-weight-light: 300;
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
/* -------- Line Heights -------- */
|
|
--line-height-tight: 1.25;
|
|
--line-height-snug: 1.3;
|
|
--line-height-normal: 1.5;
|
|
--line-height-relaxed: 1.6;
|
|
}
|
|
|
|
/* ===========================================
|
|
SPACING
|
|
=========================================== */
|
|
:root {
|
|
--spacing-0: 0;
|
|
--spacing-1: 2px;
|
|
--spacing-2: 4px;
|
|
--spacing-3: 6px;
|
|
--spacing-4: 8px;
|
|
--spacing-5: 10px;
|
|
--spacing-6: 12px;
|
|
--spacing-7: 14px;
|
|
--spacing-8: 16px;
|
|
--spacing-10: 20px;
|
|
--spacing-12: 24px;
|
|
--spacing-16: 32px;
|
|
--spacing-24: 48px;
|
|
}
|
|
|
|
/* ===========================================
|
|
LAYOUT
|
|
=========================================== */
|
|
:root {
|
|
/* -------- Sidebars & Navigation -------- */
|
|
--side-menu-width: 240px;
|
|
--side-menu-width-collapsed: 64px;
|
|
--topbar-height: 56px;
|
|
|
|
/* -------- Content Containers -------- */
|
|
--page-max-width: 1400px;
|
|
--container-max-width-sm: 900px;
|
|
--container-max-width-md: 1200px;
|
|
--container-max-width-lg: 1400px;
|
|
|
|
/* -------- Card Spacing -------- */
|
|
--card-body-padding: var(--spacing-5);
|
|
|
|
/* -------- Calendar Grid -------- */
|
|
--hour-height: 64px;
|
|
--time-axis-width: 60px;
|
|
--grid-columns: 7;
|
|
--day-column-min-width: 200px;
|
|
--day-start-hour: 6;
|
|
--day-end-hour: 18;
|
|
--header-height: 70px;
|
|
}
|
|
|
|
/* ===========================================
|
|
BORDERS & RADIUS
|
|
=========================================== */
|
|
:root {
|
|
/* -------- Border Radius -------- */
|
|
--radius-sm: 3px;
|
|
--radius-md: 4px;
|
|
--radius-lg: 6px;
|
|
--radius-xl: 8px;
|
|
--radius-2xl: 12px;
|
|
--radius-pill: 20px;
|
|
--radius-full: 50%;
|
|
|
|
/* Legacy aliases */
|
|
--border-radius: 6px;
|
|
--border-radius-lg: 8px;
|
|
}
|
|
|
|
/* ===========================================
|
|
SHADOWS
|
|
=========================================== */
|
|
:root {
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
--shadow-xl: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
|
|
/* Specific use-cases */
|
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
--shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
--shadow-drawer: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
--shadow-dragging: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* ===========================================
|
|
TRANSITIONS
|
|
=========================================== */
|
|
:root {
|
|
--transition-fast: 150ms ease;
|
|
--transition-normal: 200ms ease;
|
|
--transition-slow: 300ms ease;
|
|
|
|
/* Specific timing functions */
|
|
--ease-out: ease-out;
|
|
--ease-in-out: ease-in-out;
|
|
--ease-spring: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* ===========================================
|
|
Z-INDEX LAYERS
|
|
=========================================== */
|
|
:root {
|
|
--z-base: 1;
|
|
--z-grid: 2;
|
|
--z-event: 10;
|
|
--z-event-hover: 20;
|
|
--z-resize-handle: 25;
|
|
--z-dropdown: 100;
|
|
--z-sticky: 200;
|
|
--z-overlay: 900;
|
|
--z-drawer: 1000;
|
|
--z-modal: 1100;
|
|
--z-tooltip: 1200;
|
|
--z-dragging: 999999;
|
|
}
|
|
|
|
/* ===========================================
|
|
BREAKPOINTS (as CSS custom properties)
|
|
For reference - use @media queries in CSS
|
|
=========================================== */
|
|
/*
|
|
--breakpoint-sm: 600px;
|
|
--breakpoint-md: 768px;
|
|
--breakpoint-lg: 1024px;
|
|
--breakpoint-xl: 1100px;
|
|
--breakpoint-2xl: 1400px;
|
|
*/
|
|
|
|
/* ===========================================
|
|
UTILITY CLASSES - Event Colors
|
|
=========================================== */
|
|
.is-red { --b-primary: var(--b-color-red); }
|
|
.is-pink { --b-primary: var(--b-color-pink); }
|
|
.is-magenta { --b-primary: var(--b-color-magenta); }
|
|
.is-purple { --b-primary: var(--b-color-purple); }
|
|
.is-violet { --b-primary: var(--b-color-violet); }
|
|
.is-deep-purple { --b-primary: var(--b-color-deep-purple); }
|
|
.is-indigo { --b-primary: var(--b-color-indigo); }
|
|
.is-blue { --b-primary: var(--b-color-blue); }
|
|
.is-light-blue { --b-primary: var(--b-color-light-blue); }
|
|
.is-cyan { --b-primary: var(--b-color-cyan); }
|
|
.is-teal { --b-primary: var(--b-color-teal); }
|
|
.is-green { --b-primary: var(--b-color-green); }
|
|
.is-light-green { --b-primary: var(--b-color-light-green); }
|
|
.is-lime { --b-primary: var(--b-color-lime); }
|
|
.is-yellow { --b-primary: var(--b-color-yellow); }
|
|
.is-amber { --b-primary: var(--b-color-amber); }
|
|
.is-orange { --b-primary: var(--b-color-orange); }
|
|
.is-deep-orange { --b-primary: var(--b-color-deep-orange); }
|
|
|
|
/* ===========================================
|
|
UTILITY CLASSES - Status Badges
|
|
=========================================== */
|
|
.status-confirmed { background: color-mix(in srgb, var(--color-green) 15%, transparent); color: var(--color-green); }
|
|
.status-pending { background: color-mix(in srgb, var(--color-amber) 15%, transparent); color: var(--color-amber); }
|
|
.status-inprogress { background: color-mix(in srgb, var(--color-blue) 15%, transparent); color: var(--color-blue); }
|
|
.status-error { background: color-mix(in srgb, var(--color-red) 15%, transparent); color: var(--color-red); }
|
|
.status-active { background: color-mix(in srgb, var(--color-green) 15%, transparent); color: var(--color-green); }
|
|
.status-inactive { background: var(--color-background); color: var(--color-text-muted); }
|