diff --git a/resources/css/forms/gravity-forms.css b/resources/css/forms/gravity-forms.css index 15f91c3..b8b8d7f 100644 --- a/resources/css/forms/gravity-forms.css +++ b/resources/css/forms/gravity-forms.css @@ -6,6 +6,13 @@ --gf-ctrl-focus-color: var(--wp--preset--color--carhop-green); --gf-ctrl-focus-border-color: var(--wp--preset--color--carhop-green); */ } + +/* +.gf_page_steps { + --gf-field-pg-steps-number-bg-color-active: red; + @apply !justify-center mb-12; +} */ + body.front-end { .gform-theme--api, .gform-theme--framework { @@ -72,6 +79,32 @@ body.front-end { --gf-field-pg-steps-number-radius: 0; + --gf-field-pg-prog-margin-y-end: 3rem; + --gf-field-pg-steps-number-bg-color-active: red; + + --gf-field-pg-steps-number-bg-color-complete: white; + --gf-field-pg-steps-number-border-color-complete: none; + --gf-field-pg-steps-number-color-complete: var(--wp--preset--color--carhop-green); + + --gf-ctrl-btn-color-secondary: var(--wp--preset--color--carhop-green); + + --gf-form-spinner-fg-color: var(--wp--preset--color--carhop-green-light); + + --gf-ctrl-file-prev-name-color: white; + --gf-ctrl-file-prev-font-size: 16px; + + --gf-ctrl-file-prog-bar-bg-color-loading: theme('colors.green.200'); + --gf-ctrl-file-prog-bar-bg-color-complete: theme('colors.green.400'); + --gf-ctrl-btn-icon-color-simple: theme('colors.red.400'); + + /* --gf-field-pg-steps-number-bg-color-complete: ; */ + .gf_step_completed { + .gf_step_number, + .gf_step_number::after { + @apply rounded-full; + } + } + h2.gform_submission_error { @apply justify-center; } @@ -122,6 +155,10 @@ body.front-end { } } + input[type='file'] { + padding-bottom: 60px; + } + input[type='submit'] { --gf-ctrl-btn-font-size: 1.25rem; --gf-ctrl-btn-padding-x: 2rem; @@ -188,27 +225,20 @@ body.front-end { --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 { + @apply justify-self-end cursor-pointer !appearance-none pr-10 text-white !py-8; + /* Remplace la flèche native (appearance-none) — même asset que .post-grid__toolbar select */ + background-color: transparent; + background-image: url('../resources/img/elements/select-drop-button-white.svg') !important; + background-repeat: no-repeat; + background-position: right 0.75rem center; + background-size: 2rem 2rem; } - } */ + } select, input, @@ -270,7 +300,14 @@ body.front-end { @apply !opacity-0 absolute top-1/2 left-4 text-white !text-lg !font-light; transition: all 0.15s ease-out; } + + &:has(select) { + .gfield_label { + @apply !opacity-100 static; + } + } } + .gfield:has(input:focus, textarea:focus), .gfield:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown)) { .gfield_label { @@ -281,6 +318,7 @@ body.front-end { --gf-ctrl-placeholder-color: transparent; #placeholder, + textarea::placeholder, input::placeholder { @apply !opacity-0; } @@ -303,10 +341,7 @@ body.front-end { color: white !important; } .gf_page_steps { - /* @apply !text-blue-300 ; */ - .gf_step_label { - /* @apply !text-cyan-500; */ --gf-color-out-ctrl-dark: white !important; --gf-local-color: white !important; } @@ -319,18 +354,59 @@ body.front-end { } } +.gform_page_footer { + @apply !justify-center !mt-16; +} +.gf_page_steps { + --gf-field-pg-steps-number-bg-color-active: red; + @apply !justify-center; +} + .gf_step { @apply !text-green-400; } .gf_step_number { @apply !text-white !bg-transparent; - --gf-local-border: 2px solid red; border: 1px solid white !important; - border-top: none !important; - border-left: none !important; - border-right: none !important; + /* --gf-local-border: 2px solid white; */ + --gf-field-pg-steps-number-radius: 100%; + + border: 1px solid white !important; } +.gf_step_active { + .gf_step_number { + border: none !important; + @apply !bg-green-300 !text-carhop-green-800; + } +} + +.gf_step_completed { + .gf_step_number, + .gf_step_number { + border: none !important; + } +} .gf_step_pending { opacity: 0.5 !important; } + +input[type='submit'], +.gform_next_button, +.gform_previous_button { + @apply !text-xl !py-6 !px-6; +} + +.gform-page-footer:has(.gform-loader) { + .gform_next_button, + .gform_previous_button { + @apply !opacity-50; + } +} + +.gform_drop_instructions { + @apply !text-lg; +} +button.gform_button_select_files { + @apply !text-lg; +}