Add reports page with sales analytics and UI components
Introduces comprehensive reports feature with interactive sales dashboard Includes dynamic data tables, charts, and filtering capabilities Enhances application with new statistics and reporting functionality
This commit is contained in:
Janus C. H. Knudsen
parent
6ef001e35f
commit
405dabeb34
15 changed files with 1909 additions and 212 deletions
|
|
@ -2,8 +2,27 @@
|
|||
* 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)
|
||||
=========================================== */
|
||||
|
|
@ -15,12 +34,12 @@
|
|||
height: 100vh;
|
||||
background: var(--color-surface);
|
||||
border-left: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-lg);
|
||||
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 var(--transition-normal);
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
|
||||
[data-drawer].active,
|
||||
|
|
@ -46,12 +65,12 @@ swp-todo-drawer {
|
|||
height: 100vh;
|
||||
background: var(--color-surface);
|
||||
border-left: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: var(--z-drawer);
|
||||
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translateX(100%);
|
||||
transition: transform var(--transition-normal);
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
|
||||
swp-profile-drawer.active,
|
||||
|
|
@ -67,17 +86,15 @@ swp-drawer-header {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-10) var(--spacing-12);
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: var(--color-background-alt);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
swp-drawer-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
|
|
@ -94,11 +111,11 @@ swp-drawer-close {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-secondary);
|
||||
transition: all var(--transition-fast);
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
swp-drawer-close:hover {
|
||||
|
|
@ -110,6 +127,12 @@ swp-drawer-close i {
|
|||
font-size: 20px;
|
||||
}
|
||||
|
||||
swp-drawer-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
DRAWER CONTENT / BODY
|
||||
=========================================== */
|
||||
|
|
@ -117,10 +140,10 @@ swp-drawer-content,
|
|||
swp-drawer-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--spacing-8);
|
||||
padding: 20px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-5);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
swp-drawer-divider {
|
||||
|
|
@ -130,134 +153,142 @@ swp-drawer-divider {
|
|||
}
|
||||
|
||||
/* ===========================================
|
||||
PROFILE SECTION
|
||||
PROFILE SECTION (Centered in drawer)
|
||||
=========================================== */
|
||||
swp-profile-section {
|
||||
swp-drawer-profile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: var(--spacing-4) 0;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-profile-avatar-large {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-teal);
|
||||
swp-drawer-avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-purple);
|
||||
color: white;
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-3);
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
swp-profile-name-large {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
swp-drawer-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin-bottom: var(--spacing-1);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
swp-profile-email {
|
||||
font-size: var(--font-size-sm);
|
||||
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 MENU
|
||||
DRAWER SECTIONS
|
||||
=========================================== */
|
||||
swp-drawer-menu {
|
||||
swp-drawer-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-1);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
swp-drawer-menu-item {
|
||||
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: var(--spacing-3);
|
||||
padding: var(--spacing-3) var(--spacing-3);
|
||||
border-radius: var(--border-radius);
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: var(--color-background-alt);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
color: var(--color-text);
|
||||
transition: background 150ms ease;
|
||||
}
|
||||
|
||||
swp-drawer-menu-item:hover {
|
||||
swp-drawer-item:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
swp-drawer-menu-item i {
|
||||
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
|
||||
THEME TOGGLE (Two icon buttons)
|
||||
=========================================== */
|
||||
swp-theme-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-3);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
swp-theme-label {
|
||||
swp-theme-option {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
color: var(--color-text);
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
background: var(--color-background-alt);
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
swp-theme-label i {
|
||||
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-toggle-switch {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
swp-theme-option:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
swp-toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
swp-theme-option.active {
|
||||
background: color-mix(in srgb, var(--color-teal) 12%, transparent);
|
||||
}
|
||||
|
||||
swp-toggle-track {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
inset: 0;
|
||||
background: var(--color-border);
|
||||
border-radius: 12px;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-toggle-track::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-toggle-switch input:checked + swp-toggle-track {
|
||||
background: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-toggle-switch input:checked + swp-toggle-track::before {
|
||||
transform: translateX(20px);
|
||||
swp-theme-option.active i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -265,9 +296,9 @@ swp-toggle-switch input:checked + swp-toggle-track::before {
|
|||
=========================================== */
|
||||
swp-drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--spacing-3);
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -276,28 +307,485 @@ swp-drawer-action {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-2);
|
||||
width: 100%;
|
||||
padding: var(--spacing-3);
|
||||
font-size: var(--font-size-base);
|
||||
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: var(--border-radius);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
& i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
&.logout:hover {
|
||||
color: var(--color-red);
|
||||
border-color: var(--color-red);
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue