All Form Elements 

<div class="all-form-elements page-main">

    <div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_2">
        <form method="post" enctype="multipart/form-data" id="gform_2" action="/">
            <div class="gform_body">
                <ul id="gform_fields_2" class="gform_fields top_label form_sublabel_below description_below">
                    <li id="field_2_1" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label" for="input_2_1">Untitled</label>
                        <div class="ginput_container ginput_container_text">
                            <input name="input_1" id="input_2_1" type="text" value="" class="medium" aria-invalid="false" data-com.onepassword.iv="">
                        </div>
                    </li>

                    <li id="field_2_2" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label" for="input_2_2">Untitled</label>
                        <div class="ginput_container ginput_container_text">
                            <input name="input_2" id="input_2_2" type="text" value="" class="medium" aria-invalid="false" data-com.onepassword.iv="">
                        </div>
                    </li>

                    <li id="field_1_6" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label" for="input_1_6">Your message<span class="gfield_required">*</span></label>
                        <div class="ginput_container ginput_container_textarea focused">
                            <textarea name="input_6" id="input_1_6" class="textarea medium" aria-required="true" aria-invalid="false" rows="10" cols="50"></textarea>
                        </div>
                    </li>

                    <li id="field_2_3" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label" for="input_2_3">Untitled</label>
                        <div class="ginput_container ginput_container_select">
                            <select name="input_3" id="input_2_3" class="medium gfield_select" aria-invalid="false" tabindex="-1" aria-hidden="true">
                                <option value="First Choice">First Choice</option>
                                <option value="Second Choice">Second Choice</option>
                                <option value="Third Choice">Third Choice</option>
                            </select>
                        </div>
                    </li>
                    <li id="field_2_4" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label" for="input_2_4">Untitled</label>
                        <div class="ginput_container ginput_container_multiselect">
                            <select multiple="" size="7" name="input_4[]" id="input_2_4" class="medium gfield_select" tabindex="-1" aria-hidden="true">
                                <option value="First Choice">First Choice</option>
                                <option value="Second Choice">Second Choice</option>
                                <option value="Third Choice">Third Choice</option>
                            </select>
                        </div>
                    </li>
                    <li id="field_2_5" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label" for="input_2_5">Number</label>
                        <div class="ginput_container ginput_container_number">
                            <input name="input_5" id="input_2_5" type="text" value="" class="medium" aria-invalid="false" data-com.onepassword.iv="">
                        </div>
                    </li>
                    <li id="field_2_6" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label">Untitled</label>
                        <div class="ginput_container ginput_container_checkbox">
                            <ul class="gfield_checkbox" id="input_2_6">
                                <li class="gchoice_2_6_1 focused">
                                    <input name="input_6.1" type="checkbox" value="First Choice" id="choice_2_6_1">
                                    <label for="choice_2_6_1" id="label_2_6_1">First Choice</label>
                                </li>
                                <li class="gchoice_2_6_2 focused">
                                    <input name="input_6.2" type="checkbox" value="Second Choice" id="choice_2_6_2">
                                    <label for="choice_2_6_2" id="label_2_6_2">Second Choice</label>
                                </li>
                                <li class="gchoice_2_6_3 focused">
                                    <input name="input_6.3" type="checkbox" value="Third Choice" id="choice_2_6_3">
                                    <label for="choice_2_6_3" id="label_2_6_3">Third Choice</label>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li id="field_2_7" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label">Untitled</label>
                        <div class="ginput_container ginput_container_radio">
                            <ul class="gfield_radio" id="input_2_7">
                                <li class="gchoice_2_7_0 focused">
                                    <input name="input_7" type="radio" value="First Choice" id="choice_2_7_0" data-com.onepassword.iv="First Choice">
                                    <label for="choice_2_7_0" id="label_2_7_0">First Choice</label>
                                </li>
                                <li class="gchoice_2_7_1 focused">
                                    <input name="input_7" type="radio" value="Second Choice" id="choice_2_7_1" data-com.onepassword.iv="Second Choice">
                                    <label for="choice_2_7_1" id="label_2_7_1">Second Choice</label>
                                </li>
                                <li class="gchoice_2_7_2 focused">
                                    <input name="input_7" type="radio" value="Third Choice" id="choice_2_7_2" data-com.onepassword.iv="Third Choice">
                                    <label for="choice_2_7_2" id="label_2_7_2">Third Choice</label>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li id="field_2_8" class="gfield gform_hidden field_sublabel_below field_description_below gfield_visibility_visible">
                        <input name="input_8" id="input_2_8" type="hidden" class="gform_hidden" aria-invalid="false" value="">
                    </li>
                    <li id="field_2_10" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label gfield_label_before_complex" for="input_2_10_3">Name</label>
                        <div class="ginput_complex ginput_container no_prefix has_first_name no_middle_name has_last_name no_suffix gf_name_has_2 ginput_container_name gfield_trigger_change" id="input_2_10">
                            <span id="input_2_10_3_container" class="name_first">
                                <input type="text" name="input_10.3" id="input_2_10_3" value="" aria-label="First name" aria-invalid="false" data-com.onepassword.iv="">
                                <label for="input_2_10_3">First</label>
                            </span>
                            <span id="input_2_10_6_container" class="name_last">
                                <input type="text" name="input_10.6" id="input_2_10_6" value="" aria-label="Last name" aria-invalid="false" data-com.onepassword.iv="">
                                <label for="input_2_10_6">Last</label>
                            </span>

                        </div>
                    </li>
                    <li id="field_2_11" class="gfield field_sublabel_below field_description_below gfield_visibility_visible focused">
                        <label class="gfield_label" for="input_2_11">Date</label>
                        <div class="ginput_container ginput_container_date">
                            <input name="input_11" id="input_2_11" type="text" value="" class="datepicker medium mdy datepicker_no_icon hasDatepicker" data-com.onepassword.iv="">
                        </div>
                        <input type="hidden" id="gforms_calendar_icon_input_2_11" class="gform_hidden" value="http://local.ipsen.com/wp-content/plugins/gravityforms/images/calendar.png">
                    </li>
                    <li id="field_2_12" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label gfield_label_before_complex" for="input_2_12_1">Time</label>
                        <div class="clear-multi">
                            <div class="gfield_time_hour ginput_container ginput_container_time" id="input_2_12">
                                <input type="text" maxlength="2" name="input_12[]" id="input_2_12_1" value="" data-com.onepassword.iv="">
                                <i>:</i>
                                <label for="input_2_12_1">HH</label>
                            </div>
                            <div class="gfield_time_minute ginput_container ginput_container_time">
                                <input type="text" maxlength="2" name="input_12[]" id="input_2_12_2" value="" data-com.onepassword.iv="">
                                <label for="input_2_12_2">MM</label>
                            </div>
                            <div class="gfield_time_ampm ginput_container ginput_container_time">
                                <select name="input_12[]" id="input_2_12_3" tabindex="-1" aria-hidden="true">
                                    <option value="am">AM</option>
                                    <option value="pm">PM</option>
                                </select>
                            </div>
                        </div>
                    </li>
                    <li id="field_2_13" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label" for="input_2_13">Phone</label>
                        <div class="ginput_container ginput_container_phone">
                            <input name="input_13" id="input_2_13" type="text" value="" class="medium" aria-invalid="false" data-com.onepassword.iv="">
                        </div>
                    </li>
                    <li id="field_2_14" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label gfield_label_before_complex" for="input_2_14_1">Address</label>
                        <div class="ginput_complex ginput_container has_street has_street2 has_city has_state has_zip has_country ginput_container_address gfield_trigger_change" id="input_2_14">
                            <span class="ginput_full address_line_1" id="input_2_14_1_container">
                                <input type="text" name="input_14.1" id="input_2_14_1" value="" data-com.onepassword.iv="">
                                <label for="input_2_14_1" id="input_2_14_1_label">Street Address</label>
                            </span>
                            <span class="ginput_full address_line_2" id="input_2_14_2_container">
                                <input type="text" name="input_14.2" id="input_2_14_2" value="" data-com.onepassword.iv="">
                                <label for="input_2_14_2" id="input_2_14_2_label">Address Line 2</label>
                            </span>
                            <span class="ginput_left address_city" id="input_2_14_3_container">
                                <input type="text" name="input_14.3" id="input_2_14_3" value="" data-com.onepassword.iv="">
                                <label for="input_2_14_3" id="input_2_14_3_label">City</label>
                            </span>
                            <span class="ginput_right address_state" id="input_2_14_4_container">
                                <input type="text" name="input_14.4" id="input_2_14_4" value="" data-com.onepassword.iv="">
                                <label for="input_2_14_4" id="input_2_14_4_label">County / State / Region</label>
                            </span>
                            <span class="ginput_left address_zip" id="input_2_14_5_container">
                                <input type="text" name="input_14.5" id="input_2_14_5" value="" data-com.onepassword.iv="">
                                <label for="input_2_14_5" id="input_2_14_5_label">ZIP / Postal Code</label>
                            </span>
                            <span class="ginput_right address_country" id="input_2_14_6_container">
                                <select name="input_14.6" id="input_2_14_6" tabindex="-1" aria-hidden="true">
                                    <option value="" selected="selected"></option><option value="Afghanistan">Afghanistan</option>
                                    <option value="Albania">Albania</option><option value="Algeria">Algeria</option>
                                    <option value="American Samoa">American Samoa</option>
                                    <option value="Andorra">Andorra</option>
                                    <option value="Angola">Angola</option>
                                    <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                                    <option value="Argentina">Argentina</option>
                                    <option value="Armenia">Armenia</option>
                                    <option value="Australia">Australia</option><option value="Austria">Austria</option><option value="Azerbaijan">Azerbaijan</option><option value="Bahamas">Bahamas</option><option value="Bahrain">Bahrain</option><option value="Bangladesh">Bangladesh</option><option value="Barbados">Barbados</option><option value="Belarus">Belarus</option><option value="Belgium">Belgium</option><option value="Belize">Belize</option><option value="Benin">Benin</option><option value="Bermuda">Bermuda</option><option value="Bhutan">Bhutan</option><option value="Bolivia">Bolivia</option><option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option><option value="Botswana">Botswana</option><option value="Brazil">Brazil</option><option value="Brunei">Brunei</option><option value="Bulgaria">Bulgaria</option><option value="Burkina Faso">Burkina Faso</option><option value="Burundi">Burundi</option><option value="Cambodia">Cambodia</option><option value="Cameroon">Cameroon</option><option value="Canada">Canada</option><option value="Cape Verde">Cape Verde</option><option value="Cayman Islands">Cayman Islands</option><option value="Central African Republic">Central African Republic</option><option value="Chad">Chad</option><option value="Chile">Chile</option><option value="China">China</option><option value="Colombia">Colombia</option><option value="Comoros">Comoros</option><option value="Congo, Democratic Republic of the">Congo, Democratic Republic of the</option><option value="Congo, Republic of the">Congo, Republic of the</option><option value="Costa Rica">Costa Rica</option><option value="Côte d'Ivoire">Côte d'Ivoire</option><option value="Croatia">Croatia</option><option value="Cuba">Cuba</option><option value="Curaçao">Curaçao</option><option value="Cyprus">Cyprus</option><option value="Czech Republic">Czech Republic</option><option value="Denmark">Denmark</option><option value="Djibouti">Djibouti</option><option value="Dominica">Dominica</option><option value="Dominican Republic">Dominican Republic</option><option value="East Timor">East Timor</option><option value="Ecuador">Ecuador</option><option value="Egypt">Egypt</option><option value="El Salvador">El Salvador</option><option value="Equatorial Guinea">Equatorial Guinea</option><option value="Eritrea">Eritrea</option><option value="Estonia">Estonia</option><option value="Ethiopia">Ethiopia</option><option value="Faroe Islands">Faroe Islands</option><option value="Fiji">Fiji</option><option value="Finland">Finland</option><option value="France">France</option><option value="French Polynesia">French Polynesia</option><option value="Gabon">Gabon</option><option value="Gambia">Gambia</option><option value="Georgia">Georgia</option><option value="Germany">Germany</option><option value="Ghana">Ghana</option><option value="Greece">Greece</option><option value="Greenland">Greenland</option><option value="Grenada">Grenada</option><option value="Guam">Guam</option><option value="Guatemala">Guatemala</option><option value="Guinea">Guinea</option><option value="Guinea-Bissau">Guinea-Bissau</option><option value="Guyana">Guyana</option><option value="Haiti">Haiti</option><option value="Honduras">Honduras</option><option value="Hong Kong">Hong Kong</option><option value="Hungary">Hungary</option><option value="Iceland">Iceland</option><option value="India">India</option><option value="Indonesia">Indonesia</option><option value="Iran">Iran</option><option value="Iraq">Iraq</option><option value="Ireland">Ireland</option><option value="Israel">Israel</option><option value="Italy">Italy</option><option value="Jamaica">Jamaica</option><option value="Japan">Japan</option><option value="Jordan">Jordan</option><option value="Kazakhstan">Kazakhstan</option><option value="Kenya">Kenya</option><option value="Kiribati">Kiribati</option><option value="North Korea">North Korea</option><option value="South Korea">South Korea</option><option value="Kosovo">Kosovo</option><option value="Kuwait">Kuwait</option><option value="Kyrgyzstan">Kyrgyzstan</option><option value="Laos">Laos</option><option value="Latvia">Latvia</option><option value="Lebanon">Lebanon</option><option value="Lesotho">Lesotho</option><option value="Liberia">Liberia</option><option value="Libya">Libya</option><option value="Liechtenstein">Liechtenstein</option><option value="Lithuania">Lithuania</option><option value="Luxembourg">Luxembourg</option><option value="Macedonia">Macedonia</option><option value="Madagascar">Madagascar</option><option value="Malawi">Malawi</option><option value="Malaysia">Malaysia</option><option value="Maldives">Maldives</option><option value="Mali">Mali</option><option value="Malta">Malta</option><option value="Marshall Islands">Marshall Islands</option><option value="Mauritania">Mauritania</option><option value="Mauritius">Mauritius</option><option value="Mexico">Mexico</option><option value="Micronesia">Micronesia</option><option value="Moldova">Moldova</option><option value="Monaco">Monaco</option><option value="Mongolia">Mongolia</option><option value="Montenegro">Montenegro</option><option value="Morocco">Morocco</option><option value="Mozambique">Mozambique</option><option value="Myanmar">Myanmar</option><option value="Namibia">Namibia</option><option value="Nauru">Nauru</option><option value="Nepal">Nepal</option><option value="Netherlands">Netherlands</option><option value="New Zealand">New Zealand</option><option value="Nicaragua">Nicaragua</option><option value="Niger">Niger</option><option value="Nigeria">Nigeria</option><option value="Northern Mariana Islands">Northern Mariana Islands</option><option value="Norway">Norway</option><option value="Oman">Oman</option><option value="Pakistan">Pakistan</option><option value="Palau">Palau</option><option value="Palestine, State of">Palestine, State of</option><option value="Panama">Panama</option><option value="Papua New Guinea">Papua New Guinea</option><option value="Paraguay">Paraguay</option><option value="Peru">Peru</option><option value="Philippines">Philippines</option><option value="Poland">Poland</option><option value="Portugal">Portugal</option><option value="Puerto Rico">Puerto Rico</option><option value="Qatar">Qatar</option><option value="Romania">Romania</option><option value="Russia">Russia</option><option value="Rwanda">Rwanda</option><option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option><option value="Saint Lucia">Saint Lucia</option><option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option><option value="Saint Martin">Saint Martin</option><option value="Samoa">Samoa</option><option value="San Marino">San Marino</option><option value="Sao Tome and Principe">Sao Tome and Principe</option><option value="Saudi Arabia">Saudi Arabia</option><option value="Senegal">Senegal</option><option value="Serbia">Serbia</option><option value="Seychelles">Seychelles</option><option value="Sierra Leone">Sierra Leone</option><option value="Singapore">Singapore</option><option value="Sint Maarten">Sint Maarten</option><option value="Slovakia">Slovakia</option><option value="Slovenia">Slovenia</option><option value="Solomon Islands">Solomon Islands</option><option value="Somalia">Somalia</option><option value="South Africa">South Africa</option><option value="Spain">Spain</option><option value="Sri Lanka">Sri Lanka</option><option value="Sudan">Sudan</option><option value="Sudan, South">Sudan, South</option><option value="Suriname">Suriname</option><option value="Swaziland">Swaziland</option><option value="Sweden">Sweden</option><option value="Switzerland">Switzerland</option><option value="Syria">Syria</option><option value="Taiwan">Taiwan</option><option value="Tajikistan">Tajikistan</option><option value="Tanzania">Tanzania</option><option value="Thailand">Thailand</option><option value="Togo">Togo</option><option value="Tonga">Tonga</option><option value="Trinidad and Tobago">Trinidad and Tobago</option><option value="Tunisia">Tunisia</option><option value="Turkey">Turkey</option><option value="Turkmenistan">Turkmenistan</option><option value="Tuvalu">Tuvalu</option><option value="Uganda">Uganda</option><option value="Ukraine">Ukraine</option><option value="United Arab Emirates">United Arab Emirates</option><option value="United Kingdom">United Kingdom</option><option value="United States">United States</option><option value="Uruguay">Uruguay</option><option value="Uzbekistan">Uzbekistan</option><option value="Vanuatu">Vanuatu</option><option value="Vatican City">Vatican City</option><option value="Venezuela">Venezuela</option><option value="Vietnam">Vietnam</option><option value="Virgin Islands, British">Virgin Islands, British</option><option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option><option value="Yemen">Yemen</option><option value="Zambia">Zambia</option><option value="Zimbabwe">Zimbabwe</option>
                                </select>
                                <label for="input_2_14_6" id="input_2_14_6_label">Country</label>
                            </span>
                            <div class="gf_clear gf_clear_complex"></div>
                        </div>
                    </li>
                    <li id="field_2_15" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label" for="input_2_15">Website</label>
                        <div class="ginput_container ginput_container_website">
                            <input name="input_15" id="input_2_15" type="text" value="" class="medium" placeholder="http://" aria-invalid="false" data-com.onepassword.iv="">
                        </div>
                    </li>
                    <li id="field_2_16" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label" for="input_2_16">Email</label>
                        <div class="ginput_container ginput_container_email">
                            <input name="input_16" id="input_2_16" type="text" value="" class="medium" aria-invalid="false" data-com.onepassword.iv="">
                        </div>
                    </li>
                    <li id="field_2_17" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
                        <label class="gfield_label" for="input_2_17">File</label>
                        <div class="ginput_container ginput_container_fileupload focused">
                            <input type="hidden" name="MAX_FILE_SIZE" value="1536000">
                            <input name="input_17" id="input_2_17" type="file" class="medium" aria-describedby="extensions_message_2_17" onchange="javascript:gformValidateFileSize( this, 1536000 );">
                            <span id="extensions_message_2_17" class="screen-reader-text"></span>
                            <div class="validation_message"></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="gform_footer top_label focused"> <input type="submit" id="gform_submit_button_2" class="gform_button button" value="Submit" onclick="if(window[&quot;gf_submitting_2&quot;]){return false;}  window[&quot;gf_submitting_2&quot;]=true;  " onkeypress="if( event.keyCode == 13 ){ if(window[&quot;gf_submitting_2&quot;]){return false;} window[&quot;gf_submitting_2&quot;]=true;  jQuery(&quot;#gform_2&quot;).trigger(&quot;submit&quot;,[true]); }"
                    style="box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 50px, rgba(0, 0, 0, 0.05) 0px 4px 50px, rgba(0, 0, 0, 0.05) 0px 12px 50px, rgba(0, 0, 0, 0.05) -1px 24px 50px;">
                <input type="hidden" class="gform_hidden" name="is_submit_2" value="1">
                <input type="hidden" class="gform_hidden" name="gform_submit" value="2">

                <input type="hidden" class="gform_hidden" name="gform_unique_id" value="">
                <input type="hidden" class="gform_hidden" name="state_2" value="WyJbXSIsIjFkOGM4MzRmZGFiNDhiZGEyYTZiNGI5ZTZlMDI5OTIyIl0=">
                <input type="hidden" class="gform_hidden" name="gform_target_page_number_2" id="gform_target_page_number_2" value="0">
                <input type="hidden" class="gform_hidden" name="gform_source_page_number_2" id="gform_source_page_number_2" value="1">
                <input type="hidden" name="gform_field_values" value="">
            </div>
        </form>
    </div>
