/* ------------- SOMMAIRE ------------- */ /* @AUTHOR : Nicolas BOUDOT ATOMS : INPUT Styles des inputs des formulaires */ /* 00 - GÉNÉRAL 01 - TEXTAREA 02 - SELECT 03 - DÉPOT DE FICHIER 04 - RGPD */ /* --------------------- 00 - GÉNÉRAL --------------------- */ /* WPForms */ /* Espacement entre les champs */ div.acf-fields > .acf-field, div.wpforms-container-full .wpforms-form .wpforms-field { padding: 6px 0; } /* Select */ div.wpforms-container .wpforms-form .choices[data-type*="select-one"] .choices__inner, div.wpforms-container-full .wpforms-form select, /* Textarea */ div.wpforms-container-full .wpforms-form textarea, /* Input */ div.wpforms-container-full .wpforms-form input[type=tel], /* div.acf-field-email:not(.acf-repeater .acf-field-email) input, */ div.acf-field-email > .acf-input input, div.wpforms-container-full .wpforms-form input[type=email], /* div.acf-field-text:not(.acf-repeater .acf-field-text) > .acf-input input, */ div.acf-field-text > .acf-input input, div.wpforms-container-full .wpforms-form input[type=text], .atom_input { background-color: var(--white); color: var(--black); border: none; outline: none; padding: 10px 20px; height: 40px; } /* Placeholder */ div.wpforms-container-full .wpforms-form textarea::placeholder, div.wpforms-container-full .wpforms-form input[type=tel]::placeholder, div.acf-field-email > .acf-input input::placeholder, div.wpforms-container-full .wpforms-form input[type=email]::placeholder, div.acf-field-text > .acf-input input::placeholder, div.wpforms-container-full .wpforms-form input[type=text]::placeholder, .atom_input::placeholder { color: var(--gray-500); } /* ACFE Formulaire */ /* On masque les labels non voulus */ .acf-field-email > .acf-label, .acf-field-text > .acf-label { display: none; } /* .acf-field-email > .acf-label, .acf-field-text:not(.acf-repeater .acf-field-text) > .acf-label { display: none; } */ /* --------------------- 01 - TEXTAREA --------------------- */ div.wpforms-container-full .wpforms-form textarea.wpforms-field-large { height: 120px; } /* --------------------- 02 - SELECT Facet --------------------- */ /* Masque car conflit avec les filtres en tabulation */ /* div.facetwp-facet { margin-bottom: 0; } */ .facetwp-facet label { font-size: 1.1rem; line-height: 15px; } .facetwp-type-dropdown { position: relative; } /* On ne peux pas mettre de before sur le select directement */ .facetwp-type-dropdown::before { content: "\e91b"; pointer-events: none; position: absolute; bottom: calc((100% - 18px) - 50%); right: 20px; color: var(--color-primary); font-family: 'icomoon'; font-size: 1.2rem; line-height: 1; transform-origin: 50% 2px; transition: transform .3s; } /* Focus */ .facetwp-type-dropdown:has(select:focus)::before { transform: rotate(-179deg) translateY(-50%); } .facetwp-type-dropdown select { background-image: none; outline: none; padding-right: 50px; } /* Multi select */ .fs-wrap .fs-label-wrap { border: none; } .fs-wrap .fs-label-wrap .fs-label, .facetwp-dropdown { background-color: var(--gray-200); color: var(--color-primary); border: none; font-size: 1.2rem; line-height: 1; padding: 15px 20px; } /* Dropdown */ .fs-wrap .fs-label-wrap .fs-arrow { right: 20px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--color-primary); } /* --------------------- 02 - SELECT WP Form --------------------- */ div.wpforms-container .wpforms-form .wpforms-field-select-style-modern .choices[data-type*="select-one"] .choices__inner { padding-top: 10px !important; } div.wpforms-container .wpforms-form .choices__list--single .choices__item[data-value=''] { color: var(--color-primary); opacity: 1; } div.wpforms-container .wpforms-form .wpforms-field-select-style-modern .choices[data-type*="select-one"]::after { color: var(--color-primary); border-width: 12px 9px; } /* Croix de déselection */ div.wpforms-container .wpforms-form div.choices[data-type*="select-one"] .choices__button { margin-right: 35px; } /* ACFE Formulaire */ /* div.acf-field select:not(.acf-repeater select) { */ div.acf-field select { background-color: var(--white); color: var(--color-primary); padding: 10px 20px; } /* --------------------- 03 - DÉPOT DE FICHIER --------------------- */ div.wpforms-field-file-upload input[type=file] { cursor: pointer; } @media (max-width: 991px) { div.wpforms-field-file-upload input[type=file] { width: 100%; } } /* Bouton */ div.wpforms-field-file-upload input[type=file]::-webkit-file-upload-button { background-color: var(--color-tertiary); color: var(--white); border: none; font-size: 1.4rem; padding: 10px 25px; } /* Hover */ div.wpforms-field-file-upload input[type=file]::-webkit-file-upload-button:hover { background-color: var(--color-tertiary--light); color: var(--white); } /* --------------------- 04 - RGPD --------------------- */ .wpforms-form .wpforms-field-container .wpforms-field.wpforms-field-content:has(.wpforms-field-content-display-frontend-clear) { padding-top: 50px; padding-bottom: 10px; } .wpforms-form .wpforms-field-container .wpforms-field.wpforms-field-content:has(.wpforms-field-content-display-frontend-clear) p { margin-bottom: 0; } div.wpforms-container-full .wpforms-form .wpforms-field input[type=checkbox] + label.wpforms-field-label-inline { font-weight: 400; } /* --------------------- 05 - reCAPTCHA --------------------- */ div.wpforms-container-full .wpforms-form .wpforms-recaptcha-container { padding: 0; } /* --------------------- 06 - ENVOYER --------------------- */ div.wpforms-container-full .wpforms-form .wpforms-submit-container { padding: 30px 0 0; } /* Bouton */ div.wpforms-container-full .wpforms-form button[type=submit] { background-color: var(--color-secondary); color: var(--white); border: none; } /* Hover */ div.wpforms-container-full .wpforms-form button[type=submit]:hover { background-color: var(--color-secondary--light); color: var(--white); border: none; } @media (max-width: 991px) { div.wpforms-container-full .wpforms-form button[type=submit] { width: 100%; } }