discourse/app/assets/stylesheets/common/form-kit/_form-kit.scss
Kris e2dcaf5b01
UX: wider inputs, centered form, and footer controls for simplified category creation (#37964)
This is scoped to the upcoming change: simplified category creation.

This centers our category creation form and allows it to be a little
wider with a new formkit variable

`--form-kit-max-input: 75ch;`

This makes inputs and other related elements `75ch` wide, which is
maximum recommended line length for readability.

The form has also been updated to use a sticky footer that indicates
changes and provides an more readily available way to save.

I've also converted plugin additions to formkit and made setting changes
there reactive.

<img width="500" alt="image"
src="https://github.com/user-attachments/assets/255b5333-457b-4dfd-a92b-631f847def5b"
/><img width="500" alt="image"
src="https://github.com/user-attachments/assets/c48ddd5d-f54d-4a99-b459-90af0b29c8cf"
/>

---------

Co-authored-by: Martin Brennan <martin@discourse.org>
2026-02-26 11:40:58 -05:00

11 lines
196 B
SCSS
Vendored

.form-kit {
display: flex;
flex-direction: column;
gap: 1.5em;
align-items: flex-start;
.alert {
// we space elements with gap, so don't need the margin
margin-bottom: 0;
}
}