/* ............................................................................. FORMS ............................................................................. */ .form { } * + .form {margin-top: 3.002em;} /* INPUT */ .formInput, .formTextarea, .formSelect {-webkit-appearance: none;-moz-appearance: none;appearance: none;border: 1px solid var(--color-blue);width: 100%;box-sizing:border-box;background-color: var(--color-white);font-size: 1em;font-weight: 500;line-height: 1.2;display: block;padding: 1em 1.3em;border-radius: 0;color: var(--color-base);transition: border-color 0.3s ease;} /* Eviter le zoom iOS sur form sur mobile. */ @media (max-width:46rem) { .formInput, .formTextarea {font-size: 16px;} } /* SELECT */ .formSelect {background-image: url(../../img/icons/icon-arrow-dropdown.svg);background-repeat: no-repeat;background-position: right 0.5em center;background-size: 3em;padding-right: 4em; /* max-width: 100%; *//* width: auto; */} .formSelect::-ms-expand {display: none;} /* TEXTAREA Styles de base dans formInput */ .formTextarea {width: 100%;max-width: 100%;min-height: 12em;height: 12em;} /* FOCUS */ .formInput:focus, .formTextarea:focus, .formSelect:focus {border-color:var(--color-base);} /* INPUT FILE TYPE Le input est hidden, toute l'action se passe dans le label. Le label a l'air d'un bouton, mais dans le meme style qu'un form input. ELLIPSIS sur le label (pour nom de fichiers trop long) : Pour que ca fonctionne, parent doit etre overflow:hidden, mais si tu fais ca sur .formItem ou .formGroup, tu t'attires des problemes dans un form dans un lightbox (ca casse le scroll on touch sur input). Aussi, pour que ca fonctionne dans un flexbox item, on mettre min-width:0 sur le flex child. Voir ici https://css-tricks.com/flexbox-truncated-text/ */ .formInputFile {width: 100%;max-width: 100%;overflow: hidden; padding-bottom: 1px;} .formInputFile__input {width: 0.1px; height: 0.1px; opacity: 0; visibility:hidden; overflow: hidden; position: absolute; z-index: -1;padding: 0; } .formInputFileBtn {-webkit-appearance: none;-moz-appearance: none;appearance: none;position:relative;border: 1px solid var(--color-blue);background: transparent;cursor: pointer;display: inline-block;font-size: 1em;line-height: 1.2;font-weight: 500;color: var(--color-blue);padding: 1em 3em 1em 1.3em;text-decoration: none;box-sizing: border-box;text-align: left;width: 100%;} .formInputFileBtn * {pointer-events: none;} .formInputFileBtn__label {display: block;position: relative;z-index: 2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .formInputFileBtn__icon {display: block;position: absolute;z-index: 2;color: var(--color-blue); font-size: 3em; right: 0.1em;top: 50%;transform: translate(0, -50%);transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);} .formInputFileBtn__icon + .formInputFileBtn__label {margin-right: 0.5002em;} /* Hover */ .formInputFileBtn:hover:not(:disabled) {cursor: pointer;} .formInputFileBtn:hover:not(:disabled) .formInputFileBtn__icon {transform: translate(10%, -50%);} /* Disabled */ .formInputFileBtn:disabled {opacity: 0.5; cursor: default;} /* CHECKBOX & RADIO Custom style, compatible avec WPCF7. Dans le plugin : - Cocher la case "Entourer chaque element avec un libelle." - Ajouter .formCF7Checkbox pour un checkbox - Ajouter .formCF7Radio pour un radio. */ .formCF7Checkbox, .formCF7Radio {display: block;line-height: 1.2;} /* Wrapper (WPCF = .wpcf7-list-item) */ .formCF7Checkbox > *, .formCF7Radio > * {display: inline-block;margin: 0 2.002em 0 0;} .formCF7Checkbox > *:last-child, .formCF7Radio > *:last-child {margin-right:0; } /* Label wraps the input and text content */ .formCF7Checkbox label, .formCF7Radio label {display: block; } /* Hide the default radio / checkbox, because we want to custom style it. */ .formCF7Checkbox input, .formCF7Radio input {position: absolute;opacity: 0;visibility: hidden;} /* Label styles */ .formCF7Checkbox label > span, .formCF7Radio label > span {cursor: pointer;display: block;padding-top: 0.15em;padding-bottom: 0.15em;padding-left: 2.5em;position: relative;font-weight: 500;} /* Les styles custom sont ici */ .formCF7Checkbox input + span::before, .formCF7Radio input + span::before {position: absolute; display: block; content: ''; left: 0; top: 0; width: 1.5em; height: 1.5em; background: #fff; background-position: 50% 50%; background-repeat: no-repeat; border: 1px solid var(--color-blue); border-radius: 0; cursor: pointer; transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);} /* Active + focus */ .formCF7Checkbox input:active + span::before, .formCF7Radio input:active + span::before { } /* Checked */ .formCF7Checkbox input:checked + span::before, .formCF7Radio input:checked + span::before {background-color: var(--color-blue); box-shadow: inset 0 0 0 0.3em #ffffff;} /* Focus: seulement si user utilise keyboard. */ [data-whatintent='keyboard'] .formCF7Checkbox input:focus + span::before, [data-whatintent='keyboard'] .formCF7Radio input:focus + span::before {outline:2px solid #4d90fe;} /* Disabled */ .formCF7Checkbox input:disabled + span, .formCF7Radio input:disabled + span {cursor: default;} .formCF7Checkbox input:disabled + span::before, .formCF7Radio input:disabled + span::before {background-color: #e8e8e8;opacity: 0.5;cursor: auto;} /* Radio mods */ .formCF7Radio input + span::before {border-radius: 50%; } /* ALT: Cols. */ .formCF7Checkbox--half {display: flex; flex-wrap: wrap; } .formCF7Checkbox--half > * {display: block; flex:0 0 auto; width: 50%; margin: 0; padding-bottom: 1em; } .formCF7Checkbox--half label {display: inline-block; } /* 1 col */ @media (max-width:46rem) { .formCF7Checkbox--half {display: block; } .formCF7Checkbox--half > * {width: 100%; } } /* FORM GROUP et FORM ITEM Pour espacement entre groupes de form items. */ .formGroup { } .formItem { } .formItem__text {display: block;margin-bottom: 0.75em;} * + .formGroup, * + .formItem {margin-top: 2.5em;} /* Less spacing on mobile */ @media (max-width:46rem) { * + .formGroup, * + .formItem {margin-top: 1.5em;} } /* ALT: 2 cols. */ .formGroup--half {display: flex;justify-content: space-between; } .formGroup--half .formItem {width: 48%; flex: 0 0 auto; margin: 0; } /* Break cols */ @media (max-width:46rem) { .formGroup--half {display: block; } .formGroup--half .formItem {width: 100%; margin-top: 1.5em; } } /* ALT : Text at left, filter at right, inline. */ .formGroup--filter {display: flex; align-items: center; gap: 2em; } .formGroup--filter .formItem {flex: 0 0 auto; margin: 0; } .formGroup--filter .formItem__text {margin: 0; } /* Break cols */ @media (max-width:46rem) { .formGroup--filter {display: block; gap:0; } .formGroup--filter .formItem {width: 100%;margin-top: 0.75em;} } /* ALT: Form send. */ .formGroup--send {text-align: right; } * + .formGroup--send {margin-top: 2em;} /* Spacing */ @media (max-width:46rem) { * + .formGroup--send {margin-top: 1.5em;} } /* FORM LABEL */ .formLabel {font-size: 1em;line-height: 1;display: block;margin-bottom: 0.75em;font-weight: 500;} /* PLACEHOLDER TEXT */ ::placeholder {color: rgba(0,0,0,0.35);} /* CONTACT FORM 7 Quand on le met sur WP avec CF7, ces styles sont utiles. */ .wpcf7-form-control-wrap {display: block; position: static;} .wpcf7-form.sent .formGroup { display: none; } div.wpcf7-response-output { margin-left: 0 !important; margin-right: 0 !important; } .formInput.wpcf7-not-valid { border: 3px solid red; } .wpcf7-not-valid-tip { display: none !important; } /* -------------------------------------------- GRAVITY FORM ADDED -------------------------------------------- */ body .gform_wrapper .gform_heading .gform_title { margin-bottom: calc(var(--base-spacing)*0.3); } /* INPUT */ body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container input, body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container select, body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid var(--color-blue); max-width:unset !important;width: 100%; margin-bottom: unset !important; margin-top: unset !important; box-sizing:border-box !important; background-color: var(--color-white); font-size: 1em !important; font-weight: 500; line-height: 1.2; display: block; padding: 1em 1.3em !important; border-radius: 0; color: var(--color-base); transition: border-color 0.3s ease;} /* Eviter le zoom iOS sur form sur mobile. */ @media (max-width:46rem) { .formInput, .formTextarea {font-size: 16px;} } /* SELECT */ body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container select {background-image: url(../../img/icons/icon-arrow-dropdown.svg);background-repeat: no-repeat;background-position: right 0.5em center;background-size: 3em;padding-right: 4em; /* max-width: 100%; *//* width: auto; */} body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container select::-ms-expand {display: none;} /* TEXTAREA */ body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container textarea {width: 100%;max-width: 100%;min-height: 12em;height: 12em;} /* FOCUS */ body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container input:focus, body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container select:focus, body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container textarea:focus {border-color:var(--color-base);} /* INPUT FILE TYPE */ body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container.ginput_container_fileupload input {border: none !important; padding-left: unset !important;} /* CHECKBOX & RADIO */ /* Label wraps the input and text content */ body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_checkbox .gchoice label, body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_radio .gchoice label {display: block; } /* Hide the default radio / checkbox, because we want to custom style it. */ body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_checkbox .gchoice input, body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_radio .gchoice input {position: absolute;opacity: 0;visibility: hidden;display:none;} /* Label styles */ body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_checkbox .gchoice label, body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_radio .gchoice label {cursor: pointer;display: block;padding-top: 0.15em;padding-bottom: 0.15em;padding-left: 2.5em;position: relative;font-weight: 500;} /* Les styles custom sont ici */ body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_checkbox .gchoice input + label::before, body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_radio .gchoice input + label::before {position: absolute; display: block; content: ''; left: 0; top: 0; width: 1.5em; height: 1.5em; background: #fff; background-position: 50% 50%; background-repeat: no-repeat; border: 1px solid var(--color-blue); border-radius: 0; cursor: pointer; transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);} /* Active + focus */ body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_checkbox .gchoice input:active + label::before, body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_radio .gchoice input:active + label::before { } /* Checked */ body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_checkbox .gchoice input:checked + label::before, body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_radio .gchoice input:checked + label::before {background-color: var(--color-blue); box-shadow: inset 0 0 0 0.3em #ffffff;} /* Focus: seulement si user utilise keyboard. */ [data-whatintent='keyboard'] body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_checkbox .gchoice input:focus + label::before, [data-whatintent='keyboard'] body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_radio .gchoice input:focus + label::before {outline:2px solid #4d90fe;} /* Disabled */ body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_checkbox .gchoice input:disabled + label, body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_radio .gchoice input:disabled + label {cursor: default;} body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_checkbox .gchoice input:disabled + label::before, body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_radio .gchoice input:disabled + label::before {background-color: #e8e8e8;opacity: 0.5;cursor: auto;} /* Radio mods */ body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_radio .gchoice input + label::before {border-radius: 50%; } /* FORM LABEL */ body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_checkbox .gchoice label, body .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container .gfield_radio .gchoice label { font-size: 1em !important; padding-top: 0.05em !important } body .gform_wrapper form .gform_body .gform_fields .gfield .gfield_label { font-size: 1em !important; line-height: 1; /* display: block; */ margin-bottom: 0.75em !important; font-weight: 500 !important; } .gform_wrapper.gravity-theme .gform_fields { grid-row-gap : 2.5em !important; } /* PLACEHOLDER TEXT */ ::placeholder {color: rgba(0,0,0,0.35);} /* Btn footer */ .gform_wrapper.gravity-theme .gform_footer { justify-content: flex-end !important; }