Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Styling forms
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2025-10-06 16:11:51 +02:00
parent 7834754573
commit 1ef0d293cf
1 changed files with 144 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
resources/css/forms/forms.css
View File

@ -1,52 +1,160 @@
:root {
--form-text-color: var(--wp--preset--color--carhop-green);
--form-border-color: var(--wp--preset--color--carhop-green);
}
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.8;
/* --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 {
input[type='submit'] {
--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
);
}
.gform_required_legend {
@apply hidden;
}
.gfield_required {
--gf-ctrl-label-font-size-req: 20px;
}
.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: var(--wp--preset--color--carhop-green);
--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;
}
/* input::placeholder {
color: red !important;
} */
}
}
.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;
/* .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;
}
}
}
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;
.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;
}
}
}
.content-box {
--form-border-color: var(--content-box-text-color);
--form-text-color: var(--content-box-text-color);
}
input[type='submit'] {
@apply text-white w-12 h-12 relative block !mx-auto;
label {
@apply sr-only;
}
&:hover {
@apply bg-carhop-green-900 border border-carhop-green-900 cursor-pointer;
}
}
.nf-form-fields-required {
}
.content-box {
--form-border-color: var(--content-box-text-color);
--form-text-color: var(--content-box-text-color);
}
/* label {
@apply sr-only;
} */
.nf-before-form-content {
.nf-form-fields-required {
@apply text-lg pb-12;
color: var(--form-text-color);
opacity: 0.9;
}
.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;
.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_label {
@apply !opacity-100;
top: -40px;
}
--gf-ctrl-placeholder-color: transparent;
#placeholder,
input::placeholder {
@apply !opacity-0;
}
}