diff --git a/frontend/src/components/TaskForm/TaskForm.css b/frontend/src/components/TaskForm/TaskForm.css deleted file mode 100644 index ea7bb06..0000000 --- a/frontend/src/components/TaskForm/TaskForm.css +++ /dev/null @@ -1,212 +0,0 @@ -/* Create/Edit task dialog, per the approved desktop form mockup */ -.task-form-overlay { - position: fixed; - inset: 0; - background-color: rgba(15, 23, 42, 0.5); - display: flex; - align-items: center; - justify-content: center; - padding: 1.5rem; - z-index: 1000; - animation: overlay-in 0.15s ease-out; -} - -@keyframes overlay-in { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -.task-form-container { - background-color: white; - border-radius: 0.75rem; - width: 100%; - max-width: 640px; - max-height: 90vh; - overflow-y: auto; - box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.25); - animation: dialog-in 0.2s ease-out; -} - -@keyframes dialog-in { - from { - opacity: 0; - transform: translateY(8px) scale(0.99); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -.task-form { - /* Vertical padding lives on the sticky header and footer instead, so they can - cover the scrolling content edge to edge. */ - padding: 0 1.75rem; -} - -/* Title and actions stay put while the fields scroll, so Save is always - reachable even when validation messages make the form taller than the window. */ -.form-header { - position: sticky; - top: 0; - z-index: 2; - background-color: white; - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 1rem; - padding: 1.25rem 0 0.75rem; - margin-bottom: 1rem; - border-bottom: 1px solid #e2e8f0; -} - -.form-header h2 { - font-size: 1.5rem; - font-weight: 700; - color: #1e293b; -} - -.close-btn { - display: inline-flex; - align-items: center; - gap: 0.5rem; - background: none; - border: none; - cursor: pointer; - font-size: 0.9375rem; - font-family: inherit; - color: #475569; - padding: 0.5rem; - border-radius: 0.375rem; - min-height: 44px; -} - -.close-btn:hover { - background-color: #f1f5f9; - color: #1e293b; -} - -.form-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; -} - -/* Status: three radio options shown as pills, matching the mockup */ -.status-fieldset { - border: none; -} - -.status-buttons { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; -} - -.status-option { - cursor: pointer; -} - -.status-pill { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - border: 1px solid #cbd5e1; - border-radius: 9999px; - background-color: white; - font-size: 0.875rem; - font-weight: 500; - color: #334155; - transition: border-color 0.2s, background-color 0.2s; - min-height: 44px; -} - -.status-option input[type='radio'] { - /* Kept visible and focusable; the pill is the hit area around it. */ - margin: 0; - accent-color: #2563eb; - width: 1rem; - height: 1rem; - position: absolute; - left: 1rem; - cursor: pointer; -} - -.status-option { - position: relative; - display: inline-flex; - align-items: center; -} - -.status-pill { - padding-left: 2.5rem; -} - -.status-option:hover .status-pill { - border-color: #94a3b8; -} - -.status-option input[type='radio']:checked + .status-pill { - border-color: #2563eb; - background-color: #eff6ff; - color: #1d4ed8; - font-weight: 600; -} - -.status-option input[type='radio']:focus-visible + .status-pill { - outline: 2px solid #2563eb; - outline-offset: 2px; -} - -.form-actions { - position: sticky; - bottom: 0; - z-index: 2; - background-color: white; - display: flex; - gap: 0.75rem; - justify-content: flex-end; - padding: 1rem 0 1.25rem; - border-top: 1px solid #e2e8f0; - margin-top: 1.25rem; -} - -@media (max-width: 768px) { - /* Full-screen sheet on mobile, per the mobile create-task mockup. */ - .task-form-overlay { - padding: 0; - align-items: stretch; - } - - .task-form-container { - max-width: none; - max-height: none; - min-height: 100vh; - border-radius: 0; - } - - .task-form { - padding: 1.25rem; - } - - .form-row { - grid-template-columns: 1fr; - } - - .form-actions { - flex-direction: column-reverse; - } - - .form-actions .btn { - width: 100%; - } - - .close-btn .close-text { - display: none; - } -}