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 7 commits into from Feb 8, 2016


None yet
1 participant

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.

mdo added some commits Feb 8, 2016

updated button/form-control padding and line-height
- 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.

@mdo mdo added css v4 labels Feb 8, 2016

@mdo mdo added this to the v4.0.0-alpha.3 milestone Feb 8, 2016

mdo added a commit that referenced this pull request Feb 8, 2016

Merge pull request #19121 from twbs/v4-form-sizing
v4: Updated form and button sizing

@mdo mdo merged commit e8b6e5f into v4-dev Feb 8, 2016

3 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
continuous-integration/travis-ci/push The Travis CI build passed
hound No violations found. Woof!

@mdo mdo deleted the v4-form-sizing branch Feb 8, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment