<link rel="stylesheet" href="/sitecore/wffm/themes/base/all.css" />
<link rel="stylesheet" href="/sitecore/wffm/themes/Fields.css" />
<link rel="stylesheet" href="/sitecore/wffm/themes/Custom.css" />
<form action="/form/Index?wffm.FormItemId=f66196be-f6fd-43c8-9b39-101d01ab534c&wffm.Id=f324d78d-4440-4bba-b41d-05dc046bdfcf" class="text-left" data-wffm="{F66196BE-F6FD-43C8-9B39-101D01AB534C}" data-wffm-ajax="True" enctype="multipart/form-data" id="wffmf324d78d44404bbab41d05dc046bdfcf"
method="post" name="wffmf324d78d44404bbab41d05dc046bdfcf" role="form">
<input name="__RequestVerificationToken" type="hidden" value="Dd5693fL4f-WW0_zfkzeQzBA09S4dXId8RMSO8pkJvcOp9wYA1VAAz1Av5VyJjetrxM6An577Kc5EFbD5CpdMk86wPGuCoPlo33Z8JP51KE1"><input id="wffmf324d78d44404bbab41d05dc046bdfcf_Id" name="wffmf324d78d44404bbab41d05dc046bdfcf.Id"
type="hidden" value="f324d78d-4440-4bba-b41d-05dc046bdfcf"><input id="wffmf324d78d44404bbab41d05dc046bdfcf_FormItemId" name="wffmf324d78d44404bbab41d05dc046bdfcf.FormItemId" type="hidden" value="{F66196BE-F6FD-43C8-9B39-101D01AB534C}">
<div class="page-header">
<h2>
Gleich ausfüllen und mehr Infos bekommen
</h2>
</div>
<div class="has-error has-feedback">
<div class="validation-summary-valid" data-valmsg-summary="true">
<ul class="list-group">
<li style="display:none">
</li>
</ul>
</div>
</div>
<div class="required-field form-group">
<input id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_0__Fields_0__Id" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[0].Fields[0].Id" type="hidden" value="{AD5E1A15-DA82-4801-8CFB-D4396C37299F}"><label class="control-label" for="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_0__Fields_0__Value">Ich möchte</label>
<div class="checkbox">
<label><input id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_0__Fields_0__Value" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[0].Fields[0].Value" type="checkbox" value="Ja, ich möchte Mitglied der Krankenkasse hkk werden."> Ja, ich möchte Mitglied der Krankenkasse hkk werden.</label>
</div>
<div class="checkbox">
<label><input id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_0__Fields_0__Value" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[0].Fields[0].Value" type="checkbox" value="Ja, ich möchte mehr über die Krankenkasse hkk wissen. Senden Sie mir bitte Infomaterial zu."> Ja, ich möchte mehr über die Krankenkasse hkk wissen. Senden Sie mir bitte Infomaterial zu.</label>
</div>
<span class="field-validation-valid help-block" data-valmsg-for="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[0].Fields[0].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field form-group">
<input id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_0__Fields_2__Id" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[0].Fields[2].Id" type="hidden" value="{671B9A59-C9A9-44F0-B98F-7FBCCA6AA0D3}"><label class="control-label" for="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_0__Fields_2__Value">Ich bin</label>
<select
class="form-control" data-val="true" data-val-required="Das Feld Ich bin ist erforderlich. Geben Sie einen Wert ein." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_0__Fields_2__Value"
name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[0].Fields[2].Value">
<option value="Arbeitnehmer oder Auszubildender">
Arbeitnehmer oder Auszubildender
</option>
<option value="Selbstständig oder Sonstiges">
Selbstständig oder Sonstiges
</option>
<option value="Rentner">
Rentner
</option>
<option value="Familienangehöriger">
Familienangehöriger
</option>
<option value="Studierender">
Studierender
</option>
</select><span class="field-validation-valid help-block" data-valmsg-for="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[0].Fields[2].Value" data-valmsg-replace="true"></span>
</div>
<fieldset class="scfSectionBorder">
<legend>Persönliche Informationen</legend>
<div class="row">
<div class="col-md-12">
<div class="required-field halfAvailableWidth form-group">
<input id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_0__Id" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[0].Id" type="hidden" value="{BC2F6CA5-4FC9-438D-90C7-92E10E963000}"><label class="control-label"
for="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_0__Value">Vorname</label><input class=" form-control text-box single-line" data-val="true" data-val-length="Das Feld Vorname muss zwischen 0 und 256 Zeichen aufweisen." data-val-length-max="256"
data-val-required="Das Feld Vorname ist erforderlich. Geben Sie einen Wert ein." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_0__Value" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[0].Value"
placeholder="" style="" type="text" value=""><span class="field-validation-valid help-block" data-valmsg-for="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[0].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field halfAvailableWidth form-group">
<input id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_1__Id" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[1].Id" type="hidden" value="{0F29839D-1060-4F7D-B3CD-E7C6131390FA}"><label class="control-label"
for="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_1__Value">Nachname</label><input class=" form-control text-box single-line" data-val="true" data-val-length="Das Feld Nachname muss zwischen 0 und 256 Zeichen aufweisen."
data-val-length-max="256" data-val-required="Das Feld Nachname ist erforderlich. Geben Sie einen Wert ein." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_1__Value"
name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[1].Value" placeholder="" style="" type="text" value=""><span class="field-validation-valid help-block" data-valmsg-for="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[1].Value"
data-valmsg-replace="true"></span>
</div>
<div class="required-field scfDatePickerBorder form-group">
<input id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_2__Id" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[2].Id" type="hidden" value="{C61EE769-6070-4A75-A9EE-A7C9D7C1D67C}"><label class="control-label"
for="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_2__Value">Geburtsdatum</label>
<script type="text/javascript">
typeof WffmFieldsData == "undefined" && (window.WffmFieldsData = {});
window.WffmFieldsData.wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_2__Value = {
defaultDate: new Date("18-05-18"),
dateFormat: "y-mm-dd",
minDate: new Date("2000", "0", "1"),
maxDate: new Date("2019", "4", "18")
}
</script><input class="form-control datepicker text-box single-line" data-val="true" data-val-required="Das Feld Geburtsdatum ist erforderlich. Geben Sie einen Wert ein." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}"
id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_2__Value" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[2].Value" type="text" value="18-05-18"><span class="field-validation-valid help-block" data-valmsg-for="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[2].Value"
data-valmsg-replace="true"></span>
</div>
<div class="required-field form-group">
<input id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_3__Id" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[3].Id" type="hidden" value="{A5025794-8419-450B-96F4-F0C8F78090DF}"><label class="control-label"
for="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_3__Value">Straße, Nr.</label><input class=" form-control text-box single-line" data-val="true" data-val-length="Das Feld Straße, Nr. muss zwischen 0 und 256 Zeichen aufweisen."
data-val-length-max="256" data-val-required="Das Feld Straße, Nr. ist erforderlich. Geben Sie einen Wert ein." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_3__Value"
name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[3].Value" placeholder="" style="" type="text" value=""><span class="field-validation-valid help-block" data-valmsg-for="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[3].Value"
data-valmsg-replace="true"></span>
</div>
<div class="required-field halfAvailableWidth form-group">
<input id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_4__Id" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[4].Id" type="hidden" value="{B0BF0FF6-BD6A-495F-B287-74C982574AD1}"><label class="control-label"
for="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_4__Value">PLZ</label><input class=" form-control text-box single-line" data-val="true" data-val-range="Geben Sie für das Feld PLZ einen gültigen Wert ein." data-val-range-max="2147483647"
data-val-range-min="0" data-val-range-tracking="{844BBD40-91F6-42CE-8823-5EA4D089ECA2}" data-val-regex="Geben Sie für das Feld PLZ einen gültigen Wert ein." data-val-regex-pattern="^[-,+]{0,1}\d*\.{0,1}\d+$" data-val-regex-tracking="{844BBD40-91F6-42CE-8823-5EA4D089ECA2}"
data-val-required="Das Feld PLZ ist erforderlich. Geben Sie einen Wert ein." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_4__Value" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[4].Value"
placeholder="" style="" type="text" value=""><span class="field-validation-valid help-block" data-valmsg-for="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[4].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field halfAvailableWidth form-group">
<input id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_5__Id" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[5].Id" type="hidden" value="{DA6C2DF3-1A08-4B48-9DB3-3BAF3134A7D1}"><label class="control-label"
for="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_5__Value">Ort</label><input class=" form-control text-box single-line" data-val="true" data-val-length="Das Feld Ort muss zwischen 0 und 256 Zeichen aufweisen." data-val-length-max="256"
data-val-required="Das Feld Ort ist erforderlich. Geben Sie einen Wert ein." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_5__Value" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[5].Value"
placeholder="" style="" type="text" value=""><span class="field-validation-valid help-block" data-valmsg-for="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[5].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field halfAvailableWidth form-group">
<input id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_6__Id" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[6].Id" type="hidden" value="{101BE834-0AE0-4122-A16F-9E8D0F19259B}"><label class="control-label"
for="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_6__Value">E-Mail-Adresse</label><input class=" form-control text-box single-line" data-val="true" data-val-length="Das Feld E-Mail-Adresse muss zwischen 0 und 256 Zeichen aufweisen."
data-val-length-max="256" data-val-regex="Geben Sie für das Feld E-Mail-Adresse eine gültige E-Mail-Adresse ein." data-val-regex-pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,17}$" data-val-required="Das Feld E-Mail-Adresse ist erforderlich. Geben Sie einen Wert ein."
data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_6__Value" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[6].Value" placeholder="" style=""
type="email" value=""><span class="field-validation-valid help-block" data-valmsg-for="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[6].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field halfAvailableWidth form-group">
<input id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_7__Id" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[7].Id" type="hidden" value="{38A6E812-6EB2-4CB0-8AAB-00A273AF28A7}"><label class="control-label"
for="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_7__Value">Telefonnummer</label><input class=" form-control text-box single-line" data-val="true" data-val-length="Das Feld Telefonnummer muss zwischen 0 und 256 Zeichen aufweisen."
data-val-length-max="256" data-val-required="Das Feld Telefonnummer ist erforderlich. Geben Sie einen Wert ein." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_7__Value"
name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[7].Value" placeholder="" style="" type="text" value=""><span class="field-validation-valid help-block" data-valmsg-for="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[7].Value"
data-valmsg-replace="true"></span>
</div>
<div class="required-field form-group">
<input id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_8__Id" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[8].Id" type="hidden" value="{6C61DE41-CE65-4378-94D2-C0B6B3D7233C}">
<div class="checkbox">
<label><input data-val="true" data-val-ischecked="Das Feld Ich akzeptiere die Datenschutzerklärungen** ist erforderlich. Geben Sie einen Wert ein." data-val-ischecked-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" data-val-required="Das Feld "Value" ist erforderlich." id="wffmf324d78d44404bbab41d05dc046bdfcf_Sections_1__Fields_8__Value" name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[8].Value" type="checkbox" value="true"><input name="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[8].Value" type="hidden" value="false"> Ich akzeptiere die Datenschutzerklärungen**</label>
</div>
<span class="field-validation-valid help-block" data-valmsg-for="wffmf324d78d44404bbab41d05dc046bdfcf.Sections[1].Fields[8].Value" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</fieldset>
<p>
** Datenschutztext mit <a href="http://google.de">Link</a>
</p>
<div class="form-submit-border">
<input class="btn btn-default" type="submit" value="Absenden">
</div>
</form>
<script type="text/javascript">
window['_gaUserPrefs'] = {
ioo: function() {
return true;
}
};
</script>
<script src="/sitecore/wffm/libs/jquery/jquery-2.1.3.min.js"></script>
<script src="/sitecore/wffm/libs/jquery/jquery-ui-1.11.3.min.js"></script>
<script src="/sitecore/wffm/libs/jquery/jquery.validate.min.js"></script>
<script src="/sitecore/wffm/libs/jquery/jquery.validate.unobtrusive.min.js"></script>
<script src="/sitecore/wffm/libs/bootstrap/bootstrap.min.js"></script>
<script src="/sitecore/wffm/wffm.min.js"></script>
<script src="/sitecore/wffm/main.min.js"></script>
link(rel='stylesheet', href='/sitecore/wffm/themes/base/all.css')
link(rel='stylesheet', href='/sitecore/wffm/themes/Fields.css')
link(rel='stylesheet', href='/sitecore/wffm/themes/Custom.css')
if variant === 'elements'
include ./_elements.pug
else if variant === 'bonus-form'
include ./_bonus-form.pug
script(type='text/javascript').
window['_gaUserPrefs'] = { ioo: function() { return true; } };
script(src='/sitecore/wffm/libs/jquery/jquery-2.1.3.min.js')
script(src='/sitecore/wffm/libs/jquery/jquery-ui-1.11.3.min.js')
script(src='/sitecore/wffm/libs/jquery/jquery.validate.min.js')
script(src='/sitecore/wffm/libs/jquery/jquery.validate.unobtrusive.min.js')
script(src='/sitecore/wffm/libs/bootstrap/bootstrap.min.js')
script(src='/sitecore/wffm/wffm.min.js')
script(src='/sitecore/wffm/main.min.js')
{
"variant": "bonus-form"
}
@import 'atoms/input/input';
// We cannot follow linting rules here because we need hacky workarounds to
// target sitecore's 'Web Forms for Marketers' module.
/* stylelint-disable */
$wffm-form-control-size: 4.5rem;
$wffm-form-control-font-size: 1.7rem;
$wffm-form-select-size: 4.5rem;
$wffm-form-select-font-size: 1.7rem;
form[data-wffm] {
// Headline
.page-header h1,
.page-header h2,
.page-header h3 {
color: $color-blue;
display: block;
font-size: 1.9rem;
font-weight: bold;
line-height: 1.25;
margin-bottom: 1rem;
@include mq($from: m) {
font-size: 2.3rem;
margin-bottom: 1.5rem;
}
@include mq($from: l) {
margin-bottom: 2rem;
}
}
// Fieldset
fieldset {
border: 0;
padding: 0;
}
// Legend
legend {
color: $color-steelgrey-dark;
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 1rem;
}
// Item
.form-group {
margin: 0 0 2rem;
table {
margin-bottom: 0;
}
}
// Label
.control-label {
display: block;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.form-control {
background-color: #fff;
border: 1px solid $color-steelgrey-dark;
border-radius: 3px;
color: $root-color;
display: block;
font-size: $wffm-form-control-font-size;
font-weight: normal;
height: $wffm-form-control-size;
line-height: $root-line-height;
max-width: 100%;
padding: calc((#{$wffm-form-control-size} - #{$root-line-height} * #{$wffm-form-control-font-size}) / 2 - 1px) 1rem;
transition-duration: $default-transition-duration;
transition-property: border-color;
width: 100%;
}
// Required marker
.required-field .control-label::after,
.required-field .checkbox label::after {
content: ' *';
}
// Validation
.form-control.input-validation-error {
background-color: rgba($color-red, 0.2);
border-color: $color-red;
color: $color-red;
}
// Focus, Hover
.form-control:hover,
.form-control:focus {
border-color: $color-steelgrey-xdark;
outline: 0;
}
// Placeholder
.form-control::placeholder {
color: $color-steelgrey-dark;
opacity: 1;
}
// Disabled as last to override hover/focus styles
.form-control[disabled] {
border-color: $color-steelgrey;
color: $color-steelgrey-dark;
}
// Input as textarea
textarea.form-control {
min-height: 2 * $wffm-form-control-size;
}
select.form-control {
@mixin select-svg($color: $color-steelgrey-xdark) {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6" width="10" height="6"><path fill="' + $color + '" fill-rule="evenodd" d="M4.96 3.54L1.7.3C1.33-.1.7-.1.3.3-.1.67-.1 1.3.3 1.7l3.95 3.96c.4.4 1.02.4 1.4 0L9.63 1.7c.4-.38.4-1.02 0-1.4-.4-.4-1.02-.4-1.4 0L4.95 3.53z"/></svg>');
}
$calc-padding: calc((#{$default-input-size} - #{$root-line-height} * #{$default-input-font-size}) / 2 - 1px);
@include select-svg();
appearance: none;
background-color: #fff;
background-position: calc(100% - 1rem - 1px) 50%;
background-repeat: no-repeat;
background-size: 10px 6px;
border: 1px solid $color-steelgrey-dark;
border-radius: 3px;
color: $root-color;
cursor: pointer;
display: block;
font-size: $wffm-form-select-font-size;
font-weight: normal;
height: $wffm-form-select-size;
line-height: $root-line-height;
max-width: 100%;
padding: $calc-padding 3rem $calc-padding 1rem;
position: relative;
text-overflow: ellipsis;
transition-duration: $default-transition-duration;
transition-property: border-color;
width: 100%;
}
select.form-control option {
color: $root-color;
}
// Hide select arrow on IE10+
select.form-control::-ms-expand {
display: none;
}
// Focus, Hover
select.form-control:hover,
select.form-control:focus {
border-color: $color-steelgrey-xdark;
outline: 0;
}
// Select list
select[size] {
$calc-padding: calc((#{$default-input-size} - #{$root-line-height} * #{$default-input-font-size}) / 2 - 1px);
background: none;
height: 100%;
padding: $calc-padding 1rem;
}
// Checkbox
.checkbox {
cursor: default;
display: block;
margin-left: 0;
padding: 0;
}
.checkbox input {
border: 1px solid $color-steelgrey-xdark;
border-radius: 3px;
cursor: pointer;
flex-shrink: 0;
height: 2rem;
margin-right: 0.75rem;
margin-top: 0.3rem;
width: 2rem;
}
.checkbox label {
cursor: pointer;
display: inline-flex;
font-size: 1.5rem;
}
// Radio
.radio {
cursor: default;
display: block;
margin-left: 0;
padding: 0;
}
.radio input {
border: 1px solid $color-steelgrey-xdark;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
height: 2rem;
margin-right: 0.75rem;
margin-top: 0.3rem;
width: 2rem;
}
.radio label {
cursor: pointer;
display: inline-flex;
font-size: 1.5rem;
}
// File
input[type=file] {
font-size: 1.5rem;
}
// Help-Block
.help-block {
color: $color-steelgrey-xdark;
display: block;
font-size: 1.5rem;
margin-bottom: 1rem;
margin-top: 0.5rem;
}
.help-block.field-validation-error {
color: $color-red;
font-weight: bold;
}
.list-group-item-danger {
color: $color-red;
}
// Submit container
.form-submit-border {
height: 4.5rem;
margin: 3rem 0 4.5rem;
// text-align: right; // TODO
@include mq($from: m) {
margin: 4.5rem 0;
}
}
// Submit Button
.form-submit-border .btn {
background-color: $color-red;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1.4rem;
font-weight: bold;
height: $default-input-size;
line-height: calc(#{$default-input-size} - 4px);
margin: 0 auto;
max-width: 100%;
padding: 0 calc(3rem - 2px);
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition-duration: $default-transition-duration;
transition-property: background-color, color, border-color, text-decoration;
user-select: none;
width: auto;
}
.form-submit-border .btn:focus,
.form-submit-border .btn:hover {
background-color: $color-red-dark;
}
// Layout
.form-group,
.halfAvailableWidth,
.thirdAvailableWidth {
display: block;
float: none;
max-width: 54rem;
width: 100%;
}
@include mq($from: m) {
.row {
overflow: hidden;
> .col-md-12 {
display: flex;
flex-wrap: wrap;
margin-left: -0.75rem;
margin-right: -0.75rem;
> .form-group {
flex-basis: calc(100% - 1.5rem);
flex-grow: 1;
margin-left: 0.75rem;
margin-right: 0.75rem;
max-width: none;
width: calc(100% - 1.5rem);
max-width: none;
}
> .halfAvailableWidth {
flex-basis: calc(50% - 1.5rem);
flex-grow: 0;
width: calc(50% - 1.5rem);
}
> .thirdAvailableWidth {
flex-basis: calc(#{percentage(1/3)} - 2rem);
flex-grow: 0;
width: calc(#{percentage(1/3)} - 2rem);
}
// Multiselects need an explizit height in flex box layout
select[size] {
height: 14rem;
}
}
}
}
// Boxed style for all forms in landing pages
// TODO: Remove this workaround when backend uses the right templates.
.landing-page__container & {
border: 0.5rem solid $color-steelgrey-light;
margin: 0 auto 3rem;
max-width: 82.5rem;
padding: 2rem 2rem 0.5rem;
}
}
There are no notes for this item.