Refactors calendar project structure and build configuration
Consolidates V2 codebase into main project directory Updates build script to support simplified entry points Removes redundant files and cleans up project organization Simplifies module imports and entry points for calendar application
This commit is contained in:
Janus C. H. Knudsen
parent
9f360237cf
commit
863b433eba
200 changed files with 2331 additions and 16193 deletions
|
|
@ -1,248 +0,0 @@
|
|||
/* styles/base.css */
|
||||
|
||||
/* CSS Reset and Base */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* CSS Variables */
|
||||
:root {
|
||||
/* Grid measurements */
|
||||
--hour-height: 60px;
|
||||
--minute-height: 1px;
|
||||
--snap-interval: 15;
|
||||
--day-column-min-width: 250px;
|
||||
--week-days: 7;
|
||||
--header-height: 80px;
|
||||
--all-day-row-height: 0px; /* Default height for all-day events row */
|
||||
--all-day-event-height: 26px; /* Height of single all-day event including gaps */
|
||||
--single-row-height: 28px; /* Height of single row in all-day container - synced with TypeScript */
|
||||
--stack-levels: 1; /* Number of stack levels for all-day events */
|
||||
|
||||
/* Time boundaries - Default fallback values */
|
||||
--day-start-hour: 0;
|
||||
--day-end-hour: 24;
|
||||
--work-start-hour: 8;
|
||||
--work-end-hour: 17;
|
||||
|
||||
/* Colors */
|
||||
--color-primary: #2196f3;
|
||||
--color-secondary: #ff9800;
|
||||
--color-success: #4caf50;
|
||||
--color-danger: #f44336;
|
||||
--color-warning: #ff9800;
|
||||
|
||||
/* Grid colors */
|
||||
--color-grid-line: #e0e0e0;
|
||||
--color-grid-line-light: rgba(0, 0, 0, 0.05);
|
||||
--color-hour-line: rgba(0, 0, 0, 0.2);
|
||||
--color-work-hours: rgba(255, 255, 255, 0.9);
|
||||
--color-current-time: #ff0000;
|
||||
|
||||
/* Named color palette for events */
|
||||
--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;
|
||||
|
||||
/* Base mix for color-mix() function */
|
||||
--b-mix: #fff;
|
||||
|
||||
/* UI colors */
|
||||
--color-background: #ffffff;
|
||||
--color-surface: #f5f5f5;
|
||||
--color-event-grid: #ffffff;
|
||||
--color-non-work-hours: #ff980038;
|
||||
--color-text: #333333;
|
||||
--color-text-secondary: #666666;
|
||||
--color-border: #e0e0e0;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
--shadow-popup: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-normal: 300ms ease;
|
||||
--transition-slow: 500ms ease;
|
||||
|
||||
/* Z-index layers */
|
||||
--z-grid: 1;
|
||||
--z-event: 10;
|
||||
--z-event-hover: 20;
|
||||
--z-drag-ghost: 30;
|
||||
--z-current-time: 40;
|
||||
--z-popup: 100;
|
||||
--z-loading: 200;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-surface);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Custom elements default display */
|
||||
swp-calendar,
|
||||
swp-calendar-nav,
|
||||
swp-calendar-container,
|
||||
swp-calendar-grid,
|
||||
swp-header-cell,
|
||||
swp-time-cell,
|
||||
swp-day-cell,
|
||||
swp-events-container,
|
||||
swp-day-columns swp-event,
|
||||
swp-loading-overlay,
|
||||
swp-nav-group,
|
||||
swp-nav-button,
|
||||
swp-search-container,
|
||||
swp-search-icon,
|
||||
swp-search-clear,
|
||||
swp-view-selector,
|
||||
swp-view-button,
|
||||
swp-week-info,
|
||||
swp-week-number,
|
||||
swp-date-range,
|
||||
swp-day-name,
|
||||
swp-day-date,
|
||||
swp-event-time,
|
||||
swp-day-columns swp-event-title,
|
||||
swp-spinner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #bbb;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #999;
|
||||
}
|
||||
|
||||
/* Selection styling */
|
||||
::selection {
|
||||
background-color: rgba(33, 150, 243, 0.2);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Prevent text selection in calendar UI */
|
||||
swp-calendar-container,
|
||||
swp-calendar-grid,
|
||||
swp-day-column,
|
||||
swp-day-columns swp-event,
|
||||
swp-day-columns swp-event-group,
|
||||
swp-time-axis,
|
||||
swp-day-columns swp-event-title,
|
||||
swp-day-columns swp-event-time {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
/* Enable text selection for events when double-clicked */
|
||||
swp-day-columns swp-event.text-selectable swp-day-columns swp-event-title,
|
||||
swp-day-columns swp-event.text-selectable swp-day-columns swp-event-time {
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.transparent {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,236 +0,0 @@
|
|||
/* styles/components/navigation.css */
|
||||
|
||||
/* Navigation groups */
|
||||
swp-nav-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Navigation buttons */
|
||||
swp-nav-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all var(--transition-fast);
|
||||
min-width: 40px;
|
||||
height: 36px;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/* Icon buttons */
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
/* Today button */
|
||||
&[data-action="today"] {
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
/* View selector */
|
||||
swp-view-selector {
|
||||
display: flex;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
swp-view-button {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&[data-active="true"] {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
/* Workweek Presets */
|
||||
swp-workweek-presets {
|
||||
display: flex;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
swp-preset-button {
|
||||
padding: 6px 12px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
|
||||
&[data-active="true"] {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Search container */
|
||||
swp-search-container {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
swp-search-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
padding: 8px 36px 8px 36px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 20px;
|
||||
background: var(--color-surface);
|
||||
font-size: 0.875rem;
|
||||
width: 250px;
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-background);
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
swp-search-clear {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
stroke: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
&[hidden] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Visual indication when filter is active */
|
||||
swp-search-container.filter-active input {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(33, 150, 243, 0.05);
|
||||
}
|
||||
|
||||
/* Calendar search active state */
|
||||
swp-calendar[data-searching="true"] {
|
||||
swp-event {
|
||||
opacity: 0.15;
|
||||
transition: opacity var(--transition-normal);
|
||||
|
||||
&[data-search-match="true"] {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Week info display */
|
||||
swp-week-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
swp-week-number {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-date-range {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
|
@ -1,338 +0,0 @@
|
|||
/* styles/components/events.css */
|
||||
|
||||
/* Event base styles */
|
||||
swp-day-columns swp-event {
|
||||
--b-text: var(--color-text);
|
||||
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: background-color 200ms ease, box-shadow 150ms ease, transform 150ms ease;
|
||||
z-index: 10;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
font-size: 12px;
|
||||
padding: 4px 6px;
|
||||
|
||||
/* Color system using color-mix() */
|
||||
background-color: color-mix(in srgb, var(--b-primary) 10%, var(--b-mix));
|
||||
color: var(--b-text);
|
||||
border-left: 4px solid var(--b-primary);
|
||||
|
||||
/* Enable container queries for responsive layout */
|
||||
container-type: size;
|
||||
container-name: event;
|
||||
|
||||
/* CSS Grid layout for time, title, and description */
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 2px 4px;
|
||||
align-items: start;
|
||||
|
||||
/* Dragging state */
|
||||
&.dragging {
|
||||
position: absolute;
|
||||
z-index: 999999;
|
||||
opacity: 0.8;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Hover state */
|
||||
&:hover {
|
||||
background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
|
||||
}
|
||||
}
|
||||
|
||||
swp-day-columns swp-event:hover {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
/* Resize handle - actual draggable element */
|
||||
swp-resize-handle {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 15px;
|
||||
cursor: ns-resize;
|
||||
z-index: 25;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
|
||||
/* Show handle on hover */
|
||||
swp-day-columns swp-event:hover swp-resize-handle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Handle visual indicator (grip lines) */
|
||||
swp-resize-handle::before {
|
||||
content: '';
|
||||
width: 30px;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 2px;
|
||||
box-shadow:
|
||||
0 -2px 0 rgba(255, 255, 255, 0.9),
|
||||
0 2px 0 rgba(255, 255, 255, 0.9),
|
||||
0 0 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Global resizing state */
|
||||
.swp--resizing {
|
||||
user-select: none !important;
|
||||
cursor: ns-resize !important;
|
||||
}
|
||||
|
||||
.swp--resizing * {
|
||||
cursor: ns-resize !important;
|
||||
}
|
||||
|
||||
swp-day-columns swp-event-time {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
swp-day-columns swp-event-title {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
swp-day-columns swp-event-description {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.8;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
|
||||
/* Ensure description fills available height for gradient effect */
|
||||
min-height: 100%;
|
||||
align-self: stretch;
|
||||
|
||||
/* Fade-out effect for long descriptions */
|
||||
-webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
|
||||
}
|
||||
|
||||
/* Container queries for height-based layout */
|
||||
|
||||
/* Hide description when event is too short (< 60px) */
|
||||
@container event (height < 30px) {
|
||||
swp-day-columns swp-event-description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Full description for tall events (>= 100px) */
|
||||
@container event (height >= 100px) {
|
||||
swp-day-columns swp-event-description {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Multi-day events */
|
||||
swp-multi-day-event {
|
||||
position: relative;
|
||||
height: 28px;
|
||||
margin: 2px 4px;
|
||||
padding: 0 8px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
/* Color system using color-mix() */
|
||||
--b-text: var(--color-text);
|
||||
background-color: color-mix(in srgb, var(--b-primary) 10%, var(--b-mix));
|
||||
color: var(--b-text);
|
||||
border-left: 4px solid var(--b-primary);
|
||||
|
||||
&:hover {
|
||||
background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
|
||||
}
|
||||
|
||||
/* Continuation indicators */
|
||||
&[data-continues-before="true"] {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
margin-left: 0;
|
||||
padding-left: 20px;
|
||||
|
||||
&::before {
|
||||
content: '◀';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
opacity: 0.6;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-continues-after="true"] {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-right: 0;
|
||||
padding-right: 20px;
|
||||
|
||||
&::after {
|
||||
content: '▶';
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
opacity: 0.6;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
/* All-day events */
|
||||
swp-allday-event {
|
||||
--b-text: var(--color-text);
|
||||
background-color: color-mix(in srgb, var(--b-primary) 10%, var(--b-mix));
|
||||
color: var(--b-text);
|
||||
border-left: 4px solid var(--b-primary);
|
||||
cursor: pointer;
|
||||
transition: background-color 200ms ease;
|
||||
|
||||
&:hover {
|
||||
background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Event creation preview */
|
||||
swp-event-preview {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
background: rgba(33, 150, 243, 0.1);
|
||||
border: 2px dashed var(--color-primary);
|
||||
border-radius: 4px;
|
||||
|
||||
/* Position via CSS variables */
|
||||
top: calc(var(--preview-start) * var(--minute-height));
|
||||
height: calc(var(--preview-duration) * var(--minute-height));
|
||||
}
|
||||
|
||||
/* Event filtering styles */
|
||||
/* When filter is active, all events are dimmed by default */
|
||||
swp-events-layer[data-filter-active="true"] swp-event {
|
||||
opacity: 0.2;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
|
||||
/* Events that match the filter stay normal */
|
||||
swp-events-layer[data-filter-active="true"] swp-event[data-matches="true"] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Event overlap styling */
|
||||
/* Event group container for column sharing */
|
||||
swp-event-group {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Grid column configurations */
|
||||
swp-event-group.cols-2 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
swp-event-group.cols-3 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
swp-event-group.cols-4 {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
/* Stack levels using margin-left */
|
||||
swp-event-group.stack-level-0 {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
swp-event-group.stack-level-1 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
swp-event-group.stack-level-2 {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
swp-event-group.stack-level-3 {
|
||||
margin-left: 45px;
|
||||
}
|
||||
|
||||
swp-event-group.stack-level-4 {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
/* Shadow for stacked events (level 1+) */
|
||||
swp-event[data-stack-link]:not([data-stack-link*='"stackLevel":0']),
|
||||
swp-event-group[data-stack-link]:not([data-stack-link*='"stackLevel":0']) swp-event {
|
||||
box-shadow:
|
||||
0 -1px 2px rgba(0, 0, 0, 0.1),
|
||||
0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Child events within grid */
|
||||
swp-event-group swp-event {
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* All-day event transition for smooth repositioning */
|
||||
swp-allday-container swp-event.transitioning {
|
||||
transition: grid-area 200ms ease-out, grid-row 200ms ease-out, grid-column 200ms ease-out;
|
||||
}
|
||||
|
||||
/* Color utility classes */
|
||||
.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); }
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,315 +0,0 @@
|
|||
/* Calendar Month View Styles */
|
||||
|
||||
/* Month view specific container - extends swp-calendar-container for month layout */
|
||||
swp-calendar[data-view="month"] swp-calendar-container {
|
||||
overflow: hidden;
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
/* Month grid layout with week numbers column */
|
||||
.month-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 40px repeat(7, 1fr); /* Week numbers + 7 days */
|
||||
grid-template-rows: 40px repeat(6, 1fr);
|
||||
min-height: 600px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Week number header cell */
|
||||
.month-week-header {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
background: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* Month day headers - only day names, right aligned */
|
||||
.month-day-header {
|
||||
background: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 12px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.875rem;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.month-day-header:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Week number cells */
|
||||
.month-week-number {
|
||||
grid-column: 1;
|
||||
background: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Month day cells */
|
||||
.month-day-cell {
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: 8px;
|
||||
background: var(--color-background);
|
||||
transition: background-color var(--transition-fast);
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.month-day-cell:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.month-day-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Other month dates (previous/next month) */
|
||||
.month-day-cell.other-month {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Today highlighting - subtle with left border */
|
||||
.month-day-cell.today {
|
||||
background: #f0f8ff;
|
||||
border-left: 3px solid var(--color-primary);
|
||||
}
|
||||
|
||||
/* Weekend styling */
|
||||
.month-day-cell.weekend {
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
/* Day number in each cell */
|
||||
.month-day-number {
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.month-day-cell.today .month-day-number {
|
||||
color: var(--color-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Events container within each day */
|
||||
.month-events {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
max-height: 70px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Individual month events - compact version */
|
||||
.month-event {
|
||||
background: #e3f2fd;
|
||||
color: var(--color-primary);
|
||||
padding: 1px 4px;
|
||||
border-radius: 2px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
border-left: 2px solid var(--color-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.month-event:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Event categories using existing color scheme */
|
||||
.month-event.category-meeting {
|
||||
background: #e8f5e8;
|
||||
color: var(--color-success);
|
||||
border-left-color: var(--color-success);
|
||||
}
|
||||
|
||||
.month-event.category-deadline {
|
||||
background: #ffebee;
|
||||
color: var(--color-error);
|
||||
border-left-color: var(--color-error);
|
||||
}
|
||||
|
||||
.month-event.category-work {
|
||||
background: #fff8e1;
|
||||
color: var(--color-secondary);
|
||||
border-left-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.month-event.category-personal {
|
||||
background: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
border-left-color: #9c27b0;
|
||||
}
|
||||
|
||||
/* "More events" indicator */
|
||||
.month-event-more {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-secondary);
|
||||
padding: 1px 4px;
|
||||
border-radius: 2px;
|
||||
font-size: 9px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border: 1px dashed var(--color-border);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.month-event-more:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
/* Expanded month view - duration-based events */
|
||||
.month-grid.expanded {
|
||||
min-height: 800px;
|
||||
}
|
||||
|
||||
.month-grid.expanded .month-day-cell {
|
||||
min-height: 120px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.month-grid.expanded .month-events {
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.month-grid.expanded .month-event {
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
min-height: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
white-space: normal;
|
||||
text-overflow: clip;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Duration-based event sizing (30px per hour) */
|
||||
.month-event.duration-30min { min-height: 15px; }
|
||||
.month-event.duration-1h { min-height: 30px; }
|
||||
.month-event.duration-1h30 { min-height: 45px; }
|
||||
.month-event.duration-2h { min-height: 60px; }
|
||||
.month-event.duration-3h { min-height: 90px; }
|
||||
.month-event.duration-4h { min-height: 120px; }
|
||||
|
||||
/* Event time display for expanded view */
|
||||
.month-event-time {
|
||||
font-size: 9px;
|
||||
opacity: 0.8;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.month-event-title {
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.month-event-subtitle {
|
||||
font-size: 9px;
|
||||
opacity: 0.7;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* All-day events */
|
||||
.month-event.all-day {
|
||||
background: linear-gradient(90deg, var(--color-primary), rgba(33, 150, 243, 0.7));
|
||||
color: white;
|
||||
border-left-color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.month-grid {
|
||||
grid-template-columns: 30px repeat(7, 1fr);
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.month-day-cell {
|
||||
min-height: 60px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.month-day-header {
|
||||
padding: 8px 4px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.month-event {
|
||||
font-size: 9px;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
|
||||
.month-events {
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
.month-week-number {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading state for month view */
|
||||
swp-calendar[data-view="month"][data-loading="true"] .month-grid {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Month view navigation animation support */
|
||||
.month-grid {
|
||||
transition: transform var(--transition-normal);
|
||||
}
|
||||
|
||||
.month-grid.sliding-out-left {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.month-grid.sliding-out-right {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.month-grid.sliding-in-left {
|
||||
transform: translateX(-100%);
|
||||
animation: slideInFromLeft var(--transition-normal) forwards;
|
||||
}
|
||||
|
||||
.month-grid.sliding-in-right {
|
||||
transform: translateX(100%);
|
||||
animation: slideInFromRight var(--transition-normal) forwards;
|
||||
}
|
||||
|
||||
@keyframes slideInFromLeft {
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
|
|
@ -1,193 +0,0 @@
|
|||
/* styles/components/popup.css */
|
||||
|
||||
/* Event popup */
|
||||
swp-event-popup {
|
||||
position: fixed;
|
||||
background: #f9f5f0;
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow-popup);
|
||||
padding: 16px;
|
||||
min-width: 300px;
|
||||
z-index: var(--z-popup);
|
||||
animation: fadeIn var(--transition-fast);
|
||||
|
||||
/* Chevron arrow */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: inherit;
|
||||
transform: rotate(45deg);
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
/* Right-side popup (arrow on left) */
|
||||
&[data-align="right"] {
|
||||
&::before {
|
||||
left: -8px;
|
||||
box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Left-side popup (arrow on right) */
|
||||
&[data-align="left"] {
|
||||
&::before {
|
||||
right: -8px;
|
||||
box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&[hidden] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Popup header */
|
||||
swp-popup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
swp-popup-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
line-height: 1.4;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Popup actions */
|
||||
swp-popup-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
swp-action-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* Specific button styles */
|
||||
&[data-action="delete"]:hover {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
&[data-action="close"]:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Popup content */
|
||||
swp-popup-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
swp-time-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.875rem;
|
||||
|
||||
swp-icon {
|
||||
font-size: 1.25rem;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading overlay */
|
||||
swp-loading-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
swp-loading-overlay[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
swp-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Snap indicator */
|
||||
swp-snap-indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-fast);
|
||||
z-index: var(--z-drag-ghost);
|
||||
|
||||
&[data-active="true"] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: attr(data-time);
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: -24px;
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
swp-event-popup {
|
||||
min-width: 250px;
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
swp-popup-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
/* POC-style Calendar Sliding Animation CSS */
|
||||
|
||||
/* Grid container base styles */
|
||||
swp-grid-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0); /* GPU acceleration */
|
||||
}
|
||||
|
||||
/* Calendar container for sliding */
|
||||
swp-calendar-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Accessibility: Respect reduced motion preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
swp-grid-container {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,321 +0,0 @@
|
|||
:root {
|
||||
--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;
|
||||
--color-border: #e0e0e0;
|
||||
--color-surface: #fff;
|
||||
--color-text-secondary: #666;
|
||||
--color-primary: #1976d2;
|
||||
--color-hour-line: rgba(0, 0, 0, 0.2);
|
||||
--color-grid-line-light: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.calendar-wrapper {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
swp-calendar {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: 100%;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
swp-calendar-nav {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
swp-nav-button {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
background: var(--color-surface);
|
||||
|
||||
&:hover { background: #f0f0f0; }
|
||||
}
|
||||
|
||||
swp-week-info {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
|
||||
swp-week-number {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
}
|
||||
|
||||
swp-date-range {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Container */
|
||||
swp-calendar-container {
|
||||
display: grid;
|
||||
grid-template-columns: var(--time-axis-width) 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Time axis */
|
||||
swp-time-axis {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / 3;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
border-right: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
swp-header-spacer {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-header-drawer {
|
||||
display: block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-time-axis-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
swp-hour-marker {
|
||||
height: var(--hour-height);
|
||||
padding: 4px 8px;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-secondary);
|
||||
text-align: right;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
background: var(--color-hour-line);
|
||||
}
|
||||
|
||||
&:first-child::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Grid container */
|
||||
swp-grid-container {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
display: grid;
|
||||
grid-template-rows: subgrid;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Viewport/Track for slide animation */
|
||||
swp-header-viewport {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
swp-content-viewport {
|
||||
overflow: hidden;
|
||||
min-height: 0; /* Tillader at krympe i grid */
|
||||
}
|
||||
|
||||
swp-header-track {
|
||||
display: flex;
|
||||
|
||||
> swp-calendar-header { flex: 0 0 100%; }
|
||||
}
|
||||
|
||||
swp-content-track {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
> swp-scrollable-content {
|
||||
flex: 0 0 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Header */
|
||||
swp-calendar-header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--grid-columns), minmax(var(--day-column-min-width), 1fr));
|
||||
min-width: calc(var(--grid-columns) * var(--day-column-min-width));
|
||||
grid-auto-rows: auto;
|
||||
background: var(--color-surface);
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
&::-webkit-scrollbar { background: transparent; }
|
||||
&::-webkit-scrollbar-thumb { background: transparent; }
|
||||
|
||||
&[data-levels="date"] > swp-day-header { grid-row: 1; }
|
||||
|
||||
&[data-levels="resource date"] {
|
||||
> swp-resource-header { grid-row: 1; }
|
||||
> swp-day-header { grid-row: 2; }
|
||||
}
|
||||
|
||||
&[data-levels="team resource date"] {
|
||||
> swp-team-header { grid-row: 1; }
|
||||
> swp-resource-header { grid-row: 2; }
|
||||
> swp-day-header { grid-row: 3; }
|
||||
}
|
||||
}
|
||||
|
||||
swp-day-header,
|
||||
swp-resource-header,
|
||||
swp-team-header {
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-team-header {
|
||||
background: #e3f2fd;
|
||||
color: #1565c0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
swp-resource-header {
|
||||
background: #fafafa;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
swp-day-header {
|
||||
swp-day-name {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
swp-day-date {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scrollable content */
|
||||
swp-scrollable-content {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
swp-time-grid {
|
||||
display: block;
|
||||
position: relative;
|
||||
min-height: calc((var(--day-end-hour) - var(--day-start-hour)) * var(--hour-height));
|
||||
min-width: calc(var(--grid-columns) * var(--day-column-min-width));
|
||||
|
||||
/* Timelinjer */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
background-image: repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
transparent calc(var(--hour-height) - 1px),
|
||||
var(--color-hour-line) calc(var(--hour-height) - 1px),
|
||||
var(--color-hour-line) var(--hour-height)
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Kvarterlinjer - 3 linjer per time (15, 30, 45 min), ikke ved timegrænsen */
|
||||
swp-grid-lines {
|
||||
display: block;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background-image: repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent 0,
|
||||
transparent calc(var(--hour-height) / 4 - 1px),
|
||||
var(--color-grid-line-light) calc(var(--hour-height) / 4 - 1px),
|
||||
var(--color-grid-line-light) calc(var(--hour-height) / 4),
|
||||
transparent calc(var(--hour-height) / 4),
|
||||
transparent calc(var(--hour-height) / 2 - 1px),
|
||||
var(--color-grid-line-light) calc(var(--hour-height) / 2 - 1px),
|
||||
var(--color-grid-line-light) calc(var(--hour-height) / 2),
|
||||
transparent calc(var(--hour-height) / 2),
|
||||
transparent calc(var(--hour-height) * 3 / 4 - 1px),
|
||||
var(--color-grid-line-light) calc(var(--hour-height) * 3 / 4 - 1px),
|
||||
var(--color-grid-line-light) calc(var(--hour-height) * 3 / 4),
|
||||
transparent calc(var(--hour-height) * 3 / 4),
|
||||
transparent var(--hour-height)
|
||||
);
|
||||
}
|
||||
|
||||
swp-day-columns {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--grid-columns), minmax(var(--day-column-min-width), 1fr));
|
||||
min-width: calc(var(--grid-columns) * var(--day-column-min-width));
|
||||
}
|
||||
|
||||
swp-day-column {
|
||||
position: relative;
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-events-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
/* Events */
|
||||
swp-event {
|
||||
position: absolute;
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
swp-event-time {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
swp-event-title {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
6
wwwroot/css/calendar.css
Normal file
6
wwwroot/css/calendar.css
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/* Calendar - Entry point */
|
||||
/* Modular CSS architecture: one file per feature */
|
||||
|
||||
@import 'calendar-base.css';
|
||||
@import 'calendar-layout.css';
|
||||
@import 'calendar-events.css';
|
||||
|
|
@ -1 +0,0 @@
|
|||
.test-container{display:flex;padding:20px}.test-container .test-child{color:blue}:is(.test-container .test-child):hover{color:red}.active:is(.test-container .test-child){font-weight:700}.test-container .test-nested{margin:10px}:is(.test-container .test-nested) .deep-nested{font-size:14px}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/* V2 Calendar - Entry point */
|
||||
/* Modular CSS architecture: one file per feature */
|
||||
|
||||
@import 'calendar-v2-base.css';
|
||||
@import 'calendar-v2-layout.css';
|
||||
@import 'calendar-v2-events.css';
|
||||
Loading…
Add table
Add a link
Reference in a new issue