<!-- Standard-Formular -->
<h3 class="headline headline--headline-1">
Informationen anfordern
</h3>
<form class="form">
<div class="form__inner">
<div class="has-error has-feedback">
<div class="validation-summary-errors">
<ul class="list-group">
<li class="list-group-item list-group-item-danger"><span role="alert">Das Feld X ist erforderlich. Geben Sie einen Wert ein.</span></li>
</ul>
</div>
</div>
<fieldset class="form-group">
<legend class="label u-hidden-visually">Geschlecht</legend>
<div class="form-group__inner">
<label class="radio">
<input class="radio__input" type="radio" value="female" id="radio-842e" name="gender"/><span class="radio__indicator"></span><span class="radio__label">Frau</span>
</label>
<label class="radio">
<input class="radio__input" type="radio" value="male" id="radio-f6d3" name="gender"/><span class="radio__indicator"></span><span class="radio__label">Mann</span>
</label>
</div>
</fieldset>
<div class="form-group">
<label class="label" for="forename">Vorname*</label>
<div class="form-group__inner">
<input class="input input--text input-validation-error" type="text" required="required" autocomplete="fname" id="forename" name="forename" /><span class="field-validation-error" role="alert">Fehlermeldung</span>
</div>
</div>
<div class="form-group">
<label class="label" for="surname">Nachname*</label>
<div class="form-group__inner">
<input class="input input--text" type="text" required="required" autocomplete="lname" id="surname" name="surname" />
</div>
</div>
<div class="form-group">
<label class="label" for="address-1">Straße, Hausnummer*</label>
<div class="form-group__inner">
<input class="input input--text" type="text" required="required" autocomplete="address-line1" id="address-1" name="address-1" />
</div>
</div>
<div class="form-group">
<label class="label" for="address-2">Addresszusatz</label>
<div class="form-group__inner">
<input class="input input--text" type="text" autocomplete="address-line2" id="address-2" name="address-2" />
</div>
</div>
<div class="form-group">
<label class="label" for="zip">PLZ*</label>
<div class="form-group__inner">
<input class="input input--text" type="text" required="required" autocomplete="postal-code" id="zip" name="zip" />
</div>
</div>
<div class="form-group">
<label class="label" for="city">Ort*</label>
<div class="form-group__inner">
<input class="input input--text" type="text" required="required" autocomplete="city" id="city" name="city" />
</div>
</div>
<div class="form-group">
<label class="label" for="mail">E-Mail*</label>
<div class="form-group__inner">
<input class="input input--email" type="email" required="required" autocomplete="email" id="mail" name="mail" />
</div>
</div>
<div class="form-group">
<label class="label" for="mail-confirm">E-Mail bestätigen*</label>
<div class="form-group__inner">
<input class="input input--email" type="email" required="required" autocomplete="email" id="mail-confirm" name="mail-confirm" />
</div>
</div>
<div class="form-group">
<label class="label" for="type">Ich bin</label>
<div class="form-group__inner">
<select class="select" id="type" name="type">
<option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
<option>Arbeitnehmer</option>
<option>Auszubildende</option>
<option>Studierende</option>
<option>Bezieher von ALG I/ II</option>
<option>Bezieher einer gesetzl. Rente</option>
<option>Beamte/Pensionäre</option>
<option>Selbstständig Tätige</option>
<option>Weitere Personengruppen</option>
</select>
</div>
</div>
<div class="form__submit">
<input class="button button--blue" type="submit" value="Angaben prüfen" />
</div>
</div>
</form>
<!-- Info-Formular -->
<h3 class="headline headline--headline-1">
Gleich ausfüllen und mehr Infos bekommen
</h3>
<form class="form">
<div class="form__inner">
<fieldset class="form-group form-group--fullwide">
<legend class="label u-hidden-visually">Mitgliedschaft</legend>
<div class="form-group__inner">
<label class="radio radio--nextline">
<input class="radio__input" type="radio" value="membership" required="required" id="radio-2d7c" name="subject"/><span class="radio__indicator"></span><span class="radio__label">Ja, ich möchte Mitglied der Krankenkasse hkk werden.</span>
</label>
<label class="radio radio--nextline">
<input class="radio__input" type="radio" value="info" required="required" id="radio-0c8f" name="subject"/><span class="radio__indicator"></span><span class="radio__label">Ja, ich möchte mehr über die Krankenkasse hkk wissen. Senden Sie mir bitte Infomaterial zu.</span>
</label>
</div>
</fieldset>
<fieldset class="form-group form-group--fullwide">
<legend class="label label--required label--large">Ich bin</legend>
<div class="form-group__inner">
<label class="radio radio--nextline">
<input class="radio__input" type="radio" value="employee" required="required" id="radio-8474" name="status"/><span class="radio__indicator"></span><span class="radio__label">Arbeitnehmer oder selbstständig tätig.</span>
</label>
<label class="radio radio--nextline">
<input class="radio__input" type="radio" value="student" required="required" id="radio-e95b" name="status"/><span class="radio__indicator"></span><span class="radio__label">Student oder sonstiges (z.B. Künstler, Beamter).</span>
</label>
</div>
</fieldset>
<fieldset class="form-group form-group--fullwide">
<legend class="label label--required label--large">Persönliche Informationen</legend>
<div class="form-group__inner">
<label class="radio">
<input class="radio__input" type="radio" value="female" id="radio-ae17" name="gender"/><span class="radio__indicator"></span><span class="radio__label">Frau</span>
</label>
<label class="radio">
<input class="radio__input" type="radio" value="male" id="radio-72f9" name="gender"/><span class="radio__indicator"></span><span class="radio__label">Herr</span>
</label>
</div>
</fieldset>
<fieldset class="form-group form-group--fullwide form-group--inline">
<legend class="label u-hidden-visually">Name</legend>
<div class="form-group__inner">
<input class="input input--text" type="text" placeholder="Vorname*" required="required" autocomplete="fname" id="input-f944" name="name" />
<input class="input input--text" type="text" placeholder="Nachname*" required="required" autocomplete="lname" id="input-3dc7" name="name" />
</div>
</fieldset>
<div class="form-group form-group--fullwide">
<label class="label" for="birthdate">Geburtsdatum</label>
<div class="form-group__inner">
<input class="input input--date" type="date" placeholder="Geburtsdatum*" required="required" autocomplete="birthdate" id="birthdate" name="birthdate" />
</div>
</div>
<div class="form-group form-group--fullwide">
<label class="label u-hidden-visually" for="address-1">Straße, Hausnummer</label>
<div class="form-group__inner">
<input class="input input--text" type="text" placeholder="Straße, Nr.*" required="required" autocomplete="address-line1" id="address-1" name="address-1" />
</div>
</div>
<fieldset class="form-group form-group--fullwide form-group--inline">
<legend class="label u-hidden-visually">PLZ und Ort</legend>
<div class="form-group__inner">
<input class="input input--text input--25" type="text" placeholder="PLZ*" required="required" autocomplete="zipcode" id="input-c6f2" name="address-2" />
<input class="input input--text input--75" type="text" placeholder="Ort*" required="required" autocomplete="city" id="input-d9b6" name="address-2" />
</div>
</fieldset>
<fieldset class="form-group form-group--fullwide form-group--inline">
<legend class="label u-hidden-visually">E-Mail-Addresse und Telefonnummer</legend>
<div class="form-group__inner">
<input class="input input--email" type="email" placeholder="E-Mail-Adresse" autocomplete="email" id="input-3b79" name="contact" />
<input class="input input--tel" type="tel" placeholder="Telefonnummer" autocomplete="telephone" id="input-1701" name="contact" />
</div>
</fieldset>
<div class="form-group form-group--fullwide">
<label class="label u-hidden-visually" for="privacy-policy">Datenschutzerklärung</label>
<div class="form-group__inner">
<label class="checkbox">
<input class="checkbox__input" type="checkbox" value="1" required="required" id="privacy-policy" name="privacy-policy"/><span class="checkbox__indicator"></span><span class="checkbox__label"><span class="formatted-text">Ich akzeptiere die <a href="#">Datenschutzerklärung</a>.*</span></span>
</label>
</div>
</div>
<div class="form__submit">
<input class="button button--blue" type="submit" value="Abschicken" />
</div>
</div>
</form>
<!-- Mini-Formular -->
<form class="form form--inline">
<div class="form__inner">
<div class="form-group">
<label class="label u-hidden-visually" for="email">E-Mail</label>
<div class="form-group__inner">
<input class="input input--email" type="email" placeholder="E-Mail-Adresse" required="required" autocomplete="email" id="email" name="email" />
</div>
</div>
<div class="form__submit">
<input class="button button--blue" type="submit" value="Weiter" />
</div>
</div>
</form>
<!-- Inline-Formular -->
<form class="form form--inline" action="/templates/vorteilsrechner.html" method="get">
<div class="form__inner">
<div class="form-group">
<label class="label" for="current-health-insurance">Aktuelle Krankenkasse</label>
<div class="form-group__inner">
<select class="select" required="required" id="current-health-insurance" name="current-health-insurance">
<option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
<option value="aok-bayern">AOK Bayern</option>
<option value="bkk-akzo-nobel-bayern">BKK Akzo Nobel Bayern</option>
</select>
</div>
</div>
<div class="form-group">
<label class="label" for="gross-income">Mtl. Bruttoeinkommen</label>
<div class="form-group__inner">
<input class="input input--text" type="text" required="required" id="gross-income" name="gross-income" />
</div>
</div>
<div class="form__submit">
<input class="button button--blue" type="submit" value="Vorteil berechnen" />
</div>
</div>
</form>
<!-- Inline-Formular -->
<form class="form form--inline">
<div class="form__inner">
<div class="form-group">
<label class="label" for="gross-income"></label>
<div class="form-group__inner">
<input class="input input--text" type="text" placeholder="Suchbegriff eingeben" required="required" id="gross-income" name="gross-income" />
</div>
</div>
<div class="form__submit">
<input class="button button--blue" type="submit" value="Finden" />
</div>
</div>
</form>
<!-- Inline-Formular (Button nächste Zeile) -->
<form class="form form--inline" action="/templates/vorteilsrechner.html" method="get">
<div class="form__inner">
<div class="form-group">
<label class="label" for="current-health-insurance">Aktuelle Krankenkasse</label>
<div class="form-group__inner">
<select class="select" required="required" id="current-health-insurance" name="current-health-insurance">
<option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
<option value="aok-bayern">AOK Bayern</option>
<option value="bkk-akzo-nobel-bayern">BKK Akzo Nobel Bayern</option>
</select>
</div>
</div>
<div class="form-group">
<label class="label" for="gross-income">Mtl. Bruttoeinkommen</label>
<div class="form-group__inner">
<input class="input input--text" type="text" required="required" id="gross-income" name="gross-income" />
</div>
</div>
<div class="form__submit form__submit--nextline">
<input class="button button--blue" type="submit" value="Vorteil berechnen" />
</div>
</div>
</form>
<!-- Inline-Formular (Ohne Rand) -->
<form class="form form--inline">
<div class="form__inner">
<div class="form-group">
<label class="label" for="gross-income"></label>
<div class="form-group__inner">
<input class="input input--text input--borderless" type="text" placeholder="Diagnoseschlüssel eingeben (z. B. A05.9)" required="required" id="gross-income" name="gross-income" />
</div>
</div>
<div class="form__submit">
<input class="button button--blue" type="submit" value="Finden" />
</div>
</div>
</form>
<!-- Multiline-Formular (Ohne Rand und mit Footer) -->
<form class="form form--multiline">
<div class="form__inner">
<div class="form__elements">
<div class="form-group">
<label class="label" for="gross-income"></label>
<div class="form-group__inner">
<input class="input input--text input--borderless input--small" type="text" placeholder="Ort" required="required" id="gross-income" name="gross-income" />
</div>
</div>
<div class="form-group">
<label class="label" for="current-health-insurance"></label>
<div class="form-group__inner">
<select class="select select--borderless select--small" required="required" id="current-health-insurance" name="current-health-insurance">
<option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
<option>Berlin (1234)</option>
<option>Hamburg (1222)</option>
</select>
</div>
</div>
</div>
<div class="form__submit">
<input class="button button--blue" type="submit" value="Finden" />
</div>
</div>
<footer class="form__footer">
<h3 class="headline form__footer-headline headline--headline-1">25 Suchergebnisse
</h3>
</footer>
</form>
<!-- Inline-Formular (Autocomplete Suche) -->
<form class="form form--inline" action="/templates/vorteilsrechner.html" method="get">
<div class="form__inner">
<div class="form-group">
<label class="label" for="current-health-insurance">Aktuelle Krankenkasse</label>
<div class="form-group__inner">
<select class="select-choices js-select-choices select-choices--autocomplete-search" id="current-health-insurance" name="current-health-insurance" data-url="/data/krankenkasse.json">
<option value="none" placeholder="placeholder">Aktuelle Krankenkasse</option>
</select>
</div>
</div>
<div class="form-group">
<label class="label" for="gross-income">Mtl. Bruttoeinkommen</label>
<div class="form-group__inner">
<input class="input input--text" type="text" required="required" id="gross-income" name="gross-income" />
</div>
</div>
<div class="form__submit form__submit--nextline">
<input class="button button--blue" type="submit" value="Vorteil berechnen" />
</div>
</div>
</form>
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
if (id) attr.id = id;
if (action) attr.action = action;
//- Process options
if (inline) attr.class.push('form--inline');
if (multiline) attr.class.push('form--multiline');
if (hasInfo) attr.class.push('form--has-info');
if (centered) attr.class.push('form--centered');
if (wide) attr.class.push('form--wide');
//- Show title of form
if title
!= include('@headline--headline-1', {level: titleLevel || 3, text: title})
//- Render form
form.form&attributes(attr)
.form__inner
if errorExample
.has-error.has-feedback
.validation-summary-errors
ul.list-group
li.list-group-item.list-group-item-danger
span(role='alert') Das Feld X ist erforderlich. Geben Sie einen Wert ein.
//- Render form groups
if elements
//- Multiline
if multiline
.form__elements
for element in elements
!= include('@form-group', element)
//- Default
else
for element in elements
!= include('@form-group', element)
//- Render submit button
if submit
-
//- Submit attributes
submitAttr = submitAttr || {}
submitAttr.class = classList(submitAttr.class);
//- Submit options
submitOptions = submitOptions || {};
submitOptions.text = submit;
//- Multiline submit
if (submitOptions.nextLine) submitAttr.class.push('form__submit--nextline');
//- Hideable
if (submitOptions.hideable) submitAttr['data-hideable'] = true;
.form__submit&attributes(submitAttr)
input.button.button--blue(type='submit', value=submit)
//- != include('@button--blue', submitOptions)
//- Footer
if footer
footer.form__footer
!= renderPug(footer.content)
/* Standard-Formular */
{
"title": "Informationen anfordern",
"submit": "Angaben prüfen",
"errorExample": true,
"elements": [
{
"label": "Geschlecht",
"name": "gender",
"labelSettings": {
"hidden": true
},
"group": [
{
"use": "radio",
"settings": {
"text": "Frau",
"value": "female"
}
},
{
"use": "radio",
"settings": {
"text": "Mann",
"value": "male"
}
}
]
},
{
"label": "Vorname*",
"id": "forename",
"use": "input--text",
"settings": {
"error": true,
"placeholder": null,
"required": true,
"attr": {
"autocomplete": "fname"
}
}
},
{
"label": "Nachname*",
"id": "surname",
"use": "input--text",
"settings": {
"placeholder": null,
"required": true,
"attr": {
"autocomplete": "lname"
}
}
},
{
"label": "Straße, Hausnummer*",
"id": "address-1",
"use": "input--text",
"settings": {
"placeholder": null,
"required": true,
"attr": {
"autocomplete": "address-line1"
}
}
},
{
"label": "Addresszusatz",
"id": "address-2",
"use": "input--text",
"settings": {
"placeholder": null,
"attr": {
"autocomplete": "address-line2"
}
}
},
{
"label": "PLZ*",
"id": "zip",
"use": "input--text",
"settings": {
"placeholder": null,
"required": true,
"attr": {
"autocomplete": "postal-code"
}
}
},
{
"label": "Ort*",
"id": "city",
"use": "input--text",
"settings": {
"placeholder": null,
"required": true,
"attr": {
"autocomplete": "city"
}
}
},
{
"label": "E-Mail*",
"id": "mail",
"use": "input--email",
"settings": {
"placeholder": null,
"required": true,
"attr": {
"autocomplete": "email"
}
}
},
{
"label": "E-Mail bestätigen*",
"id": "mail-confirm",
"use": "input--email",
"settings": {
"placeholder": null,
"required": true,
"attr": {
"autocomplete": "email"
}
}
},
{
"label": "Ich bin",
"id": "type",
"use": "select",
"settings": {
"options": [
"Arbeitnehmer",
"Auszubildende",
"Studierende",
"Bezieher von ALG I/ II",
"Bezieher einer gesetzl. Rente",
"Beamte/Pensionäre",
"Selbstständig Tätige",
"Weitere Personengruppen"
]
}
}
]
}
/* Info-Formular */
{
"title": "Gleich ausfüllen und mehr Infos bekommen",
"submit": "Abschicken",
"elements": [
{
"label": "Mitgliedschaft",
"name": "subject",
"labelSettings": {
"hidden": true
},
"fullwide": true,
"group": [
{
"use": "radio",
"settings": {
"text": "Ja, ich möchte Mitglied der Krankenkasse hkk werden.",
"value": "membership",
"required": true,
"nextline": true
}
},
{
"use": "radio",
"settings": {
"text": "Ja, ich möchte mehr über die Krankenkasse hkk wissen. Senden Sie mir bitte Infomaterial zu.",
"value": "info",
"required": true,
"nextline": true
}
}
]
},
{
"label": "Ich bin",
"labelSettings": {
"required": true,
"modifier": "large"
},
"name": "status",
"fullwide": true,
"group": [
{
"use": "radio",
"settings": {
"required": true,
"nextline": true,
"text": "Arbeitnehmer oder selbstständig tätig.",
"value": "employee"
}
},
{
"use": "radio",
"settings": {
"required": true,
"nextline": true,
"text": "Student oder sonstiges (z.B. Künstler, Beamter).",
"value": "student"
}
}
]
},
{
"label": "Persönliche Informationen",
"name": "gender",
"labelSettings": {
"required": true,
"modifier": "large"
},
"fullwide": true,
"group": [
{
"use": "radio",
"settings": {
"text": "Frau",
"value": "female"
}
},
{
"use": "radio",
"settings": {
"text": "Herr",
"value": "male"
}
}
]
},
{
"label": "Name",
"name": "name",
"labelSettings": {
"hidden": true
},
"inline": true,
"fullwide": true,
"group": [
{
"use": "input--text",
"settings": {
"placeholder": "Vorname*",
"required": true,
"attr": {
"autocomplete": "fname"
}
}
},
{
"use": "input--text",
"settings": {
"placeholder": "Nachname*",
"required": true,
"attr": {
"autocomplete": "lname"
}
}
}
]
},
{
"label": "Geburtsdatum",
"id": "birthdate",
"use": "input--text",
"fullwide": true,
"settings": {
"placeholder": "Geburtsdatum*",
"required": true,
"type": "date",
"attr": {
"autocomplete": "birthdate"
}
}
},
{
"label": "Straße, Hausnummer",
"labelSettings": {
"hidden": true
},
"id": "address-1",
"use": "input--text",
"fullwide": true,
"settings": {
"placeholder": "Straße, Nr.*",
"required": true,
"attr": {
"autocomplete": "address-line1"
}
}
},
{
"label": "PLZ und Ort",
"name": "address-2",
"labelSettings": {
"hidden": true
},
"inline": true,
"fullwide": true,
"group": [
{
"use": "input--text",
"settings": {
"placeholder": "PLZ*",
"required": true,
"size": 25,
"attr": {
"autocomplete": "zipcode"
}
}
},
{
"use": "input--text",
"settings": {
"placeholder": "Ort*",
"required": true,
"size": 75,
"attr": {
"autocomplete": "city"
}
}
}
]
},
{
"label": "E-Mail-Addresse und Telefonnummer",
"name": "contact",
"labelSettings": {
"hidden": true
},
"inline": true,
"fullwide": true,
"group": [
{
"use": "input--text",
"settings": {
"placeholder": "E-Mail-Adresse",
"type": "email",
"attr": {
"autocomplete": "email"
}
}
},
{
"use": "input--text",
"settings": {
"placeholder": "Telefonnummer",
"type": "tel",
"attr": {
"autocomplete": "telephone"
}
}
}
]
},
{
"label": "Datenschutzerklärung",
"labelSettings": {
"hidden": true
},
"id": "privacy-policy",
"use": "checkbox",
"fullwide": true,
"settings": {
"text": null,
"html": "span.formatted-text Ich akzeptiere die #[a(href='#') Datenschutzerklärung].*\n",
"required": true
}
}
]
}
/* Mini-Formular */
{
"title": null,
"submit": "Weiter",
"inline": true,
"elements": [
{
"label": "E-Mail",
"id": "email",
"use": "input--email",
"labelSettings": {
"hidden": true
},
"settings": {
"placeholder": "E-Mail-Adresse",
"required": true,
"attr": {
"autocomplete": "email"
}
}
}
]
}
/* Inline-Formular */
{
"attr": {
"action": "/templates/vorteilsrechner.html",
"method": "get"
},
"inline": true,
"submit": "Vorteil berechnen",
"submitOptions": {
"modifier": "red",
"link": null,
"submit": true
},
"elements": [
{
"label": "Aktuelle Krankenkasse",
"id": "current-health-insurance",
"use": "select",
"settings": {
"required": true,
"options": [
{
"value": "aok-bayern",
"text": "AOK Bayern"
},
{
"value": "bkk-akzo-nobel-bayern",
"text": "BKK Akzo Nobel Bayern"
}
]
}
},
{
"label": "Mtl. Bruttoeinkommen",
"id": "gross-income",
"use": "input--text",
"settings": {
"placeholder": null,
"required": true
}
}
]
}
/* Inline-Formular */
{
"inline": true,
"submit": "Finden",
"submitOptions": {
"modifier": "blue"
},
"elements": [
{
"label": null,
"id": "gross-income",
"use": "input--text",
"settings": {
"placeholder": "Suchbegriff eingeben",
"required": true
}
}
]
}
/* Inline-Formular (Button nächste Zeile) */
{
"attr": {
"action": "/templates/vorteilsrechner.html",
"method": "get"
},
"inline": true,
"submit": "Vorteil berechnen",
"submitOptions": {
"modifier": "red",
"nextLine": true,
"link": null,
"submit": true
},
"elements": [
{
"label": "Aktuelle Krankenkasse",
"id": "current-health-insurance",
"use": "select",
"settings": {
"required": true,
"options": [
{
"value": "aok-bayern",
"text": "AOK Bayern"
},
{
"value": "bkk-akzo-nobel-bayern",
"text": "BKK Akzo Nobel Bayern"
}
]
}
},
{
"label": "Mtl. Bruttoeinkommen",
"id": "gross-income",
"use": "input--text",
"settings": {
"placeholder": null,
"required": true
}
}
]
}
/* Inline-Formular (Ohne Rand) */
{
"inline": true,
"submit": "Finden",
"submitOptions": {
"modifier": "blue"
},
"elements": [
{
"label": null,
"id": "gross-income",
"use": "input--text",
"settings": {
"placeholder": "Diagnoseschlüssel eingeben (z. B. A05.9)",
"required": true,
"borderless": true
}
}
]
}
/* Multiline-Formular (Ohne Rand und mit Footer) */
{
"multiline": true,
"submit": "Finden",
"submitOptions": {
"modifier": "blue"
},
"elements": [
{
"label": null,
"id": "gross-income",
"use": "input--text",
"settings": {
"size": "small",
"placeholder": "Ort",
"required": true,
"borderless": true
}
},
{
"label": null,
"id": "current-health-insurance",
"use": "select",
"settings": {
"size": "small",
"required": true,
"borderless": true,
"options": [
"Berlin (1234)",
"Hamburg (1222)"
]
}
}
],
"footer": {
"content": "!= include('@headline--headline-1', {attr: {class: 'form__footer-headline'}, level: 3, text: '25 Suchergebnisse'})\n"
}
}
/* Inline-Formular (Autocomplete Suche) */
{
"attr": {
"action": "/templates/vorteilsrechner.html",
"method": "get"
},
"inline": true,
"submit": "Vorteil berechnen",
"submitOptions": {
"modifier": "red",
"nextLine": true,
"link": null,
"submit": true
},
"elements": [
{
"label": "Aktuelle Krankenkasse",
"id": "current-health-insurance",
"use": "select-choices--insurance-autocomplete-search"
},
{
"label": "Mtl. Bruttoeinkommen",
"id": "gross-income",
"use": "input--text",
"settings": {
"placeholder": null,
"required": true
}
}
]
}
.form {
margin-bottom: 2rem;
margin-top: 2rem;
}
.form__submit {
height: 4.5rem;
margin: 3rem 0 4.5rem;
@include mq($from: m) {
margin: 4.5rem 0;
}
}
.form__footer {
border-top: 1px solid rgba($color-anthracite, 0.2);
margin-top: 1rem;
padding-top: 2rem;
@include mq($from: m) {
.form__footer-headline {
margin-bottom: 0;
}
}
}
.form__footer-icon-list {
font-size: 1.5rem;
margin-top: -0.5rem;
}
.form--has-info {
padding-right: 3rem;
}
.form--centered {
margin: 2rem auto;
max-width: 54rem;
&.form--has-info {
max-width: 57rem;
}
&.form--wide {
max-width: 74rem;
}
}
.form--inline {
margin: 0;
.form__inner {
align-content: stretch;
align-items: flex-end;
display: flex;
flex-wrap: wrap;
margin-left: -1rem;
margin-right: -1rem;
}
.form__submit {
margin-bottom: 2rem;
margin-top: 0;
padding-left: 1rem;
padding-right: 1rem;
}
.form__submit--nextline {
margin-bottom: 0;
width: 100%;
}
.form__submit--right {
@include mq($from: m) {
text-align: right;
}
}
}
.form--multiline {
margin: 0;
.form__inner {
display: flex;
@include mq($until: m) {
flex-wrap: wrap;
}
}
.form__elements {
width: 100%;
}
.form__submit {
align-self: flex-end;
margin-bottom: 2rem;
margin-top: 0;
@include mq($from: m) {
margin-left: 2rem;
}
}
}
.validation-summary-errors {
.list-group-item-danger {
color: $color-red;
}
}
.form {
.select-choices__list--dropdown .select-choices__input {
padding-left: 1.5rem;
}
.select-choices__inner {
border-color: $color-anthracite;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.select-choices .select-choices__inner:focus,
.select-choices .select-choices__inner:hover {
border-color: $color-steelgrey-xdark;
}
.select-choices__list--dropdown {
border-color: $color-steelgrey-xdark;
bottom: auto;
top: calc(100% + 2px);
}
.select-choices__list--dropdown .select-choices__item {
border-bottom: 0;
}
.select-choices__list--dropdown .select-choices__item::after {
display: none;
}
.select-choices.is-focused.is-open .select-choices__inner {
border-radius: 3px;
}
.select-choices__inner .select-choices__list--single {
display: block;
}
.select-choices__inner .select-choices__item--selectable {
overflow: hidden;
text-overflow: ellipsis;
}
}
There are no notes for this item.