405dabeb34
Introduces comprehensive reports feature with interactive sales dashboard Includes dynamic data tables, charts, and filtering capabilities Enhances application with new statistics and reporting functionality
791 lines
16 KiB
CSS
791 lines
16 KiB
CSS
/**
|
|
* Drawers - Slide-in Panels
|
|
*
|
|
* Profile drawer, notifications drawer, etc.
|
|
* Matches calpoc pattern from Calendar/wwwroot/poc-layout.html
|
|
*/
|
|
|
|
/* ===========================================
|
|
DRAWER OVERLAY
|
|
=========================================== */
|
|
swp-drawer-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 200ms ease, visibility 200ms ease;
|
|
z-index: 900;
|
|
}
|
|
|
|
swp-drawer-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* ===========================================
|
|
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: -2px 0 8px rgba(0, 0, 0, 0.1);
|
|
z-index: var(--z-drawer);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform: translateX(100%);
|
|
transition: transform 200ms ease;
|
|
}
|
|
|
|
[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; }
|
|
[data-drawer="xxl"] { --drawer-width: 680px; }
|
|
|
|
/* Legacy support for existing drawers */
|
|
swp-profile-drawer,
|
|
swp-notification-drawer,
|
|
swp-todo-drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
width: 320px;
|
|
height: 100vh;
|
|
background: var(--color-surface);
|
|
border-left: 1px solid var(--color-border);
|
|
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform: translateX(100%);
|
|
transition: transform 200ms ease;
|
|
}
|
|
|
|
swp-profile-drawer.active,
|
|
swp-notification-drawer.active,
|
|
swp-todo-drawer.active {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* ===========================================
|
|
DRAWER HEADER
|
|
=========================================== */
|
|
swp-drawer-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: var(--color-background-alt);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
swp-drawer-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
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;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
swp-drawer-close:hover {
|
|
background: var(--color-background-hover);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-drawer-close i {
|
|
font-size: 20px;
|
|
}
|
|
|
|
swp-drawer-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
/* ===========================================
|
|
DRAWER CONTENT / BODY
|
|
=========================================== */
|
|
swp-drawer-content,
|
|
swp-drawer-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
swp-drawer-divider {
|
|
height: 1px;
|
|
background: var(--color-border);
|
|
margin: var(--spacing-4) 0;
|
|
}
|
|
|
|
/* ===========================================
|
|
PROFILE SECTION (Centered in drawer)
|
|
=========================================== */
|
|
swp-drawer-profile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
swp-drawer-avatar {
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 50%;
|
|
background: var(--color-purple);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
swp-drawer-name {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
swp-drawer-role {
|
|
font-size: 13px;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
swp-drawer-email {
|
|
font-size: 13px;
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
/* ===========================================
|
|
DRAWER SECTIONS
|
|
=========================================== */
|
|
swp-drawer-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
swp-drawer-section-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* ===========================================
|
|
DRAWER ITEMS (Menu items)
|
|
=========================================== */
|
|
swp-drawer-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
background: var(--color-background-alt);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: background 150ms ease;
|
|
}
|
|
|
|
swp-drawer-item:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-drawer-item i {
|
|
font-size: 20px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-drawer-item-text {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-drawer-item-hint {
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ===========================================
|
|
THEME TOGGLE (Two icon buttons)
|
|
=========================================== */
|
|
swp-theme-toggle {
|
|
display: flex;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
swp-theme-option {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px;
|
|
background: var(--color-background-alt);
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
swp-theme-option:first-child {
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
|
|
swp-theme-option i {
|
|
font-size: 20px;
|
|
color: var(--color-text-secondary);
|
|
transition: color 150ms ease;
|
|
}
|
|
|
|
swp-theme-option:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-theme-option.active {
|
|
background: color-mix(in srgb, var(--color-teal) 12%, transparent);
|
|
}
|
|
|
|
swp-theme-option.active i {
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
/* ===========================================
|
|
DRAWER FOOTER
|
|
=========================================== */
|
|
swp-drawer-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 16px;
|
|
border-top: 1px solid var(--color-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
swp-drawer-action {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
font-size: 14px;
|
|
font-family: var(--font-family);
|
|
color: var(--color-text-secondary);
|
|
background: transparent;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
swp-drawer-action i {
|
|
font-size: 18px;
|
|
}
|
|
|
|
swp-drawer-action:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-drawer-action.logout:hover {
|
|
color: var(--color-red);
|
|
border-color: var(--color-red);
|
|
background: var(--bg-red-subtle);
|
|
}
|
|
|
|
/* ===========================================
|
|
MARK ALL READ BUTTON (Notification drawer)
|
|
=========================================== */
|
|
swp-mark-read-btn {
|
|
font-size: 12px;
|
|
color: var(--color-teal);
|
|
cursor: pointer;
|
|
transition: opacity 150ms ease;
|
|
}
|
|
|
|
swp-mark-read-btn:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* ===========================================
|
|
TODO DRAWER (slides out to the left of profile drawer)
|
|
=========================================== */
|
|
swp-todo-drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 320px; /* Position to the left of profile drawer (320px wide) */
|
|
bottom: 0;
|
|
width: 380px;
|
|
background: var(--color-surface);
|
|
border-left: 1px solid var(--color-border);
|
|
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
opacity 200ms ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 999; /* Below profile drawer */
|
|
}
|
|
|
|
swp-todo-drawer.active {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
swp-todo-drawer swp-drawer-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: var(--color-background-alt);
|
|
}
|
|
|
|
swp-todo-drawer swp-drawer-title {
|
|
flex: 1;
|
|
}
|
|
|
|
swp-drawer-back {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
swp-drawer-back:hover {
|
|
background: var(--color-background-hover);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-drawer-back i {
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* Header button with text */
|
|
swp-todo-drawer swp-btn.primary.small {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 12px;
|
|
font-size: 13px;
|
|
font-family: var(--font-family);
|
|
font-weight: 500;
|
|
background: var(--color-teal);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
swp-todo-drawer swp-btn.primary.small:hover {
|
|
background: color-mix(in srgb, var(--color-teal) 85%, black);
|
|
}
|
|
|
|
swp-todo-drawer swp-btn.primary.small i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
swp-todo-drawer swp-drawer-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
swp-todo-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
swp-todo-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
swp-todo-section-header i {
|
|
font-size: 14px;
|
|
color: var(--color-text-secondary);
|
|
transition: transform 200ms ease;
|
|
}
|
|
|
|
swp-todo-section.collapsed swp-todo-section-header i {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
swp-todo-section.collapsed swp-todo-items {
|
|
display: none;
|
|
}
|
|
|
|
swp-todo-section-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-todo-section-count {
|
|
font-size: 11px;
|
|
padding: 2px 6px;
|
|
background: var(--color-background);
|
|
border-radius: 10px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-todo-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
swp-todo-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
background: var(--color-background-alt);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
swp-todo-item:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-todo-item[data-completed="true"] {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
swp-todo-item[data-completed="true"] swp-todo-title {
|
|
text-decoration: line-through;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-todo-checkbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--color-border);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
swp-todo-checkbox i {
|
|
font-size: 14px;
|
|
color: white;
|
|
opacity: 0;
|
|
}
|
|
|
|
swp-todo-item[data-completed="true"] swp-todo-checkbox {
|
|
background: var(--color-teal);
|
|
border-color: var(--color-teal);
|
|
}
|
|
|
|
swp-todo-item[data-completed="true"] swp-todo-checkbox i {
|
|
opacity: 1;
|
|
}
|
|
|
|
swp-todo-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
swp-todo-title {
|
|
font-size: 14px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-todo-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-todo-meta i {
|
|
font-size: 14px;
|
|
}
|
|
|
|
swp-todo-time {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
swp-todo-priority {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
swp-todo-priority.high {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
swp-todo-priority.low {
|
|
color: var(--color-text-secondary);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
swp-todo-date {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* ===========================================
|
|
NEW TODO DRAWER (slides out to the left of todo drawer)
|
|
=========================================== */
|
|
swp-new-todo-drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 700px; /* 320px (profile) + 380px (todo) */
|
|
bottom: 0;
|
|
width: 340px;
|
|
background: var(--color-surface);
|
|
border-left: 1px solid var(--color-border);
|
|
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
opacity 200ms ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 998; /* Below todo drawer */
|
|
}
|
|
|
|
swp-new-todo-drawer.active {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
swp-new-todo-drawer swp-drawer-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: var(--color-background-alt);
|
|
}
|
|
|
|
swp-new-todo-drawer swp-drawer-title {
|
|
flex: 1;
|
|
}
|
|
|
|
swp-new-todo-drawer swp-drawer-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
swp-new-todo-drawer swp-drawer-footer {
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* Form Elements */
|
|
swp-new-todo-drawer swp-section-label {
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
color: var(--color-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
swp-new-todo-drawer swp-form-field {
|
|
display: block;
|
|
}
|
|
|
|
swp-new-todo-drawer swp-form-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
swp-new-todo-drawer swp-form-row swp-form-field {
|
|
flex: 1;
|
|
}
|
|
|
|
swp-new-todo-drawer input[type="text"],
|
|
swp-new-todo-drawer input[type="date"],
|
|
swp-new-todo-drawer input[type="time"],
|
|
swp-new-todo-drawer select,
|
|
swp-new-todo-drawer textarea {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
font-size: 14px;
|
|
font-family: var(--font-family);
|
|
color: var(--color-text);
|
|
background: var(--color-background-alt);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
outline: none;
|
|
transition: border-color 150ms ease;
|
|
}
|
|
|
|
swp-new-todo-drawer input:focus,
|
|
swp-new-todo-drawer select:focus,
|
|
swp-new-todo-drawer textarea:focus {
|
|
border-color: var(--color-teal);
|
|
}
|
|
|
|
swp-new-todo-drawer input::placeholder,
|
|
swp-new-todo-drawer textarea::placeholder {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-new-todo-drawer select {
|
|
cursor: pointer;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%23666' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 10px center;
|
|
padding-right: 36px;
|
|
}
|
|
|
|
swp-new-todo-drawer textarea {
|
|
resize: none;
|
|
min-height: 80px;
|
|
}
|
|
|
|
/* Visibility toggle */
|
|
swp-visibility-toggle {
|
|
display: flex;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
swp-visibility-option {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding: 10px 12px;
|
|
font-size: 13px;
|
|
color: var(--color-text-secondary);
|
|
background: var(--color-background-alt);
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
border: none;
|
|
}
|
|
|
|
swp-visibility-option:first-child {
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
|
|
swp-visibility-option i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
swp-visibility-option:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-visibility-option.active {
|
|
background: color-mix(in srgb, var(--color-teal) 12%, transparent);
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
/* Footer buttons */
|
|
swp-new-todo-drawer swp-btn {
|
|
padding: 10px 16px;
|
|
font-size: 14px;
|
|
font-family: var(--font-family);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
swp-new-todo-drawer swp-btn.secondary {
|
|
background: transparent;
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-new-todo-drawer swp-btn.secondary:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-new-todo-drawer swp-btn.primary {
|
|
background: var(--color-teal);
|
|
border: 1px solid var(--color-teal);
|
|
color: white;
|
|
}
|
|
|
|
swp-new-todo-drawer swp-btn.primary:hover {
|
|
background: color-mix(in srgb, var(--color-teal) 85%, black);
|
|
}
|