FEATURE Refactoring forms and introducing infolettre styles
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
Antoine M
parent
f57251eb85
commit
91d5b07144
|
|
@ -16,6 +16,8 @@
|
||||||
@import './forms/forms.css';
|
@import './forms/forms.css';
|
||||||
@import './forms/form-contributions.css';
|
@import './forms/form-contributions.css';
|
||||||
@import './forms/form-contact.css';
|
@import './forms/form-contact.css';
|
||||||
|
@import './forms/gravity-forms.css';
|
||||||
|
@import './forms/form-infolettre.css';
|
||||||
|
|
||||||
/* ########### COMPONENTS ############ */
|
/* ########### COMPONENTS ############ */
|
||||||
@import './components/buttons.css';
|
@import './components/buttons.css';
|
||||||
|
|
@ -60,6 +62,5 @@
|
||||||
@import './blocks/card-grid.css';
|
@import './blocks/card-grid.css';
|
||||||
@import './blocks/sitemap.css';
|
@import './blocks/sitemap.css';
|
||||||
|
|
||||||
|
|
||||||
/* ########### LIBS ############ */
|
/* ########### LIBS ############ */
|
||||||
@import './libs/swiper.css';
|
@import './libs/swiper.css';
|
||||||
|
|
|
||||||
0
resources/css/base/forms.css
Normal file
0
resources/css/base/forms.css
Normal file
|
|
@ -2,6 +2,9 @@
|
||||||
@apply relative !text-white lg:px-24 px-4 md:px-12 !mb-32 !mt-0;
|
@apply relative !text-white lg:px-24 px-4 md:px-12 !mb-32 !mt-0;
|
||||||
|
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
@apply content-[""] absolute inset-0 bg-carhop-green-800 z-0 w-full h-full;
|
@apply content-[""] absolute inset-0 bg-carhop-green-800 z-0 w-full h-full;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|
|
||||||
7
resources/css/forms/form-infolettre.css
Normal file
7
resources/css/forms/form-infolettre.css
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
.subscribe-infolettre form {
|
||||||
|
@apply form-carhop form-carhop--dark;
|
||||||
|
|
||||||
|
div:has(input[type='email']) {
|
||||||
|
@apply mt-6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,297 +1,24 @@
|
||||||
:root {
|
.form-carhop {
|
||||||
--form-text-color: var(--wp--preset--color--carhop-green);
|
|
||||||
--form-border-color: var(--wp--preset--color--carhop-green);
|
|
||||||
|
|
||||||
/* --gf-ctrl-focus-bg-color: var(--wp--preset--color--carhop-green);
|
|
||||||
--gf-ctrl-focus-color: var(--wp--preset--color--carhop-green);
|
|
||||||
--gf-ctrl-focus-border-color: var(--wp--preset--color--carhop-green); */
|
|
||||||
}
|
}
|
||||||
body.front-end {
|
.form-carhop--dark {
|
||||||
.gform-theme--api,
|
|
||||||
.gform-theme--framework {
|
|
||||||
--gf-ctrl-desc-font-size: 1.1rem;
|
|
||||||
--gf-ctrl-desc-font-weight: 200;
|
|
||||||
--gf-ctrl-desc-color: rgba(255, 255, 255, 0.9);
|
|
||||||
--gf-ctrl-desc-color-focus: rgba(255, 255, 255, 0.9);
|
|
||||||
--gf-ctrl-desc-color-hover: rgba(255, 255, 255, 0.9);
|
|
||||||
|
|
||||||
--gf-font-weight-secondary: 300;
|
|
||||||
--gf-ctrl-font-size-secondary: 3.25rem;
|
|
||||||
--gf-ctrl-label-font-size-secondary: 1.35rem;
|
|
||||||
--gf-ctrl-label-font-weight-secondary: 200;
|
|
||||||
|
|
||||||
--gf-ctrl-label-font-size-req: 1rem;
|
|
||||||
--gf-ctrl-label-font-weight-req: 400;
|
|
||||||
|
|
||||||
--gf-ctrl-desc-color-error: white;
|
|
||||||
|
|
||||||
--gf-ctrl-radius: 0;
|
|
||||||
|
|
||||||
--gf-ctrl-btn-radius: 0;
|
|
||||||
--gf-ctrl-btn-bg-color-primary: transparent;
|
|
||||||
--gf-ctrl-btn-bg-color-primary-focus: white;
|
|
||||||
--gf-ctrl-btn-bg-color-primary-hover: white;
|
|
||||||
--gf-ctrl-btn-border-color-primary: white;
|
|
||||||
|
|
||||||
--gf-ctrl-btn-bg-color-primary-active: var(--wp--preset--color--carhop-green);
|
|
||||||
--gf-ctrl-btn-bg-color-primary-disabled: var(--wp--preset--color--carhop-green);
|
|
||||||
--gf-ctrl-btn-bg-color-primary-disabled-focus: var(--wp--preset--color--carhop-green);
|
|
||||||
--gf-ctrl-btn-bg-color-primary-disabled-hover: var(--wp--preset--color--carhop-green);
|
|
||||||
--gf-ctrl-btn-bg-color-primary-disabled-active: var(
|
|
||||||
--wp--preset--color--carhop-green
|
|
||||||
);
|
|
||||||
--gf-ctrl-btn-bg-color-hover-primary: white;
|
|
||||||
--gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--carhop-green);
|
|
||||||
--gf-ctrl-outline-color-focus: white;
|
|
||||||
--gf-ctrl-outline-offset: 4px;
|
|
||||||
|
|
||||||
--gf-ctrl-btn-font-size: 3.25rem;
|
|
||||||
|
|
||||||
--gf-ctrl-btn-font-weight: 300;
|
|
||||||
--gf-color-in-ctrl-primary: red;
|
|
||||||
--gf-ctrl-choice-check-color: white;
|
|
||||||
|
|
||||||
/* ERRORS */
|
|
||||||
--gf-color-danger: white;
|
|
||||||
/* --gf-color-danger-rgb: white; */
|
|
||||||
--gf-form-validation-border-color: transparent;
|
|
||||||
--gf-form-validation-heading-color: white;
|
|
||||||
--gf-form-validation-heading-font-weight: 600;
|
|
||||||
--gf-ctrl-bg-color-error: white;
|
|
||||||
--gf-form-validation-bg-color: transparent;
|
|
||||||
--gf-ctrl-desc-font-size-error: 1rem;
|
|
||||||
--gf-form-validation-heading-font-size: 1rem;
|
|
||||||
--gf-form-validation-heading-font-weight: 300;
|
|
||||||
--gf-form-validation-radius: 0;
|
|
||||||
--gf-form-validation-margin-y: 30px;
|
|
||||||
--gf-form-validation-padding-x: 0;
|
|
||||||
|
|
||||||
--gf-ctrl-bg-color-error: transparent;
|
|
||||||
--gf-form-validation-padding-y: 16px;
|
|
||||||
--gf-form-validation-shadow: none;
|
|
||||||
|
|
||||||
h2.gform_submission_error {
|
|
||||||
@apply justify-center;
|
|
||||||
}
|
|
||||||
.gform-icon--circle-error {
|
|
||||||
@apply border-none;
|
|
||||||
background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
|
|
||||||
@apply bg-no-repeat bg-center bg-contain text-carhop-red-700 rounded-full text-3xl w-6 h-6;
|
|
||||||
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
&:before {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.gfield_validation_message {
|
|
||||||
@apply flex items-center bg-white border border-carhop-red-700 border-solid text-carhop-red-700 font-normal w-fit py-1 px-4 rounded-full mt-4;
|
|
||||||
&:before {
|
|
||||||
content: '';
|
|
||||||
background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
|
|
||||||
@apply block w-5 h-5 bg-no-repeat bg-center bg-contain;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.validation_message--hidden-on-empty {
|
|
||||||
@apply hidden;
|
|
||||||
&:before {
|
|
||||||
content: none;
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.gfield:has(.gfield_validation_message) {
|
|
||||||
.ginput_container {
|
|
||||||
@apply relative;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: '';
|
|
||||||
@apply absolute block top-1/2 right-3 w-6 h-6 text-red-800 text-2xl -translate-y-1/2;
|
|
||||||
background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ginput_container_textarea:before,
|
|
||||||
.ginput_container_fileupload:before {
|
|
||||||
@apply top-8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='submit'] {
|
|
||||||
--gf-ctrl-btn-font-size: 1.25rem;
|
|
||||||
--gf-ctrl-btn-padding-x: 2rem;
|
|
||||||
--gf-ctrl-btn-padding-y: 1rem;
|
|
||||||
|
|
||||||
@apply !mt-8 !mb-6;
|
|
||||||
|
|
||||||
/* --gf-ctrl-btn-bg-color-primary: transparent;
|
|
||||||
--gf-ctrl-btn-bg-color-primary-focus: white;
|
|
||||||
--gf-ctrl-btn-bg-color-primary-hover: white;
|
|
||||||
--gf-ctrl-btn-border-color-primary: white;
|
|
||||||
|
|
||||||
--gf-ctrl-btn-bg-color-primary-active: var(--wp--preset--color--carhop-green);
|
|
||||||
--gf-ctrl-btn-bg-color-primary-disabled: var(--wp--preset--color--carhop-green);
|
|
||||||
--gf-ctrl-btn-bg-color-primary-disabled-focus: var(
|
|
||||||
--wp--preset--color--carhop-green
|
|
||||||
);
|
|
||||||
--gf-ctrl-btn-bg-color-primary-disabled-hover: var(
|
|
||||||
--wp--preset--color--carhop-green
|
|
||||||
);
|
|
||||||
--gf-ctrl-btn-bg-color-primary-disabled-active: var(
|
|
||||||
--wp--preset--color--carhop-green
|
|
||||||
); */
|
|
||||||
}
|
|
||||||
input[type='checkbox'] + label {
|
|
||||||
--gf-ctrl-label-font-size-secondary: 1.25rem;
|
|
||||||
--gf-ctrl-label-font-weight-secondary: 300;
|
|
||||||
@apply tracking-normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gform_required_legend {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gform_fields {
|
|
||||||
--gf-form-gap-x: 2rem;
|
|
||||||
--gf-form-gap-y: 3.4rem;
|
|
||||||
}
|
|
||||||
textarea::placeholder,
|
|
||||||
input::placeholder {
|
|
||||||
--gf-ctrl-placeholder-color: white;
|
|
||||||
--gf-ctrl-placeholder-color-focus: white;
|
|
||||||
--gf-ctrl-placeholder-color-hover: white;
|
|
||||||
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
textarea,
|
|
||||||
input {
|
|
||||||
--gf-ctrl-bg-color: transparent;
|
|
||||||
--gf-ctrl-bg-color-focus: transparent !important;
|
|
||||||
--gf-ctrl-bg-color-hover: transparent !important;
|
|
||||||
|
|
||||||
--gf-ctrl-color: white;
|
|
||||||
--gf-ctrl-color-focus: white;
|
|
||||||
--gf-ctrl-color-hover: white;
|
|
||||||
|
|
||||||
--gf-ctrl-font-size: 1.2rem;
|
|
||||||
--gf-ctrl-font-weight: 300;
|
|
||||||
|
|
||||||
--gf-ctrl-border-color: white;
|
|
||||||
--gf-ctrl-border-color-focus: white;
|
|
||||||
--gf-ctrl-border-color-hover: white;
|
|
||||||
--gf-ctrl-padding-x: 1rem;
|
|
||||||
--gf-ctrl-padding-y: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gfield_description {
|
|
||||||
/* --gf-ctrl-desc-color: white;
|
|
||||||
--gf-ctrl-desc-color-focus: white;
|
|
||||||
--gf-ctrl-desc-color-hover: white; */
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
@apply !pb-0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* input::placeholder {
|
|
||||||
color: red !important;
|
|
||||||
} */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .gfield:has(input[aria-required='true']) {
|
|
||||||
@apply relative;
|
|
||||||
&:after {
|
|
||||||
@apply content-['*'] absolute top-3 right-3 text-red-800 text-2xl;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
} */
|
|
||||||
|
|
||||||
select,
|
|
||||||
input,
|
input,
|
||||||
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
@apply bg-transparent border border-primary p-4;
|
@apply border-white !p-4 font-light text-xl;
|
||||||
border-color: var(--form-border-color, #f1fcf9);
|
|
||||||
&::placeholder {
|
|
||||||
color: var(--form-text-color);
|
|
||||||
@apply !text-lg !font-light;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nf-field-element:has(input[aria-required='true']) {
|
|
||||||
@apply relative;
|
|
||||||
&:after {
|
|
||||||
@apply content-['*'] absolute top-3 right-3 text-red-800 text-2xl;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
}
|
||||||
|
input::placeholder,
|
||||||
|
select::placeholder,
|
||||||
|
textarea::placeholder {
|
||||||
|
@apply text-white opacity-60;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type='submit'] {
|
input[type='submit'] {
|
||||||
@apply text-white w-12 h-12 relative block !mx-auto;
|
@apply bg-white text-primary cursor-pointer;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@apply bg-carhop-green-900 border border-carhop-green-900 cursor-pointer;
|
@apply bg-white text-primary;
|
||||||
}
|
transform: scale(1.02);
|
||||||
}
|
|
||||||
|
|
||||||
.content-box {
|
|
||||||
--form-border-color: var(--content-box-text-color);
|
|
||||||
--form-text-color: var(--content-box-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* label {
|
|
||||||
@apply sr-only;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.nf-form-fields-required {
|
|
||||||
}
|
|
||||||
|
|
||||||
.nf-before-form-content {
|
|
||||||
.nf-form-fields-required {
|
|
||||||
@apply text-lg pb-12;
|
|
||||||
color: var(--form-text-color);
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gfield {
|
|
||||||
@apply !relative;
|
|
||||||
|
|
||||||
--gf-ctrl-label-color-primary: white;
|
|
||||||
--gf-ctrl-label-color-req: white;
|
|
||||||
--gf-ctrl-label-color-secondary: white;
|
|
||||||
|
|
||||||
.gfield_label {
|
|
||||||
@apply !opacity-0 absolute top-1/2 left-4 text-white !text-lg !font-light;
|
|
||||||
transition: all 0.15s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.gfield:has(input:focus, textarea:focus),
|
|
||||||
.gfield:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown)) {
|
|
||||||
.gfield_label {
|
|
||||||
@apply !opacity-100;
|
|
||||||
|
|
||||||
top: -40px;
|
|
||||||
}
|
|
||||||
--gf-ctrl-placeholder-color: transparent;
|
|
||||||
|
|
||||||
#placeholder,
|
|
||||||
input::placeholder {
|
|
||||||
@apply !opacity-0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.gfield_description a {
|
|
||||||
@apply underline underline-offset-8;
|
|
||||||
text-decoration-thickness: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gform_wrapper {
|
|
||||||
@apply mt-12;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gform_confirmation_wrapper {
|
|
||||||
@apply bg-white rounded-3xl px-8 py-4 text-primary;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
297
resources/css/forms/gravity-forms.css
Normal file
297
resources/css/forms/gravity-forms.css
Normal file
|
|
@ -0,0 +1,297 @@
|
||||||
|
:root {
|
||||||
|
--form-text-color: var(--wp--preset--color--carhop-green);
|
||||||
|
--form-border-color: var(--wp--preset--color--carhop-green);
|
||||||
|
|
||||||
|
/* --gf-ctrl-focus-bg-color: var(--wp--preset--color--carhop-green);
|
||||||
|
--gf-ctrl-focus-color: var(--wp--preset--color--carhop-green);
|
||||||
|
--gf-ctrl-focus-border-color: var(--wp--preset--color--carhop-green); */
|
||||||
|
}
|
||||||
|
body.front-end {
|
||||||
|
.gform-theme--api,
|
||||||
|
.gform-theme--framework {
|
||||||
|
--gf-ctrl-desc-font-size: 1.1rem;
|
||||||
|
--gf-ctrl-desc-font-weight: 200;
|
||||||
|
--gf-ctrl-desc-color: rgba(255, 255, 255, 0.9);
|
||||||
|
--gf-ctrl-desc-color-focus: rgba(255, 255, 255, 0.9);
|
||||||
|
--gf-ctrl-desc-color-hover: rgba(255, 255, 255, 0.9);
|
||||||
|
|
||||||
|
--gf-font-weight-secondary: 300;
|
||||||
|
--gf-ctrl-font-size-secondary: 3.25rem;
|
||||||
|
--gf-ctrl-label-font-size-secondary: 1.35rem;
|
||||||
|
--gf-ctrl-label-font-weight-secondary: 200;
|
||||||
|
|
||||||
|
--gf-ctrl-label-font-size-req: 1rem;
|
||||||
|
--gf-ctrl-label-font-weight-req: 400;
|
||||||
|
|
||||||
|
--gf-ctrl-desc-color-error: white;
|
||||||
|
|
||||||
|
--gf-ctrl-radius: 0;
|
||||||
|
|
||||||
|
--gf-ctrl-btn-radius: 0;
|
||||||
|
--gf-ctrl-btn-bg-color-primary: transparent;
|
||||||
|
--gf-ctrl-btn-bg-color-primary-focus: white;
|
||||||
|
--gf-ctrl-btn-bg-color-primary-hover: white;
|
||||||
|
--gf-ctrl-btn-border-color-primary: white;
|
||||||
|
|
||||||
|
--gf-ctrl-btn-bg-color-primary-active: var(--wp--preset--color--carhop-green);
|
||||||
|
--gf-ctrl-btn-bg-color-primary-disabled: var(--wp--preset--color--carhop-green);
|
||||||
|
--gf-ctrl-btn-bg-color-primary-disabled-focus: var(--wp--preset--color--carhop-green);
|
||||||
|
--gf-ctrl-btn-bg-color-primary-disabled-hover: var(--wp--preset--color--carhop-green);
|
||||||
|
--gf-ctrl-btn-bg-color-primary-disabled-active: var(
|
||||||
|
--wp--preset--color--carhop-green
|
||||||
|
);
|
||||||
|
--gf-ctrl-btn-bg-color-hover-primary: white;
|
||||||
|
--gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--carhop-green);
|
||||||
|
--gf-ctrl-outline-color-focus: white;
|
||||||
|
--gf-ctrl-outline-offset: 4px;
|
||||||
|
|
||||||
|
--gf-ctrl-btn-font-size: 3.25rem;
|
||||||
|
|
||||||
|
--gf-ctrl-btn-font-weight: 300;
|
||||||
|
--gf-color-in-ctrl-primary: red;
|
||||||
|
--gf-ctrl-choice-check-color: white;
|
||||||
|
|
||||||
|
/* ERRORS */
|
||||||
|
--gf-color-danger: white;
|
||||||
|
/* --gf-color-danger-rgb: white; */
|
||||||
|
--gf-form-validation-border-color: transparent;
|
||||||
|
--gf-form-validation-heading-color: white;
|
||||||
|
--gf-form-validation-heading-font-weight: 600;
|
||||||
|
--gf-ctrl-bg-color-error: white;
|
||||||
|
--gf-form-validation-bg-color: transparent;
|
||||||
|
--gf-ctrl-desc-font-size-error: 1rem;
|
||||||
|
--gf-form-validation-heading-font-size: 1rem;
|
||||||
|
--gf-form-validation-heading-font-weight: 300;
|
||||||
|
--gf-form-validation-radius: 0;
|
||||||
|
--gf-form-validation-margin-y: 30px;
|
||||||
|
--gf-form-validation-padding-x: 0;
|
||||||
|
|
||||||
|
--gf-ctrl-bg-color-error: transparent;
|
||||||
|
--gf-form-validation-padding-y: 16px;
|
||||||
|
--gf-form-validation-shadow: none;
|
||||||
|
|
||||||
|
h2.gform_submission_error {
|
||||||
|
@apply justify-center;
|
||||||
|
}
|
||||||
|
.gform-icon--circle-error {
|
||||||
|
@apply border-none;
|
||||||
|
background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
|
||||||
|
@apply bg-no-repeat bg-center bg-contain text-carhop-red-700 rounded-full text-3xl w-6 h-6;
|
||||||
|
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
&:before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.gfield_validation_message {
|
||||||
|
@apply flex items-center bg-white border border-carhop-red-700 border-solid text-carhop-red-700 font-normal w-fit py-1 px-4 rounded-full mt-4;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
|
||||||
|
@apply block w-5 h-5 bg-no-repeat bg-center bg-contain;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.validation_message--hidden-on-empty {
|
||||||
|
@apply hidden;
|
||||||
|
&:before {
|
||||||
|
content: none;
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gfield:has(.gfield_validation_message) {
|
||||||
|
.ginput_container {
|
||||||
|
@apply relative;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
@apply absolute block top-1/2 right-3 w-6 h-6 text-red-800 text-2xl -translate-y-1/2;
|
||||||
|
background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ginput_container_textarea:before,
|
||||||
|
.ginput_container_fileupload:before {
|
||||||
|
@apply top-8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='submit'] {
|
||||||
|
--gf-ctrl-btn-font-size: 1.25rem;
|
||||||
|
--gf-ctrl-btn-padding-x: 2rem;
|
||||||
|
--gf-ctrl-btn-padding-y: 1rem;
|
||||||
|
|
||||||
|
@apply !mt-8 !mb-6;
|
||||||
|
|
||||||
|
/* --gf-ctrl-btn-bg-color-primary: transparent;
|
||||||
|
--gf-ctrl-btn-bg-color-primary-focus: white;
|
||||||
|
--gf-ctrl-btn-bg-color-primary-hover: white;
|
||||||
|
--gf-ctrl-btn-border-color-primary: white;
|
||||||
|
|
||||||
|
--gf-ctrl-btn-bg-color-primary-active: var(--wp--preset--color--carhop-green);
|
||||||
|
--gf-ctrl-btn-bg-color-primary-disabled: var(--wp--preset--color--carhop-green);
|
||||||
|
--gf-ctrl-btn-bg-color-primary-disabled-focus: var(
|
||||||
|
--wp--preset--color--carhop-green
|
||||||
|
);
|
||||||
|
--gf-ctrl-btn-bg-color-primary-disabled-hover: var(
|
||||||
|
--wp--preset--color--carhop-green
|
||||||
|
);
|
||||||
|
--gf-ctrl-btn-bg-color-primary-disabled-active: var(
|
||||||
|
--wp--preset--color--carhop-green
|
||||||
|
); */
|
||||||
|
}
|
||||||
|
input[type='checkbox'] + label {
|
||||||
|
--gf-ctrl-label-font-size-secondary: 1.25rem;
|
||||||
|
--gf-ctrl-label-font-weight-secondary: 300;
|
||||||
|
@apply tracking-normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gform_required_legend {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gform_fields {
|
||||||
|
--gf-form-gap-x: 2rem;
|
||||||
|
--gf-form-gap-y: 3.4rem;
|
||||||
|
}
|
||||||
|
textarea::placeholder,
|
||||||
|
input::placeholder {
|
||||||
|
--gf-ctrl-placeholder-color: white;
|
||||||
|
--gf-ctrl-placeholder-color-focus: white;
|
||||||
|
--gf-ctrl-placeholder-color-hover: white;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
textarea,
|
||||||
|
input {
|
||||||
|
--gf-ctrl-bg-color: transparent;
|
||||||
|
--gf-ctrl-bg-color-focus: transparent !important;
|
||||||
|
--gf-ctrl-bg-color-hover: transparent !important;
|
||||||
|
|
||||||
|
--gf-ctrl-color: white;
|
||||||
|
--gf-ctrl-color-focus: white;
|
||||||
|
--gf-ctrl-color-hover: white;
|
||||||
|
|
||||||
|
--gf-ctrl-font-size: 1.2rem;
|
||||||
|
--gf-ctrl-font-weight: 300;
|
||||||
|
|
||||||
|
--gf-ctrl-border-color: white;
|
||||||
|
--gf-ctrl-border-color-focus: white;
|
||||||
|
--gf-ctrl-border-color-hover: white;
|
||||||
|
--gf-ctrl-padding-x: 1rem;
|
||||||
|
--gf-ctrl-padding-y: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gfield_description {
|
||||||
|
/* --gf-ctrl-desc-color: white;
|
||||||
|
--gf-ctrl-desc-color-focus: white;
|
||||||
|
--gf-ctrl-desc-color-hover: white; */
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
@apply !pb-0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* input::placeholder {
|
||||||
|
color: red !important;
|
||||||
|
} */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .gfield:has(input[aria-required='true']) {
|
||||||
|
@apply relative;
|
||||||
|
&:after {
|
||||||
|
@apply content-['*'] absolute top-3 right-3 text-red-800 text-2xl;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
|
||||||
|
select,
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
@apply bg-transparent border border-primary p-4;
|
||||||
|
border-color: var(--form-border-color, #f1fcf9);
|
||||||
|
&::placeholder {
|
||||||
|
color: var(--form-text-color);
|
||||||
|
@apply !text-lg !font-light;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nf-field-element:has(input[aria-required='true']) {
|
||||||
|
@apply relative;
|
||||||
|
&:after {
|
||||||
|
@apply content-['*'] absolute top-3 right-3 text-red-800 text-2xl;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='submit'] {
|
||||||
|
@apply text-white w-12 h-12 relative block !mx-auto;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@apply bg-carhop-green-900 border border-carhop-green-900 cursor-pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-box {
|
||||||
|
--form-border-color: var(--content-box-text-color);
|
||||||
|
--form-text-color: var(--content-box-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* label {
|
||||||
|
@apply sr-only;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.nf-form-fields-required {
|
||||||
|
}
|
||||||
|
|
||||||
|
.nf-before-form-content {
|
||||||
|
.nf-form-fields-required {
|
||||||
|
@apply text-lg pb-12;
|
||||||
|
color: var(--form-text-color);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gfield {
|
||||||
|
@apply !relative;
|
||||||
|
|
||||||
|
--gf-ctrl-label-color-primary: white;
|
||||||
|
--gf-ctrl-label-color-req: white;
|
||||||
|
--gf-ctrl-label-color-secondary: white;
|
||||||
|
|
||||||
|
.gfield_label {
|
||||||
|
@apply !opacity-0 absolute top-1/2 left-4 text-white !text-lg !font-light;
|
||||||
|
transition: all 0.15s ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.gfield:has(input:focus, textarea:focus),
|
||||||
|
.gfield:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown)) {
|
||||||
|
.gfield_label {
|
||||||
|
@apply !opacity-100;
|
||||||
|
|
||||||
|
top: -40px;
|
||||||
|
}
|
||||||
|
--gf-ctrl-placeholder-color: transparent;
|
||||||
|
|
||||||
|
#placeholder,
|
||||||
|
input::placeholder {
|
||||||
|
@apply !opacity-0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.gfield_description a {
|
||||||
|
@apply underline underline-offset-8;
|
||||||
|
text-decoration-thickness: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gform_wrapper {
|
||||||
|
@apply mt-12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gform_confirmation_wrapper {
|
||||||
|
@apply bg-white rounded-3xl px-8 py-4 text-primary;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user