Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Janus C. H. Knudsen 2026-01-11 18:18:36 +01:00
parent abcf8ee75e
commit 12869e35bf
34 changed files with 1177 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

54
PlanTempus.Application/wwwroot/css/drawers.css
View file

@ -5,8 +5,36 @@
*/
/* ===========================================
BASE DRAWER
BASE DRAWER (Generic)
=========================================== */
[data-drawer] {
position: fixed;
top: 0;
right: 0;
width: var(--drawer-width, 320px);
height: 100vh;
background: var(--color-surface);
border-left: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
z-index: var(--z-drawer);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform var(--transition-normal);
}
[data-drawer].active,
[data-drawer].open {
transform: translateX(0);
}
/* Drawer width variants */
[data-drawer="sm"] { --drawer-width: 280px; }
[data-drawer="md"] { --drawer-width: 360px; }
[data-drawer="lg"] { --drawer-width: 420px; }
[data-drawer="xl"] { --drawer-width: 480px; }
/* Legacy support for existing drawers */
swp-profile-drawer,
swp-notification-drawer,
swp-todo-drawer {
@ -38,17 +66,26 @@ swp-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-4) var(--spacing-5);
padding: var(--spacing-10) var(--spacing-12);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
swp-drawer-title {
display: flex;
align-items: center;
gap: var(--spacing-2);
font-size: var(--font-size-lg);
font-weight: 600;
font-weight: var(--font-weight-semibold);
color: var(--color-text);
}
swp-drawer-title swp-count {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}
swp-drawer-close {
width: 32px;
height: 32px;
@ -56,8 +93,8 @@ swp-drawer-close {
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: var(--border-radius);
background: var(--color-background-alt);
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-secondary);
transition: all var(--transition-fast);
@ -73,12 +110,13 @@ swp-drawer-close i {
}
/* ===========================================
DRAWER CONTENT
DRAWER CONTENT / BODY
=========================================== */
swp-drawer-content {
swp-drawer-content,
swp-drawer-body {
flex: 1;
overflow-y: auto;
padding: var(--spacing-5);
padding: var(--spacing-8);
}
swp-drawer-divider {