🐞 fix: Reorganize/clean up form css

This commit is contained in:
Keith Solomon
2025-11-11 11:57:57 -06:00
parent 111bde4808
commit 8ba3106f82

View File

@@ -1,97 +1,67 @@
/* Forms */ /* Forms */
/* Base styles */ /* Base styles */
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="number"], input[type="password"],
input[type="date"], select, textarea {
@apply px-4 py-2 w-full rounded border-2 border-primary;
@apply text-black bg-white;
@apply focus-visible:border-transparent focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-primary;
font-size: inherit;
line-height: inherit;
}
/* Gravity Forms styles */
.gform_wrapper { .gform_wrapper {
@apply max-w-full mx-auto; @apply max-w-full mx-auto;
.gform_fields { .gform_fields { @apply text-black; }
@apply text-black;
}
fieldset.gfield { fieldset.gfield { @apply mb-6; }
@apply mb-6;
}
legend, label { legend, label { @apply text-lg font-bold mb-2; }
@apply text-lg font-bold mb-2;
}
label.gform-field-label--type-sub{ label.gform-field-label--type-sub{ @apply font-normal text-base; }
@apply font-normal text-base;
}
.gfield_required { .gfield_required { @apply text-danger text-xs font-bold ml-1; }
@apply text-danger text-xs font-bold ml-1;
}
.dark { .dark {
input[type="text"], input[type="text"], input[type="email"], input[type="tel"],
input[type="email"], input[type="url"], input[type="number"], input[type="password"],
input[type="tel"], input[type="date"], select, textarea {
input[type="url"], @apply text-black bg-white;
input[type="number"], @apply focus-visible:border-transparent focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-primary;
input[type="password"], }
input[type="date"],
select,
textarea {
@apply text-black bg-white;
@apply focus-visible:border-transparent focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-primary;
} }
}
.ginput_complex { .ginput_complex {
@apply sm:flex; @apply sm:flex;
span { span {
@apply block grow; @apply block grow;
&:not(:first-child) { &:not(:first-child) { @apply mt-6 sm:mt-0 sm:ml-4; }
@apply mt-6 sm:mt-0 sm:ml-4; }
}
} }
}
.gform_footer { .gform_footer { @apply mt-8; }
@apply mt-8;
}
h2.gform_submission_error { h2.gform_submission_error { @apply text-xl text-danger font-bold my-4; }
@apply text-xl text-danger font-bold my-4;
}
.validation_message { .validation_message { @apply italic text-danger; }
@apply italic text-danger;
}
.hidden_label > label { .hidden_label > label { @apply hidden; }
@apply hidden;
}
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
@apply px-4 py-2 w-full rounded border-2 border-secondary focus-visible:bg-secondary-300 focus-visible:border-primary;
font-size: inherit;
line-height: inherit;
} }
/* Search block styles */
.wp-block-search__input { .wp-block-search__input {
@apply px-4 py-2 w-full rounded border-2 border-transparent focus-visible:bg-secondary-300 focus-visible:border-primary; @apply px-4 py-2 w-full rounded border-2 border-transparent focus-visible:bg-secondary-300 focus-visible:border-primary;
appearance: none; appearance: none;
flex-grow: 1; flex-grow: 1;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
min-width: 3rem; min-width: 3rem;
text-decoration: unset !important; text-decoration: unset !important;
} }