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

Enhance service detail UI with improved select and color controls

Browse source 
Refactors select dropdown functionality to use custom implementation
Adds color dot support for color selection
Improves keyboard navigation and interaction for select dropdowns

Modernizes UI components with more flexible and interactive controls
This commit is contained in:
Janus C. H. Knudsen 2026-01-16 23:25:05 +01:00
parent 120367acbb
commit e9f3639c7c
5 changed files with 154 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

50
PlanTempus.Application/wwwroot/css/components.css
View file

@ -678,6 +678,34 @@ swp-user-email {
/* ===========================================
FORM INPUTS (shared base styling)
=========================================== */
/* Global textarea styling */
textarea {
width: 100%;
padding: var(--spacing-3) var(--spacing-4);
font-size: var(--font-size-base);
font-family: var(--font-family);
color: var(--color-text);
background: var(--color-background-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
resize: vertical;
&::placeholder {
color: var(--color-text-muted);
}
&:hover {
background: var(--color-background);
}
&:focus {
outline: none;
background: var(--color-surface);
border-color: var(--color-teal);
}
}
swp-form-group {
display: flex;
flex-direction: column;
@ -861,28 +889,6 @@ swp-form-input {
}
}
/* Textarea */
textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: 6px;
font-size: 14px;
font-family: var(--font-family);
color: var(--color-text);
background: var(--color-surface);
resize: vertical;
&::placeholder {
color: var(--color-text-muted);
}
&:focus {
outline: none;
border-color: var(--color-teal);
}
}
/* Date range inputs */
swp-date-range {
display: flex;