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

v4: Updated form and button sizing #19121

Merged
merged 7 commits into from
Feb 8, 2016
Merged

v4: Updated form and button sizing #19121

merged 7 commits into from
Feb 8, 2016

Conversation

mdo
Copy link
Member

@mdo mdo commented Feb 8, 2016

Fixes #18607.

Long story short, the funky vertical padding values we had for inputs and buttons were causing fucked up computed heights when the root font-size is changed from 16px to 14px. This PR updates inputs and buttons to:

  • Use easier math (e.g., .5rem on default buttons) to more readily support root font-size changes.
  • Due to the increased padding, we now use a tighter line-height (1.25 instead of inherited 1.5). This line-height is the same across all input and button sizes.
  • Some mixins and size variation styles were cleaned up as well.

- Moves from no set line-height (inherited of 1.5) to declared 1.25 for
all inputs and buttons (regardless of size modifier).

- Updates padding to be `.5rem` instead of `.375rem` so that padding is
more likely to be whole numbers based on the root font-size.

- Whole numbers will be beneficial in avoiding odd fractional pixels
that can lead to misalignment as shown in #18607.

- Large buttons and inputs are now a tad wider, and smaller
buttons/inputs a tad shorter and narrower, too.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant