<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&amp;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&#246;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&#246;chte Mitglied der Krankenkasse hkk werden."> Ja, ich m&#246;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&#246;chte mehr &#252;ber die Krankenkasse hkk wissen. Senden Sie mir bitte Infomaterial zu."> Ja, ich m&#246;chte mehr &#252;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&#228;ndig oder Sonstiges
            </option>
            <option value="Rentner">
                Rentner
            </option>
            <option value="Familienangehöriger">
                Familienangeh&#246;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&#223;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 &quot;Value&quot; 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"
}
  • Content:
    @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;
      }
    }
    
  • URL: /components/raw/wffm/wffm.scss
  • Filesystem Path: src/components/organisms/wffm/wffm.scss
  • Size: 7.7 KB

There are no notes for this item.