/* ═══════════════════════════════════════════════════════════════════════════ css/ui/components/form.css — Form category overrides Styles specific to ui/components/form/*.php showcase pages (Ajax Select, Date Picker, File Upload, etc). Shared article-shell classes (sc-page, sc-header, breadcrumb, pager, sc-code) live in _base.css and css/ui/design-system/layout.css's sc-code block respectively — this file only holds styles specific to the Form category's component demos. NOTE on loading: $showcaseCss in partials/layout-header.php only resolves to css/ui/design-system/{categoryId}.css, so it cannot auto-load a file under css/ui/components/. Each page in ui/components/form/*.php links this stylesheet manually, right after the design-system stylesheets, inside its own front-matter additions. See ajax-select.php for the pattern. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Alpine x-cloak ──────────────────────────────────────────────────────── Same requirement as css/ui/design-system/layout.css — kept duplicated per-category rather than promoted to _base.css, since _base.css loads on every page including ones with zero Alpine usage. */ [x-cloak] { display: none !important; } /* ── Variant block wrapper ──────────────────────────────────────────────── Markup:
wrapping each named variant plus its preview and code snippet. Identical convention to design-system/layout — reproduced here because the two CSS files are scoped per-category and deliberately don't share an import. */ .sc-block { margin-bottom: var(--spacing-section-gap, clamp(2rem, 5vw, 4rem)); } .sc-block-head { margin-bottom: 1.25rem; } .sc-block-title { margin: 0 0 0.375rem; font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-h5, clamp(1.125rem, 2vw, 1.563rem)); font-weight: var(--weight-heading-sans, 600); color: var(--color-primary, #18181b); } .sc-block-desc { margin: 0; max-width: var(--width-prose, 70ch); font-size: var(--text-body-sm, 0.875rem); line-height: var(--leading-body, 1.75); color: var(--color-secondary, #52525b); } .sc-block-desc code { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.85em; background-color: var(--color-bg-b2, #f5f5f5); padding: 0.1em 0.4em; border-radius: var(--radius-xs, 0.25rem); } /* ── Preview frame ──────────────────────────────────────────────────────── Markup:
...
Bordered viewport that hosts the live, interactive component. No DaisyUI primitive wraps "a labeled live demo area" — this is showcase-only. */ .sc-preview { border: 1px solid var(--color-bg-b3, #ebebeb); border-radius: var(--radius-md, 0.75rem); background-color: var(--color-bg-b1, #ffffff); overflow: hidden; } .sc-preview-body { padding: 1.5rem; } .sc-preview-body--center { display: flex; justify-content: center; } .sc-preview-body--narrow { max-width: 360px; margin: 0 auto; } /* ── States grid ─────────────────────────────────────────────────────────── Markup:
... Reused as-is from design-system/layout's convention for laying out multiple labeled state examples side by side. */ .sc-states-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .sc-state-card { display: flex; flex-direction: column; gap: 0.5rem; } .sc-state-label { margin: 0; font-size: var(--text-caption, 0.75rem); font-weight: var(--weight-body-medium, 500); color: var(--color-tertiary, #71717a); } /* ── Code snippet block ─────────────────────────────────────────────────── Markup:
...
Same block as design-system/layout.css — duplicated rather than shared because the two stylesheets are loaded independently per category and this project has no CSS import/build step to dedupe them. */ .sc-code { margin-top: 0.875rem; } .sc-code-toggle { font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-caption, 0.75rem); font-weight: var(--weight-body-medium, 500); color: var(--color-tertiary, #71717a); background: none; border: 1px solid var(--color-bg-b3, #ebebeb); border-radius: var(--radius-sm, 0.375rem); padding: 0.375rem 0.75rem; cursor: pointer; transition: color 150ms ease, border-color 150ms ease; } .sc-code-toggle:hover { color: var(--color-primary, #18181b); border-color: var(--color-bg-b6, #cccccc); } .sc-code-body { margin-top: 0.625rem; border-radius: var(--radius-sm, 0.375rem); overflow: hidden; background-color: var(--color-bg-d1, #000000); } .sc-code-body pre { margin: 0; padding: 1rem 1.25rem; overflow-x: auto; } .sc-code-body code { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: var(--text-code-sm, 0.8125rem); line-height: var(--leading-code, 1.65); color: var(--color-secondary-dark, #d4d4d8); white-space: pre; } /* ── Ajax Select ─────────────────────────────────────────────────────────── Markup: ui/components/form/ajax-select.php
DaisyUI's can't render a color swatch + secondary description per option, and Tom Select's enhanced-select use case (search/tagging) is covered separately by tom-select.php — so this is a plain button + listbox, custom only because the option content itself is custom. ────────────────────────────────────────────────────────────────────────── */ .sc-csel { position: relative; width: 100%; } .sc-csel-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.55rem 0.75rem; background-color: var(--color-bg-b1, #ffffff); border: 1px solid var(--color-bg-b4, #e0e0e0); border-radius: var(--radius-sm, 0.375rem); font-family: var(--font-body, "Inter", system-ui, sans-serif); font-size: var(--text-body-sm, 0.875rem); color: var(--color-primary, #18181b); cursor: pointer; text-align: left; } .sc-csel-trigger:hover { border-color: var(--color-bg-b6, #cccccc); } .sc-csel-trigger:focus-visible { outline: 2px solid var(--color-accent-b1, #3b82f6); outline-offset: 1px; } .sc-csel-trigger-value { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .sc-csel-trigger-placeholder { color: var(--color-tertiary, #71717a); } .sc-csel-caret { flex-shrink: 0; color: var(--color-tertiary, #71717a); transition: transform var(--duration-fast, 150ms) var(--easing-default, ease); } .sc-csel-caret--open { transform: rotate(180deg); } .sc-csel-listbox { position: absolute; top: calc(100% + 0.375rem); left: 0; right: 0; z-index: var(--z-dropdown, 1000); max-height: 280px; overflow-y: auto; background-color: var(--color-bg-b1, #ffffff); border: 1px solid var(--color-bg-b3, #ebebeb); border-radius: var(--radius-sm, 0.375rem); box-shadow: var(--shadow-md, 0 4px 16px -2px rgb(0 0 0 / 0.1)); padding: 0.375rem; } .sc-csel-group-label { padding: 0.5rem 0.625rem 0.25rem; font-size: var(--text-overline, 0.6875rem); font-weight: var(--weight-body-medium, 500); text-transform: uppercase; letter-spacing: var(--tracking-overline, 0.1em); color: var(--color-tertiary, #71717a); } .sc-csel-option { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-xs, 0.25rem); cursor: pointer; transition: background-color 100ms ease; } .sc-csel-option:hover:not(.sc-csel-option--disabled), .sc-csel-option--active { background-color: var(--color-bg-b2, #f5f5f5); } .sc-csel-option--disabled { cursor: not-allowed; opacity: 0.45; } .sc-csel-swatch { flex-shrink: 0; width: 0.625rem; height: 0.625rem; border-radius: var(--radius-full, 9999px); } .sc-csel-option-text { display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; } .sc-csel-option-label { font-size: var(--text-body-sm, 0.875rem); color: var(--color-primary, #18181b); } .sc-csel-option-desc { font-size: var(--text-caption, 0.75rem); color: var(--color-tertiary, #71717a); } .sc-csel-check { margin-left: auto; flex-shrink: 0; color: var(--color-accent-b1, #3b82f6); } /* ── File Upload ─────────────────────────────────────────────────────────── Markup: ui/components/form/file-upload.php
No DaisyUI or Tailwind primitive covers a dashed dropzone, a per-file progress bar, or an image-thumbnail-vs-generic-icon file row — file intake UI is inherently custom chrome around native File/DataTransfer APIs (see js/ui/components/form.js header comment for the API side). ────────────────────────────────────────────────────────────────────────── */ .sc-fu-dropzone { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 1.5rem; text-align: center; border: 2px dashed var(--color-bg-b4, #e0e0e0); border-radius: var(--radius-md, 0.75rem); background-color: var(--color-bg-b2, #f5f5f5); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; } .sc-fu-dropzone:hover { border-color: var(--color-bg-b6, #cccccc); } .sc-fu-dropzone--active { border-color: var(--color-accent-b1, #3b82f6); background-color: var(--color-accent-b8, #bae6fd); } .sc-fu-dropzone-icon { color: var(--color-tertiary, #71717a); } .sc-fu-dropzone-title { font-size: var(--text-body-sm, 0.875rem); font-weight: var(--weight-body-medium, 500); color: var(--color-primary, #18181b); } .sc-fu-dropzone-hint { font-size: var(--text-caption, 0.75rem); color: var(--color-tertiary, #71717a); } .sc-fu-input { /* Native file input is visually hidden; the styled dropzone forwards clicks to it via a click() call so the native file picker, keyboard focus, and accessibility behavior are all preserved. */ position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .sc-fu-rejections { margin-top: 0.625rem; display: flex; flex-direction: column; gap: 0.25rem; } .sc-fu-rejection { font-size: var(--text-caption, 0.75rem); color: var(--color-error, #ef4444); } .sc-fu-list { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1rem; } .sc-fu-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem; border: 1px solid var(--color-bg-b3, #ebebeb); border-radius: var(--radius-sm, 0.375rem); background-color: var(--color-bg-b1, #ffffff); } .sc-fu-thumb { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-xs, 0.25rem); object-fit: cover; background-color: var(--color-bg-b3, #ebebeb); } .sc-fu-thumb-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-xs, 0.25rem); background-color: var(--color-bg-b3, #ebebeb); color: var(--color-tertiary, #71717a); } .sc-fu-item-body { flex: 1; min-width: 0; } .sc-fu-item-name { font-size: var(--text-body-sm, 0.875rem); color: var(--color-primary, #18181b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-fu-item-meta { display: flex; align-items: center; gap: 0.375rem; font-size: var(--text-caption, 0.75rem); color: var(--color-tertiary, #71717a); } .sc-fu-progress-track { margin-top: 0.375rem; height: 0.25rem; border-radius: var(--radius-full, 9999px); background-color: var(--color-bg-b3, #ebebeb); overflow: hidden; } .sc-fu-progress-fill { height: 100%; background-color: var(--color-accent-b1, #3b82f6); border-radius: var(--radius-full, 9999px); transition: width 200ms ease; } .sc-fu-progress-fill--error { background-color: var(--color-error, #ef4444); } .sc-fu-item-status--done { color: var(--color-success, #22c55e); } .sc-fu-item-status--error { color: var(--color-error, #ef4444); } .sc-fu-remove { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm, 0.375rem); color: var(--color-tertiary, #71717a); background: none; border: none; cursor: pointer; } .sc-fu-remove:hover { background-color: var(--color-bg-b2, #f5f5f5); color: var(--color-primary, #18181b); } /* ── Demo padding wrapper ───────────────────────────────────────────────── Markup:
...
.sc-preview (above) is the bordered frame; it has no padding of its own so other categories can put edge-to-edge content in it (tables, images). Form controls need breathing room, so this wrapper adds it without changing .sc-preview's shared contract. Used by time-picker.php where .sc-preview-body's fixed padding doesn't fit the centered demo layout. ────────────────────────────────────────────────────────────────────────── */ .sc-demo-pad { padding: 1.5rem; } .sc-demo-pad--center { display: flex; flex-direction: column; align-items: center; } /* ── Field shell (label + control) ─────────────────────────────────────── Markup: DaisyUI ships the control itself (.input, .select) but has no "label stacked above control" primitive of its own — Tailwind's flex utilities could inline this, but the project repeats this exact shell often enough across form components that it's worth a named class. ────────────────────────────────────────────────────────────────────────── */ .sc-field { display: flex; flex-direction: column; gap: 0.375rem; width: 100%; max-width: 220px; } .sc-field-label { font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-caption, 0.75rem); font-weight: var(--weight-body-medium, 500); color: var(--color-tertiary, #71717a); } .sc-field-error { margin: 0.375rem 0 0; font-size: var(--text-caption, 0.75rem); color: var(--color-danger, #dc2626); } .sc-field-row { display: flex; gap: 1.25rem; flex-wrap: wrap; } /* ── Input radius override ──────────────────────────────────────────────── Per design preference, --radius-sm is the preferred radius for inputs. DaisyUI's own .input/.select/.textarea classes use DaisyUI's internal --radius-field theme variable, not this project's token — and token.css never wires the two together — so without this rule every input in the Form category would render at DaisyUI's default field radius instead of the project's tokenised one. ────────────────────────────────────────────────────────────────────────── */ .sc-time-input, .sc-textarea { border-radius: var(--radius-sm, 0.375rem); } /* ── AM/PM dropdown panel ───────────────────────────────────────────────── Markup: ui/components/form/time-picker.php → .sc-time-dd DaisyUI's "dropdown" component anchors via CSS-only :focus-within, which closes the panel the instant a click lands on one of the