/* ========================================================================== UI FORM · components/ui-form.css Child-Theme: generatepress-child/assets/css/components/ --------------------------------------------------------------------- STAND 10.09.26 - gebaut nach demselben Muster wie ui-button.css: KEIN @layer (siehe ui-button.css für die volle Begründung: @layer macht alles darin schwächer als GeneratePress' nicht-layered CSS, unabhängig von Spezifität). DUAL-LAYER wie bei Buttons: rohe Tag-Selektoren (input/select/ textarea/label/checkbox/radio) decken Fremd-Markup ab (Gutenberg, WP-Core-Formulare, schnell hingeschriebenes Modal-Markup), .ui-* Klassen sind die bewusst gesetzte Komponentenversion mit voller Kontrolle (Wrapper, Hint/Error-Text, Required-Marker, Icon-Felder, Dropdown-Panels). Beide bekommen exakt dieselben Basis-Regeln - keine zwei visuellen Wahrheiten für "ein Textfeld"/"eine Checkbox". STAND 10.09.26 (2): Autocomplete-Dropdown und Mehrfachauswahl- Kombobox ergänzt (Guide, Form Elements: Suchfeld-Autocomplete / Branchenselectionmodal.pdf, itschwerpunktechipsfigma_1.pdf: Mehrfachauswahl mit Chips + gruppierter Liste). Beide Panels nutzen den neuen Token --mp-shadow-popover (in mp-tokens.css ergänzt - Guide nennt hier einen eigenen Schatten, der auf keiner der bestehenden vier Shadow-Stufen liegt). Dafür wurden die Checkbox/Radio-Basis-Regeln (weiter unten) von ".ui-checkbox input"/".ui-radio input" auf zusätzlich rohe input[type="checkbox"]/[type="radio"] erweitert - die Multiselect- Optionszeilen sind volle Klickflächen ohne .ui-checkbox-Wrapper und brauchen trotzdem dieselbe Optik. Konsumiert AUSSCHLIESSLICH Tokens aus mp-tokens.css (muss vorher geladen sein). Eine Ausnahme: --mp-surface-subtle und --mp-shadow-popover wurden dafür neu in mp-tokens.css ergänzt (Werte aus dem Style Guide, die dort noch nicht als Token vorhanden waren). Quelle: style_guide.pdf Abschnitt 09 "Form Elements", Branchenselectionmodal.pdf, itschwerpunktechipsfigma_1.pdf. Global geladen (nicht an Shortcode/Wrapper gebunden). ========================================================================== */ /* ============================================================ * FELD-WRAPPER * Label 8px darüber, Hilfetext/Fehlertext 6px darunter (lt. Guide), * Abstand zwischen Feldern 20px (--mp-space-5). * ============================================================ */ .ui-form-field { display: flex; flex-direction: column; margin-bottom: var(--mp-space-5); } .ui-form-field:last-child { margin-bottom: 0; } /* Zweispaltiges Formular-Grid, z. B. Vorname/Nachname nebeneinander. Nicht explizit im Guide bemaßt, nutzt aber ausschließlich Grid-Gutter und bricht am selben Breakpoint wie das Modal (600px, siehe mp-modal.css) auf eine Spalte um. */ .ui-form-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--mp-space-4); } .ui-form-row .ui-form-field { margin-bottom: var(--mp-space-5); } /* ============================================================ * LABEL * Feld-Label: Roboto 600 · 14/20 · 8px über dem Feld. * ============================================================ */ .ui-form-field label, .ui-label { order: -1; margin-bottom: var(--mp-space-2); font-family: var(--mp-font-body); font-size: var(--mp-fs-field-label); line-height: var(--mp-lh-field-label); font-weight: 600; color: var(--mp-ink-900); } /* Pflichtfeld-Markierung: "Pflichtfelder mit * und im Hinweistext erklärt" (Accessibility-Kapitel) - deshalb IMMER zusätzlich ein ui-form-hint mit Erklärung setzen, der Stern allein reicht nicht. */ .ui-required { color: var(--mp-error); margin-left: 2px; } /* ============================================================ * BASIS-FELD * Höhe 48, Radius 6, Rahmen 1px Ink 300, Text 15px. * Padding: Guide nennt hier explizit 14px (Abweichung von der reinen * 4px-Skala aus Kapitel 05 - wie schon die border-radius-!important- * Ausnahme in ui-button.css wird das hier bewusst und kommentiert * gemacht, nicht stillschweigend auf 16px/--mp-space-4 aufgerundet). * ============================================================ */ .ui-input, .ui-select, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select { display: block; width: 100%; height: var(--mp-height-input); padding: 0 14px; /* Guide-Vorgabe, siehe Kommentar oben */ border: 1px solid var(--mp-ink-300); background-color: var(--mp-surface); border-radius: var(--mp-radius-md); font-family: var(--mp-font-body); font-size: var(--mp-fs-body-m); color: var(--mp-ink-900); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } ::placeholder { color: var(--mp-ink-400); } /* ---- Hover: Rahmen dunkelt auf Ink 900, NIE Crimson auf Hover ("kein Crimson-Hover auf Feldern, Crimson bleibt für Fokus Ring reserviert" - Guide, Form Elements). ---- */ .ui-input:hover, .ui-select:hover, input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="number"]:hover, input[type="date"]:hover, select:hover, textarea:hover, .ui-textarea:hover { border-color: var(--mp-ink-900); } /* ---- Fokus: Rahmen 1px Crimson + Fokus-Ring-Shadow ---- Steht bewusst NACH :hover, damit Fokus bei gleicher Spezifität gewinnt, auch wenn Maus + Fokus gleichzeitig zutreffen. */ .ui-input:focus, .ui-select:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:focus, textarea:focus, .ui-textarea:focus { outline: none; border-color: var(--mp-primary); background-color: var(--mp-surface); box-shadow: var(--mp-shadow-focus); } /* ---- Fehler: natives aria-invalid statt eigener .is-error-Klasse, gleiches Prinzip wie :disabled bei ui-button.css. Rahmen 1.5px. ---- */ .ui-input[aria-invalid="true"], .ui-select[aria-invalid="true"], .ui-textarea[aria-invalid="true"], input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-width: 1.5px; border-color: var(--mp-error); } /* ---- Deaktiviert ---- */ .ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled, input:disabled, select:disabled, textarea:disabled { border-color: var(--mp-ink-200); background: var(--mp-surface-subtle); color: var(--mp-ink-400); cursor: not-allowed; } /* ============================================================ * TEXTAREA * Mindesthöhe 96px, wächst mit Inhalt statt feste Höhe. * ============================================================ */ .ui-textarea, textarea { display: block; width: 100%; height: auto; min-height: 96px; padding: var(--mp-space-3) 14px; border: 1px solid var(--mp-ink-300); border-radius: var(--mp-radius-md); background: var(--mp-surface); font-family: var(--mp-font-body); font-size: var(--mp-fs-body-m); line-height: var(--mp-lh-body-m); color: var(--mp-ink-900); resize: vertical; transition: border-color .15s ease, box-shadow .15s ease; } /* ============================================================ * SELECT * Eigener Pfeil statt Browser-Default, Klickfläche/Zeile 44px in der * geöffneten Liste bleibt nativ (Browser-Dropdown, nicht nachbaubar * ohne eigene Listbox-Komponente). * * !important auf appearance/background-image: GeneratePress stylt * native * * ============================================================ */ .ui-form-field--icon { position: relative; } .ui-form-field--icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--mp-ink-500); pointer-events: none; } /* Label steht vor dem Icon im Markup, deshalb hier explizit die Reihenfolge sichern und dem Input den Platz links freihalten. */ .ui-form-field--icon label { order: -1; } .ui-form-field--icon .ui-input, .ui-form-field--icon input { padding-left: var(--mp-space-10); } /* Browser packen bei type="search" automatisch ein eigenes natives "Leeren"-Kreuz rechts ins Feld, sobald Text drinsteht - kein Phosphor-Icon, kein Teil unserer Optik, und per CSS nicht umfärbbar (nur an/aus). Deshalb hier deaktiviert und durch die eigene .ui-form-field__clear-Komponente direkt unten ersetzt - NICHT ersatzlos gestrichen. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { display: none; -webkit-appearance: none; } input[type="search"] { appearance: textfield; -moz-appearance: textfield; } /* ---- Eigenes Leeren-Kreuz (Phosphor ph-x) ---- Markup:
Sichtbarkeit (hidden/nicht hidden) steuert ein kleines Script (mp-form-clear.js) abhängig vom Feldinhalt - reiner Anzeige-Zustand, kein CSS-Bestandteil. Reserviert automatisch Platz rechts im Input, sobald ein .ui-form-field__clear im selben Wrapper existiert - Felder ohne Clear-Button (z. B. Select mit Icon) bleiben unangetastet. */ .ui-form-field--icon:has(.ui-form-field__clear) .ui-input, .ui-form-field--icon:has(.ui-form-field__clear) input { padding-right: var(--mp-space-8); } .ui-form-field__clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--mp-radius-sm); background: transparent; color: var(--mp-ink-500); cursor: pointer; } .ui-form-field__clear i { font-size: 16px; } .ui-form-field__clear:hover { color: var(--mp-primary); } .ui-form-field__clear:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); } .ui-form-field__clear[hidden] { display: none; } /* ============================================================ * DROPDOWN (custom Select-Ersatz) * Natives komplett - * gleiches Popover-Pattern wie .ui-autocomplete/.ui-multiselect__panel * (gleicher Radius/Shadow/Zeilenhöhe), nur für genau einen Wert. * * Markup: *
* *
* * * *
*
* * Wie bei .ui-autocomplete: ".is-open" ist nur der CSS-Zustands-Hook. * Öffnen/Schließen, Tastatur-Navigation (Pfeiltasten/Enter/Escape) und * das Befüllen des versteckten beim Auswählen sind JS-Logik, * NICHT Teil dieser Datei - braucht ein kleines eigenes Script, wie * mp-modal.js fürs Modal. * ============================================================ */ .ui-dropdown { position: relative; } /* Wird von mp-select-enhance.js auf ein bleibt im DOM (trägt weiter den echten Formular-Wert), verschwindet aber optisch komplett. display:none ist hier bewusst okay: versteckte * * * * ".is-open" ist reiner Zustands-Hook fürs CSS - das tatsächliche * Öffnen/Schließen/Filtern beim Tippen ist JS-Logik und NICHT Teil * dieser Datei (analog zu mp-modal.js für das Modal-Öffnen/Schließen). * ============================================================ */ .ui-autocomplete-wrap { position: relative; } .ui-autocomplete-wrap.is-open .ui-input, .ui-autocomplete-wrap.is-open input { border-color: var(--mp-ink-900); box-shadow: none; } /* Panel nur sichtbar, solange der Wrapper .is-open trägt - das setzt/entfernt mp-autocomplete.js abhängig vom Feldinhalt. Ohne diese Regel würde die Liste immer angezeigt, sobald sie im Markup steht, unabhängig vom Tippen. */ .ui-autocomplete-wrap:not(.is-open) .ui-autocomplete { display: none; } .ui-autocomplete { position: absolute; top: calc(100% + var(--mp-space-1)); left: 0; right: 0; z-index: 20; margin: 0; padding: var(--mp-space-1) 0; max-height: 280px; overflow-y: auto; list-style: none; background: var(--mp-surface); border: 1px solid var(--mp-ink-200); border-radius: var(--mp-radius-lg); box-shadow: var(--mp-shadow-popover); } .ui-autocomplete__item { display: flex; align-items: center; height: 40px; padding: 0 14px; font-family: var(--mp-font-body); font-size: var(--mp-fs-body-m); color: var(--mp-ink-900); cursor: pointer; } .ui-autocomplete__item:hover, .ui-autocomplete__item[aria-selected="true"] { background: var(--mp-surface-subtle); } /* .ui-autocomplete__item setzt oben eigenes display:flex (Autoren-CSS schlägt die Browser-Standardbehandlung von [hidden]) - deshalb hier explizit erzwungen, sonst bleiben clientseitig gefilterte, nicht passende Treffer trotz [hidden]-Attribut sichtbar. */ .ui-autocomplete__item[hidden] { display: none; } .ui-autocomplete__empty { padding: var(--mp-space-3) 14px; font-size: var(--mp-fs-caption); color: var(--mp-ink-500); } /* ============================================================ * MEHRFACHAUSWAHL (MULTI-SELECT) * Chips für gewählte Werte + Filter-Suchfeld + gruppiertes Panel mit * Zeilen à 44px, volle Klickfläche (Guide: "Auswahl Zeile 44 px, * Klickfläche voll"). Nicht-verfügbare Optionen bleiben sichtbar, * aber deaktiviert (siehe Branchenselectionmodal.pdf, * itschwerpunktechipsfigma_1.pdf). * * Markup: *
* * Mehrfachauswahl möglich, maximal 3. * *
*
* IT & Software * * *
* *
* * *
* *
*
*

Gesundheitswesen

* * *
*
* *
* 2 / 3 ausgewählt * *
*
*
* * Chips nutzen bewusst die bestehende .ui-chip/.ui-chip--removable- * Komponente aus ui-button.css statt eigener Chip-Styles - eine * visuelle Wahrheit für "entfernbarer Tag" im ganzen System. * ============================================================ */ .ui-multiselect { border: 1px solid var(--mp-ink-300); border-radius: var(--mp-radius-lg); padding: var(--mp-space-3); background: var(--mp-surface); } .ui-multiselect.is-open { border-color: var(--mp-ink-900); } .ui-multiselect__chips { display: flex; flex-wrap: wrap; gap: var(--mp-space-2); margin-bottom: var(--mp-space-3); } .ui-multiselect__chips:empty { display: none; } .ui-multiselect__chips .ui-chip { background: var(--mp-primary-tint); color: var(--mp-primary); } /* Filter-Suchfeld innerhalb der Multiselect-Box: bleibt wie jedes andere Feld auf surface (weiß) - KEIN surface-subtle. Braucht trotzdem einen sichtbaren, wenn auch leichten Rahmen (Ink 200 statt Ink 300), sonst verschwimmt es optisch mit der ebenfalls weißen Box drumherum. */ .ui-multiselect .ui-form-field--icon .ui-input, .ui-multiselect .ui-form-field--icon input { border-color: var(--mp-ink-200); background: var(--mp-surface); } .ui-multiselect .ui-form-field--icon .ui-input:focus, .ui-multiselect .ui-form-field--icon input:focus { border-color: var(--mp-primary); box-shadow: var(--mp-shadow-focus); background: var(--mp-surface); } .ui-multiselect__panel { margin-top: var(--mp-space-3); max-height: 280px; overflow-y: auto; border-top: 1px solid var(--mp-ink-200); } .ui-multiselect__group { padding-top: var(--mp-space-2); } .ui-multiselect__group-label { margin: 0; padding: var(--mp-space-2) 14px 4px; font-family: var(--mp-font-body); font-size: var(--mp-fs-label); line-height: var(--mp-lh-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mp-ink-500); } .ui-multiselect__option { display: flex; align-items: center; gap: var(--mp-space-2); min-height: 44px; padding: 0 14px; cursor: pointer; font-family: var(--mp-font-body); font-size: var(--mp-fs-body-m); color: var(--mp-ink-900); } .ui-multiselect__option:hover { background: var(--mp-surface-subtle); } .ui-multiselect__option:has(input:disabled) { cursor: not-allowed; color: var(--mp-ink-400); } .ui-multiselect__option:has(input:disabled):hover { background: transparent; } /* .ui-multiselect__option setzt eigenes display:flex, .ui-multiselect__group wird von mp-multiselect.js beim Filtern ebenfalls über [hidden] ein-/ausgeblendet - Autoren-CSS schlägt sonst die Browser-Standardbehandlung von [hidden] (siehe .ui-autocomplete__item weiter oben für dieselbe Problematik). */ .ui-multiselect__option[hidden], .ui-multiselect__group[hidden] { display: none; } /* Fester Bestandteil der Komponente, nicht optional: Zähler links, "Alle entfernen" rechts, erscheint automatisch sobald etwas gewählt ist (siehe mp-multiselect.js). */ .ui-multiselect__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-2); margin-top: var(--mp-space-2); } .ui-multiselect__counter { font-family: var(--mp-font-body); font-size: var(--mp-fs-caption); line-height: var(--mp-lh-caption); color: var(--mp-ink-500); } .ui-multiselect__clear-all { border: 0; background: transparent; padding: 0; margin: 0; font-family: var(--mp-font-body); font-size: var(--mp-fs-caption); line-height: var(--mp-lh-caption); font-weight: 600; color: var(--mp-primary); cursor: pointer; } .ui-multiselect__clear-all:hover { text-decoration: underline; } .ui-multiselect__clear-all:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); border-radius: var(--mp-radius-sm); } .ui-multiselect__clear-all[hidden] { display: none; } /* ============================================================ * CHECKBOX & RADIO * Klickfläche ≥44×44 (Accessibility-Kapitel) über Padding am Label, * sichtbare Box bleibt kompakt. Radius 4px für Checkbox (Kapitel * "Border Radius": "4px Kleine Elemente, Checkbox, Progress"). * * Dual-Layer: neben .ui-checkbox/.ui-radio (kompaktes Einzelfeld mit * eigener 44px-Klickfläche) wird auch roher input[type="checkbox"]/ * [type="radio"] gestylt, damit Zeilen wie .ui-multiselect__option * (die ihre 44px-Klickfläche selbst mitbringen) dieselbe Optik ohne * zusätzlichen Wrapper bekommen. * ============================================================ */ .ui-checkbox, .ui-radio { display: inline-flex; align-items: flex-start; gap: var(--mp-space-2); padding: var(--mp-space-2) 0; min-height: 44px; cursor: pointer; font-family: var(--mp-font-body); font-size: var(--mp-fs-body-m); color: var(--mp-ink-900); } .ui-checkbox input, .ui-radio input, input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; /* optische Ausrichtung zur ersten Textzeile */ border: 1px solid var(--mp-ink-300); background: var(--mp-surface); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .ui-checkbox input, input[type="checkbox"] { border-radius: var(--mp-radius-sm); } .ui-radio input, input[type="radio"] { border-radius: var(--mp-radius-pill); } .ui-checkbox input:hover, .ui-radio input:hover, input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--mp-ink-900); } .ui-checkbox input:focus-visible, .ui-radio input:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); } .ui-checkbox input:checked, input[type="checkbox"]:checked { border-color: var(--mp-primary); background-color: var(--mp-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.3l2.8 2.8 6-6.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 13px; } .ui-radio input:checked, input[type="radio"]:checked { border-color: var(--mp-primary); background-image: radial-gradient(circle, var(--mp-primary) 0 4px, transparent 4.5px); } .ui-checkbox input:disabled, .ui-radio input:disabled, input[type="checkbox"]:disabled, input[type="radio"]:disabled { border-color: var(--mp-ink-200); background-color: var(--mp-surface-subtle); cursor: not-allowed; } .ui-checkbox:has(input:disabled), .ui-radio:has(input:disabled) { color: var(--mp-ink-400); cursor: not-allowed; } /* Gruppen von Checkboxen/Radios: eigenes Fieldset statt
, damit Screenreader die Gruppe ansagen. Legend bekommt dieselbe Typografie wie ein normales Feld-Label. */ .ui-form-fieldset { margin: 0 0 var(--mp-space-5); padding: 0; border: 0; } .ui-form-fieldset legend { margin-bottom: var(--mp-space-2); padding: 0; font-family: var(--mp-font-body); font-size: var(--mp-fs-field-label); line-height: var(--mp-lh-field-label); font-weight: 600; color: var(--mp-ink-900); } .ui-form-fieldset .ui-checkbox, .ui-form-fieldset .ui-radio { display: flex; } .ui-form-fieldset--columns { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--mp-space-4); } @media (max-width: 480px) { .ui-form-fieldset--columns { grid-template-columns: 1fr; } } /* ============================================================ * TOGGLE / SWITCH * Aus eigenständigem mp_toggle-Snippet integriert (Stand 14.09.26) - * vorher eigener wp_head-Inline-