/* ───────────────────────────────────────────────────────────────────────── * Websly Global Form Fields (T2.3 — Customizer Roadmap GAP 3) * * Styles input / textarea / select elements site-wide based on the global * Customizer setting websly_global__form_field_style. * * Body classes (one is always active): * .ws-form-style-outlined (default) * .ws-form-style-filled * .ws-form-style-minimal * .ws-form-style-premium * * CSS vars emitted at :root by inc/websly-form-fields.php: * --ws-form-field-radius from the Field Corner Radius setting * --ws-form-field-height from the Field Size setting * --ws-form-field-padding same source * --ws-form-field-font-size same source * --ws-form-field-focus focus ring colour (var or currentColor) * * Per-block override: wrap a form in any element and set local custom * properties to shadow the globals (e.g. .ws-block-contact { --ws-form- * field-radius: 4px; }). * * Scope: targets ONLY fields inside .ws-form, .ws-block-contact, * .ws-block-contact-cta, .ws-block-booking, .ws-block-email-cta, and any *
with class .websly-form. Editor-friendly + doesn't touch the * WordPress admin or third-party plugin forms. * * EXEMPT (do NOT add .websly-form): the contact + minimal-booking forms ship * a bespoke, hand-tuned field treatment built with utility classes (contact = * underline fields px-0/border-b-2; booking = inline-styled tinted boxes). The * default `outlined` style here is higher-specificity than those utilities, so * hooking them clobbers the design (boxed-in underline fields with no padding). * They manage their own field styling — same philosophy as the typography * Tier-C / motion exempt lists. This primitive governs the generic forms only. * ─────────────────────────────────────────────────────────────────── */ /* ── Base — shared by all styles ──────────────────────────────────────── */ .ws-form input[type="text"], .ws-form input[type="email"], .ws-form input[type="tel"], .ws-form input[type="url"], .ws-form input[type="number"], .ws-form input[type="password"], .ws-form input[type="search"], .ws-form select, .ws-form textarea, .ws-block-contact input[type="text"], .ws-block-contact input[type="email"], .ws-block-contact input[type="tel"], .ws-block-contact input[type="url"], .ws-block-contact input[type="number"], .ws-block-contact select, .ws-block-contact textarea, .ws-block-contact-cta input, .ws-block-contact-cta select, .ws-block-contact-cta textarea, .ws-block-booking input, .ws-block-booking select, .ws-block-booking textarea, .ws-block-email-cta input, .websly-form input, .websly-form select, .websly-form textarea { /* min-height (not height) so a block's padding-based field height is a floor, not a hard override — keeps bespoke forms visually intact while the global Field Size still raises the baseline. */ min-height: var(--ws-form-field-height, 44px); font-size: var(--ws-form-field-font-size, 0.9375rem); border-radius: var(--ws-form-field-radius, 10px); color: var(--text-base, currentColor); font-family: inherit; line-height: 1.4; width: 100%; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; } /* Textareas grow vertically; height var becomes min-height */ .ws-form textarea, .ws-block-contact textarea, .ws-block-contact-cta textarea, .ws-block-booking textarea, .websly-form textarea { height: auto; min-height: calc(var(--ws-form-field-height, 44px) * 3); padding: 12px 14px; } /* ── Outlined (default) ──────────────────────────────────────────────── */ body.ws-form-style-outlined :is(.ws-form, .ws-block-contact, .ws-block-contact-cta, .ws-block-booking, .ws-block-email-cta, .websly-form) :is(input, select, textarea) { background: transparent; border: 1px solid rgba(var(--text-base-rgb, 17, 17, 17), 0.2); } body.ws-form-style-outlined :is(.ws-form, .ws-block-contact, .ws-block-contact-cta, .ws-block-booking, .ws-block-email-cta, .websly-form) :is(input, select, textarea):focus { outline: none; border-color: var(--ws-form-field-focus, var(--theme-accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-form-field-focus, var(--theme-accent)) 18%, transparent); } /* ── Filled ──────────────────────────────────────────────────────────── */ body.ws-form-style-filled :is(.ws-form, .ws-block-contact, .ws-block-contact-cta, .ws-block-booking, .ws-block-email-cta, .websly-form) :is(input, select, textarea) { background: rgba(var(--text-base-rgb, 17, 17, 17), 0.05); border: 1px solid transparent; } body.ws-form-style-filled :is(.ws-form, .ws-block-contact, .ws-block-contact-cta, .ws-block-booking, .ws-block-email-cta, .websly-form) :is(input, select, textarea):focus { outline: none; background: rgba(var(--text-base-rgb, 17, 17, 17), 0.08); border-color: var(--ws-form-field-focus, var(--theme-accent)); } /* ── Minimal (bottom border only) ────────────────────────────────────── */ body.ws-form-style-minimal :is(.ws-form, .ws-block-contact, .ws-block-contact-cta, .ws-block-booking, .ws-block-email-cta, .websly-form) :is(input, select, textarea) { background: transparent; border: 0; border-bottom: 1px solid rgba(var(--text-base-rgb, 17, 17, 17), 0.25); border-radius: 0; padding-left: 4px; padding-right: 4px; } body.ws-form-style-minimal :is(.ws-form, .ws-block-contact, .ws-block-contact-cta, .ws-block-booking, .ws-block-email-cta, .websly-form) :is(input, select, textarea):focus { outline: none; border-bottom-color: var(--ws-form-field-focus, var(--theme-accent)); box-shadow: 0 1px 0 0 var(--ws-form-field-focus, var(--theme-accent)); } /* ── Premium (glass + glow on focus) ─────────────────────────────────── */ body.ws-form-style-premium :is(.ws-form, .ws-block-contact, .ws-block-contact-cta, .ws-block-booking, .ws-block-email-cta, .websly-form) :is(input, select, textarea) { background: rgba(var(--text-base-rgb, 17, 17, 17), 0.03); border: 1px solid rgba(var(--text-base-rgb, 17, 17, 17), 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.4); } body.ws-form-style-premium :is(.ws-form, .ws-block-contact, .ws-block-contact-cta, .ws-block-booking, .ws-block-email-cta, .websly-form) :is(input, select, textarea):focus { outline: none; border-color: var(--ws-form-field-focus, var(--theme-accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ws-form-field-focus, var(--theme-accent)) 14%, transparent), 0 4px 16px color-mix(in srgb, var(--ws-form-field-focus, var(--theme-accent)) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5); } /* ── Placeholder colour — shared across all styles ──────────────────── */ .ws-form ::placeholder, .ws-block-contact ::placeholder, .ws-block-contact-cta ::placeholder, .ws-block-booking ::placeholder, .ws-block-email-cta ::placeholder, .websly-form ::placeholder { color: rgba(var(--text-base-rgb, 17, 17, 17), 0.45); opacity: 1; } /* ── Disabled state ──────────────────────────────────────────────────── */ .ws-form :is(input, select, textarea):disabled, .ws-block-contact :is(input, select, textarea):disabled, .websly-form :is(input, select, textarea):disabled { opacity: 0.5; cursor: not-allowed; }