</div>
  • Content: 
    /* @all-form-elements */
.all-form-elements {
	@include poly-padding--large;
}

*:focus {
	@include themify($themes) {
		outline: themed('borderColor') auto 3px;
	}
}

.gform_wrapper {
	@media (min-width: $medium-screen ) {
		padding: 3rem;
	}

	.page-main > &  {
		max-width: 1100px;
		margin: 0 auto;
		@include poly-margin-x--large;
		@include poly-padding-x--large;
		@include poly-padding-y;
		@include themify($themes) {
			border: 1px solid themed('borderColor');
		}
	}

	.gfield {
		@extend .input-wrap;
		@extend .textarea-wrap;

		padding: 2rem 15px 0;

		&.field_description_above {
			label.fieldset {
				margin-bottom: 0;
			}

			.gfield_description {
				margin-bottom: 1rem;
			}
		}

		&.complex-field {
			@media (min-width: $medium-screen) {
				margin-top: 3rem;
				margin-bottom: 2rem;
			}
			
			label {
				height: 3rem;
			}
		}

		&.tallElem label {
			top: 25px;
		}

		&.select-field:not(.multi-field) {

			label {
				width: 80%;
			}

			&.focused {
				&:not(.complex-field) > label:not(.fieldset)s {
					padding: 0;
					background-color: transparent;
					font-size: $x-small-font !important;
					top: 0;
				}

				.select2 + label {
					top: -6px;
				}
			}
		}

		label {
			display: block;
			z-index: 3;
			width: 80%;

			@include themify($themes) {
				font-size: themed('smallTitleDesktop');
			}

			&.gfield_label {
				@include themify($themes) {
					font-size: themed('smallTitleDesktop');
				}
			}

			&.fieldset-radiocheck {
				margin-bottom: 1rem;
			}

			&.fieldset {
				position: relative;
				padding: 0;
				min-height: auto;

				&:not(.fieldset-radiocheck) {
					@include themify($themes) {
						font-size: themed('smallTitleMobile');

						@media (min-width: $medium-screen ) {
							font-size: themed('mediumTitleDesktop');
						}
					}
				}
			}
		}

		textarea {
			border: none;
			border-bottom: 2px solid $concrete;
		}

		.ginput_container {
			overflow: unset;
			position: initial;
		}

		input, .select2 {
			margin-top: 5px;
		}

		.select2 {
			margin-bottom: 0;
		}

		span[id$="container"] {
			position: relative;
			overflow: hidden;
			display: block;

			label {
				top: 0;
			}

			&.focused {
				label:not(.fieldset) {
					padding: 0;
					background-color: transparent;
					font-size: $x-small-font !important;
				}
			}
		}

		[class^="gchoice"] {
			padding: 0 !important;
			
			input {
				height: 1rem;
			}

			label {
				position: relative;
				padding-left: 35px;
				margin-bottom: 0;
				cursor: pointer;
				user-select: none;
				padding-top: 0;
				font-size: inherit;
				font-weight: 200;
				background-color: transparent;
				width: 100%;
			}

			&:last-child {
				margin-right: 0;
			}

			@media (max-width: #{$medium-screen - 1}) {
				[class^="gchoice"] {
					margin-right: 0;
				}
			}
		}

		&_checkbox {
			display: flex;
			flex-flow: row wrap;
			  
			[class^="gchoice"] {
				@extend .checkbox;
				width: 40%;

				@media (max-width: #{$medium-screen - 1}) {
					width: 100%;
				}

				label {
					pointer-events: initial;
					font-size: 0.9rem !important;
					height: auto;
				}
			}
		}

		&_radio {
			[class^="gchoice"] {
				@extend .radio;

				label {
					pointer-events: initial;
					font-size: 0.9rem !important;
					height: auto;
				}
			}
		}

		&.file-upload {
			
			.ginput_container_fileupload {
				display: flex;
				position: relative;
				margin-top: 1rem;
			}

			label {
				margin-left: 10px;
				margin-top: -8px !important;
				padding: 0 !important;

				@media (max-width: #{$medium-screen - 1}) {
					margin-top: 0 !important;
				}

				@include themify($themes) {
					font-size: themed('smallTitleDesktop') !important;
				}
			}

			&.focused {
				label {
					@include themify($themes) {
						font-size: themed('smallTitleDesktop') !important;
					}
					@media (max-width: #{$medium-screen - 1}) {
						@include themify($themes) {
							font-size: themed('xsmallTitle') !important;
						}
					}
				}
			}

			input[type="file"] {
				position: absolute;
				left: 0;
				opacity: 0;
				bottom: 0;
				height: 100% !important;
				z-index: 5;
				cursor: pointer;
			}

			.filename {
				border-bottom: none !important;
				margin: 10px;
			}

			button {
				background-position: 90% center;
				background-repeat: no-repeat;
				background-size: 20px 16px;
				font-weight: 700;
				margin: 20px 10px;
				padding-right: 3.3rem;
				padding-top: 1rem;
				white-space: nowrap;

				.browser--ie11 & {
					padding-right: 4.3rem;
				}
				
				@include themify($themes) {
					$escapeArrowColor: str-replace(quote(#{themed('ctaColor')}), '#', '');
					background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpolygon  fill='%23#{$escapeArrowColor}' points='14.54 7.63 13.04 8.76 13.71 10.97 5.18 10.97 5.18 12.97 13.71 12.97 13.04 15.17 14.54 16.3 19.86 12.8 19.86 11.13 14.54 7.63'/%3E%3C/svg%3E");
					box-shadow: rgba(themed('ctaColor'), 0.3) 4px 4px 20px;
				}

				&.cta--secondary {
					@include themify($themes) {
						box-shadow: rgba(themed('ctaColor'), 0.3) 4px 4px 20px;
					}
				}
			}
		}


		::-webkit-input-placeholder,
		::-moz-placeholder,
		:-ms-input-placeholder,
		:-moz-placeholder { 
		  color: white !important;
		}

		&.focused {
			::-webkit-input-placeholder,
			::-moz-placeholder,
			:-ms-input-placeholder,
			:-moz-placeholder { 
			  color: $slate-grey;
			}
		}

		&.gfield_error,
		&.gfield_error.gfield_contains_required {
			background-color: white;
			margin-bottom: 3px;
			border-top: none;
			border-bottom: none;
			padding-bottom: 6px;
			padding-top: 8px;

			&.gfield_contains_required {
				div.gfield_description {
					padding: 0.5rem 0;
					margin: 0;

					@include themify($themes) {
						color: themed('errorColor');
						font-family: themed('errorFont');
						font-weight: themed('errorWeight');
						font-size: themed('errorSize');
						line-height: themed('errorLineHeight');
					}
				}
			}

			div.ginput_container:not(.ginput_complex):not(.ginput_container_radio):not(.ginput_container_checkbox),
			span[id$="container"]:not(.has-select):not(.select2-selection__rendered)  {
				&:after {
					content: '';
					width: 20px;
					height: 20px;
					display: block;
					position: absolute;
					right: 15px;
					top: 1.5rem;
	
					@include themify($themes) {
						background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{themed('errorColor')}' viewBox='0 0 24 24'%3E%3Ctitle%3E_Plan de travail 3 copie 10%3C/title%3E%3Crect x='10.59' y='4.57' width='2' height='14.82' transform='translate(-5.07 11.7) rotate(-45)'/%3E%3Crect x='5.54' y='14.25' width='5.56' height='2' transform='translate(-8.35 10.35) rotate(-45)'/%3E%3Crect x='12.09' y='7.7' width='5.56' height='2' transform='translate(-1.8 13.06) rotate(-45)'/%3E%3C/svg%3E");
					}
				}
			}

			input {
				border: none;
				border-bottom: 2px solid $red-ribbon ;

				@include themify($themes) {
					border-bottom: 2px solid themed('errorColor');
				}
			}

			.select2-selection__rendered {
				@include themify($themes) {
					border-bottom: 2px solid themed('errorColor');
				}
			}

			label {
					color: black;
			}
		}
	}

	div.validation_error {
		margin-bottom: 25px;
		padding: 16px 0;
		clear: both;
		width: 100%;

		@include themify($themes) {
			color: themed('errorColor');
			font-family: themed('errorFont');
			font-weight: themed('errorWeight');
			font-size: themed('errorSize');
			line-height: themed('errorLineHeight');
        }
	}

	.clear-multi {
		display: flex;
		flex-direction: column;

		@media (min-width: $medium-screen) {
			flex-direction: row;

			> div {
				margin-right: 2rem;
			}
		}

		> div {
			display: flex;
			flex-direction: row;

			&.focused {
				label:not(.fieldset) {
					padding: 0;
					font-size: $x-small-font !important;
				}
			}
		}
	}

	button.gform_button {
		width: 150px;
		margin-top: 50px;

		span {
			// display: block;
			z-index: 5;
			position: relative;
			width: 100%;
			display: flex;
			justify-content: space-between;
			background-image: $arrow-white-svg;
			background-repeat: no-repeat;
			background-size: 20px 20px;
			background-position: right center;
		}
	}
	.select2-container--default {
		&.select2-container--focus {
			.select2-selection--multiple {
				@include themify($themes) {
					border: 1px solid themed('ctaColor');
				}
			}
		}

		.select2-selection--single {
			.select2-selection__arrow {
				top: 6px;
			}

			.select2-selection__rendered {
				padding-right: 30px !important;
			}

		}
		
		&.select2-container--open {
			box-shadow: 5px 9px 23px rgba(15,128,238,.3);

			.select2-dropdown {
				left: -1px;
			}
		
			.select2-dropdown--below {
				margin-top: -10px;
			}
		}
	}

	input:-webkit-autofill, 
	textarea:-webkit-autofill, 
	select:-webkit-autofill {
		background-color: $white !important;
		box-shadow:0 0 0 50px white inset;
  		transition: background-color 5000s ease-in-out 0s;

		&:hover,
		&:focus {
			background-color: $white !important;
			box-shadow:0 0 0 50px white inset;
		}
	}

	.gform_footer {
		display: flex;
		justify-content: flex-end;

		.gform_ajax_spinner {
			height: 1rem;
			width: 1rem;
		}
	}

	@media (max-width: #{$medium-screen - 1}) {
		.ginput_right,
		.ginput_left {
			width: 100%;
			float: none;
		}
		

		ul.gfield_radio {
			margin-top: 10px;
		}

		label {
			&:not(.fieldset),
			&.fieldset-radiocheck {
				@media (max-width: #{$medium-screen - 1}) {
					@include themify($themes) {
						font-size: themed('xsmallTitle') !important;
					}
				}
			}

			&.fieldset {
				margin-bottom: 1rem !important;
				height: auto !important;
				width: 100% !important;
			}
		}

		.gfield {
			padding-top: 1rem;

			&.select-field {
				label {
					width: 78% !important;
				}
			}

			&.tallElem:not(.multi-field) {

				&.file-upload {
					label {
						top: 10px;
					}
				}

				label {
					top: 20px;

					&.fieldset {
						top: 0;
					}
				}
			}

			&:not(:first-child) {
				.fieldset {
					margin-top: 1rem;
				}
			}
		}

		.complex-field.focused label:not(.fieldset) {
			margin-top: -20px;
		}
	}

}
  • URL: /components/raw/all-form-elements/_all-form-elements.scss
  • Filesystem Path: src/components/global/form-elements/all-form-elements/_all-form-elements.scss
  • Size: 10.2 KB
  • Content: 
    import $ from 'jQuery'

$(document).ready(function () {
    var prettyCheckbox = '<span class="checkmark"></span>'
    var $input = $('input').not('[type=checkbox]').not('[type=radio]').not('[type=radio]')
    var isResized = false

    function labelHeight() {
        $('.gfield').each(function () {
            var selectLabelHeight = $(this).find('label').outerHeight()

            if (selectLabelHeight > 48) {
                $(this).closest('.gfield').css('padding-top', selectLabelHeight - 20).addClass('tallElem')

            } else {
                $(this).closest('.gfield').css('padding-top', '').removeClass('tallElem')
            }
        })
       
    }

    if ( $('.gform_validation_error').length ) {
        var offset = $('.gform_validation_error').offset().top
        var mastheadHeight = $('.masthead').outerHeight() + 100

        $('html, body').animate({
            scrollTop: offset - mastheadHeight
        }, 200);
    }


    if ( $('.gform_wrapper').length ) {

        $(prettyCheckbox).insertAfter('input[type="checkbox"], input[type="radio"]')
        $('input[type=file]').closest('.gfield').addClass('file-upload')
        $('select').closest('.gfield').addClass('select-field')
        $('select').parent().addClass('has-select')
        $('.clear-multi').closest('.gfield').addClass('multi-field')
        $('.ginput_complex').closest('.gfield').addClass('complex-field')
        $('textarea').attr('rows', '2').closest('.gfield').addClass('textarea-wrap')
        $('.ginput_container_fileupload')
            .append('<button class="cta cta--secondary">Choose file</button><input type="text" class="filename" autocomplete="off" readonly placeholder="no file uploaded">')


       
        $('.ginput_container_fileupload input[type="file"] ').each(function() {
            var $input = $(this)
            var $filename = $input.parent().find('.filename')

            $input.change(function(e) {
                var filename = $input.val().split('\\').pop();
                
                $filename.val(filename);
                $filename.attr('placeholder', filename);
                $filename.focus();
            });
        })

       

        setTimeout(function() {
            $('.ginput_container_date').closest('.focused').removeClass('focused')
        }, 100)
        

        $('.gfield').each(function(i) {
            var label = $(this).find('label')
            var isRadio = $(this).find('input[type="radio"]')
            var isCheck = $(this).find('input[type="checkbox"]')

            if ( label.length > 1 ) {
                label.first().addClass('fieldset')

                if (isRadio.length || isCheck.length) {
                    label.first().addClass('fieldset-radiocheck')
                }
            }
        })

        $input.each(function(){
            if ($(this).val()) {
                $(this).closest('.gfield').addClass('focused')
            }
        })

        $input.on('focus', function() {
            if ( $(this).parent().is('span') ) {
                $(this).parent('span').addClass('focused')
            } else if ($(this).closest('.clear-multi').length) {
                $(this).parent('div').addClass('focused')

                console.log('.clear-multi')
            } else {
                $(this).closest('.gfield').addClass('focused')
            }
        })

        $input.on('blur', function() {
            if (!$(this).val()) {
                $(this).closest('.focused').removeClass('focused')
            }
        })

        $('.select2').on('blur', function() {
            if (!$(this).val()) {
                $(this).closest('.focused').removeClass('focused')
            }
        })

        

        setTimeout(function() {
            labelHeight()
        }, 300)
    }

    $(window).resize(function() {
        isResized = true;
    });
    
    setInterval(function() {
        if ( isResized ) {
            isResized = false;
            labelHeight()
        }
    }, 100);
})
  • URL: /components/raw/all-form-elements/all-form-elements.js
  • Filesystem Path: src/components/global/form-elements/all-form-elements/all-form-elements.js
  • Size: 4 KB