Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.x] Clean up Section fieldtype styles #8807

Merged

Conversation

caseydwyer
Copy link
Contributor

This PR cleans up the styles of the Section fieldtype, by addressing a few bits that were just slightly off:

  • Unequal space on top & bottom of the label/description—loosely related to [4.x] Remove bottom margin on a Section field type publish form when no instructions are present #8371
  • Corner radius was one step smaller (.rounded vs. rounded-md) than the ancestor .card.
  • Pulled away from the bottom edge, due to top:1px; replaced with a negative margin-top.
  • Immediate sections with a header get pulled up, breaking into the header's border.
  • Fixes double-stacked borders, when sections are back to back.
  • Bottom radius not accounted for, when the section is at the end of a card.

Those last two were mostly to give a better foundation for addons (eg, Group fieldtype) that use sections to "contain" other fields. But still cleaner to have in core, without adding too much into the stylesheet.

Here's a quick kitchen sink setup, to show the before-and-after. Tweaked a few other things in the code after this was rendered, but the most noticeable changes are shown here:

section-field-change

Lmk if you'd like to see any adjustments, and I'll take a crack at it. Thanks team!

@jackmcdade
Copy link
Member

I love this, thank you! Will give it a double-check asap <3

@jackmcdade jackmcdade self-requested a review October 4, 2023 19:19
@jackmcdade jackmcdade self-assigned this Oct 4, 2023
@caseydwyer
Copy link
Contributor Author

Great, thanks Jack (and no rush from my end)! 👍

@jackmcdade jackmcdade merged commit 6987617 into statamic:4.x Oct 5, 2023
16 checks passed
@jackmcdade
Copy link
Member

Looks great, I love it. Thanks again! ❤️

@caseydwyer
Copy link
Contributor Author

No problem, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants