298 lines
8.5 KiB
CSS
298 lines
8.5 KiB
CSS
: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;
|
|
}
|